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

feat(form): add "is-disabled" class with form

Browse Source
This commit is contained in:
markcytian 2021-05-11 13:20:30 +08:00
parent 444faf05d1
commit c4aec38674
4 changed files with 78 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
scss/form/checkboxes.scss
View File

@ -103,4 +103,32 @@
color: $color-white;
}
}
&.is-disabled {
$color: map-get($disabled-colors, "normal");
$colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+ span {
color: $color;
cursor: not-allowed;
}
/* stylelint-disable-next-line no-descending-specificity */
+ span::before {
color: $color;
cursor: not-allowed;
}
/* stylelint-disable-next-line no-descending-specificity */
&:checked + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
color: $color;
}
&:checked:focus + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
color: $color;
}
}
}

6
scss/form/inputs.scss
View File

@ -28,6 +28,12 @@
&.is-error {
@include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
}
&.is-disabled {
@include border-style(map-get($disabled-colors, "normal"), map-get($disabled-colors, "shadow"));
color: map-get($disabled-colors, "normal");
cursor: not-allowed;
}
}
.nes-field {

35
scss/form/radios.scss
View File

@ -73,4 +73,39 @@
color: $color-white;
}
}
&.is-disabled {
$color: map-get($disabled-colors, "normal");
$colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+ span {
color: $color;
cursor: not-allowed;
}
/* stylelint-disable-next-line no-descending-specificity */
+ span::before {
color: $color;
cursor: not-allowed;
}
&:checked:hover,
&:checked:focus {
& + span::before {
animation: unset;
}
}
/* stylelint-disable-next-line no-descending-specificity */
&:checked + span::before {
@include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
color: $color;
}
&:checked:focus + span::before {
@include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
color: $color;
}
}
}

10
scss/form/selects.scss
View File

@ -50,7 +50,8 @@
"dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
"success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
"warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
"error" map-get($error-colors, "normal") map-get($error-colors, "hover");
"error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
"disable" map-get($disabled-colors, "normal") map-get($disabled-colors, "shadow");
@each $type in $types {
&.is-#{nth($type, 1)} {
$color: nth($type, 2);
@ -66,4 +67,11 @@
}
}
}
&.is-disabled {
@extend .is-disable;
select {
color: map-get($disabled-colors, "normal");
cursor: not-allowed;
}
}
}