fix: fix pixelize for form elements

fix #262
nostalgic-css · Feb 1, 2019 · 913766a · 913766a
1 parent 377286a
commit 913766a
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 35 deletions.
diff --git a/scss/base/variables.scss b/scss/base/variables.scss
@@ -7,7 +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;
+$border-size: 4px;
 
 $default-colors: (
   normal: $background-color,

diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
@@ -1,20 +1,22 @@
 .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)
-  );
+    (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)
+    (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"));
 
@@ -28,19 +30,17 @@
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($disc, $colors);
+    @include pixelize(2px, $disc, $colors);
   }
 
   &.is-circle li::before {
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($circle, $colors);
+    @include pixelize(2px, $circle, $colors);
   }
 }
diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss
@@ -62,23 +62,22 @@
     position: absolute;
     top: -3px;
     left: -28px;
-    font-size: 2px;
     content: "";
   }
 
   // prettier-ignore
   & + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox, $colors);
+    @include pixelize(2px, $checkbox, $colors);
   }
   // prettier-ignore
   &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox-focus, $colors);
+    @include pixelize(2px, $checkbox-focus, $colors);
   }
 
   &:checked + span::before {
-    @include pixelize($checkbox-checked, $colors);
+    @include pixelize(2px, $checkbox-checked, $colors);
   }
   &:checked:focus + span::before {
-    @include pixelize($checkbox-checked-focus, $colors);
+    @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
 }
diff --git a/scss/form/radios.scss b/scss/form/radios.scss
@@ -35,10 +35,9 @@
     position: absolute;
     top: -2px;
     left: -20px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($radio, $colors);
+    @include pixelize(2px, $radio, $colors);
   }
 
   &:checked:hover,
@@ -49,6 +48,6 @@
   }
 
   &:checked:focus + span::before {
-    @include pixelize($radio-checked-focus, $colors);
+    @include pixelize(2px, $radio-checked-focus, $colors);
   }
 }
diff --git a/scss/form/selects.scss b/scss/form/selects.scss
@@ -31,12 +31,11 @@
   }
 
   &::after {
-    @include pixelize($dropdown, $colors);
+    @include pixelize(3px, $dropdown, $colors);
 
     position: absolute;
     top: calc(50% - 11px);
     right: 36px;
-    font-size: 3px;
     pointer-events: none;
     content: "";
   }

diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss
@@ -1,4 +1,4 @@
-@mixin pixelize($matrix, $colors, $default-color: null) {
+@mixin pixelize($size, $matrix, $colors, $default-color: null) {
   $ret: "";
   $moz: "";
   @if ($default-color == null) {
@@ -37,18 +37,18 @@
 
         $color: nth($colors, $dot);
         @if $color == $default-color {
-          $ret: $ret + $j + "em " + $i + "em";
-          $moz: $moz + $j + "em " + $i + "em 0 0.020em";
+          $ret: $ret + ($j * $size) + " " + ($i * $size);
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px";
         } @else {
-          $ret: $ret + $j + "em " + $i + "em " + $color;
-          $moz: $moz + $j + "em " + $i + "em 0 0.020em " + $color;
+          $ret: $ret + ($j * $size) + " " + ($i * $size) + "" + $color;
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px " + $color;
         }
       }
     }
   }
 
-  width: 1em;
-  height: 1em;
+  width: $size;
+  height: $size;
   color: $default-color;
   box-shadow: unquote($ret);
   @-moz-document url-prefix() {