Date: Thu, 9 Apr 2015 19:25:43 -0600
Subject: [PATCH 1/3] Build: Initial table styles
---
demos/tables.html | 115 ++++++++++++++++++++++++++++
scss/atoms/_overflow-indicator.scss | 46 +++++++++++
scss/atoms/_tables.scss | 68 ++++++++++++++++
scss/lint.scss | 4 +-
4 files changed, 232 insertions(+), 1 deletion(-)
create mode 100644 demos/tables.html
create mode 100644 scss/atoms/_overflow-indicator.scss
create mode 100644 scss/atoms/_tables.scss
diff --git a/demos/tables.html b/demos/tables.html
new file mode 100644
index 0000000..9192a1b
--- /dev/null
+++ b/demos/tables.html
@@ -0,0 +1,115 @@
+
+
+
+
+ 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..
+
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+
+Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..
+
+
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+
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/_overflow-indicator.scss b/scss/atoms/_overflow-indicator.scss
new file mode 100644
index 0000000..9392141
--- /dev/null
+++ b/scss/atoms/_overflow-indicator.scss
@@ -0,0 +1,46 @@
+// ==========================================================================
+// Overflow Indicator
+//
+// Shows indicator when there is more horizontal content.
+//
+// EXAMPLE
+//
+// ==========================================================================
+
+.overflow-indicator__wrapper {
+ 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;
+}
+
+.overflow-indicator__wrapper > .overflow-indicator__content {
+ 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.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/lint.scss b/scss/lint.scss
index d3cf487..9273ac5 100644
--- a/scss/lint.scss
+++ b/scss/lint.scss
@@ -15,7 +15,9 @@
@import
"atoms/icons/icons",
- "atoms/typography/typography";
+ "atoms/tables",
+ "atoms/typography/typography",
+ "atoms/overflow-indicator";
@import
"views/main";
From cd563ea007b901e02e490125a8c7a90b9a7e997d Mon Sep 17 00:00:00 2001
From: Stella Ubaha
Date: Sun, 18 Oct 2015 16:44:07 -0400
Subject: [PATCH 2/3] tables: contextual and strip gh-130
---
scss/atoms/_tables.scss | 30 +++++++++++++++++++++++++++---
1 file changed, 27 insertions(+), 3 deletions(-)
diff --git a/scss/atoms/_tables.scss b/scss/atoms/_tables.scss
index ef7d4e5..f1f2825 100644
--- a/scss/atoms/_tables.scss
+++ b/scss/atoms/_tables.scss
@@ -1,6 +1,8 @@
-// ==========================================================================
-// Typography
-// ==========================================================================
+/*
+* ==========================================================================
+* Typography
+* ==========================================================================
+*/
table {
width: 100%;
@@ -31,6 +33,28 @@ th {
white-space: nowrap;
}
+table {
+ .active {
+ background-color: #f5f5f5;
+ }
+ .success {
+ background-color: #dff0d8;
+ }
+ .warning {
+ background-color: #fcf8e3;
+ }
+ .danger {
+ background-color: #f2dede;
+ }
+ .info {
+ background-color: #d9edf7;
+ }
+}
+
+.striped-table>tbody>tr:nth-of-type(odd), {
+ background-color: #f2f2f2;
+}
+
.table--responsive {
position: relative;
z-index: 1;
From 15195fb159e58aa2c32e4a1ab7504ed6eb7678a8 Mon Sep 17 00:00:00 2001
From: Stella Ubaha
Date: Sun, 18 Oct 2015 16:58:37 -0400
Subject: [PATCH 3/3] tables: restored after delete gh-130
---
demos/tables.html | 76 +++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 76 insertions(+)
diff --git a/demos/tables.html b/demos/tables.html
index 9192a1b..dccca89 100644
--- a/demos/tables.html
+++ b/demos/tables.html
@@ -111,5 +111,81 @@ Tables
Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+
+Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.
+
+
+
+
+ | # |
+ Table heading |
+ Table heading |
+ Table heading |
+
+
+
+
+ | 1 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 2 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 3 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 4 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+ | 5 |
+ Table cell |
+ Table cell |
+ Table cell |
+
+
+
+