Merge pull request #396 from nostalgic-css/add-list-is-dark

Add list is dark

docs/script.js

@@ -261,7 +261,27 @@ const sampleCollection = [
     <li>Thou hast had a good afternoon</li>
     <li>Good night.</li>
   </ul>
-</div>`,
+</div>
+
+<section class="nes-container is-dark">
+  <div class="lists">
+    <ul class="nes-list is-disc is-dark">
+      <li>Good morning.</li>
+      <li>Thou hast had a good night's sleep, I hope.</li>
+      <li>Thou hast had a good afternoon</li>
+      <li>Good night.</li>
+    </ul>
+  </div>
+
+  <div class="lists">
+    <ul class="nes-list is-circle is-dark">
+      <li>Good morning.</li>
+      <li>Thou hast had a good night's sleep, I hope.</li>
+      <li>Thou hast had a good afternoon</li>
+      <li>Good night.</li>
+    </ul>
+  </div>
+</section>`,
   },
   {
     title: 'tables',

scss/elements/lists.scss

@@ -1,3 +1,18 @@
+@mixin list-before(
+  $class,
+  $disc-or-circle,
+  $colors: ($base-color, map-get($default-colors, "shadow"))
+) {
+  &.is-#{$class} li::before {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: -22px;
+    content: "";
+
+    @include pixelize(2px, $disc-or-circle, $colors);
+  }
+}
+
 .nes-list {
   // prettier-ignore
   $disc: (
@@ -18,7 +33,6 @@
     (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;
 
@@ -26,21 +40,16 @@
     position: relative;
   }
 
-  &.is-disc li::before {
+  @include list-before("disc", $disc);
-    position: absolute;
+  @include list-before("circle", $circle);
-    top: calc(50% - 8px);
-    left: -22px;
-    content: "";
 
-    @include pixelize(2px, $disc, $colors);
+  &.is-dark {
-  }
+    $dark-colors: ($background-color, $base-color);
+    @include list-before("disc", $disc, $dark-colors);
+    @include list-before("circle", $circle, $dark-colors);
 
-  &.is-circle li::before {
+    li {
-    position: absolute;
+      color: $color-white;
-    top: calc(50% - 8px);
+    }
-    left: -22px;
-    content: "";
-
-    @include pixelize(2px, $circle, $colors);
   }
 }

story/lists/lists.template.js

@@ -1,7 +1,8 @@
-import { radios } from '@storybook/addon-knobs';
+import { radios, boolean } from '@storybook/addon-knobs';
 import classNames from 'classnames';
 
 export default () => {
+  const isDark = boolean('is-dark', false);
   const listOptions = radios('List Type', {
     'is-disc': 'is-disc',
     'is-circle': 'is-circle',
@@ -9,6 +10,9 @@ export default () => {
 
   const listClasses = classNames(
     'nes-list',
+    {
+      'is-dark': isDark,
+    },
     listOptions,
   );