Merge pull request nostalgic-css#182 from panoramix360/ul_lists

UL lists

docs/lists.stories.js

@@ -0,0 +1,20 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Lists', module);
+stories.addDecorator(withKnobs);
+
+stories.add('list', () => {
+  const selectedClass = radios('type', {
+    default: 'is-disc',
+    'is-circle': 'is-circle',
+  }, 'is-disc');
+  return `<ul class="nes-list ${selectedClass}">
+            <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>`;
+});

index.html

@@ -150,6 +150,27 @@ <h2 class="title">Balloons</h2>
       </div>
     </section>
 
+    <section class="nes-container with-title">
+      <h2 class="title">Lists</h2>
+      <div class="lists">
+        <ul class="nes-list is-disc">
+          <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">
+          <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>
+
     <section class="nes-container with-title">
       <h2 class="title">Table</h2>
       <div class="tables">

scss/elements/_index.scss

@@ -4,6 +4,7 @@
 @import "containers.scss";
 @import "radios.scss";
 @import "checkboxes.scss";
+@import "lists.scss";
 @import "balloons.scss";
 @import "tables.scss";
 @import "progress.scss";

scss/elements/lists.scss

@@ -0,0 +1,44 @@
+.nes-list {
+  $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)
+  );
+
+  $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($disc, $colors, 2px);
+  }
+
+  &.is-circle li::before {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: -22px;
+    content: "";
+
+    @include pixelize($circle, $colors, 2px);
+  }
+}