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

chore(button): Optimize selectors

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 13:53:51 +07:00
parent afda3f529b
commit 8300c0fcb7
13 changed files with 56 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

79
css/pico.css
View file

@ -967,105 +967,64 @@ input[type=reset]:focus,
0 0 0 var(--outline-width) var(--primary-focus);
}
button.secondary,
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset],
[role=button].secondary {
:is(button, input[type=submit], input[type=button], [role=button]).secondary,
input[type=reset] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
button.secondary:is([aria-current], :hover, :active, :focus),
input[type=submit].secondary:is([aria-current], :hover, :active, :focus),
input[type=button].secondary:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button].secondary:is([aria-current], :hover, :active, :focus) {
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
button.secondary:focus,
input[type=submit].secondary:focus,
input[type=button].secondary:focus,
input[type=reset]:focus,
[role=button].secondary:focus {
:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.contrast,
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
[role=button].contrast {
:is(button, input[type=submit], input[type=button], [role=button]).contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
button.contrast:is([aria-current], :hover, :active, :focus),
input[type=submit].contrast:is([aria-current], :hover, :active, :focus),
input[type=button].contrast:is([aria-current], :hover, :active, :focus),
input[type=reset].contrast:is([aria-current], :hover, :active, :focus),
[role=button].contrast:is([aria-current], :hover, :active, :focus) {
:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
button.contrast:focus,
input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
[role=button].contrast:focus {
:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
button.outline,
input[type=submit].outline,
input[type=button].outline,
input[type=reset].outline,
[role=button].outline {
:is(button, input[type=submit], input[type=button], [role=button]).outline,
input[type=reset].outline {
--background-color: transparent;
--color: var(--primary);
}
button.outline:is([aria-current], :hover, :active, :focus),
input[type=submit].outline:is([aria-current], :hover, :active, :focus),
input[type=button].outline:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus),
[role=button].outline:is([aria-current], :hover, :active, :focus) {
:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--background-color: transparent;
--color: var(--primary-hover);
}
button.outline.secondary,
input[type=submit].outline.secondary,
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
[role=button].outline.secondary {
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
input[type=reset].outline {
--color: var(--secondary);
}
button.outline.secondary:is([aria-current], :hover, :active, :focus),
input[type=submit].outline.secondary:is([aria-current], :hover, :active, :focus),
input[type=button].outline.secondary:is([aria-current], :hover, :active, :focus),
input[type=reset].outline.secondary:is([aria-current], :hover, :active, :focus),
[role=button].outline.secondary:is([aria-current], :hover, :active, :focus) {
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
--color: var(--secondary-hover);
}
button.outline.contrast,
input[type=submit].outline.contrast,
input[type=button].outline.contrast,
input[type=reset].outline.contrast,
[role=button].outline.contrast {
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast {
--color: var(--contrast);
}
button.outline.contrast:is([aria-current], :hover, :active, :focus),
input[type=submit].outline.contrast:is([aria-current], :hover, :active, :focus),
input[type=button].outline.contrast:is([aria-current], :hover, :active, :focus),
input[type=reset].outline.contrast:is([aria-current], :hover, :active, :focus),
[role=button].outline.contrast:is([aria-current], :hover, :active, :focus) {
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
--color: var(--contrast-hover);
}