Merge pull request #133 from nostalgic-css/table-margin

fix(tables.scss): add margin to table is-border class
nostalgic-css · Dec 9, 2018 · 99011b1 · 99011b1
2 parents bb1ec3e + 21eae82
commit 99011b1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -136,44 +136,46 @@ <h2 class="title">Balloons</h2>
       </div>
     </section>
 
-    <section class="container with-title" style="display:flex">
+    <section class="container with-title">
       <h2 class="title">Table</h2>
-      <table class="table is-bordered is-centered" style="margin:15px 15px 5px 0;">
-        <thead>
-          <tr>
-            <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>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="table is-bordered is-dark" style="margin:15px 4px 5px 15px">
-        <thead>
-          <tr>
-            <th>Table.is-dark</th>
-            <th>Table.is-bordered</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good morning</td>
-          </tr>
-          <tr>
-            <td>Thou hast had a good morning</td>
-            <td>Thou hast had a good afternoon</td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="tables">
+        <table class="table is-bordered is-centered">
+          <thead>
+            <tr>
+              <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>
+            </tr>
+            <tr>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good afternoon</td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="table is-bordered is-dark">
+          <thead>
+            <tr>
+              <th>Table.is-dark</th>
+              <th>Table.is-bordered</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good morning</td>
+            </tr>
+            <tr>
+              <td>Thou hast had a good morning</td>
+              <td>Thou hast had a good afternoon</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </section>
 
     <section class="container with-title">

diff --git a/scss/elements/tables.scss b/scss/elements/tables.scss
@@ -24,6 +24,7 @@
     text-align: center;
   }
   &.is-bordered {
+    margin: 4px;
     box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
     @include thsAndTdsBoxShadow($base-color);
   }

diff --git a/style.css b/style.css
@@ -16,6 +16,27 @@ div.containers > .container {
   max-width: 400px;
 }
 
+div.tables {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+div.tables > .table {
+  min-width: 350px;
+  max-width: calc(50% - 2rem);
+}
+div.tables > .table:first-child {
+  margin-right: 2rem;
+  margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 768px) {
+  div.tables > .table {
+    max-width: 100%;
+    margin-right: 0;
+  }
+}
+
 .balloon.container .balloon {
   max-width: 600px;
   margin: 2rem 2rem;