feat(component): Inserting lists with examples

Inserting tag <ul> to implment list, with two examples

#179

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-circle">
+          <li>Test1</li>
+          <li>Test2</li>
+          <li>Test3</li>
+          <li>Test4</li>
+        </ul>
+      </div>
+
+      <div class="lists">
+        <ul class="nes-list is-arrow">
+          <li>Test1</li>
+          <li>Test2</li>
+          <li>Test3</li>
+          <li>Test4</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,47 @@
+.nes-list {
+  $ball: (
+    (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)
+  );
+
+  $arrow: (
+    (0, 0, 0, 1, 1, 0, 0, 0),
+    (0, 0, 0, 1, 1, 1, 0, 0),
+    (0, 0, 0, 1, 1, 1, 1, 0),
+    (0, 0, 0, 1, 1, 1, 1, 0),
+    (0, 0, 0, 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;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  & li {
+    position: relative;
+  }
+
+  &.is-circle li::before {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: -20px;
+    content: "";
+
+    @include pixelize($ball, $colors, 2px);
+  }
+
+  &.is-arrow li::before {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: -20px;
+    content: "";
+
+    @include pixelize($arrow, $colors, 2px);
+  }
+}