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:
Leonardo Matos 2022-01-23 13:34:38 -03:00 committed by GitHub
parent a018211b14
commit 7fa4a59073
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -174,20 +174,16 @@ textarea {
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
:where(select, textarea) {
&:is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
}
// Active & Focus
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
select,
textarea {
&:active,
&:focus {
:where(select, textarea) {
&:is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
}
@ -213,10 +209,7 @@ textarea {
}
// Aria-invalid
input,
select,
textarea {
:where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) {
&[aria-invalid] {
@if $enable-important {
@ -280,9 +273,7 @@ textarea {
}
[dir="rtl"] {
input,
select,
textarea {
:where(input, select, textarea) {
&:not([type="checkbox"]):not([type="radio"]) {
&[aria-invalid],
&[aria-invalid="true"],
@ -339,9 +330,7 @@ select {
}
// Helper
input,
select,
textarea {
:where(input, select, textarea) {
+ small {
display: block;
width: 100%;
@ -353,9 +342,7 @@ textarea {
// Styles for Input inside a label
label {
& > input,
& > select,
& > textarea {
> :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25);
}
}