From 54765eeaee638ac90f9eed6f63b1bb2aa0c333e0 Mon Sep 17 00:00:00 2001
From: "lucas.reis" <lucas.reis@radixeng.com.br>
Date: Wed, 12 Dec 2018 21:23:53 -0200
Subject: [PATCH] feat(component): Changing lists

Changing lists to more generic design

#179
---
 index.html               | 20 ++++++++--------
 scss/elements/lists.scss | 51 ++++++++++++++++++++--------------------
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 816ec4e..fb776a0 100644
--- a/index.html
+++ b/index.html
@@ -152,6 +152,15 @@
 
     <section class="nes-container with-title">
       <h2 class="title">Lists</h2>
+      <div class="lists">
+        <ul class="nes-list is-disc">
+          <li>Test1</li>
+          <li>Test2</li>
+          <li>Test3</li>
+          <li>Test4</li>
+        </ul>
+      </div>
+
       <div class="lists">
         <ul class="nes-list is-circle">
           <li>Test1</li>
@@ -162,16 +171,7 @@
       </div>
 
       <div class="lists">
-        <ul class="nes-list is-arrow">
-          <li>Test1</li>
-          <li>Test2</li>
-          <li>Test3</li>
-          <li>Test4</li>
-        </ul>
-      </div>
-
-      <div class="lists">
-        <ul class="nes-list is-pointer">
+        <ul class="nes-list is-square">
           <li>Test1</li>
           <li>Test2</li>
           <li>Test3</li>
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
index 9512b4b..ba55506 100644
--- a/scss/elements/lists.scss
+++ b/scss/elements/lists.scss
@@ -1,5 +1,5 @@
 .nes-list {
-  $ball: (
+  $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),
@@ -8,23 +8,22 @@
     (0, 0, 0, 1, 1, 0, 0, 0)
   );
 
-  $arrow: (
+  $circle: (
     (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, 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)
   );
 
-  $pointer: (
-    (1, 1, 1, 0, 0, 0, 0, 0),
-    (0, 1, 1, 1, 0, 0, 0, 0),
-    (0, 0, 1, 1, 1, 0, 0, 0),
-    (0, 0, 0, 1, 1, 1, 0, 0),
-    (0, 0, 1, 1, 1, 0, 0, 0),
-    (0, 1, 1, 1, 0, 0, 0, 0),
-    (1, 1, 1, 0, 0, 0, 0, 0)
+  $square: (
+    (0, 1, 1, 1, 1, 1, 1, 0),
+    (0, 1, 1, 1, 1, 1, 1, 0),
+    (0, 1, 1, 1, 1, 1, 1, 0),
+    (0, 1, 1, 1, 1, 1, 1, 0),
+    (0, 1, 1, 1, 1, 1, 1, 0),
+    (0, 1, 1, 1, 1, 1, 1, 0)
   );
   $colors: ($base-color, map-get($default-colors, "shadow"));
 
@@ -37,30 +36,30 @@
     position: relative;
   }
 
+  &.is-disc li::before {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: -20px;
+    content: "";
+
+    @include pixelize($disc, $colors, 2px);
+  }
+
   &.is-circle li::before {
     position: absolute;
     top: calc(50% - 10px);
     left: -20px;
     content: "";
 
-    @include pixelize($ball, $colors, 2px);
+    @include pixelize($circle, $colors, 2px);
   }
 
-  &.is-arrow li::before {
+  &.is-square li::before {
     position: absolute;
     top: calc(50% - 10px);
     left: -20px;
     content: "";
 
-    @include pixelize($arrow, $colors, 2px);
-  }
-
-  &.is-pointer li::before {
-    position: absolute;
-    top: calc(50% - 10px);
-    left: -20px;
-    content: "";
-
-    @include pixelize($pointer, $colors, 2px);
+    @include pixelize($square, $colors, 2px);
   }
 }