Merge branch 'develop' of https://github.com/nostalgic-css/NES.css into dialog

scss/elements/_index.scss

@@ -6,3 +6,5 @@
 @import "checkboxes.scss";
 @import "balloons.scss";
 @import "tables.scss";
+@import "progress.scss";
+@import "avatar.scss";

scss/elements/avatar.scss

@@ -0,0 +1,23 @@
+@mixin img-style($param) {
+  $size: $param * 16;
+
+  width: $size;
+  height: $size;
+
+  &.is-rounded {
+    border-radius: 50px;
+  }
+}
+.nes-avatar {
+  @include img-style(2px);
+
+  &.is-small {
+    @include img-style(1px);
+  }
+  &.is-medium {
+    @include img-style(3px);
+  }
+  &.is-large {
+    @include img-style(4px);
+  }
+}

scss/elements/balloons.scss

@@ -1,4 +1,4 @@
-.balloon {
+.nes-balloon {
   position: relative;
   display: inline-block;
   padding: 1rem 1.5rem;
@@ -49,18 +49,19 @@
     &::after {
       bottom: -18px;
       width: 18px;
-      height: 3px;
+      height: 4px;
       margin-right: 8px;
+      color: $base-color;
       background-color: $background-color;
       // prettier-ignore
       box-shadow:
-        -4px 0 $base-color,
-        4px 0 $base-color,
+        -4px 0,
+        4px 0,
         -4px 4px $background-color,
-        0 4px $base-color,
-        -8px 4px $base-color,
-        -4px 8px $base-color,
-        -8px 8px $base-color;
+        0 4px,
+        -8px 4px,
+        -4px 8px,
+        -8px 8px;
     }
   }
 
@@ -82,18 +83,18 @@
     &::after {
       bottom: -18px;
       width: 18px;
-      height: 3px;
+      height: 4px;
       margin-left: 8px;
       background-color: $background-color;
       // prettier-ignore
       box-shadow:
-        -4px 0 $base-color,
-        4px 0 $base-color,
+        -4px 0,
+        4px 0,
         4px 4px $background-color,
-        0 4px $base-color,
-        8px 4px $base-color,
-        4px 8px $base-color,
-        8px 8px $base-color;
+        0 4px,
+        8px 4px,
+        4px 8px,
+        8px 8px;
     }
   }
 }

scss/elements/buttons.scss

@@ -14,8 +14,67 @@
   }
 }
 
+@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;
+  }
+
+  // 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;
+}
+
 // Default style
-.btn {
+.nes-btn {
   $border-size: 4px;
 
   position: relative;
@@ -24,10 +83,16 @@
   margin: $border-size;
   text-align: center;
   vertical-align: middle;
-  cursor: pointer;
+  cursor: $cursor-click-url, pointer;
   user-select: none;
+  border: none;
 
-  @include btn-style($base-color, #fff, #e7e7e7, #adafbc);
+  @include btn-style(
+    $base-color,
+    map-get($default-colors, "normal"),
+    map-get($default-colors, "hover"),
+    map-get($default-colors, "shadow")
+  );
 
   &::before,
   &::after {
@@ -59,17 +124,53 @@
     outline: 0;
   }
 
+  &.is-disabled,
+  &.is-disabled:hover,
+  &.is-disabled:focus {
+    color: $base-color;
+    cursor: not-allowed;
+    background-color: map-get($disabled-colors, "normal");
+    box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
+    opacity: 0.6;
+  }
+
   // Other styles
   // prettier-ignore
   $types:
-    "primary" #fff #209cee #108de0 #006bb3,
-    "success" #fff #92cc41 #76c442 #4aa52e,
-    "warning" $base-color #f7d51d #f2c409 #e59400,
-    "error" #fff #e76e55 #ce372b #8c2022;
+    "primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
+    "success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
+    "warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
+    "error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");
 
   @each $type in $types {
     &.is-#{nth($type, 1)} {
       @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)
+        );
+      }
+    }
+  }
 }

scss/elements/checkboxes.scss

@@ -1,4 +1,4 @@
-.checkbox {
+.nes-checkbox {
   // prettier-ignore
   $checkbox: (
     (1,1,1,1,1,1,1,1,0,0),
@@ -45,7 +45,7 @@
     (2,0,0,1,0,0,0,2,0,0),
     (2,2,2,2,2,2,2,2,0,0)
   );
-  $colors: ($base-color, #adafbb);
+  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   margin-left: 28px;
   -webkit-appearance: none;
@@ -54,7 +54,7 @@
 
   & + span {
     position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
   }
 
   & + span::before,

scss/elements/containers.scss

@@ -1,4 +1,4 @@
-.container {
+.nes-container {
   position: relative;
   padding: 1.5rem 2rem;
 
@@ -31,23 +31,74 @@
     border-radius: 4px;
   }
 
+  &.is-center {
+    text-align: center;
+  }
+
+  &.is-right {
+    text-align: right;
+  }
+
+  &.with-title {
+    padding-top: 2rem;
+
+    > .title {
+      display: table;
+      padding: 0 0.5rem;
+      margin: -2rem 0 1rem;
+      font-size: 1rem;
+      background-color: $background-color;
+    }
+
+    &.is-center {
+      > .title {
+        margin: -2rem auto 1rem;
+      }
+    }
+
+    &.is-right {
+      > .title {
+        margin: -2rem 0 1rem auto;
+      }
+    }
+  }
+
+  &.is-dark {
+    color: $background-color;
+    &::before {
+      background-color: $base-color;
+    }
+
+    &::after {
+      border-color: #fff;
+    }
+
+    &.with-title {
+      > .title {
+        color: $background-color;
+        background-color: $base-color;
+      }
+    }
+  }
+
   @mixin rounded($base, $background) {
+    color: $base;
     border: none;
     border-radius: 0;
     // prettier-ignore
     box-shadow:
       0 -4px $background,
-      0 -8px $base,
+      0 -8px,
       4px 0 $background,
-      4px -4px $base,
-      8px 0 $base,
+      4px -4px,
+      8px 0,
       0 4px $background,
-      0 8px $base,
+      0 8px,
       -4px 0 $background,
-      -4px 4px $base,
-      -8px 0 $base,
-      -4px -4px $base,
-      4px 4px $base;
+      -4px 4px,
+      -8px 0,
+      -4px -4px,
+      4px 4px;
   }
 
   &.is-rounded {
@@ -70,49 +121,22 @@
         left: -8px;
       }
     }
-  }
-
-  &.with-title {
-    padding-top: 2rem;
-
-    > .title {
-      display: table;
-      padding: 0 0.5rem;
-      margin: -2rem 0 1rem;
-      font-size: 1rem;
-      background-color: $background-color;
-    }
-
-    &.is-center {
-      text-align: center;
-
-      > .title {
-        margin: -2rem auto 1rem;
-      }
-    }
-
-    &.is-right {
-      text-align: right;
-
-      > .title {
-        margin: -2rem 0 1rem auto;
-      }
-    }
-  }
-
-  &.is-dark {
-    &::before {
-      background-color: $base-color;
-    }
-
-    &::after {
-      border-color: #fff;
-    }
 
     &.with-title {
       > .title {
-        color: $background-color;
-        background-color: $base-color;
+        margin-top: -1.5rem;
+      }
+
+      &.is-center {
+        > .title {
+          margin: -1.5rem auto 1rem;
+        }
+      }
+
+      &.is-right {
+        > .title {
+          margin: -1.5rem 0 1rem auto;
+        }
       }
     }
   }

scss/elements/progress.scss

@@ -0,0 +1,108 @@
+.nes-progress {
+  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;
+
+  @mixin progress-style($color) {
+    &::-webkit-progress-bar {
+      background-color: $background-color;
+    }
+    &::-webkit-progress-value {
+      background-color: $color;
+    }
+    &::-moz-progress-bar {
+      background-color: $color;
+    }
+    &::-ms-fill {
+      background-color: $color;
+      border: none;
+    }
+  }
+
+  @include progress-style($base-color);
+
+  &.is-primary {
+    @include progress-style(map-get($primary-colors, "normal"));
+  }
+
+  &.is-success {
+    @include progress-style(map-get($success-colors, "normal"));
+  }
+
+  &.is-warning {
+    @include progress-style(map-get($warning-colors, "normal"));
+  }
+
+  &.is-error {
+    @include progress-style(map-get($error-colors, "normal"));
+  }
+
+  &.is-pattern {
+    &::-webkit-progress-value {
+      background-color: $base-color;
+      background-image: linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        ),
+        linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        );
+      background-position: 0 0, 10px 10px;
+      background-size: 20px 20px;
+    }
+
+    &::-moz-progress-bar {
+      background-color: $base-color;
+      background-image: -moz-linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        ),
+        -moz-linear-gradient(45deg, $background-color 25%, transparent 25%, transparent 75%, $background-color
+              75%, $background-color);
+      background-position: 0 0, 10px 10px;
+      background-size: 20px 20px;
+    }
+
+    &::-ms-fill {
+      background-color: $base-color;
+      background-image: linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        ),
+        linear-gradient(
+          45deg,
+          $background-color 25%,
+          transparent 25%,
+          transparent 75%,
+          $background-color 75%,
+          $background-color
+        );
+      background-position: 0 0, 10px 10px;
+      background-size: 20px 20px;
+      border: none;
+    }
+  }
+}

scss/elements/radios.scss

@@ -1,4 +1,4 @@
-.radio {
+.nes-radio {
   // prettier-ignore
   $radio: (
     (1,1,0,0,0,0),
@@ -19,7 +19,7 @@
     (2,2,2,2,0,0),
     (2,2,0,0,0,0),
   );
-  $colors: ($base-color, #adafbc);
+  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   margin-right: 20px;
   -webkit-appearance: none;
@@ -28,7 +28,7 @@
 
   & + span {
     position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
   }
 
   &:checked + span::before {

scss/elements/tables.scss

@@ -1,13 +1,7 @@
-.table {
+.nes-table {
   table-layout: fixed;
-  background-color: #fff;
-
-  &.is-centered th {
-    text-align: center;
-  }
-  &.is-bordered {
-    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
-
+  background-color: $background-color;
+  @mixin thsAndTdsBoxShadow($color) {
     th,
     td {
       padding: 0.5rem;
@@ -16,14 +10,46 @@
 
     tr {
       th + th {
-        box-shadow: -4px 0 $base-color;
+        box-shadow: -4px 0 $color;
       }
       td {
-        box-shadow: 0 -4px $base-color;
+        box-shadow: 0 -4px $color;
       }
       td:not(:first-child) {
-        box-shadow: -4px 0 $base-color, 0 -4px $base-color;
+        box-shadow: -4px 0 $color, 0 -4px $color;
       }
     }
   }
+  &.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);
+  }
+  &.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;
+      top: 0;
+      right: 0;
+      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);
+  }
 }