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

fix: fix pixelize for form elements

Browse Source 
fix #262
This commit is contained in:
BcRikko
2019-01-29 21:15:18 +09:00
parent 377286a5d1
commit 913766ad89
6 changed files with 32 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/base/variables.scss
View File

@@ -7,7 +7,7 @@ $background-color: $color-white;
$cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png); $cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
$cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png); $cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
$border-size: 0.25em; $border-size: 4px;
$default-colors: ( $default-colors: (
normal: $background-color, normal: $background-color,

34
scss/elements/lists.scss
View File

@@ -1,20 +1,22 @@
.nes-list { .nes-list {
// prettier-ignore
$disc: ( $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),
(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,1,1,1,1,0,0),
(0, 0, 0, 1, 1, 0, 0, 0) (0,0,0,1,1,0,0,0)
); );
// prettier-ignore
$circle: ( $circle: (
(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, 0, 0, 1, 1, 0), (0,1,1,0,0,1,1,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,1,1,1,1,0,0),
(0, 0, 0, 1, 1, 0, 0, 0) (0,0,0,1,1,0,0,0)
); );
$colors: ($base-color, map-get($default-colors, "shadow")); $colors: ($base-color, map-get($default-colors, "shadow"));
@@ -28,19 +30,17 @@
position: absolute; position: absolute;
top: calc(50% - 8px); top: calc(50% - 8px);
left: -22px; left: -22px;
font-size: 2px;
content: ""; content: "";
@include pixelize($disc, $colors); @include pixelize(2px, $disc, $colors);
} }
&.is-circle li::before { &.is-circle li::before {
position: absolute; position: absolute;
top: calc(50% - 8px); top: calc(50% - 8px);
left: -22px; left: -22px;
font-size: 2px;
content: ""; content: "";
@include pixelize($circle, $colors); @include pixelize(2px, $circle, $colors);
} }
} }

9
scss/form/checkboxes.scss
View File

@@ -62,23 +62,22 @@
position: absolute; position: absolute;
top: -3px; top: -3px;
left: -28px; left: -28px;
font-size: 2px;
content: ""; content: "";
} }
// prettier-ignore // prettier-ignore
& + span::before { /* stylelint-disable-line no-descending-specificity */ & + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox, $colors); @include pixelize(2px, $checkbox, $colors);
} }
// prettier-ignore // prettier-ignore
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */ &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox-focus, $colors); @include pixelize(2px, $checkbox-focus, $colors);
} }
&:checked + span::before { &:checked + span::before {
@include pixelize($checkbox-checked, $colors); @include pixelize(2px, $checkbox-checked, $colors);
} }
&:checked:focus + span::before { &:checked:focus + span::before {
@include pixelize($checkbox-checked-focus, $colors); @include pixelize(2px, $checkbox-checked-focus, $colors);
} }
} }

5
scss/form/radios.scss
View File

@@ -35,10 +35,9 @@
position: absolute; position: absolute;
top: -2px; top: -2px;
left: -20px; left: -20px;
font-size: 2px;
content: ""; content: "";
@include pixelize($radio, $colors); @include pixelize(2px, $radio, $colors);
} }
&:checked:hover, &:checked:hover,
@@ -49,6 +48,6 @@
} }
&:checked:focus + span::before { &:checked:focus + span::before {
@include pixelize($radio-checked-focus, $colors); @include pixelize(2px, $radio-checked-focus, $colors);
} }
} }

3
scss/form/selects.scss
View File

@@ -31,12 +31,11 @@
} }
&::after { &::after {
@include pixelize($dropdown, $colors); @include pixelize(3px, $dropdown, $colors);
position: absolute; position: absolute;
top: calc(50% - 11px); top: calc(50% - 11px);
right: 36px; right: 36px;
font-size: 3px;
pointer-events: none; pointer-events: none;
content: ""; content: "";
} }

14
scss/utilities/icon-mixin.scss
View File

@@ -1,4 +1,4 @@
@mixin pixelize($matrix, $colors, $default-color: null) { @mixin pixelize($size, $matrix, $colors, $default-color: null) {
$ret: ""; $ret: "";
$moz: ""; $moz: "";
@if ($default-color == null) { @if ($default-color == null) {
@@ -37,18 +37,18 @@
$color: nth($colors, $dot); $color: nth($colors, $dot);
@if $color == $default-color { @if $color == $default-color {
$ret: $ret + $j + "em " + $i + "em"; $ret: $ret + ($j * $size) + " " + ($i * $size);
$moz: $moz + $j + "em " + $i + "em 0 0.020em"; $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px";
} @else { } @else {
$ret: $ret + $j + "em " + $i + "em " + $color; $ret: $ret + ($j * $size) + " " + ($i * $size) + "" + $color;
$moz: $moz + $j + "em " + $i + "em 0 0.020em " + $color; $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px " + $color;
} }
} }
} }
} }
width: 1em; width: $size;
height: 1em; height: $size;
color: $default-color; color: $default-color;
box-shadow: unquote($ret); box-shadow: unquote($ret);
@-moz-document url-prefix() { @-moz-document url-prefix() {