mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
Merge pull request #141 from leomp12/patch-1
Perf: Simpler/smaller selectors with :where :is
This commit is contained in:
Lucas Larroche
GitHub
commit
16bfdd9bfa
23 changed files with 368 additions and 1212 deletions
|
|
@ -633,10 +633,6 @@ sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
address,
|
address,
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
|
|
@ -668,11 +664,8 @@ a,
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
}
|
}
|
||||||
a[aria-current], a:hover, a:active, a:focus,
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link][aria-current],
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link]:hover,
|
|
||||||
[role=link]:active,
|
|
||||||
[role=link]:focus {
|
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -719,61 +712,7 @@ h6 {
|
||||||
--color: var(--h6-color);
|
--color: var(--h6-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||||||
blockquote ~ h1,
|
|
||||||
blockquote ~ h2,
|
|
||||||
blockquote ~ h3,
|
|
||||||
blockquote ~ h4,
|
|
||||||
blockquote ~ h5,
|
|
||||||
blockquote ~ h6,
|
|
||||||
dl ~ h1,
|
|
||||||
dl ~ h2,
|
|
||||||
dl ~ h3,
|
|
||||||
dl ~ h4,
|
|
||||||
dl ~ h5,
|
|
||||||
dl ~ h6,
|
|
||||||
figure ~ h1,
|
|
||||||
figure ~ h2,
|
|
||||||
figure ~ h3,
|
|
||||||
figure ~ h4,
|
|
||||||
figure ~ h5,
|
|
||||||
figure ~ h6,
|
|
||||||
form ~ h1,
|
|
||||||
form ~ h2,
|
|
||||||
form ~ h3,
|
|
||||||
form ~ h4,
|
|
||||||
form ~ h5,
|
|
||||||
form ~ h6,
|
|
||||||
ol ~ h1,
|
|
||||||
ol ~ h2,
|
|
||||||
ol ~ h3,
|
|
||||||
ol ~ h4,
|
|
||||||
ol ~ h5,
|
|
||||||
ol ~ h6,
|
|
||||||
p ~ h1,
|
|
||||||
p ~ h2,
|
|
||||||
p ~ h3,
|
|
||||||
p ~ h4,
|
|
||||||
p ~ h5,
|
|
||||||
p ~ h6,
|
|
||||||
pre ~ h1,
|
|
||||||
pre ~ h2,
|
|
||||||
pre ~ h3,
|
|
||||||
pre ~ h4,
|
|
||||||
pre ~ h5,
|
|
||||||
pre ~ h6,
|
|
||||||
table ~ h1,
|
|
||||||
table ~ h2,
|
|
||||||
table ~ h3,
|
|
||||||
table ~ h4,
|
|
||||||
table ~ h5,
|
|
||||||
table ~ h6,
|
|
||||||
ul ~ h1,
|
|
||||||
ul ~ h2,
|
|
||||||
ul ~ h3,
|
|
||||||
ul ~ h4,
|
|
||||||
ul ~ h5,
|
|
||||||
ul ~ h6 {
|
|
||||||
margin-top: var(--typography-spacing-vertical);
|
margin-top: var(--typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -798,8 +737,7 @@ small {
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
:where(dl, ol, ul) {
|
||||||
ol {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
|
|
@ -807,11 +745,15 @@ ol {
|
||||||
-webkit-padding-end: 0;
|
-webkit-padding-end: 0;
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
:where(dl, ol, ul) li {
|
||||||
ol li {
|
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
list-style: square;
|
list-style: square;
|
||||||
}
|
}
|
||||||
|
|
@ -914,14 +856,6 @@ button,
|
||||||
-webkit-appearance: 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 {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -956,23 +890,11 @@ input[type=reset],
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
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,
|
button:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit][aria-current],
|
input[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:hover,
|
input[type=button]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:active,
|
input[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:focus,
|
[role=button]:is([aria-current], :hover, :active, :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 {
|
|
||||||
--background-color: var(--primary-hover);
|
--background-color: var(--primary-hover);
|
||||||
--border-color: var(--primary-hover);
|
--border-color: var(--primary-hover);
|
||||||
--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));
|
||||||
|
|
@ -993,7 +915,7 @@ input[type=reset] {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
cursor: pointer;
|
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);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1002,12 +924,8 @@ input[type=reset]:focus {
|
||||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled],
|
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||||
input[type=submit][disabled],
|
a[role=button]:not([href]) {
|
||||||
input[type=button][disabled],
|
|
||||||
input[type=reset][disabled],
|
|
||||||
a[role=button]:not([href]),
|
|
||||||
[role=button][disabled] {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1143,19 +1061,13 @@ textarea {
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--background-color: var(--form-element-active-background-color);
|
--background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--border-color: var(--form-element-active-border-color);
|
--border-color: var(--form-element-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1173,9 +1085,7 @@ textarea[disabled] {
|
||||||
opacity: var(--form-element-disabled-opacity);
|
opacity: var(--form-element-disabled-opacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||||
|
|
@ -1186,50 +1096,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-image: var(--icon-valid);
|
background-image: var(--icon-valid);
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
|
||||||
background-image: var(--icon-invalid);
|
background-image: var(--icon-invalid);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false],
|
:where(input, select, textarea)[aria-invalid=false] {
|
||||||
select[aria-invalid=false],
|
|
||||||
textarea[aria-invalid=false] {
|
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||||
select[aria-invalid=false]:active,
|
|
||||||
select[aria-invalid=false]:focus,
|
|
||||||
textarea[aria-invalid=false]:active,
|
|
||||||
textarea[aria-invalid=false]:focus {
|
|
||||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||||
}
|
}
|
||||||
input[aria-invalid=true],
|
:where(input, select, textarea)[aria-invalid=true] {
|
||||||
select[aria-invalid=true],
|
|
||||||
textarea[aria-invalid=true] {
|
|
||||||
--border-color: var(--form-element-invalid-border-color);
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||||
select[aria-invalid=true]:active,
|
|
||||||
select[aria-invalid=true]:focus,
|
|
||||||
textarea[aria-invalid=true]:active,
|
|
||||||
textarea[aria-invalid=true]:focus {
|
|
||||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1269,9 +1157,7 @@ select:not([multiple]):not([size]) {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input + small,
|
:where(input, select, textarea) + small {
|
||||||
select + small,
|
|
||||||
textarea + small {
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: calc(var(--spacing) * -0.75);
|
margin-top: calc(var(--spacing) * -0.75);
|
||||||
|
|
@ -1279,7 +1165,7 @@ textarea + small {
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
label > input, label > select, label > textarea {
|
label > :where(input, select, textarea) {
|
||||||
margin-top: calc(var(--spacing) * 0.25);
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1444,11 +1330,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] [type=date],
|
[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
|
||||||
[dir=rtl] [type=datetime-local],
|
|
||||||
[dir=rtl] [type=month],
|
|
||||||
[dir=rtl] [type=time],
|
|
||||||
[dir=rtl] [type=week] {
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1459,10 +1341,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
[type=file]:hover, [type=file]:active, [type=file]:focus {
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
[type=file]::-webkit-file-upload-button {
|
[type=file]::-webkit-file-upload-button {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
--border-color: var(--secondary);
|
--border-color: var(--secondary);
|
||||||
|
|
@ -1512,11 +1390,11 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
|
[type=file]::file-selector-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1545,7 +1423,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1572,7 +1450,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
|
[type=file]::-ms-browse:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1997,19 +1875,14 @@ nav li {
|
||||||
nav li > * {
|
nav li > * {
|
||||||
--spacing: 0;
|
--spacing: 0;
|
||||||
}
|
}
|
||||||
nav a,
|
nav :where(a, [role="link"]) {
|
||||||
nav [role=link] {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
|
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
|
||||||
nav [role=link][aria-current],
|
|
||||||
nav [role=link]:hover,
|
|
||||||
nav [role=link]:active,
|
|
||||||
nav [role=link]:focus {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2105,9 +1978,8 @@ details[role=list],
|
||||||
li[role=list] {
|
li[role=list] {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
details[role=list] summary + ul,
|
details[role=list] summary + ul,
|
||||||
details[role=list] > ul,
|
|
||||||
li[role=list] summary + ul,
|
|
||||||
li[role=list] > ul {
|
li[role=list] > ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
@ -2128,8 +2000,6 @@ li[role=list] > ul {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li,
|
details[role=list] summary + ul li,
|
||||||
details[role=list] > ul li,
|
|
||||||
li[role=list] summary + ul li,
|
|
||||||
li[role=list] > ul li {
|
li[role=list] > ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -2137,20 +2007,14 @@ li[role=list] > ul li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li:first-of-type,
|
details[role=list] summary + ul li:first-of-type,
|
||||||
details[role=list] > ul li:first-of-type,
|
|
||||||
li[role=list] summary + ul li:first-of-type,
|
|
||||||
li[role=list] > ul li:first-of-type {
|
li[role=list] > ul li:first-of-type {
|
||||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li:last-of-type,
|
details[role=list] summary + ul li:last-of-type,
|
||||||
details[role=list] > ul li:last-of-type,
|
|
||||||
li[role=list] summary + ul li:last-of-type,
|
|
||||||
li[role=list] > ul li:last-of-type {
|
li[role=list] > ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li a,
|
details[role=list] summary + ul li a,
|
||||||
details[role=list] > ul li a,
|
|
||||||
li[role=list] summary + ul li a,
|
|
||||||
li[role=list] > ul li a {
|
li[role=list] > ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
|
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
|
||||||
|
|
@ -2161,8 +2025,6 @@ li[role=list] > ul li a {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li a:hover,
|
details[role=list] summary + ul li a:hover,
|
||||||
details[role=list] > ul li a:hover,
|
|
||||||
li[role=list] summary + ul li a:hover,
|
|
||||||
li[role=list] > ul li a:hover {
|
li[role=list] > ul li a:hover {
|
||||||
background-color: var(--dropdown-hover-background-color);
|
background-color: var(--dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
@ -2222,39 +2084,42 @@ details[role=list][open] summary::before {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav [role=list] summary,
|
nav details[role=list] summary,
|
||||||
nav [role=list] a {
|
nav li[role=list] a {
|
||||||
display: flex;
|
display: flex;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul,
|
|
||||||
nav [role=list] > ul {
|
nav details[role=list] summary + ul,
|
||||||
|
nav li[role=list] > ul {
|
||||||
min-width: -webkit-fit-content;
|
min-width: -webkit-fit-content;
|
||||||
min-width: -moz-fit-content;
|
min-width: -moz-fit-content;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul li a,
|
nav details[role=list] summary + ul li a,
|
||||||
nav [role=list] > ul li a {
|
nav li[role=list] > ul li a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav [role=list] summary,
|
nav details[role=list] summary,
|
||||||
nav [role=list] summary:not([role]) {
|
nav details[role=list] summary:not([role]) {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav [role=list][open] summary {
|
nav details[role=list][open] summary {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul {
|
nav details[role=list] summary + ul {
|
||||||
margin-top: var(--outline-width);
|
margin-top: var(--outline-width);
|
||||||
|
-webkit-margin-start: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
}
|
}
|
||||||
nav [role=list] summary[role=link] {
|
nav details[role=list] summary[role=link] {
|
||||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
nav [role=list] summary[role=link] + ul {
|
nav details[role=list] summary[role=link] + ul {
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
|
|
|
||||||
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
410
css/pico.css
410
css/pico.css
|
|
@ -663,10 +663,6 @@ sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
address,
|
address,
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
|
|
@ -698,11 +694,8 @@ a,
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
}
|
}
|
||||||
a[aria-current], a:hover, a:active, a:focus,
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link][aria-current],
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link]:hover,
|
|
||||||
[role=link]:active,
|
|
||||||
[role=link]:focus {
|
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -714,11 +707,8 @@ a.secondary,
|
||||||
[role=link].secondary {
|
[role=link].secondary {
|
||||||
--color: var(--secondary);
|
--color: var(--secondary);
|
||||||
}
|
}
|
||||||
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
|
a.secondary:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link].secondary[aria-current],
|
[role=link].secondary:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link].secondary:hover,
|
|
||||||
[role=link].secondary:active,
|
|
||||||
[role=link].secondary:focus {
|
|
||||||
--color: var(--secondary-hover);
|
--color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
a.secondary:focus,
|
a.secondary:focus,
|
||||||
|
|
@ -729,11 +719,8 @@ a.contrast,
|
||||||
[role=link].contrast {
|
[role=link].contrast {
|
||||||
--color: var(--contrast);
|
--color: var(--contrast);
|
||||||
}
|
}
|
||||||
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
|
a.contrast:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link].contrast[aria-current],
|
[role=link].contrast:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link].contrast:hover,
|
|
||||||
[role=link].contrast:active,
|
|
||||||
[role=link].contrast:focus {
|
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
a.contrast:focus,
|
a.contrast:focus,
|
||||||
|
|
@ -779,61 +766,7 @@ h6 {
|
||||||
--color: var(--h6-color);
|
--color: var(--h6-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||||||
blockquote ~ h1,
|
|
||||||
blockquote ~ h2,
|
|
||||||
blockquote ~ h3,
|
|
||||||
blockquote ~ h4,
|
|
||||||
blockquote ~ h5,
|
|
||||||
blockquote ~ h6,
|
|
||||||
dl ~ h1,
|
|
||||||
dl ~ h2,
|
|
||||||
dl ~ h3,
|
|
||||||
dl ~ h4,
|
|
||||||
dl ~ h5,
|
|
||||||
dl ~ h6,
|
|
||||||
figure ~ h1,
|
|
||||||
figure ~ h2,
|
|
||||||
figure ~ h3,
|
|
||||||
figure ~ h4,
|
|
||||||
figure ~ h5,
|
|
||||||
figure ~ h6,
|
|
||||||
form ~ h1,
|
|
||||||
form ~ h2,
|
|
||||||
form ~ h3,
|
|
||||||
form ~ h4,
|
|
||||||
form ~ h5,
|
|
||||||
form ~ h6,
|
|
||||||
ol ~ h1,
|
|
||||||
ol ~ h2,
|
|
||||||
ol ~ h3,
|
|
||||||
ol ~ h4,
|
|
||||||
ol ~ h5,
|
|
||||||
ol ~ h6,
|
|
||||||
p ~ h1,
|
|
||||||
p ~ h2,
|
|
||||||
p ~ h3,
|
|
||||||
p ~ h4,
|
|
||||||
p ~ h5,
|
|
||||||
p ~ h6,
|
|
||||||
pre ~ h1,
|
|
||||||
pre ~ h2,
|
|
||||||
pre ~ h3,
|
|
||||||
pre ~ h4,
|
|
||||||
pre ~ h5,
|
|
||||||
pre ~ h6,
|
|
||||||
table ~ h1,
|
|
||||||
table ~ h2,
|
|
||||||
table ~ h3,
|
|
||||||
table ~ h4,
|
|
||||||
table ~ h5,
|
|
||||||
table ~ h6,
|
|
||||||
ul ~ h1,
|
|
||||||
ul ~ h2,
|
|
||||||
ul ~ h3,
|
|
||||||
ul ~ h4,
|
|
||||||
ul ~ h5,
|
|
||||||
ul ~ h6 {
|
|
||||||
margin-top: var(--typography-spacing-vertical);
|
margin-top: var(--typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -861,8 +794,7 @@ small {
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
:where(dl, ol, ul) {
|
||||||
ol {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
|
|
@ -870,11 +802,15 @@ ol {
|
||||||
-webkit-padding-end: 0;
|
-webkit-padding-end: 0;
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
:where(dl, ol, ul) li {
|
||||||
ol li {
|
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
list-style: square;
|
list-style: square;
|
||||||
}
|
}
|
||||||
|
|
@ -977,14 +913,6 @@ button,
|
||||||
-webkit-appearance: 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 {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1019,23 +947,11 @@ input[type=reset],
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
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,
|
button:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit][aria-current],
|
input[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:hover,
|
input[type=button]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:active,
|
input[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:focus,
|
[role=button]:is([aria-current], :hover, :active, :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 {
|
|
||||||
--background-color: var(--primary-hover);
|
--background-color: var(--primary-hover);
|
||||||
--border-color: var(--primary-hover);
|
--border-color: var(--primary-hover);
|
||||||
--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));
|
||||||
|
|
@ -1050,174 +966,69 @@ 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[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit].secondary[aria-current],
|
input[type=reset]:is([aria-current], :hover, :active, :focus) {
|
||||||
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 {
|
|
||||||
--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[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :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 {
|
|
||||||
--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[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit].outline[aria-current],
|
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||||
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 {
|
|
||||||
--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[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit].outline.secondary[aria-current],
|
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||||
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 {
|
|
||||||
--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[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :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 {
|
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled],
|
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||||
input[type=submit][disabled],
|
a[role=button]:not([href]) {
|
||||||
input[type=button][disabled],
|
|
||||||
input[type=reset][disabled],
|
|
||||||
a[role=button]:not([href]),
|
|
||||||
[role=button][disabled] {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1353,19 +1164,13 @@ textarea {
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--background-color: var(--form-element-active-background-color);
|
--background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--border-color: var(--form-element-active-border-color);
|
--border-color: var(--form-element-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1383,9 +1188,7 @@ textarea[disabled] {
|
||||||
opacity: var(--form-element-disabled-opacity);
|
opacity: var(--form-element-disabled-opacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||||
|
|
@ -1396,50 +1199,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-image: var(--icon-valid);
|
background-image: var(--icon-valid);
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
|
||||||
background-image: var(--icon-invalid);
|
background-image: var(--icon-invalid);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false],
|
:where(input, select, textarea)[aria-invalid=false] {
|
||||||
select[aria-invalid=false],
|
|
||||||
textarea[aria-invalid=false] {
|
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||||
select[aria-invalid=false]:active,
|
|
||||||
select[aria-invalid=false]:focus,
|
|
||||||
textarea[aria-invalid=false]:active,
|
|
||||||
textarea[aria-invalid=false]:focus {
|
|
||||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||||
}
|
}
|
||||||
input[aria-invalid=true],
|
:where(input, select, textarea)[aria-invalid=true] {
|
||||||
select[aria-invalid=true],
|
|
||||||
textarea[aria-invalid=true] {
|
|
||||||
--border-color: var(--form-element-invalid-border-color);
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||||
select[aria-invalid=true]:active,
|
|
||||||
select[aria-invalid=true]:focus,
|
|
||||||
textarea[aria-invalid=true]:active,
|
|
||||||
textarea[aria-invalid=true]:focus {
|
|
||||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1479,9 +1260,7 @@ select:not([multiple]):not([size]) {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input + small,
|
:where(input, select, textarea) + small {
|
||||||
select + small,
|
|
||||||
textarea + small {
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: calc(var(--spacing) * -0.75);
|
margin-top: calc(var(--spacing) * -0.75);
|
||||||
|
|
@ -1489,7 +1268,7 @@ textarea + small {
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
label > input, label > select, label > textarea {
|
label > :where(input, select, textarea) {
|
||||||
margin-top: calc(var(--spacing) * 0.25);
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1654,11 +1433,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] [type=date],
|
[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
|
||||||
[dir=rtl] [type=datetime-local],
|
|
||||||
[dir=rtl] [type=month],
|
|
||||||
[dir=rtl] [type=time],
|
|
||||||
[dir=rtl] [type=week] {
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1669,10 +1444,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
[type=file]:hover, [type=file]:active, [type=file]:focus {
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
[type=file]::-webkit-file-upload-button {
|
[type=file]::-webkit-file-upload-button {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
--border-color: var(--secondary);
|
--border-color: var(--secondary);
|
||||||
|
|
@ -1722,11 +1493,11 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
|
[type=file]::file-selector-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1755,7 +1526,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1782,7 +1553,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
|
[type=file]::-ms-browse:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -2181,7 +1952,7 @@ dialog article .close {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--transition);
|
transition: opacity var(--transition);
|
||||||
}
|
}
|
||||||
dialog article .close[aria-current], dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
|
dialog article .close:is([aria-current], :hover, :active, :focus) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
dialog:not([open]), dialog[open=false] {
|
dialog:not([open]), dialog[open=false] {
|
||||||
|
|
@ -2197,10 +1968,8 @@ dialog:not([open]), dialog[open=false] {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-is-opening dialog,
|
:where(.modal-is-opening, .modal-is-closing) dialog,
|
||||||
.modal-is-opening dialog > article,
|
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
||||||
.modal-is-closing dialog,
|
|
||||||
.modal-is-closing dialog > article {
|
|
||||||
-webkit-animation-duration: 0.2s;
|
-webkit-animation-duration: 0.2s;
|
||||||
animation-duration: 0.2s;
|
animation-duration: 0.2s;
|
||||||
-webkit-animation-timing-function: ease-in-out;
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
|
@ -2208,15 +1977,13 @@ dialog:not([open]), dialog[open=false] {
|
||||||
-webkit-animation-fill-mode: both;
|
-webkit-animation-fill-mode: both;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
.modal-is-opening dialog,
|
:where(.modal-is-opening, .modal-is-closing) dialog {
|
||||||
.modal-is-closing dialog {
|
|
||||||
-webkit-animation-duration: 0.8s;
|
-webkit-animation-duration: 0.8s;
|
||||||
animation-duration: 0.8s;
|
animation-duration: 0.8s;
|
||||||
-webkit-animation-name: fadeIn;
|
-webkit-animation-name: fadeIn;
|
||||||
animation-name: fadeIn;
|
animation-name: fadeIn;
|
||||||
}
|
}
|
||||||
.modal-is-opening dialog > article,
|
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
||||||
.modal-is-closing dialog > article {
|
|
||||||
-webkit-animation-delay: 0.2s;
|
-webkit-animation-delay: 0.2s;
|
||||||
animation-delay: 0.2s;
|
animation-delay: 0.2s;
|
||||||
-webkit-animation-name: slideInDown;
|
-webkit-animation-name: slideInDown;
|
||||||
|
|
@ -2306,19 +2073,14 @@ nav li {
|
||||||
nav li > * {
|
nav li > * {
|
||||||
--spacing: 0;
|
--spacing: 0;
|
||||||
}
|
}
|
||||||
nav a,
|
nav :where(a, [role="link"]) {
|
||||||
nav [role=link] {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
|
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
|
||||||
nav [role=link][aria-current],
|
|
||||||
nav [role=link]:hover,
|
|
||||||
nav [role=link]:active,
|
|
||||||
nav [role=link]:focus {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2414,9 +2176,8 @@ details[role=list],
|
||||||
li[role=list] {
|
li[role=list] {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
details[role=list] summary + ul,
|
details[role=list] summary + ul,
|
||||||
details[role=list] > ul,
|
|
||||||
li[role=list] summary + ul,
|
|
||||||
li[role=list] > ul {
|
li[role=list] > ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
@ -2437,8 +2198,6 @@ li[role=list] > ul {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li,
|
details[role=list] summary + ul li,
|
||||||
details[role=list] > ul li,
|
|
||||||
li[role=list] summary + ul li,
|
|
||||||
li[role=list] > ul li {
|
li[role=list] > ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -2446,20 +2205,14 @@ li[role=list] > ul li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li:first-of-type,
|
details[role=list] summary + ul li:first-of-type,
|
||||||
details[role=list] > ul li:first-of-type,
|
|
||||||
li[role=list] summary + ul li:first-of-type,
|
|
||||||
li[role=list] > ul li:first-of-type {
|
li[role=list] > ul li:first-of-type {
|
||||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li:last-of-type,
|
details[role=list] summary + ul li:last-of-type,
|
||||||
details[role=list] > ul li:last-of-type,
|
|
||||||
li[role=list] summary + ul li:last-of-type,
|
|
||||||
li[role=list] > ul li:last-of-type {
|
li[role=list] > ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li a,
|
details[role=list] summary + ul li a,
|
||||||
details[role=list] > ul li a,
|
|
||||||
li[role=list] summary + ul li a,
|
|
||||||
li[role=list] > ul li a {
|
li[role=list] > ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
|
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
|
||||||
|
|
@ -2470,8 +2223,6 @@ li[role=list] > ul li a {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li a:hover,
|
details[role=list] summary + ul li a:hover,
|
||||||
details[role=list] > ul li a:hover,
|
|
||||||
li[role=list] summary + ul li a:hover,
|
|
||||||
li[role=list] > ul li a:hover {
|
li[role=list] > ul li a:hover {
|
||||||
background-color: var(--dropdown-hover-background-color);
|
background-color: var(--dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
@ -2531,39 +2282,42 @@ details[role=list][open] summary::before {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav [role=list] summary,
|
nav details[role=list] summary,
|
||||||
nav [role=list] a {
|
nav li[role=list] a {
|
||||||
display: flex;
|
display: flex;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul,
|
|
||||||
nav [role=list] > ul {
|
nav details[role=list] summary + ul,
|
||||||
|
nav li[role=list] > ul {
|
||||||
min-width: -webkit-fit-content;
|
min-width: -webkit-fit-content;
|
||||||
min-width: -moz-fit-content;
|
min-width: -moz-fit-content;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul li a,
|
nav details[role=list] summary + ul li a,
|
||||||
nav [role=list] > ul li a {
|
nav li[role=list] > ul li a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav [role=list] summary,
|
nav details[role=list] summary,
|
||||||
nav [role=list] summary:not([role]) {
|
nav details[role=list] summary:not([role]) {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav [role=list][open] summary {
|
nav details[role=list][open] summary {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul {
|
nav details[role=list] summary + ul {
|
||||||
margin-top: var(--outline-width);
|
margin-top: var(--outline-width);
|
||||||
|
-webkit-margin-start: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
}
|
}
|
||||||
nav [role=list] summary[role=link] {
|
nav details[role=list] summary[role=link] {
|
||||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
nav [role=list] summary[role=link] + ul {
|
nav details[role=list] summary[role=link] + ul {
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -603,10 +603,6 @@ sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
address,
|
address,
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
|
|
@ -638,11 +634,8 @@ a,
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
}
|
}
|
||||||
a[aria-current], a:hover, a:active, a:focus,
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link][aria-current],
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link]:hover,
|
|
||||||
[role=link]:active,
|
|
||||||
[role=link]:focus {
|
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -689,61 +682,7 @@ h6 {
|
||||||
--color: var(--h6-color);
|
--color: var(--h6-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||||||
blockquote ~ h1,
|
|
||||||
blockquote ~ h2,
|
|
||||||
blockquote ~ h3,
|
|
||||||
blockquote ~ h4,
|
|
||||||
blockquote ~ h5,
|
|
||||||
blockquote ~ h6,
|
|
||||||
dl ~ h1,
|
|
||||||
dl ~ h2,
|
|
||||||
dl ~ h3,
|
|
||||||
dl ~ h4,
|
|
||||||
dl ~ h5,
|
|
||||||
dl ~ h6,
|
|
||||||
figure ~ h1,
|
|
||||||
figure ~ h2,
|
|
||||||
figure ~ h3,
|
|
||||||
figure ~ h4,
|
|
||||||
figure ~ h5,
|
|
||||||
figure ~ h6,
|
|
||||||
form ~ h1,
|
|
||||||
form ~ h2,
|
|
||||||
form ~ h3,
|
|
||||||
form ~ h4,
|
|
||||||
form ~ h5,
|
|
||||||
form ~ h6,
|
|
||||||
ol ~ h1,
|
|
||||||
ol ~ h2,
|
|
||||||
ol ~ h3,
|
|
||||||
ol ~ h4,
|
|
||||||
ol ~ h5,
|
|
||||||
ol ~ h6,
|
|
||||||
p ~ h1,
|
|
||||||
p ~ h2,
|
|
||||||
p ~ h3,
|
|
||||||
p ~ h4,
|
|
||||||
p ~ h5,
|
|
||||||
p ~ h6,
|
|
||||||
pre ~ h1,
|
|
||||||
pre ~ h2,
|
|
||||||
pre ~ h3,
|
|
||||||
pre ~ h4,
|
|
||||||
pre ~ h5,
|
|
||||||
pre ~ h6,
|
|
||||||
table ~ h1,
|
|
||||||
table ~ h2,
|
|
||||||
table ~ h3,
|
|
||||||
table ~ h4,
|
|
||||||
table ~ h5,
|
|
||||||
table ~ h6,
|
|
||||||
ul ~ h1,
|
|
||||||
ul ~ h2,
|
|
||||||
ul ~ h3,
|
|
||||||
ul ~ h4,
|
|
||||||
ul ~ h5,
|
|
||||||
ul ~ h6 {
|
|
||||||
margin-top: var(--typography-spacing-vertical);
|
margin-top: var(--typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -768,8 +707,7 @@ small {
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
:where(dl, ol, ul) {
|
||||||
ol {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
|
|
@ -777,11 +715,15 @@ ol {
|
||||||
-webkit-padding-end: 0;
|
-webkit-padding-end: 0;
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
:where(dl, ol, ul) li {
|
||||||
ol li {
|
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
list-style: square;
|
list-style: square;
|
||||||
}
|
}
|
||||||
|
|
@ -884,14 +826,6 @@ button,
|
||||||
-webkit-appearance: 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 {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -926,23 +860,11 @@ input[type=reset],
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
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,
|
button:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit][aria-current],
|
input[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:hover,
|
input[type=button]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:active,
|
input[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:focus,
|
[role=button]:is([aria-current], :hover, :active, :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 {
|
|
||||||
--background-color: var(--primary-hover);
|
--background-color: var(--primary-hover);
|
||||||
--border-color: var(--primary-hover);
|
--border-color: var(--primary-hover);
|
||||||
--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));
|
||||||
|
|
@ -963,7 +885,7 @@ input[type=reset] {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
cursor: pointer;
|
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);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -972,12 +894,8 @@ input[type=reset]:focus {
|
||||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled],
|
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||||
input[type=submit][disabled],
|
a[role=button]:not([href]) {
|
||||||
input[type=button][disabled],
|
|
||||||
input[type=reset][disabled],
|
|
||||||
a[role=button]:not([href]),
|
|
||||||
[role=button][disabled] {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1113,19 +1031,13 @@ textarea {
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--background-color: var(--form-element-active-background-color);
|
--background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--border-color: var(--form-element-active-border-color);
|
--border-color: var(--form-element-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1143,9 +1055,7 @@ textarea[disabled] {
|
||||||
opacity: var(--form-element-disabled-opacity);
|
opacity: var(--form-element-disabled-opacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||||
|
|
@ -1156,50 +1066,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-image: var(--icon-valid);
|
background-image: var(--icon-valid);
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
|
||||||
background-image: var(--icon-invalid);
|
background-image: var(--icon-invalid);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false],
|
:where(input, select, textarea)[aria-invalid=false] {
|
||||||
select[aria-invalid=false],
|
|
||||||
textarea[aria-invalid=false] {
|
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||||
select[aria-invalid=false]:active,
|
|
||||||
select[aria-invalid=false]:focus,
|
|
||||||
textarea[aria-invalid=false]:active,
|
|
||||||
textarea[aria-invalid=false]:focus {
|
|
||||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||||
}
|
}
|
||||||
input[aria-invalid=true],
|
:where(input, select, textarea)[aria-invalid=true] {
|
||||||
select[aria-invalid=true],
|
|
||||||
textarea[aria-invalid=true] {
|
|
||||||
--border-color: var(--form-element-invalid-border-color);
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||||
select[aria-invalid=true]:active,
|
|
||||||
select[aria-invalid=true]:focus,
|
|
||||||
textarea[aria-invalid=true]:active,
|
|
||||||
textarea[aria-invalid=true]:focus {
|
|
||||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1239,9 +1127,7 @@ select:not([multiple]):not([size]) {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input + small,
|
:where(input, select, textarea) + small {
|
||||||
select + small,
|
|
||||||
textarea + small {
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: calc(var(--spacing) * -0.75);
|
margin-top: calc(var(--spacing) * -0.75);
|
||||||
|
|
@ -1249,7 +1135,7 @@ textarea + small {
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
label > input, label > select, label > textarea {
|
label > :where(input, select, textarea) {
|
||||||
margin-top: calc(var(--spacing) * 0.25);
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1414,11 +1300,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] [type=date],
|
[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
|
||||||
[dir=rtl] [type=datetime-local],
|
|
||||||
[dir=rtl] [type=month],
|
|
||||||
[dir=rtl] [type=time],
|
|
||||||
[dir=rtl] [type=week] {
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1429,10 +1311,6 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
[type=file]:hover, [type=file]:active, [type=file]:focus {
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
[type=file]::-webkit-file-upload-button {
|
[type=file]::-webkit-file-upload-button {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
--border-color: var(--secondary);
|
--border-color: var(--secondary);
|
||||||
|
|
@ -1482,11 +1360,11 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
|
[type=file]::file-selector-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1515,7 +1393,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1542,7 +1420,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
||||||
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
|
[type=file]::-ms-browse:is(:hover, :active, :focus) {
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -1967,19 +1845,14 @@ nav li {
|
||||||
nav li > * {
|
nav li > * {
|
||||||
--spacing: 0;
|
--spacing: 0;
|
||||||
}
|
}
|
||||||
nav a,
|
nav :where(a, [role="link"]) {
|
||||||
nav [role=link] {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
|
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
|
||||||
nav [role=link][aria-current],
|
|
||||||
nav [role=link]:hover,
|
|
||||||
nav [role=link]:active,
|
|
||||||
nav [role=link]:focus {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2075,9 +1948,8 @@ details[role=list],
|
||||||
li[role=list] {
|
li[role=list] {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
details[role=list] summary + ul,
|
details[role=list] summary + ul,
|
||||||
details[role=list] > ul,
|
|
||||||
li[role=list] summary + ul,
|
|
||||||
li[role=list] > ul {
|
li[role=list] > ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
@ -2098,8 +1970,6 @@ li[role=list] > ul {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li,
|
details[role=list] summary + ul li,
|
||||||
details[role=list] > ul li,
|
|
||||||
li[role=list] summary + ul li,
|
|
||||||
li[role=list] > ul li {
|
li[role=list] > ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -2107,20 +1977,14 @@ li[role=list] > ul li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li:first-of-type,
|
details[role=list] summary + ul li:first-of-type,
|
||||||
details[role=list] > ul li:first-of-type,
|
|
||||||
li[role=list] summary + ul li:first-of-type,
|
|
||||||
li[role=list] > ul li:first-of-type {
|
li[role=list] > ul li:first-of-type {
|
||||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li:last-of-type,
|
details[role=list] summary + ul li:last-of-type,
|
||||||
details[role=list] > ul li:last-of-type,
|
|
||||||
li[role=list] summary + ul li:last-of-type,
|
|
||||||
li[role=list] > ul li:last-of-type {
|
li[role=list] > ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li a,
|
details[role=list] summary + ul li a,
|
||||||
details[role=list] > ul li a,
|
|
||||||
li[role=list] summary + ul li a,
|
|
||||||
li[role=list] > ul li a {
|
li[role=list] > ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
|
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
|
||||||
|
|
@ -2131,8 +1995,6 @@ li[role=list] > ul li a {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul li a:hover,
|
details[role=list] summary + ul li a:hover,
|
||||||
details[role=list] > ul li a:hover,
|
|
||||||
li[role=list] summary + ul li a:hover,
|
|
||||||
li[role=list] > ul li a:hover {
|
li[role=list] > ul li a:hover {
|
||||||
background-color: var(--dropdown-hover-background-color);
|
background-color: var(--dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
@ -2192,39 +2054,42 @@ details[role=list][open] summary::before {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav [role=list] summary,
|
nav details[role=list] summary,
|
||||||
nav [role=list] a {
|
nav li[role=list] a {
|
||||||
display: flex;
|
display: flex;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul,
|
|
||||||
nav [role=list] > ul {
|
nav details[role=list] summary + ul,
|
||||||
|
nav li[role=list] > ul {
|
||||||
min-width: -webkit-fit-content;
|
min-width: -webkit-fit-content;
|
||||||
min-width: -moz-fit-content;
|
min-width: -moz-fit-content;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul li a,
|
nav details[role=list] summary + ul li a,
|
||||||
nav [role=list] > ul li a {
|
nav li[role=list] > ul li a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav [role=list] summary,
|
nav details[role=list] summary,
|
||||||
nav [role=list] summary:not([role]) {
|
nav details[role=list] summary:not([role]) {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav [role=list][open] summary {
|
nav details[role=list][open] summary {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
nav [role=list] summary + ul {
|
nav details[role=list] summary + ul {
|
||||||
margin-top: var(--outline-width);
|
margin-top: var(--outline-width);
|
||||||
|
-webkit-margin-start: 0;
|
||||||
|
margin-inline-start: 0;
|
||||||
}
|
}
|
||||||
nav [role=list] summary[role=link] {
|
nav details[role=list] summary[role=link] {
|
||||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
nav [role=list] summary[role=link] + ul {
|
nav details[role=list] summary[role=link] + ul {
|
||||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
|
|
|
||||||
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
|
|
@ -594,10 +594,6 @@ sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
address,
|
address,
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
|
|
@ -626,11 +622,8 @@ a,
|
||||||
-webkit-text-decoration: var(--text-decoration);
|
-webkit-text-decoration: var(--text-decoration);
|
||||||
text-decoration: var(--text-decoration);
|
text-decoration: var(--text-decoration);
|
||||||
}
|
}
|
||||||
a[aria-current], a:hover, a:active, a:focus,
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link][aria-current],
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link]:hover,
|
|
||||||
[role=link]:active,
|
|
||||||
[role=link]:focus {
|
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -642,11 +635,8 @@ a.secondary,
|
||||||
[role=link].secondary {
|
[role=link].secondary {
|
||||||
--color: var(--secondary);
|
--color: var(--secondary);
|
||||||
}
|
}
|
||||||
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
|
a.secondary:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link].secondary[aria-current],
|
[role=link].secondary:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link].secondary:hover,
|
|
||||||
[role=link].secondary:active,
|
|
||||||
[role=link].secondary:focus {
|
|
||||||
--color: var(--secondary-hover);
|
--color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
a.secondary:focus,
|
a.secondary:focus,
|
||||||
|
|
@ -657,11 +647,8 @@ a.contrast,
|
||||||
[role=link].contrast {
|
[role=link].contrast {
|
||||||
--color: var(--contrast);
|
--color: var(--contrast);
|
||||||
}
|
}
|
||||||
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
|
a.contrast:is([aria-current], :hover, :active, :focus),
|
||||||
[role=link].contrast[aria-current],
|
[role=link].contrast:is([aria-current], :hover, :active, :focus) {
|
||||||
[role=link].contrast:hover,
|
|
||||||
[role=link].contrast:active,
|
|
||||||
[role=link].contrast:focus {
|
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
a.contrast:focus,
|
a.contrast:focus,
|
||||||
|
|
@ -707,61 +694,7 @@ h6 {
|
||||||
--color: var(--h6-color);
|
--color: var(--h6-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||||||
blockquote ~ h1,
|
|
||||||
blockquote ~ h2,
|
|
||||||
blockquote ~ h3,
|
|
||||||
blockquote ~ h4,
|
|
||||||
blockquote ~ h5,
|
|
||||||
blockquote ~ h6,
|
|
||||||
dl ~ h1,
|
|
||||||
dl ~ h2,
|
|
||||||
dl ~ h3,
|
|
||||||
dl ~ h4,
|
|
||||||
dl ~ h5,
|
|
||||||
dl ~ h6,
|
|
||||||
figure ~ h1,
|
|
||||||
figure ~ h2,
|
|
||||||
figure ~ h3,
|
|
||||||
figure ~ h4,
|
|
||||||
figure ~ h5,
|
|
||||||
figure ~ h6,
|
|
||||||
form ~ h1,
|
|
||||||
form ~ h2,
|
|
||||||
form ~ h3,
|
|
||||||
form ~ h4,
|
|
||||||
form ~ h5,
|
|
||||||
form ~ h6,
|
|
||||||
ol ~ h1,
|
|
||||||
ol ~ h2,
|
|
||||||
ol ~ h3,
|
|
||||||
ol ~ h4,
|
|
||||||
ol ~ h5,
|
|
||||||
ol ~ h6,
|
|
||||||
p ~ h1,
|
|
||||||
p ~ h2,
|
|
||||||
p ~ h3,
|
|
||||||
p ~ h4,
|
|
||||||
p ~ h5,
|
|
||||||
p ~ h6,
|
|
||||||
pre ~ h1,
|
|
||||||
pre ~ h2,
|
|
||||||
pre ~ h3,
|
|
||||||
pre ~ h4,
|
|
||||||
pre ~ h5,
|
|
||||||
pre ~ h6,
|
|
||||||
table ~ h1,
|
|
||||||
table ~ h2,
|
|
||||||
table ~ h3,
|
|
||||||
table ~ h4,
|
|
||||||
table ~ h5,
|
|
||||||
table ~ h6,
|
|
||||||
ul ~ h1,
|
|
||||||
ul ~ h2,
|
|
||||||
ul ~ h3,
|
|
||||||
ul ~ h4,
|
|
||||||
ul ~ h5,
|
|
||||||
ul ~ h6 {
|
|
||||||
margin-top: var(--typography-spacing-vertical);
|
margin-top: var(--typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -789,8 +722,7 @@ small {
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
:where(dl, ol, ul) {
|
||||||
ol {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
|
|
@ -798,11 +730,15 @@ ol {
|
||||||
-webkit-padding-end: 0;
|
-webkit-padding-end: 0;
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
:where(dl, ol, ul) li {
|
||||||
ol li {
|
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
list-style: square;
|
list-style: square;
|
||||||
}
|
}
|
||||||
|
|
@ -905,14 +841,6 @@ button,
|
||||||
-webkit-appearance: 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 {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -946,23 +874,11 @@ input[type=reset],
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
button[aria-current], button:hover, button:active, button:focus,
|
button:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit][aria-current],
|
input[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:hover,
|
input[type=button]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:active,
|
input[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit]:focus,
|
[role=button]:is([aria-current], :hover, :active, :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 {
|
|
||||||
--background-color: var(--primary-hover);
|
--background-color: var(--primary-hover);
|
||||||
--border-color: var(--primary-hover);
|
--border-color: var(--primary-hover);
|
||||||
--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));
|
||||||
|
|
@ -977,174 +893,69 @@ 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[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit].secondary[aria-current],
|
input[type=reset]:is([aria-current], :hover, :active, :focus) {
|
||||||
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 {
|
|
||||||
--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[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :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 {
|
|
||||||
--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[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit].outline[aria-current],
|
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||||
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 {
|
|
||||||
--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[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
|
||||||
input[type=submit].outline.secondary[aria-current],
|
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||||
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 {
|
|
||||||
--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[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :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 {
|
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled],
|
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||||
input[type=submit][disabled],
|
a[role=button]:not([href]) {
|
||||||
input[type=button][disabled],
|
|
||||||
input[type=reset][disabled],
|
|
||||||
a[role=button]:not([href]),
|
|
||||||
[role=button][disabled] {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1279,19 +1090,13 @@ textarea {
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--background-color: var(--form-element-active-background-color);
|
--background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
|
||||||
select:active,
|
:where(select, textarea):is(:active, :focus) {
|
||||||
select:focus,
|
|
||||||
textarea:active,
|
|
||||||
textarea:focus {
|
|
||||||
--border-color: var(--form-element-active-border-color);
|
--border-color: var(--form-element-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1309,9 +1114,7 @@ textarea[disabled] {
|
||||||
opacity: var(--form-element-disabled-opacity);
|
opacity: var(--form-element-disabled-opacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||||||
|
|
@ -1322,50 +1125,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-image: var(--icon-valid);
|
background-image: var(--icon-valid);
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
|
||||||
background-image: var(--icon-invalid);
|
background-image: var(--icon-invalid);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false],
|
:where(input, select, textarea)[aria-invalid=false] {
|
||||||
select[aria-invalid=false],
|
|
||||||
textarea[aria-invalid=false] {
|
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||||
select[aria-invalid=false]:active,
|
|
||||||
select[aria-invalid=false]:focus,
|
|
||||||
textarea[aria-invalid=false]:active,
|
|
||||||
textarea[aria-invalid=false]:focus {
|
|
||||||
--border-color: var(--form-element-valid-active-border-color);
|
--border-color: var(--form-element-valid-active-border-color);
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=true],
|
:where(input, select, textarea)[aria-invalid=true] {
|
||||||
select[aria-invalid=true],
|
|
||||||
textarea[aria-invalid=true] {
|
|
||||||
--border-color: var(--form-element-invalid-border-color);
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||||
select[aria-invalid=true]:active,
|
|
||||||
select[aria-invalid=true]:focus,
|
|
||||||
textarea[aria-invalid=true]:active,
|
|
||||||
textarea[aria-invalid=true]:focus {
|
|
||||||
--border-color: var(--form-element-invalid-active-border-color);
|
--border-color: var(--form-element-invalid-active-border-color);
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
|
||||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1405,9 +1186,7 @@ select:not([multiple]):not([size]) {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input + small,
|
:where(input, select, textarea) + small {
|
||||||
select + small,
|
|
||||||
textarea + small {
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: calc(var(--spacing) * -0.75);
|
margin-top: calc(var(--spacing) * -0.75);
|
||||||
|
|
@ -1415,7 +1194,7 @@ textarea + small {
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
label > input, label > select, label > textarea {
|
label > :where(input, select, textarea) {
|
||||||
margin-top: calc(var(--spacing) * 0.25);
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
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
|
|
@ -6,56 +6,56 @@
|
||||||
details[role="list"],
|
details[role="list"],
|
||||||
li[role="list"] {
|
li[role="list"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
summary + ul,
|
details[role="list"] summary + ul,
|
||||||
> ul {
|
li[role="list"] > ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: auto;
|
top: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: var(--border-width) solid var(--dropdown-border-color);
|
border: var(--border-width) solid var(--dropdown-border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
background-color: var(--dropdown-background-color);
|
background-color: var(--dropdown-background-color);
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
color: var(--dropdown-color);
|
color: var(--dropdown-color);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||||
|
calc(var(--form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
var(--form-element-spacing-horizontal);
|
var(--form-element-spacing-horizontal);
|
||||||
list-style: none;
|
overflow: hidden;
|
||||||
|
color: var(--dropdown-color);
|
||||||
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
&:first-of-type {
|
&:hover {
|
||||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
background-color: var(--dropdown-hover-background-color);
|
||||||
}
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
|
||||||
calc(var(--form-element-spacing-horizontal) * -1);
|
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
|
||||||
var(--form-element-spacing-horizontal);
|
|
||||||
overflow: hidden;
|
|
||||||
color: var(--dropdown-color);
|
|
||||||
text-decoration: none;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--dropdown-hover-background-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -139,26 +139,24 @@ details[role="list"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
// All Dropdowns inside <nav>
|
// All Dropdowns inside <nav>
|
||||||
nav [role="list"] {
|
nav details[role="list"] summary,
|
||||||
summary,
|
nav li[role="list"] a {
|
||||||
a {
|
display: flex;
|
||||||
display: flex;
|
direction: ltr;
|
||||||
direction: ltr;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
summary + ul,
|
nav details[role="list"] summary + ul,
|
||||||
> ul {
|
nav li[role="list"] > ul {
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
||||||
li a {
|
li a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdowns inside <nav> as nested <details>
|
// Dropdowns inside <nav> as nested <details>
|
||||||
nav [role="list"] {
|
nav details[role="list"] {
|
||||||
summary,
|
summary,
|
||||||
summary:not([role]) {
|
summary:not([role]) {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -171,6 +169,7 @@ nav [role="list"] {
|
||||||
|
|
||||||
summary + ul {
|
summary + ul {
|
||||||
margin-top: var(--outline-width);
|
margin-top: var(--outline-width);
|
||||||
|
margin-inline-start: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
summary[role="link"] {
|
summary[role="link"] {
|
||||||
|
|
|
||||||
|
|
@ -92,10 +92,7 @@ dialog {
|
||||||
transition: opacity var(--transition);
|
transition: opacity var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -126,8 +123,7 @@ dialog {
|
||||||
@if ($enable-classes and $enable-transitions) {
|
@if ($enable-classes and $enable-transitions) {
|
||||||
$animation-duration: 0.2s;
|
$animation-duration: 0.2s;
|
||||||
|
|
||||||
.modal-is-opening,
|
:where(.modal-is-opening, .modal-is-closing) {
|
||||||
.modal-is-closing {
|
|
||||||
dialog,
|
dialog,
|
||||||
dialog > article {
|
dialog > article {
|
||||||
animation-duration: $animation-duration;
|
animation-duration: $animation-duration;
|
||||||
|
|
|
||||||
|
|
@ -50,8 +50,7 @@ nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
:where(a, [role="link"]) {
|
||||||
[role="link"] {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||||||
calc(var(--nav-link-spacing-horizontal) * -1);
|
calc(var(--nav-link-spacing-horizontal) * -1);
|
||||||
|
|
@ -59,10 +58,7 @@ nav {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,15 +25,6 @@ button,
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inner border and padding in Firefox
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner {
|
|
||||||
padding: 0;
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -77,10 +68,7 @@ input[type="reset"],
|
||||||
box-shadow var(--transition);
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--background-color: var(--primary-hover);
|
--background-color: var(--primary-hover);
|
||||||
--border-color: var(--primary-hover);
|
--border-color: var(--primary-hover);
|
||||||
--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));
|
||||||
|
|
@ -95,21 +83,16 @@ input[type="reset"],
|
||||||
|
|
||||||
// .secondary, .contrast & .outline
|
// .secondary, .contrast & .outline
|
||||||
@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);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&: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);
|
||||||
|
|
@ -122,19 +105,12 @@ 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);
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&: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);
|
||||||
|
|
@ -147,51 +123,32 @@ 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);
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--background-color: transparent;
|
--background-color: transparent;
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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);
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--color: var(--secondary-hover);
|
--color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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);
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -204,10 +161,7 @@ input[type="reset"],
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
@ -220,13 +174,9 @@ input[type="reset"],
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button [disabled]
|
// Button [disabled]
|
||||||
// 1. Links without href are disabled by default
|
// Links without href are disabled by default
|
||||||
button[disabled],
|
:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
|
||||||
input[type="submit"][disabled],
|
a[role="button"]:not([href]) {
|
||||||
input[type="button"][disabled],
|
|
||||||
input[type="reset"][disabled],
|
|
||||||
a[role="button"]:not([href]), // 1
|
|
||||||
[role="button"][disabled] {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -70,14 +70,9 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"]
|
||||||
[type="date"],
|
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
[type="datetime-local"],
|
text-align: right;
|
||||||
[type="month"],
|
|
||||||
[type="time"],
|
|
||||||
[type="week"] {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// File
|
// File
|
||||||
|
|
@ -88,13 +83,6 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin file-selector-button {
|
@mixin file-selector-button {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
--border-color: var(--secondary);
|
--border-color: var(--secondary);
|
||||||
|
|
@ -123,9 +111,7 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="
|
||||||
box-shadow var(--transition);
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:is(:hover, :active, :focus) {
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-color: var(--secondary-hover);
|
--border-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -174,20 +174,16 @@ textarea {
|
||||||
|
|
||||||
// Active & Focus
|
// Active & Focus
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
||||||
select,
|
:where(select, textarea) {
|
||||||
textarea {
|
&:is(:active, :focus) {
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--background-color: var(--form-element-active-background-color);
|
--background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active & Focus
|
// Active & Focus
|
||||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
||||||
select,
|
:where(select, textarea) {
|
||||||
textarea {
|
&:is(:active, :focus) {
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--border-color: var(--form-element-active-border-color);
|
--border-color: var(--form-element-active-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -213,9 +209,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aria-invalid
|
// Aria-invalid
|
||||||
input,
|
:where(input, select, textarea) {
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
&:not([type="checkbox"]):not([type="radio"]) {
|
&:not([type="checkbox"]):not([type="radio"]) {
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
|
|
@ -251,8 +245,7 @@ textarea {
|
||||||
&[aria-invalid="false"] {
|
&[aria-invalid="false"] {
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
|
|
||||||
&:active,
|
&:is(:active, :focus) {
|
||||||
&:focus {
|
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||||
|
|
@ -267,8 +260,7 @@ textarea {
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
--border-color: var(--form-element-invalid-border-color);
|
--border-color: var(--form-element-invalid-border-color);
|
||||||
|
|
||||||
&:active,
|
&:is(:active, :focus) {
|
||||||
&:focus {
|
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||||
|
|
@ -282,9 +274,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
input,
|
:where(input, select, textarea) {
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
&:not([type="checkbox"]):not([type="radio"]) {
|
&:not([type="checkbox"]):not([type="radio"]) {
|
||||||
&[aria-invalid],
|
&[aria-invalid],
|
||||||
&[aria-invalid="true"],
|
&[aria-invalid="true"],
|
||||||
|
|
@ -341,9 +331,7 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper
|
// Helper
|
||||||
input,
|
:where(input, select, textarea) {
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
+ small {
|
+ small {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -355,9 +343,7 @@ textarea {
|
||||||
|
|
||||||
// Styles for Input inside a label
|
// Styles for Input inside a label
|
||||||
label {
|
label {
|
||||||
& > input,
|
> :where(input, select, textarea) {
|
||||||
& > select,
|
|
||||||
& > textarea {
|
|
||||||
margin-top: calc(var(--spacing) * 0.25);
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,11 +28,6 @@ sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the margin on nested lists in Chrome, Edge, and Safari
|
|
||||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -70,10 +65,7 @@ a,
|
||||||
text-decoration var(--transition), box-shadow var(--transition);
|
text-decoration var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -87,10 +79,7 @@ a,
|
||||||
&.secondary {
|
&.secondary {
|
||||||
--color: var(--secondary);
|
--color: var(--secondary);
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--color: var(--secondary-hover);
|
--color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -103,10 +92,7 @@ a,
|
||||||
&.contrast {
|
&.contrast {
|
||||||
--color: var(--contrast);
|
--color: var(--contrast);
|
||||||
|
|
||||||
&[aria-current],
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
--color: var(--contrast-hover);
|
--color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -152,22 +138,8 @@ h6 {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Margin-top for headings after a typography block
|
// Margin-top for headings after a typography block
|
||||||
address,
|
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||||
blockquote,
|
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||||
dl,
|
|
||||||
figure,
|
|
||||||
form,
|
|
||||||
ol,
|
|
||||||
p,
|
|
||||||
pre,
|
|
||||||
table,
|
|
||||||
ul {
|
|
||||||
& ~ h1,
|
|
||||||
& ~ h2,
|
|
||||||
& ~ h3,
|
|
||||||
& ~ h4,
|
|
||||||
& ~ h5,
|
|
||||||
& ~ h6 {
|
|
||||||
margin-top: var(--typography-spacing-vertical);
|
margin-top: var(--typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -219,8 +191,7 @@ small {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Lists
|
// Lists
|
||||||
ul,
|
:where(dl, ol, ul) {
|
||||||
ol {
|
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
|
|
@ -231,6 +202,15 @@ ol {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Margin-top for nested lists
|
||||||
|
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||||
|
:where(dl, ol, ul) {
|
||||||
|
:is(dl, ol, ul) {
|
||||||
|
margin: 0; // 1
|
||||||
|
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
list-style: square;
|
list-style: square;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue