First release

node_modules/nes.css/scss/elements/_index.scss

@@ -0,0 +1,12 @@
+@charset "utf-8";
+
+@import "avatar.scss";
+@import "badges.scss";
+@import "balloons.scss";
+@import "buttons.scss";
+@import "containers.scss";
+@import "dialogs.scss";
+@import "lists.scss";
+@import "progress.scss";
+@import "tables.scss";
+@import "text.scss";

node_modules/nes.css/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);
+  }
+}

node_modules/nes.css/scss/elements/badges.scss

@@ -0,0 +1,105 @@
+@mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {
+  display: $display;
+  align-items: center;
+  justify-content: center;
+  width: $width;
+  font-size: $font-size;
+  color: $color;
+  text-align: center;
+  background-color: $background-color;
+}
+
+@mixin span-style($color, $background, $option, $width: 50%) {
+  position: absolute;
+  top: 0;
+  width: $width;
+  color: $color;
+  text-align: center;
+  background-color: $background;
+
+  @if $option == left {
+    left: 0;
+  } @else if $option == right {
+    right: 0;
+  }
+}
+
+@mixin badge-style($color, $background, $option: is-default) {
+  $box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;
+
+  @if $option == is-splited {
+    &:first-child {
+      @include span-style($color, $background, left);
+
+      box-shadow: $box-shadow-first-two, 0 0 $background, -0.5em 0 $background;
+    }
+    &:last-child {
+      @include span-style($color, $background, right);
+
+      box-shadow: $box-shadow-first-two, 0.5em 0 $background, 0 0 $background;
+    }
+  } @else if $option == is-icon {
+    &:first-child {
+      @include span-style-is-icon($color, $background, flex, 2.7em, 0.5em);
+
+      position: absolute;
+      top: -2.8em;
+      left: -2.7em;
+      height: 2.7em;
+    }
+    &:last-child {
+      @include span-style-is-icon($color, $background, inline-block, 6em, 0.88em);
+
+      box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
+    }
+  } @else {
+    &:first-child {
+      @include span-style($color, $background, 0, 100%);
+
+      box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
+    }
+  }
+}
+
+// Default style
+.nes-badge {
+  $em: 0.75em;
+
+  position: relative;
+  display: inline-block;
+  width: $em * 14;
+  height: $em * 2.5;
+  margin: 0.5em;
+  font-size: $em * 1.2;
+  white-space: nowrap;
+  vertical-align: top;
+  user-select: none;
+
+  // Other styles
+  // prettier-ignore
+  $types:
+    "dark" $background-color $base-color,
+    "primary" $background-color map-get($primary-colors, "normal"),
+    "success" $background-color map-get($success-colors, "normal"),
+    "warning" $base-color map-get($warning-colors, "normal"),
+    "error" $background-color map-get($error-colors, "normal");
+
+  @each $type in $types {
+    &.is-splited {
+      & span.is-#{nth($type, 1)} {
+        @include badge-style(nth($type, 2), nth($type, 3), is-splited);
+      }
+    }
+
+    &.is-icon {
+      width: $em * 7;
+      & span.is-#{nth($type, 1)} {
+        @include badge-style(nth($type, 2), nth($type, 3), is-icon);
+      }
+    }
+
+    & span.is-#{nth($type, 1)} {
+      @include badge-style(nth($type, 2), nth($type, 3));
+    }
+  }
+}

node_modules/nes.css/scss/elements/balloons.scss

