Merge pull request #263 from Ilyeo/feature/add-dark-mode-to-checkbox

[#255] Dark mode for checkbox
nostalgic-css · Feb 6, 2019 · d200527 · d200527
2 parents e26de68 + e33c77f
commit d200527
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/docs/inputs.stories.js b/docs/inputs.stories.js
@@ -14,11 +14,19 @@ stories.add('input.radio', () => `
         <input type="radio" class="nes-radio" name="answer" />
         <span>No</span>
       </label>`)
-  .add('input.checkbox', () => `
-      <label>
-        <input type="checkbox" class="nes-checkbox" checked />
+  .add('input.checkbox', () => {
+    const selectedClass = radios('class', {
+      default: '',
+      'is-dark': 'is-dark',
+    }, '');
+
+    return (
+      `<label>
+        <input type="checkbox" class="nes-checkbox ${selectedClass}" checked />
         <span>Enable</span>
-      </label>`)
+      </label>`
+    );
+  })
   .add('input', () => {
     const selectedClass = radios('class', {
       default: '',

diff --git a/scss/form/checkboxes.scss b/scss/form/checkboxes.scss
@@ -46,6 +46,7 @@
     (2,2,2,2,2,2,2,2,0,0)
   );
   $colors: ($base-color, map-get($default-colors, "shadow"));
+  $colors-checkbox-dark: ($color-white, map-get($default-colors, "shadow"));
 
   margin-left: 28px;
   -webkit-appearance: none;
@@ -80,4 +81,24 @@
   &:checked:focus + span::before {
     @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
+  &.is-dark {
+    + span {
+      color: $color-white;
+    }
+    // prettier-ignore
+    + span::before { /* stylelint-disable-line no-descending-specificity */
+      color: $color-white;
+    }
+
+    &:checked + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
+
+      color: $color-white;
+    }
+    &:checked:focus + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
+
+      color: $color-white;
+    }
+  }
 }