mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 02:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(button): Revert selectors

Browse source
This commit is contained in:
Lucas Larroche 2022-03-06 12:17:34 +07:00
parent cf7c1e340c
commit 201be1cb53
17 changed files with 276 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

18
css/pico.classless.css
View file

@ -868,7 +868,11 @@ button {
text-decoration: none;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
button,
input[type=submit],
input[type=button],
input[type=reset],
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -887,13 +891,21 @@ button {
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}

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 vendored
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

94
css/pico.css
View file

@ -925,7 +925,11 @@ button {
text-decoration: none;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
button,
input[type=submit],
input[type=button],
input[type=reset],
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -944,64 +948,124 @@ button {
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary {
button.secondary,
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset],
[role=button].secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:is([aria-current], :hover, :active, :focus) {
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) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:focus {
button.secondary:focus,
input[type=submit].secondary: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)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast {
button.contrast,
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
[role=button].contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
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);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:focus {
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)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline {
button.outline,
input[type=submit].outline,
input[type=button].outline,
input[type=reset].outline,
[role=button].outline {
--background-color: transparent;
--color: var(--primary);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline:is([aria-current], :hover, :active, :focus) {
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) {
--background-color: transparent;
--color: var(--primary-hover);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary {
button.outline.secondary,
input[type=submit].outline.secondary,
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
[role=button].outline.secondary {
--color: var(--secondary);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus) {
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) {
--color: var(--secondary-hover);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast {
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);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
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);
}

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

18
css/pico.fluid.classless.css
View file

@ -838,7 +838,11 @@ button {
text-decoration: none;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
button,
input[type=submit],
input[type=button],
input[type=reset],
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -857,13 +861,21 @@ button {
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}

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 vendored
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

94
css/pico.slim.css
View file

@ -854,7 +854,11 @@ button {
text-decoration: none;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
button,
input[type=submit],
input[type=button],
input[type=reset],
[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -872,64 +876,124 @@ button {
text-align: center;
cursor: pointer;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
button:is([aria-current], :hover, :active, :focus),
input[type=submit]:is([aria-current], :hover, :active, :focus),
input[type=button]:is([aria-current], :hover, :active, :focus),
input[type=reset]:is([aria-current], :hover, :active, :focus),
[role=button]:is([aria-current], :hover, :active, :focus) {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
--color: var(--primary-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
button:focus,
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary {
button.secondary,
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset],
[role=button].secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:is([aria-current], :hover, :active, :focus) {
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) {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--color: var(--secondary-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:focus {
button.secondary:focus,
input[type=submit].secondary: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)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast {
button.contrast,
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
[role=button].contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
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);
--border-color: var(--contrast-hover);
--color: var(--contrast-inverse);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:focus {
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)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline {
button.outline,
input[type=submit].outline,
input[type=button].outline,
input[type=reset].outline,
[role=button].outline {
--background-color: transparent;
--color: var(--primary);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline:is([aria-current], :hover, :active, :focus) {
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) {
--background-color: transparent;
--color: var(--primary-hover);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary {
button.outline.secondary,
input[type=submit].outline.secondary,
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
[role=button].outline.secondary {
--color: var(--secondary);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus) {
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) {
--color: var(--secondary-hover);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast {
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);
}
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
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);
}

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