mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 10:26:13 -04:00
chore(button): Optimize selectors
This commit is contained in:
Lucas Larroche
parent
ff30e814ec
commit
e49e6426a0
17 changed files with 119 additions and 542 deletions
|
|
@ -869,14 +869,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -888,11 +880,7 @@ button {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type=submit],
|
||||
input[type=button],
|
||||
input[type=reset],
|
||||
[role=button] {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
|
|
@ -911,33 +899,13 @@ input[type=reset],
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
button:focus,
|
||||
input[type=submit]:focus,
|
||||
input[type=button]:focus,
|
||||
input[type=reset]:focus,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
|
|
@ -948,7 +916,7 @@ input[type=reset] {
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -957,12 +925,8 @@ input[type=reset]:focus {
|
|||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
[role=button][disabled] {
|
||||
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||
a[role=button]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
182
css/pico.css
182
css/pico.css
|
|
@ -926,14 +926,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -945,11 +937,7 @@ button {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type=submit],
|
||||
input[type=button],
|
||||
input[type=reset],
|
||||
[role=button] {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
|
|
@ -968,205 +956,69 @@ input[type=reset],
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
button:focus,
|
||||
input[type=submit]:focus,
|
||||
input[type=button]:focus,
|
||||
input[type=reset]:focus,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
input[type=submit].secondary,
|
||||
input[type=button].secondary,
|
||||
input[type=reset],
|
||||
[role=button].secondary {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||
input[type=submit].secondary[aria-current],
|
||||
input[type=submit].secondary:hover,
|
||||
input[type=submit].secondary:active,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary[aria-current],
|
||||
input[type=button].secondary:hover,
|
||||
input[type=button].secondary:active,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary[aria-current],
|
||||
[role=button].secondary:hover,
|
||||
[role=button].secondary:active,
|
||||
[role=button].secondary:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary: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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
|
||||
button.contrast,
|
||||
input[type=submit].contrast,
|
||||
input[type=button].contrast,
|
||||
input[type=reset].contrast,
|
||||
[role=button].contrast {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||
input[type=submit].contrast[aria-current],
|
||||
input[type=submit].contrast:hover,
|
||||
input[type=submit].contrast:active,
|
||||
input[type=submit].contrast:focus,
|
||||
input[type=button].contrast[aria-current],
|
||||
input[type=button].contrast:hover,
|
||||
input[type=button].contrast:active,
|
||||
input[type=button].contrast:focus,
|
||||
input[type=reset].contrast[aria-current],
|
||||
input[type=reset].contrast:hover,
|
||||
input[type=reset].contrast:active,
|
||||
input[type=reset].contrast:focus,
|
||||
[role=button].contrast[aria-current],
|
||||
[role=button].contrast:hover,
|
||||
[role=button].contrast:active,
|
||||
[role=button].contrast:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
}
|
||||
button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
|
||||
input[type=submit].outline[aria-current],
|
||||
input[type=submit].outline:hover,
|
||||
input[type=submit].outline:active,
|
||||
input[type=submit].outline:focus,
|
||||
input[type=button].outline[aria-current],
|
||||
input[type=button].outline:hover,
|
||||
input[type=button].outline:active,
|
||||
input[type=button].outline:focus,
|
||||
input[type=reset].outline[aria-current],
|
||||
input[type=reset].outline:hover,
|
||||
input[type=reset].outline:active,
|
||||
input[type=reset].outline:focus,
|
||||
[role=button].outline[aria-current],
|
||||
[role=button].outline:hover,
|
||||
[role=button].outline:active,
|
||||
[role=button].outline:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary {
|
||||
--color: var(--secondary);
|
||||
}
|
||||
button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||
input[type=submit].outline.secondary[aria-current],
|
||||
input[type=submit].outline.secondary:hover,
|
||||
input[type=submit].outline.secondary:active,
|
||||
input[type=submit].outline.secondary:focus,
|
||||
input[type=button].outline.secondary[aria-current],
|
||||
input[type=button].outline.secondary:hover,
|
||||
input[type=button].outline.secondary:active,
|
||||
input[type=button].outline.secondary:focus,
|
||||
input[type=reset].outline.secondary[aria-current],
|
||||
input[type=reset].outline.secondary:hover,
|
||||
input[type=reset].outline.secondary:active,
|
||||
input[type=reset].outline.secondary:focus,
|
||||
[role=button].outline.secondary[aria-current],
|
||||
[role=button].outline.secondary:hover,
|
||||
[role=button].outline.secondary:active,
|
||||
[role=button].outline.secondary:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary: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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast {
|
||||
--color: var(--contrast);
|
||||
}
|
||||
button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||
input[type=submit].outline.contrast[aria-current],
|
||||
input[type=submit].outline.contrast:hover,
|
||||
input[type=submit].outline.contrast:active,
|
||||
input[type=submit].outline.contrast:focus,
|
||||
input[type=button].outline.contrast[aria-current],
|
||||
input[type=button].outline.contrast:hover,
|
||||
input[type=button].outline.contrast:active,
|
||||
input[type=button].outline.contrast:focus,
|
||||
input[type=reset].outline.contrast[aria-current],
|
||||
input[type=reset].outline.contrast:hover,
|
||||
input[type=reset].outline.contrast:active,
|
||||
input[type=reset].outline.contrast:focus,
|
||||
[role=button].outline.contrast[aria-current],
|
||||
[role=button].outline.contrast:hover,
|
||||
[role=button].outline.contrast:active,
|
||||
[role=button].outline.contrast:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
[role=button][disabled] {
|
||||
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||
a[role=button]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -839,14 +839,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -858,11 +850,7 @@ button {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type=submit],
|
||||
input[type=button],
|
||||
input[type=reset],
|
||||
[role=button] {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
|
|
@ -881,33 +869,13 @@ input[type=reset],
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
button:focus,
|
||||
input[type=submit]:focus,
|
||||
input[type=button]:focus,
|
||||
input[type=reset]:focus,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
|
|
@ -918,7 +886,7 @@ input[type=reset] {
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -927,12 +895,8 @@ input[type=reset]:focus {
|
|||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
[role=button][disabled] {
|
||||
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||
a[role=button]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -855,14 +855,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -874,11 +866,7 @@ button {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type=submit],
|
||||
input[type=button],
|
||||
input[type=reset],
|
||||
[role=button] {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
|
|
@ -896,205 +884,69 @@ input[type=reset],
|
|||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
button:focus,
|
||||
input[type=submit]:focus,
|
||||
input[type=button]:focus,
|
||||
input[type=reset]:focus,
|
||||
[role=button]:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
input[type=submit].secondary,
|
||||
input[type=button].secondary,
|
||||
input[type=reset],
|
||||
[role=button].secondary {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||
input[type=submit].secondary[aria-current],
|
||||
input[type=submit].secondary:hover,
|
||||
input[type=submit].secondary:active,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary[aria-current],
|
||||
input[type=button].secondary:hover,
|
||||
input[type=button].secondary:active,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary[aria-current],
|
||||
[role=button].secondary:hover,
|
||||
[role=button].secondary:active,
|
||||
[role=button].secondary:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary: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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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);
|
||||
}
|
||||
|
||||
button.contrast,
|
||||
input[type=submit].contrast,
|
||||
input[type=button].contrast,
|
||||
input[type=reset].contrast,
|
||||
[role=button].contrast {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||
input[type=submit].contrast[aria-current],
|
||||
input[type=submit].contrast:hover,
|
||||
input[type=submit].contrast:active,
|
||||
input[type=submit].contrast:focus,
|
||||
input[type=button].contrast[aria-current],
|
||||
input[type=button].contrast:hover,
|
||||
input[type=button].contrast:active,
|
||||
input[type=button].contrast:focus,
|
||||
input[type=reset].contrast[aria-current],
|
||||
input[type=reset].contrast:hover,
|
||||
input[type=reset].contrast:active,
|
||||
input[type=reset].contrast:focus,
|
||||
[role=button].contrast[aria-current],
|
||||
[role=button].contrast:hover,
|
||||
[role=button].contrast:active,
|
||||
[role=button].contrast:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
}
|
||||
button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
|
||||
input[type=submit].outline[aria-current],
|
||||
input[type=submit].outline:hover,
|
||||
input[type=submit].outline:active,
|
||||
input[type=submit].outline:focus,
|
||||
input[type=button].outline[aria-current],
|
||||
input[type=button].outline:hover,
|
||||
input[type=button].outline:active,
|
||||
input[type=button].outline:focus,
|
||||
input[type=reset].outline[aria-current],
|
||||
input[type=reset].outline:hover,
|
||||
input[type=reset].outline:active,
|
||||
input[type=reset].outline:focus,
|
||||
[role=button].outline[aria-current],
|
||||
[role=button].outline:hover,
|
||||
[role=button].outline:active,
|
||||
[role=button].outline:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary {
|
||||
--color: var(--secondary);
|
||||
}
|
||||
button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||
input[type=submit].outline.secondary[aria-current],
|
||||
input[type=submit].outline.secondary:hover,
|
||||
input[type=submit].outline.secondary:active,
|
||||
input[type=submit].outline.secondary:focus,
|
||||
input[type=button].outline.secondary[aria-current],
|
||||
input[type=button].outline.secondary:hover,
|
||||
input[type=button].outline.secondary:active,
|
||||
input[type=button].outline.secondary:focus,
|
||||
input[type=reset].outline.secondary[aria-current],
|
||||
input[type=reset].outline.secondary:hover,
|
||||
input[type=reset].outline.secondary:active,
|
||||
input[type=reset].outline.secondary:focus,
|
||||
[role=button].outline.secondary[aria-current],
|
||||
[role=button].outline.secondary:hover,
|
||||
[role=button].outline.secondary:active,
|
||||
[role=button].outline.secondary:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary: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 {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast {
|
||||
--color: var(--contrast);
|
||||
}
|
||||
button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||
input[type=submit].outline.contrast[aria-current],
|
||||
input[type=submit].outline.contrast:hover,
|
||||
input[type=submit].outline.contrast:active,
|
||||
input[type=submit].outline.contrast:focus,
|
||||
input[type=button].outline.contrast[aria-current],
|
||||
input[type=button].outline.contrast:hover,
|
||||
input[type=button].outline.contrast:active,
|
||||
input[type=button].outline.contrast:focus,
|
||||
input[type=reset].outline.contrast[aria-current],
|
||||
input[type=reset].outline.contrast:hover,
|
||||
input[type=reset].outline.contrast:active,
|
||||
input[type=reset].outline.contrast:focus,
|
||||
[role=button].outline.contrast[aria-current],
|
||||
[role=button].outline.contrast:hover,
|
||||
[role=button].outline.contrast:active,
|
||||
[role=button].outline.contrast:focus {
|
||||
:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
[role=button][disabled] {
|
||||
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||
a[role=button]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue