mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
chore: build
This commit is contained in:
Lucas Larroche
parent
96ad16eef1
commit
69f3dcf4e5
80 changed files with 920 additions and 920 deletions
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.amber.min.css
vendored
2
css/pico.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.blue.min.css
vendored
2
css/pico.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.amber.min.css
vendored
2
css/pico.conditional.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.blue.min.css
vendored
2
css/pico.conditional.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.cyan.min.css
vendored
2
css/pico.conditional.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.fuchsia.min.css
vendored
2
css/pico.conditional.fuchsia.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.green.min.css
vendored
2
css/pico.conditional.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.grey.min.css
vendored
2
css/pico.conditional.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.indigo.min.css
vendored
2
css/pico.conditional.indigo.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.jade.min.css
vendored
2
css/pico.conditional.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.lime.min.css
vendored
2
css/pico.conditional.lime.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.conditional.min.css
vendored
2
css/pico.conditional.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.orange.min.css
vendored
2
css/pico.conditional.orange.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.pink.min.css
vendored
2
css/pico.conditional.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.pumpkin.min.css
vendored
2
css/pico.conditional.pumpkin.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.purple.min.css
vendored
2
css/pico.conditional.purple.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.red.min.css
vendored
2
css/pico.conditional.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.sand.min.css
vendored
2
css/pico.conditional.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.slate.min.css
vendored
2
css/pico.conditional.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.violet.min.css
vendored
2
css/pico.conditional.violet.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.yellow.min.css
vendored
2
css/pico.conditional.yellow.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ main {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary::after,
|
.pico details.dropdown > summary::after,
|
||||||
.pico details.dropdown > button::after,
|
.pico details.dropdown > button::after,
|
||||||
.pico details.dropdown > a::after {
|
.pico details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ main {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary:not([role]) {
|
.pico details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ main {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):active, .pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):active, .pico details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus {
|
.pico details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role]):focus-visible {
|
.pico details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=false] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary:not([role])[aria-invalid=true] {
|
.pico details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ main {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary::after {
|
.pico nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]) {
|
.pico nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
.pico nav details.dropdown summary:not([role]):focus-visible {
|
.pico nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown summary + ul {
|
.pico details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ main {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul[dir=rtl] {
|
.pico details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li {
|
.pico details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:first-of-type {
|
.pico details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:last-of-type {
|
.pico details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a {
|
.pico details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ main {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li a:hover, .pico details.dropdown summary + ul li a:focus, .pico details.dropdown summary + ul li a:active, .pico details.dropdown summary + ul li a:focus-visible, .pico details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
.pico details.dropdown > summary + ul li a:hover, .pico details.dropdown > summary + ul li a:focus, .pico details.dropdown > summary + ul li a:active, .pico details.dropdown > summary + ul li a:focus-visible, .pico details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li label {
|
.pico details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.pico details.dropdown summary + ul li:has(label):hover {
|
.pico details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary {
|
.pico details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary + ul {
|
.pico details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico details.dropdown[open] summary::before {
|
.pico details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.conditional.zinc.min.css
vendored
2
css/pico.conditional.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
44
css/pico.css
44
css/pico.css
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.cyan.min.css
vendored
2
css/pico.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.fuchsia.min.css
vendored
2
css/pico.fuchsia.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.green.min.css
vendored
2
css/pico.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.grey.min.css
vendored
2
css/pico.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.indigo.min.css
vendored
2
css/pico.indigo.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.jade.min.css
vendored
2
css/pico.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.lime.min.css
vendored
2
css/pico.lime.min.css
vendored
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
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.orange.min.css
vendored
2
css/pico.orange.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.pink.min.css
vendored
2
css/pico.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.pumpkin.min.css
vendored
2
css/pico.pumpkin.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.purple.min.css
vendored
2
css/pico.purple.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.red.min.css
vendored
2
css/pico.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.sand.min.css
vendored
2
css/pico.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.slate.min.css
vendored
2
css/pico.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.violet.min.css
vendored
2
css/pico.violet.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.yellow.min.css
vendored
2
css/pico.yellow.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2025,7 +2025,7 @@ details.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary::after,
|
details.dropdown > summary::after,
|
||||||
details.dropdown > button::after,
|
details.dropdown > button::after,
|
||||||
details.dropdown > a::after {
|
details.dropdown > a::after {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -2045,7 +2045,7 @@ nav details.dropdown {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary:not([role]) {
|
details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
|
||||||
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
||||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||||
|
|
@ -2059,22 +2059,22 @@ details.dropdown summary:not([role]) {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
||||||
border-color: var(--pico-form-element-active-border-color);
|
border-color: var(--pico-form-element-active-border-color);
|
||||||
background-color: var(--pico-form-element-active-background-color);
|
background-color: var(--pico-form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus {
|
details.dropdown > summary:not([role]):focus {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role]):focus-visible {
|
details.dropdown > summary:not([role]):focus-visible {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=false] {
|
details.dropdown > summary:not([role])[aria-invalid=false] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary:not([role])[aria-invalid=true] {
|
details.dropdown > summary:not([role])[aria-invalid=true] {
|
||||||
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
||||||
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||||
|
|
@ -2084,18 +2084,18 @@ nav details.dropdown {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||||
}
|
}
|
||||||
nav details.dropdown summary::after {
|
nav details.dropdown > summary::after {
|
||||||
transform: rotate(0deg) translateX(0rem);
|
transform: rotate(0deg) translateX(0rem);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]) {
|
nav details.dropdown > summary:not([role]) {
|
||||||
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
||||||
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
nav details.dropdown summary:not([role]):focus-visible {
|
nav details.dropdown > summary:not([role]):focus-visible {
|
||||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown summary + ul {
|
details.dropdown > summary + ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -2116,23 +2116,23 @@ details.dropdown summary + ul {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul[dir=rtl] {
|
details.dropdown > summary + ul[dir=rtl] {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li {
|
details.dropdown > summary + ul li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:first-of-type {
|
details.dropdown > summary + ul li:first-of-type {
|
||||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:last-of-type {
|
details.dropdown > summary + ul li:last-of-type {
|
||||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a {
|
details.dropdown > summary + ul li a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
|
||||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||||
|
|
@ -2142,27 +2142,27 @@ details.dropdown summary + ul li a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) {
|
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li label {
|
details.dropdown > summary + ul li label {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
details.dropdown summary + ul li:has(label):hover {
|
details.dropdown > summary + ul li:has(label):hover {
|
||||||
background-color: var(--pico-dropdown-hover-background-color);
|
background-color: var(--pico-dropdown-hover-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary {
|
details.dropdown[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary + ul {
|
details.dropdown[open] > summary + ul {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
details.dropdown[open] summary::before {
|
details.dropdown[open] > summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
2
css/pico.zinc.min.css
vendored
2
css/pico.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue