mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-19 04:21:22 +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
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; 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 { &.is-error {
@include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover")); @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 { .nes-field {

35
scss/form/radios.scss
View File

@@ -73,4 +73,39 @@
color: $color-white; 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"), "dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
"success" map-get($success-colors, "normal") map-get($success-colors, "hover"), "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
"warning" map-get($warning-colors, "normal") map-get($warning-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 { @each $type in $types {
&.is-#{nth($type, 1)} { &.is-#{nth($type, 1)} {
$color: nth($type, 2); $color: nth($type, 2);
@@ -66,4 +67,11 @@
} }
} }
} }
&.is-disabled {
@extend .is-disable;
select {
color: map-get($disabled-colors, "normal");
cursor: not-allowed;
}
}
} }