Conditionally lowered specificity of disabled inputs
Merged styles under conditions to trim the filesize a little bit and improve parsing.
This commit is contained in:
parent
826dab1ecd
commit
3bf8a25811
11
dist/mini-default.css
vendored
11
dist/mini-default.css
vendored
|
@ -778,11 +778,6 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled, input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
|
||||
border-color: #d32f2f;
|
||||
box-shadow: none;
|
||||
|
@ -851,11 +846,7 @@ a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus,
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled],
|
||||
a.button:disabled,
|
||||
a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled],
|
||||
a[role="button"]:disabled,
|
||||
a[role="button"][disabled], label[role="button"]:disabled, label[role="button"][disabled], [role="button"]:disabled, [role="button"][disabled] {
|
||||
input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
|
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
11
dist/mini-lite.css
vendored
11
dist/mini-lite.css
vendored
|
@ -746,11 +746,6 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled, input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
|
||||
border-color: #d32f2f;
|
||||
box-shadow: none;
|
||||
|
@ -819,11 +814,7 @@ a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus,
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled],
|
||||
a.button:disabled,
|
||||
a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled],
|
||||
a[role="button"]:disabled,
|
||||
a[role="button"][disabled], label[role="button"]:disabled, label[role="button"][disabled], [role="button"]:disabled, [role="button"][disabled] {
|
||||
input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
|
2
dist/mini-lite.min.css
vendored
2
dist/mini-lite.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -1212,3 +1212,4 @@
|
|||
- Refer to above list in regards to the #19 feature request.
|
||||
- Reworked complex `tab` module selectors to utilize the functionality of `:not(:first-of-type)` on `label` elements.
|
||||
- Updated `tab` selectors to use new, *loose* definitions, effectively making the module `0.04KB` lighter. Not a huge difference, but good enough due to the maintenance impact it has on the module, plus the consistency fixed for `.stacked`.
|
||||
- Moved `input_control`'s `disabled` styling to low-specificity behind the existing flag, saved another `0.05KB`, which is quite a big change. Parsing should also be faster than before. Good catch, **hugging cat**!
|
||||
|
|
|
@ -187,9 +187,11 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
|||
border-color: $input-focus-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
@if $input-high-specificity-selectors or $input-disabled-opacity != $button-disabled-opacity {
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
}
|
||||
&:invalid, &:focus:invalid{
|
||||
border-color: $input-invalid-border-color;
|
||||
|
@ -265,9 +267,21 @@ a[role="button"], label[role="button"], [role="button"] {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $button-disabled-opacity;
|
||||
@if $input-high-specificity-selectors or $input-disabled-opacity != $button-disabled-opacity {
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $button-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if not $input-high-specificity-selectors {
|
||||
@if $input-disabled-opacity == $button-disabled-opacity {
|
||||
input, textarea, select, button, .#{$button-class-name}, [role="button"] { // .button[disabled] is actually higher specificity than a.button, so no need for more than that
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $button-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $style-link-active-state {
|
||||
|
|
Loading…
Reference in a new issue