Merge pull request #41 from guastallaigor/add-table-design

Add table design

css/nes.css

@@ -723,6 +723,37 @@ button,
   box-shadow: -4px 0 #212529, 4px 0 #212529, 4px 4px #fff, 0 4px #212529, 8px 4px #212529, 4px 8px #212529, 8px 8px #212529;
 }
 
+.table {
+  table-layout: fixed;
+  background-color: #fff;
+}
+
+.table.is-centered th {
+  text-align: center;
+}
+
+.table.is-bordered {
+  box-shadow: 4px 0 #212529, 0 -4px #212529, -4px 0 #212529, 0 4px #212529;
+}
+
+.table.is-bordered th,
+.table.is-bordered td {
+  padding: 0.5rem;
+  word-wrap: break-word;
+}
+
+.table.is-bordered tr th + th {
+  box-shadow: -4px 0 #212529;
+}
+
+.table.is-bordered tr td {
+  box-shadow: 0 -4px #212529;
+}
+
+.table.is-bordered tr td:not(:first-child) {
+  box-shadow: -4px 0 #212529, 0 -4px #212529;
+}
+
 .input {
   max-width: 100%;
   padding: 0.5rem 1rem;

index.html

@@ -130,6 +130,31 @@
       </div>
     </section>
 
+    <section class="container with-title">
+      <h2 class="title">Table</h2>
+      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
+        <thead>
+          <tr>
+            <th>Table</th>
+            <th>Table.is-bordered</th>
+            <th>Table.is-centered</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>
+          <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>
+    </section>
+
     <section class="container with-title">
       <h2 class="title">Icons</h2>
       <section class="container with-title">

scss/elements/_index.scss

@@ -5,3 +5,4 @@
 @import "radios.scss";
 @import "checkboxes.scss";
 @import "balloons.scss";
+@import "tables.scss";

scss/elements/tables.scss

@@ -0,0 +1,29 @@
+.table {
+  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;
+
+    th,
+    td {
+      padding: 0.5rem;
+      word-wrap: break-word;
+    }
+
+    tr {
+      th + th {
+        box-shadow: -4px 0 $base-color;
+      }
+      td {
+        box-shadow: 0 -4px $base-color;
+      }
+      td:not(:first-child) {
+        box-shadow: -4px 0 $base-color, 0 -4px $base-color;
+      }
+    }
+  }
+}