mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-31 01:39:50 +02:00
@@ -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
84
scss/form/checkboxes.scss
Normal 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
54
scss/form/radios.scss
Normal 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);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user