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
nostalgic-css · Dec 29, 2018 · 44a1fb2 · 44a1fb2
1 parent 5c4f46e
commit 44a1fb2
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 239 deletions.
diff --git a/scss/base/variables.scss b/scss/base/variables.scss
@@ -7,6 +7,7 @@ $background-color: $color-white;
 
 $cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
 $cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
+$border-size: 0.25em;
 
 $default-colors: (
   normal: $background-color,

diff --git a/scss/elements/balloons.scss b/scss/elements/balloons.scss
@@ -1,25 +1,12 @@
 .nes-balloon {
+  @include rounded-corners();
   position: relative;
   display: inline-block;
   padding: 1rem 1.5rem;
   margin: 8px;
   margin-bottom: 30px;
-  background-color: $background-color;
 
-  // prettier-ignore
-  box-shadow:
-    0 -4px $background-color,
-    0 -8px $base-color,
-    4px 0 $background-color,
-    4px -4px $base-color,
-    8px 0 $base-color,
-    0 4px $background-color,
-    0 8px $base-color,
-    -4px 0 $background-color,
-    -4px 4px $base-color,
-    -8px 0 $base-color,
-    -4px -4px $base-color,
-    4px 4px $base-color;
+  background-color: $background-color;
 
   > :last-child {
     margin-bottom: 0;

diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
@@ -1,81 +1,34 @@
 @mixin btn-style($color, $background, $hover-background, $shadow) {
   color: $color;
   background-color: $background;
-  box-shadow: inset -4px -4px $shadow;
 
-  &:hover,
-  &:focus {
-    background-color: $hover-background;
-    box-shadow: inset -6px -6px $shadow;
-  }
-
-  &:active {
-    box-shadow: inset 4px 4px $shadow;
+  &::after {
+    position: absolute;
+    top: -$border-size;
+    right: -$border-size;
+    bottom: -$border-size;
+    left: -$border-size;
+    content: "";
+    box-shadow: inset -4px -4px $shadow;
   }
-}
-
-@mixin btn-extra-pixelize-style($color, $background, $hover-background, $shadow) {
-  color: $color;
-  background-color: $background;
 
   &:hover,
   &:focus {
     background-color: $hover-background;
-    outline: 0;
-    // prettier-ignore
-    box-shadow:
-      0 -4px $hover-background,
-      inset 0 -2px $shadow,
-      0 -8px $base-color,
-      4px 0 $shadow,
-      4px -4px $base-color,
-      8px 0 $base-color,
-      0 4px $shadow,
-      4px 4px $base-color,
-      0 8px $base-color,
-      -4px 0 $hover-background,
-      inset -2px 0 $shadow,
-      -4px -4px $base-color,
-      -8px 0 $base-color,
-      -4px 4px $base-color;
-  }
 
-  &:active {
-    // prettier-ignore
-    box-shadow:
-      0 -4px $shadow,
-      0 -8px $base-color,
-      4px 0 $hover-background,
-      4px -4px $base-color,
-      8px 0 $base-color,
-      0 4px $hover-background,
-      4px 4px $base-color,
-      0 8px $base-color,
-      -4px 0 $shadow,
-      -4px -4px $base-color,
-      -8px 0 $base-color,
-      -4px 4px $base-color;
+    &::after {
+      box-shadow: inset -6px -6px $shadow;
+    }
   }
 
-  // prettier-ignore
-  box-shadow:
-    0 -4px $background,
-    0 -8px $base-color,
-    4px 0 $shadow,
-    4px -4px $base-color,
-    8px 0 $base-color,
-    0 4px $shadow,
-    4px 4px $base-color,
-    0 8px $base-color,
-    -4px 0 $background,
-    -4px -4px $base-color,
-    -8px 0 $base-color,
-    -4px 4px $base-color;
+  &:active::after {
+    box-shadow: inset 4px 4px $shadow;
+  }
 }
 
 // Default style
 .nes-btn {
-  $border-size: 4px;
+  @include compact-rounded-corners();
 
   position: relative;
   display: inline-block;
@@ -85,7 +38,6 @@
   vertical-align: middle;
   cursor: $cursor-click-url, pointer;
   user-select: none;
-  border: none;
 
   @include btn-style(
     $base-color,
@@ -94,32 +46,6 @@
     map-get($default-colors, "shadow")
   );
 
-  &::before,
-  &::after {
-    position: absolute;
-    box-sizing: content-box;
-    width: 100%;
-    height: 100%;
-    content: "";
-    border-color: $base-color;
-    border-style: solid;
-    border-width: $border-size;
-  }
-
-  &::before {
-    top: $border-size * -1;
-    left: 0;
-    border-right: $border-size / 2;
-    border-left: $border-size / 2;
-  }
-
-  &::after {
-    top: 0;
-    left: $border-size * -1;
-    border-top: $border-size / 2;
-    border-bottom: $border-size / 2;
-  }
-
   &:focus {
     outline: 0;
   }
@@ -147,30 +73,4 @@
       @include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
     }
   }
-
-  &.is-rounded {
-    box-sizing: content-box;
-    padding: 6px 8px;
-    @include btn-extra-pixelize-style(
-      $base-color,
-      map-get($default-colors, "normal"),
-      map-get($default-colors, "hover"),
-      map-get($default-colors, "shadow")
-    );
-
-    &::before,
-    &::after {
-      border-width: 0;
-    }
-    @each $type in $types {
-      &.is-#{nth($type, 1)} {
-        @include btn-extra-pixelize-style(
-          nth($type, 2),
-          nth($type, 3),
-          nth($type, 4),
-          nth($type, 5)
-        );
-      }
-    }
-  }
 }
diff --git a/scss/elements/containers.scss b/scss/elements/containers.scss
@@ -1,36 +1,14 @@
 .nes-container {
   position: relative;
   padding: 1.5rem 2rem;
+  border-color: black;
+  border-style: solid;
+  border-width: 4px;
 
   > :last-child {
     margin-bottom: 0;
   }
 
-  &::before,
-  &::after {
-    position: absolute;
-    z-index: -1;
-    content: "";
-  }
-
-  &::before {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &::after {
-    top: 2px;
-    right: 2px;
-    bottom: 2px;
-    left: 2px;
-    border-color: $base-color;
-    border-style: solid;
-    border-width: 4px;
-    border-radius: 4px;
-  }
-
   &.is-centered {
     text-align: center;
   }
@@ -65,13 +43,8 @@
 
   &.is-dark {
     color: $background-color;
-    &::before {
-      background-color: $base-color;
-    }
-
-    &::after {
-      border-color: #fff;
-    }
+    background-color: $base-color;
+    border-color: white;
 
     &.with-title {
       > .title {
@@ -81,45 +54,14 @@
     }
   }
 
-  @mixin rounded($base, $background) {
-    color: $base;
-    border: none;
-    border-radius: 0;
-    // prettier-ignore
-    box-shadow:
-      0 -4px $background,
-      0 -8px,
-      4px 0 $background,
-      4px -4px,
-      8px 0,
-      0 4px $background,
-      0 8px,
-      -4px 0 $background,
-      -4px 4px,
-      -8px 0,
-      -4px -4px,
-      4px 4px;
-  }
-
   &.is-rounded {
+    @include rounded-corners();
+
     padding: 1rem 1.5rem;
     margin: 14px 8px;
 
-    &::after {
-      @include rounded($base-color, $background-color);
-    }
-
     &.is-dark {
-      &::after {
-        @include rounded($background-color, $base-color);
-      }
-
-      &::before {
-        top: -8px;
-        right: -8px;
-        bottom: -8px;
-        left: -8px;
-      }
+      @include rounded-corners(true);
     }
 
     &.with-title {

diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
@@ -11,7 +11,6 @@
   }
 
   &.is-rounded {
-    border: none;
-    box-shadow: 4px 0 $base-color, -4px 0 $base-color, 0 4px $base-color, 0 -4px $base-color;
+    @include rounded-corners();
   }
 }
diff --git a/scss/elements/progress.scss b/scss/elements/progress.scss
@@ -1,11 +1,11 @@
 .nes-progress {
+  @include compact-rounded-corners();
   width: 100%;
   height: 48px;
-  padding: 4px;
   margin: 4px;
   color: $base-color;
   background-color: $background-color;
-  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
+
   -webkit-appearance: none;
   appearance: none;