feat(table): add dark theme to tables

nostalgic-css · Dec 6, 2018 · ff2b78b · ff2b78b
1 parent c5dcd3f
commit ff2b78b
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 20 deletions.
diff --git a/css/nes.css b/css/nes.css
diff --git a/css/nes.css.map b/css/nes.css.map
diff --git a/css/nes.min.css b/css/nes.min.css
diff --git a/docs/table.stories.js b/docs/table.stories.js
@@ -9,13 +9,14 @@ stories.addDecorator(withKnobs);
 stories.add('table', () => {
   const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
   const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
 
-  const selectedClasses = [isBordered, isCentered];
+  const selectedClasses = [isBordered, isCentered, isDark];
 
   return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
-            <th>Table</th>
+            <th>Table.is-dark</th>
             <th>Table.is-bordered</th>
             <th>Table.is-centered</th>
           </tr>

diff --git a/index.html b/index.html
@@ -132,12 +132,11 @@ <h2 class="title">Balloons</h2>
       </div>
     </section>
 
-    <section class="container with-title">
+    <section class="container with-title" style="display:flex;">
       <h2 class="title">Table</h2>
-      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
+      <table class="table is-bordered is-centered" style="margin:15px 15px 5px 0">
         <thead>
           <tr>
-            <th>Table</th>
             <th>Table.is-bordered</th>
             <th>Table.is-centered</th>
           </tr>
@@ -146,11 +145,17 @@ <h2 class="title">Table</h2>
           <tr>
             <td>Thou hast had a good morning</td>
             <td>Thou hast had a good afternoon</td>
-            <td>Thou hast had a good night</td>
           </tr>
+        </tbody>
+      </table>
+      <table class="table is-dark is-bordered" style="margin:15px 15px 5px 0">
+        <thead>
+          <tr>
+            <th>Table.is-dark.is-bordered</th>
+          </tr>
+        </thead>
+        <tbody>
           <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
             <td>Thou hast had a good night</td>
           </tr>
         </tbody>

diff --git a/scss/elements/tables.scss b/scss/elements/tables.scss
@@ -1,13 +1,8 @@
 .table {
+  display: block;
   table-layout: fixed;
   background-color: #fff;
-
-  &.is-centered th {
-    text-align: center;
-  }
-  &.is-bordered {
-    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
-
+  @mixin thsAndTdsBoxShadow($color) {
     th,
     td {
       padding: 0.5rem;
@@ -16,14 +11,51 @@
 
     tr {
       th + th {
-        box-shadow: -4px 0 $base-color;
+        box-shadow: -4px 0 $color;
       }
       td {
-        box-shadow: 0 -4px $base-color;
+        box-shadow: 0 -4px $color;
       }
       td:not(:first-child) {
-        box-shadow: -4px 0 $base-color, 0 -4px $base-color;
+        box-shadow: -4px 0 $color, 0 -4px $color;
       }
     }
   }
+  &.is-centered th {
+    text-align: center;
+  }
+  &.is-bordered {
+    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
+    @include thsAndTdsBoxShadow($base-color);
+  }
+  &.is-dark {
+    position: relative;
+    color: $background-color;
+    background-color: $base-color;
+
+    &::before,
+    &::after {
+      position: absolute;
+      z-index: -1;
+      content: "";
+    }
+
+    &::before {
+      top: 2px;
+      right: 2px;
+      bottom: 2px;
+      left: 2px;
+      background-color: $base-color;
+    }
+
+    &::after {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      border: 4px solid #fff;
+    }
+    @include thsAndTdsBoxShadow(#fff);
+  }
 }