@@ -0,0 +1,135 @@
+@mixin box-shadow($color, $fromLeft: true) {
+  @if $fromLeft {
+    // prettier-ignore
+    box-shadow:
+      -4px 0,
+      4px 0,
+      -4px 4px $color,
+      0 4px,
+      -8px 4px,
+      -4px 8px,
+      -8px 8px;
+  } @else {
+    // prettier-ignore
+    box-shadow:
+      -4px 0,
+      4px 0,
+      4px 4px $color,
+      0 4px,
+      8px 4px,
+      4px 8px,
+      8px 8px;
+  }
+}
+
+.nes-balloon {
+  @include rounded-corners();
+
+  position: relative;
+  display: inline-block;
+  padding: 1rem 1.5rem;
+  margin: 8px;
+  margin-bottom: 30px;
+  background-color: $background-color;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+  }
+
+  &.is-dark {
+    @include rounded-corners(true);
+
+    color: $background-color;
+    background: $base-color;
+    border-image-outset: 2;
+    box-shadow: 0 0 0 8px $base-color;
+
+    &.from-left,
+    &.from-right {
+      &::before {
+        background-color: $base-color;
+        border-color: $background-color;
+      }
+
+      &::after {
+        color: $background-color;
+        background-color: $base-color;
+      }
+    }
+
+    &.from-left {
+      &::before {
+        box-shadow: -5px 10px 0 6px $base-color;
+      }
+      &::after {
+        @include box-shadow($base-color);
+      }
+    }
+
+    &.from-right {
+      &::before {
+        box-shadow: 5px 10px 0 6px $base-color;
+      }
+      &::after {
+        @include box-shadow($base-color, false);
+      }
+    }
+  }
+
+  &.from-left {
+    &::before,
+    &::after {
+      left: 2rem;
+    }
+
+    &::before {
+      bottom: -14px;
+      width: 26px;
+      height: 10px;
+      background-color: $background-color;
+      border-right: 4px solid $base-color;
+      border-left: 4px solid $base-color;
+    }
+
+    &::after {
+      bottom: -18px;
+      width: 18px;
+      height: 4px;
+      margin-right: 8px;
+      color: $base-color;
+      background-color: $background-color;
+      @include box-shadow($background-color);
+    }
+  }
+
+  &.from-right {
+    &::before,
+    &::after {
+      right: 2rem;
+    }
+
+    &::before {
+      bottom: -14px;
+      width: 26px;
+      height: 10px;
+      background-color: $background-color;
+      border-right: 4px solid $base-color;
+      border-left: 4px solid $base-color;
+    }
+
+    &::after {
+      bottom: -18px;
+      width: 18px;
+      height: 4px;
+      margin-left: 8px;
+      background-color: $background-color;
+      @include box-shadow($background-color, false);
+    }
+  }
+}

node_modules/nes.css/scss/elements/buttons.scss

@@ -0,0 +1,87 @@
+@mixin btn-style($color, $background, $hover-background, $shadow) {
+  color: $color;
+  background-color: $background;
+
+  &::after {
+    position: absolute;
+    top: -$border-size;
+    right: -$border-size;
+    bottom: -$border-size;
+    left: -$border-size;
+    content: "";
+    box-shadow: inset -4px -4px $shadow;
+  }
+
+  &:hover {
+    color: $color;
+    text-decoration: none;
+    background-color: $hover-background;
+
+    &::after {
+      box-shadow: inset -6px -6px $shadow;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 6px rgba($shadow, 0.3);
+  }
+
+  &:active:not(.is-disabled)::after {
+    box-shadow: inset 4px 4px $shadow;
+  }
+}
+
+// Default style
+.nes-btn {
+  @include compact-rounded-corners();
+
+  position: relative;
+  display: inline-block;
+  padding: 6px 8px;
+  margin: $border-size;
+  text-align: center;
+  vertical-align: middle;
+  cursor: $cursor-click-url, pointer;
+  user-select: none;
+
+  @include btn-style(
+    $base-color,
+    map-get($default-colors, "normal"),
+    map-get($default-colors, "hover"),
+    map-get($default-colors, "shadow")
+  );
+
+  &:focus {
+    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" $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));
+    }
+  }
+
+  input[type="file"] {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+  }
+}

node_modules/nes.css/scss/elements/containers.scss

@@ -0,0 +1,117 @@
+.nes-container {
+  position: relative;
+  padding: 1.5rem 2rem;
+  border-color: black;
+  border-style: solid;
+  border-width: 4px;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-centered {
+    text-align: center;
+  }
+
+  &.is-right {
+    text-align: right;
+  }
+
+  &.with-title {
+    > .title {
+      display: table;
+      padding: 0 0.5rem;
+      margin: -1.8rem 0 1rem;
+      font-size: 1rem;
+      background-color: $background-color;
+    }
+
+    &.is-centered {
+      > .title {
+        margin: -2rem auto 1rem;
+      }
+    }
+
+    &.is-right {
+      > .title {
+        margin: -2rem 0 1rem auto;
+      }
+    }
+  }
+
+  &.is-dark {
+    position: relative;
+    margin: $border-size;
+    color: $background-color;
+    background-color: $base-color;
+    border-color: white;
+
+    &::after {
+      position: absolute;
+      top: -$border-size * 1.8;
+      right: -$border-size * 1.8;
+      bottom: -$border-size * 1.8;
+      left: -$border-size * 1.8;
+      z-index: -1;
+      content: "";
+      background-color: $base-color;
+    }
+
+    &.with-title {
+      > .title {
+        color: $background-color;
+        background-color: $base-color;
+      }
+    }
+  }
+
+  &.is-rounded {
+    @include rounded-corners();
+
+    padding: 1rem 1.5rem;
+    margin: $border-size;
+
+    &.with-title {
+      > .title {
+        margin-top: -1.5rem;
+      }
+
+      &.is-centered {
+        > .title {
+          margin: -1.5rem auto 1rem;
+        }
+      }
+
+      &.is-right {
+        > .title {
+          margin: -1.5rem 0 1rem auto;
+        }
+      }
+    }
+
+    &.is-dark {
+      @include rounded-corners(true);
+      &::after {
+        content: none;
+      }
+
+      &.with-title {
+        > .title {
+          margin-top: -1.3rem;
+        }
+
+        &.is-centered {
+          > .title {
+            margin: -1.3rem auto 1rem;
+          }
+        }
+
+        &.is-right {
+          > .title {
+            margin: -1.3rem 0 1rem auto;
+          }
+        }
+      }
+    }
+  }
+}

