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

feat(component): Inserting one more example list

Browse Source 
Inserting a pointer list to the lists component

#179
This commit is contained in:
lucas.reis
2018-12-12 20:42:13 -02:00
parent 2e4ff795a5
commit 4fd118fa88
2 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@@ -169,6 +169,15 @@
<li>Test4</li> <li>Test4</li>
</ul> </ul>
</div> </div>
<div class="lists">
<ul class="nes-list is-pointer">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
</section> </section>
<section class="nes-container with-title"> <section class="nes-container with-title">

19
scss/elements/lists.scss
View File

@@ -16,6 +16,16 @@
(0, 0, 0, 1, 1, 1, 0, 0), (0, 0, 0, 1, 1, 1, 0, 0),
(0, 0, 0, 1, 1, 0, 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)
);
$colors: ($base-color, map-get($default-colors, "shadow")); $colors: ($base-color, map-get($default-colors, "shadow"));
list-style-type: none; list-style-type: none;
@@ -44,4 +54,13 @@
@include pixelize($arrow, $colors, 2px); @include pixelize($arrow, $colors, 2px);
} }
&.is-pointer li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($pointer, $colors, 2px);
}
} }