Move from box-shadow to border-image for pixelated borders (#234)

* refactor: Convert pixelated borders from box-shadows to border-images

Our previous usage of `box-shadows` and pseudo elements proved to be pretty buggy. Converting to
`border-image`s seems to have fixed a lot of the issues that `box-shadows` caused, such as
`background-color`s appering over top of our borders.

BREAKING CHANGE: This change both eliminates pseudo elements from several components, and adds
pseudo elements to components that did not have them before. This could cause compatibility issues
for users that relied on the existence of those pseudo elements for various styling techniques.

* style(buttons): Remove superfluous commented code

scss/elements/tables.scss

@@ -3,42 +3,69 @@
   overflow-x: auto;
   overflow-y: hidden;
 }
+
 .nes-table {
   table-layout: fixed;
   background-color: $background-color;
-  @mixin thsAndTdsBoxShadow($color) {
-    th,
-    td {
-      padding: 0.5rem;
-      word-wrap: break-word;
+
+  tr {
+    margin-left: -0.25em;
+  }
+
+  th,
+  td {
+    position: relative;
+    padding: 0.5rem;
+    word-wrap: break-word;
+    border-color: $base-color;
+    border-style: solid;
+    border-width: 0 0.25em 0.25em 0;
+
+    &:last-child {
+      border-right-width: 0;
     }
 
-    tr {
-      th + th {
-        box-shadow: -4px 0 $color;
-      }
-      td {
-        box-shadow: 0 -4px $color;
-      }
-      td:not(:first-child) {
-        box-shadow: -4px 0 $color, 0 -4px $color;
-      }
+    &::after,
+    &::before {
+      position: absolute;
+      display: block;
+      width: 0.25em;
+      height: 0.25em;
+      content: "";
+      background-color: $base-color;
+    }
+
+    &::after {
+      bottom: -0.25em;
+      left: -0.25em;
+    }
+
+    &::before {
+      top: -0.25em;
+      right: -0.25em;
+    }
+
+    &:last-child::before {
+      top: initial;
+      bottom: -0.25em;
     }
   }
+
   &.is-centered th {
     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);
+    border-spacing: 0;
+    border-collapse: separate;
+
+    @include compact-rounded-corners();
   }
+
   &.is-dark {
-    position: relative;
     color: $background-color;
     background-color: $base-color;
-    box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
-      4px 4px $base-color;
 
     &::before {
       position: absolute;
@@ -47,14 +74,40 @@
       bottom: 0;
       left: 0;
       content: "";
-      background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
-        linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
-        linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
-        linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
-      background-position: 100% 0, 100% 0, 0 100%, 0 100%;
-      background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
     }
 
-    @include thsAndTdsBoxShadow($background-color);
+    &.is-bordered {
+      @include compact-rounded-corners(true);
+    }
+
+    th,
+    td {
+      border-color: $background-color;
+
+      &::after,
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  /***************************************************************************  \
+    This eliminates the gap between the last row in a table and the border, as
+    well as hiding the derelict pixels in the bottom right and bottom left of
+    the last row of a table
+  \  ***************************************************************************/
+  tbody,
+  thead:last-child {
+    tr:last-child {
+      th,
+      td {
+        border-bottom-width: 0;
+
+        &:first-child::after,
+        &:last-child::before {
+          display: none;
+        }
+      }
+    }
   }
 }