mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-03 11:02:43 +02:00
Code Issues Releases Wiki Activity

feat(component): Changing lists

Browse Source 
Changing lists to more generic design

#179
This commit is contained in:
lucas.reis
2018-12-12 21:23:53 -02:00
parent 4f40d70ead
commit 54765eeaee
2 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@@ -152,6 +152,15 @@
<section class="nes-container with-title"> <section class="nes-container with-title">
<h2 class="title">Lists</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>
</ul>
</div>
<div class="lists"> <div class="lists">
<ul class="nes-list is-circle"> <ul class="nes-list is-circle">
<li>Test1</li> <li>Test1</li>
@@ -162,16 +171,7 @@
</div> </div>
<div class="lists"> <div class="lists">
<ul class="nes-list is-arrow"> <ul class="nes-list is-square">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</div>
<div class="lists">
<ul class="nes-list is-pointer">
<li>Test1</li> <li>Test1</li>
<li>Test2</li> <li>Test2</li>
<li>Test3</li> <li>Test3</li>

51
scss/elements/lists.scss
View File

@@ -1,5 +1,5 @@
.nes-list { .nes-list {
$ball: ( $disc: (
(0, 0, 0, 1, 1, 0, 0, 0), (0, 0, 0, 1, 1, 0, 0, 0),
(0, 0, 1, 1, 1, 1, 0, 0), (0, 0, 1, 1, 1, 1, 0, 0),
(0, 1, 1, 1, 1, 1, 1, 0), (0, 1, 1, 1, 1, 1, 1, 0),
@@ -8,23 +8,22 @@
(0, 0, 0, 1, 1, 0, 0, 0) (0, 0, 0, 1, 1, 0, 0, 0)
); );
$arrow: ( $circle: (
(0, 0, 0, 1, 1, 0, 0, 0), (0, 0, 0, 1, 1, 0, 0, 0),
(0, 0, 0, 1, 1, 1, 0, 0), (0, 0, 1, 1, 1, 1, 0, 0),
(0, 0, 0, 1, 1, 1, 1, 0), (0, 1, 1, 0, 0, 1, 1, 0),
(0, 0, 0, 1, 1, 1, 1, 0), (0, 1, 1, 0, 0, 1, 1, 0),
(0, 0, 0, 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)
); );
$pointer: ( $square: (
(1, 1, 1, 0, 0, 0, 0, 0), (0, 1, 1, 1, 1, 1, 1, 0),
(0, 1, 1, 1, 0, 0, 0, 0), (0, 1, 1, 1, 1, 1, 1, 0),
(0, 0, 1, 1, 1, 0, 0, 0), (0, 1, 1, 1, 1, 1, 1, 0),
(0, 0, 0, 1, 1, 1, 0, 0), (0, 1, 1, 1, 1, 1, 1, 0),
(0, 0, 1, 1, 1, 0, 0, 0), (0, 1, 1, 1, 1, 1, 1, 0),
(0, 1, 1, 1, 0, 0, 0, 0), (0, 1, 1, 1, 1, 1, 1, 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"));
@@ -37,30 +36,30 @@
position: relative; position: relative;
} }
&.is-disc li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($disc, $colors, 2px);
}
&.is-circle li::before { &.is-circle li::before {
position: absolute; position: absolute;
top: calc(50% - 10px); top: calc(50% - 10px);
left: -20px; left: -20px;
content: ""; content: "";
@include pixelize($ball, $colors, 2px); @include pixelize($circle, $colors, 2px);
} }
&.is-arrow li::before { &.is-square li::before {
position: absolute; position: absolute;
top: calc(50% - 10px); top: calc(50% - 10px);
left: -20px; left: -20px;
content: ""; content: "";
@include pixelize($arrow, $colors, 2px); @include pixelize($square, $colors, 2px);
}
&.is-pointer li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($pointer, $colors, 2px);
} }
} }