Merge branch 'develop' into add-badges-component

nostalgic-css · Dec 20, 2018 · f8a8e31 · f8a8e31
2 parents 656f186 + fcbed9e
commit f8a8e31
Show file tree

Hide file tree

Showing 23 changed files with 224 additions and 220 deletions.
diff --git a/docs/dialogs.stories.js b/docs/dialogs.stories.js
@@ -8,8 +8,10 @@ stories.addDecorator(withKnobs);
 
 stories.add('dialog', () => {
   const open = boolean('open', true) ? 'open' : '';
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const selectedClasses = [isRounded];
 
-  return `<dialog ${open}>
+  return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
       <p class="title">Dialog</p>
       <p>Alert: this is a dialog.</p>
   </div>`;

diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss
@@ -1,12 +1,13 @@
 @charset "utf-8";
 
+@import "avatar.scss";
+@import "badges.scss";
+@import "balloons.scss";
 @import "buttons.scss";
-@import "containers.scss";
-@import "radios.scss";
 @import "checkboxes.scss";
+@import "containers.scss";
+@import "dialogs.scss";
 @import "lists.scss";
-@import "balloons.scss";
-@import "tables.scss";
 @import "progress.scss";
-@import "avatar.scss";
-@import "badges.scss";
+@import "radios.scss";
+@import "tables.scss";
diff --git a/scss/elements/checkboxes.scss b/scss/elements/checkboxes.scss
@@ -62,22 +62,23 @@
     position: absolute;
     top: -3px;
     left: -28px;
+    font-size: 2px;
     content: "";
   }
 
   // prettier-ignore
   & + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox, $colors, 2px);
+    @include pixelize($checkbox, $colors);
   }
   // prettier-ignore
   &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox-focus, $colors, 2px);
+    @include pixelize($checkbox-focus, $colors);
   }
 
   &:checked + span::before {
-    @include pixelize($checkbox-checked, $colors, 2px);
+    @include pixelize($checkbox-checked, $colors);
   }
   &:checked:focus + span::before {
-    @include pixelize($checkbox-checked-focus, $colors, 2px);
+    @include pixelize($checkbox-checked-focus, $colors);
   }
 }
diff --git a/scss/elements/dialogs.scss b/scss/elements/dialogs.scss
@@ -1,8 +1,5 @@
 .nes-dialog {
   padding: 1.5rem 2rem;
-  color: $base-color;
-  border: none;
-  box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px;
 
   > .backdrop,
   &::backdrop {
@@ -12,4 +9,9 @@
   > :last-child {
     margin-bottom: 0;
   }
+
+  &.is-rounded {
+    border: none;
+    box-shadow: 4px 0 $base-color, -4px 0 $base-color, 0 4px $base-color, 0 -4px $base-color;
+  }
 }
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
@@ -28,17 +28,19 @@
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
+    font-size: 2px;
     content: "";
 
-    @include pixelize($disc, $colors, 2px);
+    @include pixelize($disc, $colors);
   }
 
   &.is-circle li::before {
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
+    font-size: 2px;
     content: "";
 
-    @include pixelize($circle, $colors, 2px);
+    @include pixelize($circle, $colors);
   }
 }
diff --git a/scss/elements/radios.scss b/scss/elements/radios.scss
@@ -35,9 +35,10 @@
     position: absolute;
     top: -2px;
     left: -20px;
+    font-size: 2px;
     content: "";
 
-    @include pixelize($radio, $colors, 2px);
+    @include pixelize($radio, $colors);
   }
 
   &:checked:hover,
@@ -48,6 +49,6 @@
   }
 
   &:checked:focus + span::before {
-    @include pixelize($radio-checked-focus, $colors, 2px);
+    @include pixelize($radio-checked-focus, $colors);
   }
 }
diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
@@ -23,119 +23,113 @@
 .nes-icon {
   position: relative;
   display: inline-block;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
 
-  @mixin setup($px) {
-    $size: $px * 16;
-
-    width: $size;
-    height: $size;
-
-    &::before {
-      position: absolute;
-      top: $px * -1;
-      left: $px * -1;
-      display: block;
-      width: $size;
-      height: $size;
-      content: "";
-      background: transparent;
-    }
-
-    &.heart::before {
-      @include pixelize($icon-heart, $icon-heart-colors, $px);
-    }
-    &.heart.is-empty::before {
-      @include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
-    }
-
-    &.star::before {
-      @include pixelize($icon-star, $icon-star-colors, $px);
-    }
-    &.star.is-empty::before {
-      @include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
-    }
-    &.star.is-half::before {
-      @include pixelize($icon-star-half, $icon-star-colors, $px);
-    }
-    &.star.is-transparent::before {
-      @include pixelize($icon-star-transparent, $icon-star-colors, $px);
-    }
-
-    &.trophy::before {
-      @include pixelize($icon-trophy, $icon-trophy-colors, $px);
-    }
-    &.trophy.is-empty::before {
-      @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
-    }
-
-    &.like::before {
-      @include pixelize($icon-like, $icon-like-colors, $px);
-    }
-    &.like.is-empty::before {
-      @include pixelize($icon-like-empty, $icon-like-empty-colors, $px);
-    }
-
-    &.twitter::before {
-      @include pixelize($icon-twitter, $icon-twitter-colors, $px);
-    }
-
-    &.facebook::before {
-      @include pixelize($icon-facebook, $icon-facebook-colors, $px);
-    }
-
-    &.github::before {
-      @include pixelize($icon-github, $icon-github-colors, $px);
-    }
-
-    &.youtube::before {
-      @include pixelize($icon-youtube, $icon-youtube-colors, $px);
-    }
-
-    &.close::before {
-      @include pixelize($icon-close, $icon-close-colors, $px);
-    }
-
-    &.google::before {
-      @include pixelize($icon-google, $icon-google-colors, $px);
-    }
-
-    &.medium::before {
-      @include pixelize($icon-medium, $icon-medium-colors, $px);
-    }
-
-    &.twitch::before {
-      @include pixelize($icon-twitch, $icon-twitch-colors, $px);
-    }
-
-    &.reddit::before {
-      @include pixelize($icon-reddit, $icon-reddit-colors, $px);
-    }
-
-    &.whatsapp::before {
-      @include pixelize($icon-whatsapp, $icon-whatsapp-colors, $px);
-    }
-
-    &.gmail::before {
-      @include pixelize($icon-gmail, $icon-gmail-colors, $px);
-    }
-
-    &.linkedin::before {
-      @include pixelize($icon-linkedin, $icon-linkedin-colors, $px);
-    }
-  }
-
+  // font size dictates pixel size, everything will adjust
   // default
-  @include setup(2px);
+  font-size: 2px;
 
   &.is-small {
-    @include setup(1px);
+    font-size: 1px;
   }
 
   &.is-medium {
-    @include setup(3px);
+    font-size: 3px;
   }
 
   &.is-large {
-    @include setup(4px);
+    font-size: 4px;
+  }
+
+  &::before {
+    position: absolute;
+    top: -1em;
+    left: -1em;
+    display: block;
+    content: "";
+    background: transparent;
+  }
+
+  &.heart::before {
+    @include pixelize($icon-heart, $icon-heart-colors);
+  }
+  &.heart.is-empty::before {
+    @include pixelize($icon-heart-empty, $icon-heart-empty-colors);
+  }
+
+  &.star::before {
+    @include pixelize($icon-star, $icon-star-colors);
+  }
+  &.star.is-empty::before {
+    @include pixelize($icon-star-empty, $icon-star-empty-colors);
+  }
+  &.star.is-half::before {
+    @include pixelize($icon-star-half, $icon-star-colors);
+  }
+  &.star.is-transparent::before {
+    @include pixelize($icon-star-transparent, $icon-star-colors);
+  }
+
+  &.trophy::before {
+    @include pixelize($icon-trophy, $icon-trophy-colors);
+  }
+  &.trophy.is-empty::before {
+    @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors);
+  }
+
+  &.like::before {
+    @include pixelize($icon-like, $icon-like-colors);
+  }
+  &.like.is-empty::before {
+    @include pixelize($icon-like-empty, $icon-like-empty-colors);
+  }
+
+  &.twitter::before {
+    @include pixelize($icon-twitter, $icon-twitter-colors);
+  }
+
+  &.facebook::before {
+    @include pixelize($icon-facebook, $icon-facebook-colors);
+  }
+
+  &.github::before {
+    @include pixelize($icon-github, $icon-github-colors);
+  }
+
+  &.youtube::before {
+    @include pixelize($icon-youtube, $icon-youtube-colors);
+  }
+
+  &.close::before {
+    @include pixelize($icon-close, $icon-close-colors);
+  }
+
+  &.google::before {
+    @include pixelize($icon-google, $icon-google-colors);
+  }
+
+  &.medium::before {
+    @include pixelize($icon-medium, $icon-medium-colors);
+  }
+
+  &.twitch::before {
+    @include pixelize($icon-twitch, $icon-twitch-colors);
+  }
+
+  &.reddit::before {
+    @include pixelize($icon-reddit, $icon-reddit-colors);
+  }
+
+  &.whatsapp::before {
+    @include pixelize($icon-whatsapp, $icon-whatsapp-colors);
+  }
+
+  &.gmail::before {
+    @include pixelize($icon-gmail, $icon-gmail-colors);
+  }
+
+  &.linkedin::before {
+    @include pixelize($icon-linkedin, $icon-linkedin-colors);
   }
 }
diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss
@@ -1,5 +1,4 @@
 .nes-ash {
-  $px: 6px;
   // prettier-ignore
   $ash-colors: (#f8f8ff, #ff614e, #007f7f,
   #181818, #ffe3c5, #426adb, #4169e1);
@@ -24,16 +23,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 14;
-  height: $px * 15;
+  width: calc(1em * 14);
+  height: calc(1em * 15);
+  font-size: 6px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($ash, $ash-colors, $px);
+    @include pixelize($ash, $ash-colors);
   }
 }
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
@@ -1,5 +1,4 @@
 .nes-bcrikko {
-  $px: 4px;
   $bcrikko-colors: (#333, #f9f2d7, #c5090c, #fff);
 
   // prettier-ignore
@@ -24,16 +23,17 @@
 
   position: relative;
   display: inline-block;
-  width: $px * 16;
-  height: $px * 16;
+  width: calc(1em * 16);
+  height: calc(1em * 16);
+  font-size: 4px;
 
   &::before {
     position: absolute;
-    top: $px * -1;
-    left: $px * -1;
+    top: -1em;
+    left: -1em;
     content: "";
     background: transparent;
 
-    @include pixelize($bcrikko, $bcrikko-colors, $px);
+    @include pixelize($bcrikko, $bcrikko-colors);
   }
 }