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

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); 0 0 0 var(--outline-width) var(--primary-focus);
} }
button.secondary, :is(button, input[type=submit], input[type=button], [role=button]).secondary,
input[type=submit].secondary, input[type=reset] {
input[type=button].secondary,
input[type=reset],
[role=button].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
cursor: pointer; cursor: pointer;
} }
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=submit].secondary:is([aria-current], :hover, :active, :focus), input[type=reset]: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) {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
} }
button.secondary:focus, :is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
input[type=submit].secondary:focus, input[type=reset]:focus {
input[type=button].secondary:focus,
input[type=reset]:focus,
[role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus); 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.contrast, :is(button, input[type=submit], input[type=button], [role=button]).contrast {
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
[role=button].contrast {
--background-color: var(--contrast); --background-color: var(--contrast);
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
} }
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) {
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) {
--background-color: var(--contrast-hover); --background-color: var(--contrast-hover);
--border-color: var(--contrast-hover); --border-color: var(--contrast-hover);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
} }
button.contrast:focus, :is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
[role=button].contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus); 0 0 0 var(--outline-width) var(--contrast-focus);
} }
button.outline, :is(button, input[type=submit], input[type=button], [role=button]).outline,
input[type=submit].outline, input[type=reset].outline {
input[type=button].outline,
input[type=reset].outline,
[role=button].outline {
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --color: var(--primary);
} }
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=submit].outline:is([aria-current], :hover, :active, :focus), input[type=reset].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) {
--background-color: transparent; --background-color: transparent;
--color: var(--primary-hover); --color: var(--primary-hover);
} }
button.outline.secondary, :is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
input[type=submit].outline.secondary, input[type=reset].outline {
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
[role=button].outline.secondary {
--color: var(--secondary); --color: var(--secondary);
} }
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=submit].outline.secondary:is([aria-current], :hover, :active, :focus), input[type=reset].outline: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) {
--color: var(--secondary-hover); --color: var(--secondary-hover);
} }
button.outline.contrast, :is(button, input[type=submit], input[type=button], [role=button]).outline.contrast {
input[type=submit].outline.contrast,
input[type=button].outline.contrast,
input[type=reset].outline.contrast,
[role=button].outline.contrast {
--color: var(--contrast); --color: var(--contrast);
} }
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) {
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) {
--color: var(--contrast-hover); --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); 0 0 0 var(--outline-width) var(--primary-focus);
} }
button.secondary, :is(button, input[type=submit], input[type=button], [role=button]).secondary,
input[type=submit].secondary, input[type=reset] {
input[type=button].secondary,
input[type=reset],
[role=button].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
cursor: pointer; cursor: pointer;
} }
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=submit].secondary:is([aria-current], :hover, :active, :focus), input[type=reset]: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) {
--background-color: var(--secondary-hover); --background-color: var(--secondary-hover);
--border-color: var(--secondary-hover); --border-color: var(--secondary-hover);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
} }
button.secondary:focus, :is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
input[type=submit].secondary:focus, input[type=reset]:focus {
input[type=button].secondary:focus,
input[type=reset]:focus,
[role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus); 0 0 0 var(--outline-width) var(--secondary-focus);
} }
button.contrast, :is(button, input[type=submit], input[type=button], [role=button]).contrast {
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
[role=button].contrast {
--background-color: var(--contrast); --background-color: var(--contrast);
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
} }
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) {
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) {
--background-color: var(--contrast-hover); --background-color: var(--contrast-hover);
--border-color: var(--contrast-hover); --border-color: var(--contrast-hover);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
} }
button.contrast:focus, :is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
[role=button].contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus); 0 0 0 var(--outline-width) var(--contrast-focus);
} }
button.outline, :is(button, input[type=submit], input[type=button], [role=button]).outline,
input[type=submit].outline, input[type=reset].outline {
input[type=button].outline,
input[type=reset].outline,
[role=button].outline {
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --color: var(--primary);
} }
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=submit].outline:is([aria-current], :hover, :active, :focus), input[type=reset].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) {
--background-color: transparent; --background-color: transparent;
--color: var(--primary-hover); --color: var(--primary-hover);
} }
button.outline.secondary, :is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
input[type=submit].outline.secondary, input[type=reset].outline {
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
[role=button].outline.secondary {
--color: var(--secondary); --color: var(--secondary);
} }
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=submit].outline.secondary:is([aria-current], :hover, :active, :focus), input[type=reset].outline: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) {
--color: var(--secondary-hover); --color: var(--secondary-hover);
} }
button.outline.contrast, :is(button, input[type=submit], input[type=button], [role=button]).outline.contrast {
input[type=submit].outline.contrast,
input[type=button].outline.contrast,
input[type=reset].outline.contrast,
[role=button].outline.contrast {
--color: var(--contrast); --color: var(--contrast);
} }
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) {
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) {
--color: var(--contrast-hover); --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 { @if $enable-classes {
// Secondary // Secondary
button.secondary, :is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
input[type="submit"].secondary, input[type="reset"] {
input[type="button"].secondary,
input[type="reset"],
[role="button"].secondary {
--background-color: var(--secondary); --background-color: var(--secondary);
--border-color: var(--secondary); --border-color: var(--secondary);
--color: var(--secondary-inverse); --color: var(--secondary-inverse);
@ -108,11 +105,7 @@ input[type="reset"],
} }
// Contrast // Contrast
button.contrast, :is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
input[type="submit"].contrast,
input[type="button"].contrast,
input[type="reset"].contrast,
[role="button"].contrast {
--background-color: var(--contrast); --background-color: var(--contrast);
--border-color: var(--contrast); --border-color: var(--contrast);
--color: var(--contrast-inverse); --color: var(--contrast-inverse);
@ -130,11 +123,8 @@ input[type="reset"],
} }
// Outline (primary) // Outline (primary)
button.outline, :is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
input[type="submit"].outline, input[type="reset"].outline {
input[type="button"].outline,
input[type="reset"].outline,
[role="button"].outline {
--background-color: transparent; --background-color: transparent;
--color: var(--primary); --color: var(--primary);
@ -145,11 +135,8 @@ input[type="reset"],
} }
// Outline (secondary) // Outline (secondary)
button.outline.secondary, :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
input[type="submit"].outline.secondary, input[type="reset"].outline {
input[type="button"].outline.secondary,
input[type="reset"].outline.secondary,
[role="button"].outline.secondary {
--color: var(--secondary); --color: var(--secondary);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {
@ -158,11 +145,7 @@ input[type="reset"],
} }
// Outline (contrast) // Outline (contrast)
button.outline.contrast, :is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
input[type="submit"].outline.contrast,
input[type="button"].outline.contrast,
input[type="reset"].outline.contrast,
[role="button"].outline.contrast {
--color: var(--contrast); --color: var(--contrast);
&:is([aria-current], :hover, :active, :focus) { &:is([aria-current], :hover, :active, :focus) {