mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46: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

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

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);
}

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

79
css/pico.slim.css
View file

@ -895,105 +895,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);
}

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

33
scss/content/_button.scss
View file

@ -85,11 +85,8 @@ input[type="reset"],
@if $enable-classes {
// Secondary
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);
@ -108,11 +105,7 @@ input[type="reset"],
}
// Contrast
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);
@ -130,11 +123,8 @@ input[type="reset"],
}
// Outline (primary)
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);
@ -145,11 +135,8 @@ input[type="reset"],
}
// Outline (secondary)
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);
&:is([aria-current], :hover, :active, :focus) {
@ -158,11 +145,7 @@ input[type="reset"],
}
// Outline (contrast)
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);
&:is([aria-current], :hover, :active, :focus) {