feat(component): Changing examples

Changing lists examples to only two #179
nostalgic-css · Dec 13, 2018 · 2de0fb6 · 2de0fb6
1 parent 22657a9
commit 2de0fb6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -154,28 +154,19 @@ <h2 class="title">Balloons</h2>
       <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>
+          <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>Test1</li>
-          <li>Test2</li>
-          <li>Test3</li>
-          <li>Test4</li>
-        </ul>
-      </div>
-
-      <div class="lists">
-        <ul class="nes-list is-square">
-          <li>Test1</li>
-          <li>Test2</li>
-          <li>Test3</li>
-          <li>Test4</li>
+          <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>

diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
@@ -16,50 +16,29 @@
     (0, 0, 1, 1, 1, 1, 0, 0),
     (0, 0, 0, 1, 1, 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"));
 
   list-style-type: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
 
   & li {
     position: relative;
   }
 
   &.is-disc li::before {
     position: absolute;
-    top: calc(50% - 10px);
-    left: -20px;
+    top: calc(50% - 8px);
+    left: -22px;
     content: "";
 
     @include pixelize($disc, $colors, 2px);
   }
 
   &.is-circle li::before {
     position: absolute;
-    top: calc(50% - 10px);
-    left: -20px;
+    top: calc(50% - 8px);
+    left: -22px;
     content: "";
 
     @include pixelize($circle, $colors, 2px);
   }
-
-  &.is-square li::before {
-    position: absolute;
-    top: calc(50% - 10px);
-    left: -20px;
-    content: "";
-
-    @include pixelize($square, $colors, 2px);
-  }
 }