mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-01 12:10:10 +02:00
Code Issues Releases Wiki Activity

feat(component): Changing examples

Browse Source 
Changing lists examples to only two

#179
This commit is contained in:
lucas.reis
2018-12-13 12:09:39 -02:00
parent 22657a9074
commit 2de0fb6d4d
2 changed files with 12 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -154,28 +154,19 @@
<h2 class="title">Lists</h2> <h2 class="title">Lists</h2>
<div class="lists"> <div class="lists">
<ul class="nes-list is-disc"> <ul class="nes-list is-disc">
<li>Test1</li> <li>Good morning.</li>
<li>Test2</li> <li>Thou hast had a good night's sleep, I hope.</li>
<li>Test3</li> <li>Thou hast had a good afternoon</li>
<li>Test4</li> <li>Good night.</li>
</ul> </ul>
</div> </div>
<div class="lists"> <div class="lists">
<ul class="nes-list is-circle"> <ul class="nes-list is-circle">
<li>Test1</li> <li>Good morning.</li>
<li>Test2</li> <li>Thou hast had a good night's sleep, I hope.</li>
<li>Test3</li> <li>Thou hast had a good afternoon</li>
<li>Test4</li> <li>Good night.</li>
</ul>
</div>
<div class="lists">
<ul class="nes-list is-square">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul> </ul>
</div> </div>
</section> </section>

29
scss/elements/lists.scss
View File

@@ -16,21 +16,9 @@
(0, 0, 1, 1, 1, 1, 0, 0), (0, 0, 1, 1, 1, 1, 0, 0),
(0, 0, 0, 1, 1, 0, 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")); $colors: ($base-color, map-get($default-colors, "shadow"));
list-style-type: none; list-style-type: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
& li { & li {
position: relative; position: relative;
@@ -38,8 +26,8 @@
&.is-disc li::before { &.is-disc li::before {
position: absolute; position: absolute;
top: calc(50% - 10px); top: calc(50% - 8px);
left: -20px; left: -22px;
content: ""; content: "";
@include pixelize($disc, $colors, 2px); @include pixelize($disc, $colors, 2px);
@@ -47,19 +35,10 @@
&.is-circle li::before { &.is-circle li::before {
position: absolute; position: absolute;
top: calc(50% - 10px); top: calc(50% - 8px);
left: -20px; left: -22px;
content: ""; content: "";
@include pixelize($circle, $colors, 2px); @include pixelize($circle, $colors, 2px);
} }
&.is-square li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($square, $colors, 2px);
}
} }