mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 02:16:15 -04:00
Simpler/smaller selectors with :where :is
Note: https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility doesn't match current [browserlist](https://github.com/picocss/pico/blob/master/package.json#L98-L102) entirely, I will continue the PR checking same microoptin on other files if you agree we can avoid 100% support for following browsers: - Safari 13.1 0.530% - Samsung 14.0 2.258% - Samsung 13.0 0.198% - Internet Explorer 11 0.748% (just mentioning, not supported already as it can't handle CSS props) https://browserslist.dev/?q=Pj0gMC41JSwgbGFzdCAyIG1ham9yIHZlcnNpb25zLCBub3QgZGVhZA%3D%3D
This commit is contained in:
parent
a018211b14
commit
7fa4a59073
1 changed files with 8 additions and 21 deletions
|
@ -174,20 +174,16 @@ textarea {
|
||||||
|
|
||||||
// Active & Focus
|
// Active & Focus
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
||||||
select,
|
:where(select, textarea) {
|
||||||
textarea {
|
&:is(:active, :focus) {
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--background-color: var(--form-element-active-background-color);
|
--background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active & Focus
|
// Active & Focus
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
||||||
select,
|
:where(select, textarea) {
|
||||||
textarea {
|
&:is(:active, :focus) {
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--border-color: var(--form-element-active-border-color);
|
--border-color: var(--form-element-active-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -213,10 +209,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aria-invalid
|
// Aria-invalid
|
||||||
input,
|
:where(input, select, textarea) {
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
|
|
||||||
&:not([type="checkbox"]):not([type="radio"]) {
|
&:not([type="checkbox"]):not([type="radio"]) {
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
|
@ -280,9 +273,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
input,
|
:where(input, select, textarea) {
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
&:not([type="checkbox"]):not([type="radio"]) {
|
&:not([type="checkbox"]):not([type="radio"]) {
|
||||||
&[aria-invalid],
|
&[aria-invalid],
|
||||||
&[aria-invalid="true"],
|
&[aria-invalid="true"],
|
||||||
|
@ -339,9 +330,7 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper
|
// Helper
|
||||||
input,
|
:where(input, select, textarea) {
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
+ small {
|
+ small {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -353,9 +342,7 @@ textarea {
|
||||||
|
|
||||||
// Styles for Input inside a label
|
// Styles for Input inside a label
|
||||||
label {
|
label {
|
||||||
& > input,
|
> :where(input, select, textarea) {
|
||||||
& > select,
|
|
||||||
& > textarea {
|
|
||||||
margin-top: calc(var(--spacing) * 0.25);
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue