diff --git a/demos/tables.html b/demos/tables.html new file mode 100644 index 0000000..4d40e9c --- /dev/null +++ b/demos/tables.html @@ -0,0 +1,87 @@ + + + + + CSS Chassis - Tables + + + + + + + + +

CSS Chassis

+ +
+ +

Tables

+ +

Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDProductCategoryPrice
1T-ShirtApparel$12.99
2Sweat ShirtApparel$24.99
3NecklaceAccessories$29.99
+ +

Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..

+ +
+
+
+
ID
+
Product
+
Category
+
Price
+
+
+
+
+
1
+
T-Shirt
+
Apparel
+
$12.99
+
+
+
2
+
Sweat Shirt
+
Apparel
+
$24.99
+
+
+
3
+
Necklace
+
Accessories
+
$29.99
+
+
+
+ + + diff --git a/scss/atoms/tables/_mixins.scss b/scss/atoms/tables/_mixins.scss new file mode 100644 index 0000000..c41640c --- /dev/null +++ b/scss/atoms/tables/_mixins.scss @@ -0,0 +1,5 @@ +/* +* ========================================================================== +* Table mixins +* ========================================================================== +*/ diff --git a/scss/atoms/tables/_tables.scss b/scss/atoms/tables/_tables.scss new file mode 100644 index 0000000..6a7f7d6 --- /dev/null +++ b/scss/atoms/tables/_tables.scss @@ -0,0 +1,53 @@ +/* +* ========================================================================== +* Tables +* ========================================================================== +*/ + +@import + "dist/chassis", + "mixins"; + +.table { + display: table; + margin: map-get($table-base, margin); + font-size: map-get($table-base, font-size); + text-align: left; +} + +/* thead */ +.table-head { + display: table-header-group; +} + +/* tbody */ +.table-body { + display: table-row-group; +} + +/* tfoot */ +.table-foot { + display: table-footer-group; +} + +/* tr */ +.table-row { + display: table-row; +} + +/* th */ +.table-heading { + display: table-cell; + border-top: map-get($table-base, border); + padding: map-get($table-base, padding); + color: map-get($colors-text, light); + font-weight: 400; + font-size: map-get($table-base, thead-font-size); +} + +/* td */ +.table-cell { + display: table-cell; + border-top: map-get($table-base, border); + padding: map-get($table-base, padding); +} diff --git a/scss/lint.scss b/scss/lint.scss index aeebcb0..487f4e9 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -18,6 +18,8 @@ @import "atoms/icons/icons", "atoms/typography/typography", + "atoms/tables", + "atoms/overflow-indicator", "atoms/buttons/buttons"; @import diff --git a/scss/style.scss b/scss/style.scss index 81b166a..756bba4 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -10,6 +10,7 @@ @import "atoms/icons/icons", "atoms/typography/typography", + "atoms/tables/tables", "atoms/buttons/buttons"; @import diff --git a/scss/variables/tables.js b/scss/variables/tables.js new file mode 100644 index 0000000..f7baf1f --- /dev/null +++ b/scss/variables/tables.js @@ -0,0 +1,25 @@ +( function( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [ "./chassis" ], factory ); + } else if ( typeof exports === "object" ) { + module.exports = factory( require( "./chassis" ) ); + } else { + root.chassis = factory( root.chassis ); + } +}( this, function( chassis ) { + +chassis.table = { + "base": { + name: "Table Element", + value: { + "margin": "0 0 1em", + "font-size": "16px", + "thead-font-size": "12px", + "border": "1px solid #eee", + "padding": "12px" + } + } +}; + +return chassis; +} ) );