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 | +
Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+ + + diff --git a/scss/atoms/_tables.scss b/scss/atoms/_tables.scss new file mode 100644 index 0000000..ef7d4e5 --- /dev/null +++ b/scss/atoms/_tables.scss @@ -0,0 +1,68 @@ +// ========================================================================== +// Typography +// ========================================================================== + +table { + width: 100%; + margin-bottom: em( 20px, 16px ); + font-size: em( 16px ); + text-align: left; +} + +thead { + border-bottom: 1px solid #eee; + + > tr > th { + border-top: 0; + } +} + +td { + border-top: 1px solid #eee; + padding: em( 12px, 16px ); +} + +th { + border-top: 1px solid #eee; + padding: em( 12px, 12px ); + color: #666; + font-weight: 400; + font-size: em( 12px, 16px ); + white-space: nowrap; +} + +.table--responsive { + position: relative; + z-index: 1; + margin-bottom: em( 20px ); + border: 0; + background: #fff no-repeat; + background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent ); + background-position: 0 0, 100% 0; + background-size: 10px 100%; + overflow: auto; + + table { + position: relative; + margin-bottom: 0; + + &:before, + &:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: 0 -30px 0 0; + width: 30px; + background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) ); + } + &:after { + left: auto; + right: 0; + margin: 0 0 0 -30px; + background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff ); + } + } +} 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..05dbc06 --- /dev/null +++ b/scss/atoms/tables/_tables.scss @@ -0,0 +1,36 @@ +/* +* ========================================================================== +* Tables +* ========================================================================== +*/ + +@import + "dist/chassis", + "mixins"; + +table { + margin: map-get($table-base, margin); + font-size: map-get($table-base, font-size); + text-align: left; +} + +thead { + border-bottom: map-get($table-base, border); + > tr > th { + border-top: 0; + } +} + +td { + border-top: map-get($table-base, border); + padding: map-get($table-base, padding); +} + +th { + border-top: map-get($table-base, border); + padding: map-get($table-base, padding); + color: map-get($text, light); + font-weight: 400; + font-size: map-get($table-base, thead-font-size); + white-space: nowrap; +} 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..f2bfd4d --- /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 = { + "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; +} ) ); From 0d78e4955423d0f12ae03fdc3e815fd34dfe2d49 Mon Sep 17 00:00:00 2001 From: Kristy YeatonHere's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
-| ID | -Product | -Category | -Price | +
|---|
| ID | +Product | +Category | +Price |
|---|---|---|---|
| 1 | -T-Shirt | -Apparel | -$12.99 | +
| 1 | +T-Shirt | +Apparel | +$12.99 |
| 2 | -Sweat Shirt | -Apparel | -$24.99 | +
| 2 | +Sweat Shirt | +Apparel | +$24.99 |
| 3 | -Necklace | -Accessories | -$29.99 | +
| 3 | +Necklace | +Accessories | +$29.99 |
Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+