mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 09:56:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Links selectors

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 11:18:12 +07:00
parent f1bde7f7f7
commit ff30e814ec
17 changed files with 89 additions and 460 deletions
Download patch file Download diff file Expand all files Collapse all files

137
css/pico.slim.css
View file

@ -634,11 +634,8 @@ a,
-webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration);
}
a[aria-current], a:hover, a:active, a:focus,
[role=link][aria-current],
[role=link]:hover,
[role=link]:active,
[role=link]:focus {
a:is([aria-current], :hover, :active, :focus),
[role=link]:is([aria-current], :hover, :active, :focus) {
--color: var(--primary-hover);
--text-decoration: underline;
}
@ -650,11 +647,8 @@ a.secondary,
[role=link].secondary {
--color: var(--secondary);
}
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
[role=link].secondary[aria-current],
[role=link].secondary:hover,
[role=link].secondary:active,
[role=link].secondary:focus {
a.secondary:is([aria-current], :hover, :active, :focus),
[role=link].secondary:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
a.secondary:focus,
@ -665,11 +659,8 @@ a.contrast,
[role=link].contrast {
--color: var(--contrast);
}
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
[role=link].contrast[aria-current],
[role=link].contrast:hover,
[role=link].contrast:active,
[role=link].contrast:focus {
a.contrast:is([aria-current], :hover, :active, :focus),
[role=link].contrast:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}
a.contrast:focus,
@ -715,61 +706,7 @@ h6 {
--color: var(--h6-color);
}
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
blockquote ~ h1,
blockquote ~ h2,
blockquote ~ h3,
blockquote ~ h4,
blockquote ~ h5,
blockquote ~ h6,
dl ~ h1,
dl ~ h2,
dl ~ h3,
dl ~ h4,
dl ~ h5,
dl ~ h6,
figure ~ h1,
figure ~ h2,
figure ~ h3,
figure ~ h4,
figure ~ h5,
figure ~ h6,
form ~ h1,
form ~ h2,
form ~ h3,
form ~ h4,
form ~ h5,
form ~ h6,
ol ~ h1,
ol ~ h2,
ol ~ h3,
ol ~ h4,
ol ~ h5,
ol ~ h6,
p ~ h1,
p ~ h2,
p ~ h3,
p ~ h4,
p ~ h5,
p ~ h6,
pre ~ h1,
pre ~ h2,
pre ~ h3,
pre ~ h4,
pre ~ h5,
pre ~ h6,
table ~ h1,
table ~ h2,
table ~ h3,
table ~ h4,
table ~ h5,
table ~ h6,
ul ~ h1,
ul ~ h2,
ul ~ h3,
ul ~ h4,
ul ~ h5,
ul ~ h6 {
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
margin-top: var(--typography-spacing-vertical);
}
@ -1292,19 +1229,13 @@ textarea {
font-weight: var(--font-weight);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--background-color: var(--form-element-active-background-color);
}
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
--border-color: var(--form-element-active-border-color);
}
@ -1322,9 +1253,7 @@ textarea[disabled] {
opacity: var(--form-element-disabled-opacity);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid],
select:not([type=checkbox]):not([type=radio])[aria-invalid],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-start: var(--form-element-spacing-horizontal);
@ -1335,50 +1264,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
background-size: 1rem auto;
background-repeat: no-repeat;
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-image: var(--icon-valid);
}
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
background-image: var(--icon-invalid);
}
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
:where(input, select, textarea)[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
}
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
:where(input, select, textarea)[aria-invalid=false]:active, :where(input, select, textarea)[aria-invalid=false]:focus {
--border-color: var(--form-element-valid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}
input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
:where(input, select, textarea)[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
}
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
:where(input, select, textarea)[aria-invalid=true]:active, :where(input, select, textarea)[aria-invalid=true]:focus {
--border-color: var(--form-element-invalid-active-border-color);
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
background-position: center left 0.75rem;
}
@ -1418,9 +1325,7 @@ select:not([multiple]):not([size]) {
background-position: center left 0.75rem;
}
input + small,
select + small,
textarea + small {
:where(input, select, textarea) + small {
display: block;
width: 100%;
margin-top: calc(var(--spacing) * -0.75);
@ -1428,7 +1333,7 @@ textarea + small {
color: var(--muted-color);
}
label > input, label > select, label > textarea {
label > :where(input, select, textarea) {
margin-top: calc(var(--spacing) * 0.25);
}