node_modules/nes.css/scss/elements/dialogs.scss

@@ -0,0 +1,37 @@
+.nes-dialog {
+  padding: 1.5rem 2rem;
+  border-width: $border-size;
+
+  > .backdrop,
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-rounded {
+    @include rounded-corners();
+
+    &.is-dark {
+      @include rounded-corners(true);
+    }
+  }
+  &.is-dark {
+    color: $background-color;
+    background-color: $base-color;
+    border-color: $background-color;
+
+    &:not(.is-rounded)::before {
+      position: absolute;
+      top: -$border-size * 2;
+      right: -$border-size * 2;
+      bottom: -$border-size * 2;
+      left: -$border-size * 2;
+      z-index: -1;
+      content: "";
+      border: $border-size solid $base-color;
+    }
+  }
+}

node_modules/nes.css/scss/elements/lists.scss

@@ -0,0 +1,46 @@
+.nes-list {
+  // prettier-ignore
+  $disc: (
+    (0,0,0,1,1,0,0,0),
+    (0,0,1,1,1,1,0,0),
+    (0,1,1,1,1,1,1,0),
+    (0,1,1,1,1,1,1,0),
+    (0,0,1,1,1,1,0,0),
+    (0,0,0,1,1,0,0,0)
+    );
+
+  // prettier-ignore
+  $circle: (
+    (0,0,0,1,1,0,0,0),
+    (0,0,1,1,1,1,0,0),
+    (0,1,1,0,0,1,1,0),
+    (0,1,1,0,0,1,1,0),
+    (0,0,1,1,1,1,0,0),
+    (0,0,0,1,1,0,0,0)
+  );
+  $colors: ($base-color, map-get($default-colors, "shadow"));
+
+  list-style-type: none;
+
+  & li {
+    position: relative;
+  }
+
+  &.is-disc li::before {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: -22px;
+    content: "";
+
+    @include pixelize(2px, $disc, $colors);
+  }
+
+  &.is-circle li::before {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: -22px;
+    content: "";
+
+    @include pixelize(2px, $circle, $colors);
+  }
+}

node_modules/nes.css/scss/elements/progress.scss

@@ -0,0 +1,111 @@
+.nes-progress {
+  @include compact-rounded-corners();
+
+  width: 100%;
+  height: 48px;
+  margin: 4px;
+  color: $base-color;
+  background-color: $background-color;
+  -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-rounded {
+    @include rounded-corners();
+  }
+  &.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;
+    }
+  }
+}

node_modules/nes.css/scss/elements/tables.scss

@@ -0,0 +1,113 @@
+.nes-table-responsive {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.nes-table {
+  table-layout: fixed;
+  background-color: $background-color;
+
+  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;
+    }
+
+    &::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;
+    border-spacing: 0;
+    border-collapse: separate;
+
+    @include compact-rounded-corners();
+  }
+
+  &.is-dark {
+    color: $background-color;
+    background-color: $base-color;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: "";
+    }
+
+    &.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;
+        }
+      }
+    }
+  }
+}

node_modules/nes.css/scss/elements/text.scss

@@ -0,0 +1,21 @@
+.nes-text {
+  &.is-primary {
+    color: map-get($primary-colors, "normal");
+  }
+
+  &.is-success {
+    color: map-get($success-colors, "normal");
+  }
+
+  &.is-warning {
+    color: map-get($warning-colors, "normal");
+  }
+
+  &.is-error {
+    color: map_get($error-colors, "normal");
+  }
+
+  &.is-disabled {
+    color: map_get($disabled-colors, "normal");
+  }
+}