1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-31 01:39:50 +02:00

chore(form): moved radios and checkboxes to form folder

#219
This commit is contained in:
Igor Guastalla de Lima
2019-01-30 19:57:24 -02:00
parent b7b9a37203
commit 596505fb1e
4 changed files with 2 additions and 2 deletions

View File

@@ -1,4 +1,6 @@
@charset "utf-8";
@import "inputs.scss";
@import "radios.scss";
@import "checkboxes.scss";
@import "selects.scss";

84
scss/form/checkboxes.scss Normal file
View File

@@ -0,0 +1,84 @@
.nes-checkbox {
// prettier-ignore
$checkbox: (
(1,1,1,1,1,1,1,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,1,1,1,1,1,1,1,0,0),
);
// prettier-ignore
$checkbox-checked: (
(1,1,1,1,1,1,1,0,1,1),
(1,0,0,0,0,0,0,1,1,1),
(1,0,0,0,0,0,1,1,0,0),
(1,1,0,0,0,1,1,0,0,0),
(1,1,1,0,1,1,0,1,0,0),
(1,0,1,1,1,0,0,1,0,0),
(1,0,0,1,0,0,0,1,0,0),
(1,1,1,1,1,1,1,1,0,0)
);
// prettier-ignore
$checkbox-focus: (
(2,2,2,2,2,2,2,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,2,2,2,2,2,2,2,0,0),
);
// prettier-ignore
$checkbox-checked-focus: (
(2,2,2,2,2,2,2,0,1,1),
(2,0,0,0,0,0,0,1,1,1),
(1,0,0,0,0,0,1,1,0,0),
(1,1,0,0,0,1,1,0,0,0),
(2,1,1,0,1,1,0,2,0,0),
(2,0,1,1,1,0,0,2,0,0),
(2,0,0,1,0,0,0,2,0,0),
(2,2,2,2,2,2,2,2,0,0)
);
$colors: ($base-color, map-get($default-colors, "shadow"));
margin-left: 28px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
& + span {
position: relative;
cursor: $cursor-click-url, pointer;
}
& + span::before,
&:checked + span::before {
position: absolute;
top: -3px;
left: -28px;
font-size: 2px;
content: "";
}
// prettier-ignore
& + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox, $colors);
}
// prettier-ignore
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox-focus, $colors);
}
&:checked + span::before {
@include pixelize($checkbox-checked, $colors);
}
&:checked:focus + span::before {
@include pixelize($checkbox-checked-focus, $colors);
}
}

54
scss/form/radios.scss Normal file
View File

@@ -0,0 +1,54 @@
.nes-radio {
// prettier-ignore
$radio: (
(1,1,0,0,0,0),
(1,1,1,1,0,0),
(1,1,1,1,1,0),
(1,1,1,1,1,1),
(1,1,1,1,1,0),
(1,1,1,1,0,0),
(1,1,0,0,0,0),
);
// prettier-ignore
$radio-checked-focus: (
(2,2,0,0,0,0),
(2,2,2,2,0,0),
(2,2,2,2,2,0),
(2,2,2,2,2,2),
(2,2,2,2,2,0),
(2,2,2,2,0,0),
(2,2,0,0,0,0),
);
$colors: ($base-color, map-get($default-colors, "shadow"));
margin-right: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
& + span {
position: relative;
cursor: $cursor-click-url, pointer;
}
&:checked + span::before {
position: absolute;
top: -2px;
left: -20px;
font-size: 2px;
content: "";
@include pixelize($radio, $colors);
}
&:checked:hover,
&:checked:focus {
& + span::before {
animation: blink 1s infinite steps(1);
}
}
&:checked:focus + span::before {
@include pixelize($radio-checked-focus, $colors);
}
}