Fix table

sass/elements/_all.sass

@@ -4,6 +4,7 @@
 @import "button.sass"
 @import "content.sass"
 @import "form.sass"
+@import "icon.sass"
 @import "image.sass"
 @import "notification.sass"
 @import "progress.sass"

sass/elements/icon.sass

@@ -0,0 +1,13 @@
+.icon
+  background: pink
+  +fa(21px, 1.5rem)
+  .fa
+    font-size: inherit
+    line-height: inherit
+  // Sizes
+  &.is-small
+    +fa(14px, 1rem)
+  &.is-medium
+    +fa(28px, 2rem)
+  &.is-large
+    +fa(42px, 3rem)

sass/elements/other.sass

@@ -8,10 +8,10 @@
     max-width: 960px
     // Modifiers
     &.is-fluid
-      margin: 0 20px
+      margin: 0 1.5rem
       max-width: none
   +widescreen
-    max-width: 1080px
+    max-width: 1200px
 
 .delete
   +delete
@@ -21,19 +21,6 @@
   text-align: center
   vertical-align: top
 
-.icon
-  +fa(21px, 1.5rem)
-  .fa
-    font-size: inherit
-    line-height: inherit
-  // Sizes
-  &.is-small
-    +fa(14px, 1rem)
-  &.is-medium
-    +fa(28px, 2rem)
-  &.is-large
-    +fa(42px, 3rem)
-
 .heading
   display: block
   font-size: 11px

sass/elements/table.sass

@@ -1,43 +1,25 @@
-$table: $text-strong !default
-$table-background: $white !default
-$table-border: $border !default
+$table:                           $grey-darker !default
+$table-background:                $white !default
+$table-border:                    $grey-lighter !default
 
-$table-head: $text-light !default
+$table-head:                      $grey !default
 
-$table-row-hover-background: $white-ter !default
-$table-row-even-background: $white-bis !default
+$table-row-hover-background:      $white-bis !default
+$table-row-even-background:       $white-bis !default
+$table-row-even-hover-background: $white-ter !default
 
 .table
   background-color: $table-background
   color: $table
-  margin-bottom: 20px
+  margin-bottom: 1.5rem
   width: 100%
   td,
   th
     border: 1px solid $table-border
     border-width: 0 0 1px
-    padding: 8px 10px
+    padding: 0.5em 0.75em
     vertical-align: top
     // Modifiers
-    &.is-icon
-      padding: 5px
-      text-align: center
-      white-space: nowrap
-      width: 1%
-      .fa
-        +fa(21px, 24px)
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px
-    &.is-link
-      padding: 0
-      & > a
-        display: block
-        padding: 8px 10px
-        &:hover
-          background-color: $link
-          color: $link-invert
     &.is-narrow
       white-space: nowrap
       width: 1%
@@ -76,22 +58,11 @@ $table-row-even-background: $white-bis !default
   &.is-narrow
     td,
     th
-      padding: 5px 10px
-      // Modifiers
-      &.is-icon
-        padding: 2px
-        &.is-link
-          padding: 0
-          & > a
-            padding: 2px
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px 10px
+      padding: 0.25em 0.5em
   &.is-striped
     tbody
       tr
         &:nth-child(even)
           background-color: $table-row-even-background
           &:hover
-            background-color: $table-row-hover-background
+            background-color: $table-row-even-hover-background