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
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue