adding #27 #28

public/components.html

@@ -603,65 +603,65 @@
                     Table
                 </h2>
                 <div class="content">
-<code>&#x3C;table class=&#x22;table table--striped&#x22;&#x3E;
+<code>&#x3C;table class=&#x22;table table--striped table--hover&#x22;&#x3E;
     &#x3C;thead&#x3E;
-        &#x3C;tr&#x3E;
-            &#x3C;th&#x3E;A&#x3C;/th&#x3E;
-            &#x3C;th&#x3E;B&#x3C;/th&#x3E;
-            &#x3C;th&#x3E;C&#x3C;/th&#x3E;
-            &#x3C;th&#x3E;D&#x3C;/th&#x3E;
+        &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
+            &#x3C;th class=&#x22;table__th&#x22;&#x3E;A&#x3C;/th&#x3E;
+            &#x3C;th class=&#x22;table__th&#x22;&#x3E;B&#x3C;/th&#x3E;
+            &#x3C;th class=&#x22;table__th&#x22;&#x3E;C&#x3C;/th&#x3E;
+            &#x3C;th class=&#x22;table__th&#x22;&#x3E;D&#x3C;/th&#x3E;
         &#x3C;/tr&#x3E;
     &#x3C;/thead&#x3E;
     &#x3C;tbody&#x3E;
-        &#x3C;tr&#x3E;
-            &#x3C;td&#x3E;1&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;2&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;3&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;4&#x3C;/td&#x3E;
+        &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
         &#x3C;/tr&#x3E;
-        &#x3C;tr&#x3E;
-            &#x3C;td&#x3E;1&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;2&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;3&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;4&#x3C;/td&#x3E;
+        &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
         &#x3C;/tr&#x3E;
-        &#x3C;tr&#x3E;
-            &#x3C;td&#x3E;1&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;2&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;3&#x3C;/td&#x3E;
-            &#x3C;td&#x3E;4&#x3C;/td&#x3E;
+        &#x3C;tr class=&#x22;table__tr&#x22;&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;1&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;2&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;3&#x3C;/td&#x3E;
+            &#x3C;td class=&#x22;table__td&#x22;&#x3E;4&#x3C;/td&#x3E;
         &#x3C;/tr&#x3E;
     &#x3C;/tbody&#x3E;
 &#x3C;/table&#x3E;
 </code>
                 </div>
-                <table class="table table--striped">
+                <table class="table table--striped table--hover">
                     <thead>
-                        <tr>
-                            <th>A</th>
-                            <th>B</th>
-                            <th>C</th>
-                            <th>D</th>
+                        <tr class="table__tr">
+                            <th class="table__th">A</th>
+                            <th class="table__th">B</th>
+                            <th class="table__th">C</th>
+                            <th class="table__th">D</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <tr>
-                            <td>1</td>
-                            <td>2</td>
-                            <td>3</td>
-                            <td>4</td>
+                        <tr class="table__tr">
+                            <td class="table__td">1</td>
+                            <td class="table__td">2</td>
+                            <td class="table__td">3</td>
+                            <td class="table__td">4</td>
                         </tr>
-                        <tr>
-                            <td>1</td>
-                            <td>2</td>
-                            <td>3</td>
-                            <td>4</td>
+                        <tr class="table__tr">
+                            <td class="table__td">1</td>
+                            <td class="table__td">2</td>
+                            <td class="table__td">3</td>
+                            <td class="table__td">4</td>
                         </tr>
-                        <tr>
-                            <td>1</td>
-                            <td>2</td>
-                            <td>3</td>
-                            <td>4</td>
+                        <tr class="table__tr">
+                            <td class="table__td">1</td>
+                            <td class="table__td">2</td>
+                            <td class="table__td">3</td>
+                            <td class="table__td">4</td>
                         </tr>
                     </tbody>
                 </table>

src/scss/components/_table.scss

@@ -4,9 +4,13 @@
  *
  */
 
+$table__padding-breakpoints: (
+    $breakpoint__md: 0.5em 1.25em
+) !default;
+
 .table {
     width: 100%;
-    border: 1px solid lighten($color__primary, 55%);
+    border: $border;
     background: var(--white);
 
     &--striped {
@@ -21,29 +25,31 @@
         overflow-x: auto;
     }
 
-    td {
+    &__td {
         color: var(--text);
     }
 
-    td,
-    th {
+    &__td,
+    &__th {
         text-align: left;
-        border-bottom: 1px solid lighten($color__primary, 55%);
+        border-bottom: $border;
 
-        padding: 0.5em 1.25em;
-        //@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
+        padding: 0.25em 0.75em;
+        @include media-breakpoints('padding', $table__padding-breakpoints);
     }
 
-    th {
+    &__th {
         color: white;
-        background-color: $color__primary;
+        background-color: var(--background);
     }
 
-    tr:hover {
-        background-color: lighten($color__primary, 10%);
+    &--hover {
+        .table__tr:hover {
+            background-color: lighten($color__primary, 10%);
 
-        td {
-            color: white;
+            .table__td {
+                color: white;
+            }
         }
     }
 }