feat(component): Changing lists

Changing lists to more generic design #179
nostalgic-css · Dec 12, 2018 · 54765ee · 54765ee
1 parent 4f40d70
commit 54765ee
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -153,7 +153,7 @@ <h2 class="title">Balloons</h2>
     <section class="nes-container with-title">
       <h2 class="title">Lists</h2>
       <div class="lists">
-        <ul class="nes-list is-circle">
+        <ul class="nes-list is-disc">
           <li>Test1</li>
           <li>Test2</li>
           <li>Test3</li>
@@ -162,7 +162,7 @@ <h2 class="title">Lists</h2>
       </div>
 
       <div class="lists">
-        <ul class="nes-list is-arrow">
+        <ul class="nes-list is-circle">
           <li>Test1</li>
           <li>Test2</li>
           <li>Test3</li>
@@ -171,7 +171,7 @@ <h2 class="title">Lists</h2>
       </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
@@ -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-circle li::before {
+  &.is-disc li::before {
     position: absolute;
     top: calc(50% - 10px);
     left: -20px;
     content: "";
 
-    @include pixelize($ball, $colors, 2px);
+    @include pixelize($disc, $colors, 2px);
   }
 
-  &.is-arrow li::before {
+  &.is-circle li::before {
     position: absolute;
     top: calc(50% - 10px);
     left: -20px;
     content: "";
 
-    @include pixelize($arrow, $colors, 2px);
+    @include pixelize($circle, $colors, 2px);
   }
 
-  &.is-pointer li::before {
+  &.is-square li::before {
     position: absolute;
     top: calc(50% - 10px);
     left: -20px;
     content: "";
 
-    @include pixelize($pointer, $colors, 2px);
+    @include pixelize($square, $colors, 2px);
   }
 }