mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-31 09:41:47 +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

51
scss/elements/lists.scss
View File

@@ -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-disc li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($disc, $colors, 2px);
}
&.is-circle li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($ball, $colors, 2px);
@include pixelize($circle, $colors, 2px);
}
&.is-arrow li::before {
&.is-square li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($arrow, $colors, 2px);
}
&.is-pointer li::before {
position: absolute;
top: calc(50% - 10px);
left: -20px;
content: "";
@include pixelize($pointer, $colors, 2px);
@include pixelize($square, $colors, 2px);
}
}