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

feat(component): Inserting lists with examples

Browse Source 
Inserting tag <ul> to implment list, with two examples

#179
This commit is contained in:
lucas.reis
2018-12-12 20:26:00 -02:00
parent 3d0dbfae7f
commit 2e4ff795a5
4 changed files with 89 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/elements/_index.scss
View File

@@ -4,6 +4,7 @@
@import "containers.scss";
@import "radios.scss";
@import "checkboxes.scss";
@import "lists.scss";
@import "balloons.scss";
@import "tables.scss";
@import "progress.scss";

47
scss/elements/lists.scss Normal file
View File

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