mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
refactor: dropdown
This commit is contained in:
Lucas Larroche
parent
09dc2a75b5
commit
f0a2480fc6
14 changed files with 56 additions and 410 deletions
|
|
@ -250,14 +250,6 @@ input:not([type=submit],
|
|||
--pico-border-width: 0.1875rem;
|
||||
}
|
||||
|
||||
details[role=list] summary:not([role=button]) {
|
||||
--pico-outline-width: 0.0625rem;
|
||||
}
|
||||
|
||||
nav details[role=list] summary:focus-visible {
|
||||
--pico-outline-width: 0.1875rem;
|
||||
}
|
||||
|
||||
[role=search] {
|
||||
--pico-border-radius: 5rem;
|
||||
}
|
||||
|
|
@ -373,11 +365,6 @@ nav details[role=list] summary:focus-visible {
|
|||
--pico-card-border-color: var(--pico-muted-border-color);
|
||||
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||
--pico-card-sectioning-background-color: #fbfcfc;
|
||||
--pico-dropdown-background-color: #fff;
|
||||
--pico-dropdown-border-color: #eff1f4;
|
||||
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||
--pico-dropdown-color: var(--pico-color);
|
||||
--pico-dropdown-hover-background-color: #eff1f4;
|
||||
--pico-loading-spinner-opacity: 0.5;
|
||||
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
|
||||
--pico-progress-background-color: #dfe3eb;
|
||||
|
|
@ -494,11 +481,6 @@ nav details[role=list] summary:focus-visible {
|
|||
--pico-card-border-color: var(--pico-card-background-color);
|
||||
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||
--pico-card-sectioning-background-color: #1a1f28;
|
||||
--pico-dropdown-background-color: #181c25;
|
||||
--pico-dropdown-border-color: #202632;
|
||||
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||
--pico-dropdown-color: var(--pico-color);
|
||||
--pico-dropdown-hover-background-color: #202632;
|
||||
--pico-loading-spinner-opacity: 0.5;
|
||||
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
|
||||
--pico-progress-background-color: #202632;
|
||||
|
|
@ -608,11 +590,6 @@ nav details[role=list] summary:focus-visible {
|
|||
--pico-card-border-color: var(--pico-card-background-color);
|
||||
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||
--pico-card-sectioning-background-color: #1a1f28;
|
||||
--pico-dropdown-background-color: #181c25;
|
||||
--pico-dropdown-border-color: #202632;
|
||||
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||
--pico-dropdown-color: var(--pico-color);
|
||||
--pico-dropdown-hover-background-color: #202632;
|
||||
--pico-loading-spinner-opacity: 0.5;
|
||||
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
|
||||
--pico-progress-background-color: #202632;
|
||||
|
|
@ -1921,160 +1898,6 @@ article > footer {
|
|||
border-bottom-left-radius: var(--pico-border-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
*/
|
||||
details[role=list] {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
}
|
||||
details[role=list] summary::after,
|
||||
details[role=list] > button::after,
|
||||
details[role=list] > a::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(--pico-line-height, 1.5));
|
||||
-webkit-margin-start: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
float: right;
|
||||
transform: rotate(0deg) translateX(0.2rem);
|
||||
background-image: var(--pico-icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav details[role=list] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[role=list] summary:not([role]) {
|
||||
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);
|
||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
background-color: var(--pico-form-element-background-color);
|
||||
color: var(--pico-form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-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);
|
||||
}
|
||||
details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
|
||||
border-color: var(--pico-form-element-active-border-color);
|
||||
background-color: var(--pico-form-element-active-background-color);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
details[role=list] summary:not([role])[aria-invalid=false] {
|
||||
--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-focus-color: var(--pico-form-element-valid-focus-color);
|
||||
}
|
||||
details[role=list] summary:not([role])[aria-invalid=true] {
|
||||
--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-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||
}
|
||||
|
||||
nav details[role=list] {
|
||||
display: inline;
|
||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||
}
|
||||
nav details[role=list] summary:not([role]) {
|
||||
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);
|
||||
}
|
||||
nav details[role=list] summary:not([role]):focus-visible {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
}
|
||||
|
||||
details[role=list] summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
margin: 0;
|
||||
margin-top: var(--pico-outline-width);
|
||||
padding: 0;
|
||||
border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
background-color: var(--pico-dropdown-background-color);
|
||||
box-shadow: var(--pico-dropdown-box-shadow);
|
||||
color: var(--pico-dropdown-color);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||
}
|
||||
details[role=list] summary + ul[dir=rtl] {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
details[role=list] summary + ul li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
}
|
||||
details[role=list] summary + ul li:first-of-type {
|
||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
details[role=list] summary + ul li:last-of-type {
|
||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
details[role=list] summary + ul li a {
|
||||
display: block;
|
||||
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);
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
color: var(--pico-dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
details[role=list] summary + ul li label {
|
||||
width: 100%;
|
||||
}
|
||||
details[role=list] summary + ul li:has(label):hover {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
|
||||
details[role=list][open] summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[role=list][open] summary + ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||
}
|
||||
|
||||
details[role=list][open] summary::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
inset: 0;
|
||||
background: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
58
css/pico.css
58
css/pico.css
|
|
@ -252,11 +252,11 @@ input:not([type=submit],
|
|||
--pico-border-width: 0.1875rem;
|
||||
}
|
||||
|
||||
details[role=list] summary:not([role=button]) {
|
||||
details.dropdown summary:not([role=button]) {
|
||||
--pico-outline-width: 0.0625rem;
|
||||
}
|
||||
|
||||
nav details[role=list] summary:focus-visible {
|
||||
nav details.dropdown summary:focus-visible {
|
||||
--pico-outline-width: 0.1875rem;
|
||||
}
|
||||
|
||||
|
|
@ -2051,15 +2051,15 @@ article > footer {
|
|||
}
|
||||
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
* Dropdown (details.dropdown)
|
||||
*/
|
||||
details[role=list] {
|
||||
details.dropdown {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
}
|
||||
details[role=list] summary::after,
|
||||
details[role=list] > button::after,
|
||||
details[role=list] > a::after {
|
||||
details.dropdown summary::after,
|
||||
details.dropdown > button::after,
|
||||
details.dropdown > a::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(--pico-line-height, 1.5));
|
||||
|
|
@ -2074,11 +2074,11 @@ details[role=list] > a::after {
|
|||
content: "";
|
||||
}
|
||||
|
||||
nav details[role=list] {
|
||||
nav details.dropdown {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[role=list] 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);
|
||||
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);
|
||||
|
|
@ -2092,40 +2092,40 @@ details[role=list] summary:not([role]) {
|
|||
user-select: none;
|
||||
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
|
||||
}
|
||||
details[role=list] summary:not([role]):active, details[role=list] 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);
|
||||
background-color: var(--pico-form-element-active-background-color);
|
||||
}
|
||||
details[role=list] 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);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus-visible {
|
||||
details.dropdown summary:not([role]):focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
details[role=list] 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-active-border-color: var(--pico-form-element-valid-focus-color);
|
||||
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
||||
}
|
||||
details[role=list] 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-active-border-color: var(--pico-form-element-invalid-focus-color);
|
||||
--pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||
}
|
||||
|
||||
nav details[role=list] {
|
||||
nav details.dropdown {
|
||||
display: inline;
|
||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||
}
|
||||
nav details[role=list] summary:not([role]) {
|
||||
nav details.dropdown summary:not([role]) {
|
||||
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);
|
||||
}
|
||||
nav details[role=list] 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);
|
||||
}
|
||||
|
||||
details[role=list] summary + ul {
|
||||
details.dropdown summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
|
|
@ -2146,23 +2146,23 @@ details[role=list] summary + ul {
|
|||
opacity: 0;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||
}
|
||||
details[role=list] summary + ul[dir=rtl] {
|
||||
details.dropdown summary + ul[dir=rtl] {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
details[role=list] summary + ul li {
|
||||
details.dropdown summary + ul li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
}
|
||||
details[role=list] 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);
|
||||
}
|
||||
details[role=list] 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);
|
||||
}
|
||||
details[role=list] summary + ul li a {
|
||||
details.dropdown summary + ul li a {
|
||||
display: block;
|
||||
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);
|
||||
|
|
@ -2172,27 +2172,27 @@ details[role=list] summary + ul li a {
|
|||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
|
||||
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] {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
details[role=list] summary + ul li label {
|
||||
details.dropdown summary + ul li label {
|
||||
width: 100%;
|
||||
}
|
||||
details[role=list] summary + ul li:has(label):hover {
|
||||
details.dropdown summary + ul li:has(label):hover {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
|
||||
details[role=list][open] summary {
|
||||
details.dropdown[open] summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[role=list][open] summary + ul {
|
||||
details.dropdown[open] summary + ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||
}
|
||||
|
||||
details[role=list][open] summary::before {
|
||||
details.dropdown[open] summary::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -250,14 +250,6 @@ input:not([type=submit],
|
|||
--pico-border-width: 0.1875rem;
|
||||
}
|
||||
|
||||
details[role=list] summary:not([role=button]) {
|
||||
--pico-outline-width: 0.0625rem;
|
||||
}
|
||||
|
||||
nav details[role=list] summary:focus-visible {
|
||||
--pico-outline-width: 0.1875rem;
|
||||
}
|
||||
|
||||
[role=search] {
|
||||
--pico-border-radius: 5rem;
|
||||
}
|
||||
|
|
@ -373,11 +365,6 @@ nav details[role=list] summary:focus-visible {
|
|||
--pico-card-border-color: var(--pico-muted-border-color);
|
||||
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||
--pico-card-sectioning-background-color: #fbfcfc;
|
||||
--pico-dropdown-background-color: #fff;
|
||||
--pico-dropdown-border-color: #eff1f4;
|
||||
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||
--pico-dropdown-color: var(--pico-color);
|
||||
--pico-dropdown-hover-background-color: #eff1f4;
|
||||
--pico-loading-spinner-opacity: 0.5;
|
||||
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
|
||||
--pico-progress-background-color: #dfe3eb;
|
||||
|
|
@ -494,11 +481,6 @@ nav details[role=list] summary:focus-visible {
|
|||
--pico-card-border-color: var(--pico-card-background-color);
|
||||
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||
--pico-card-sectioning-background-color: #1a1f28;
|
||||
--pico-dropdown-background-color: #181c25;
|
||||
--pico-dropdown-border-color: #202632;
|
||||
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||
--pico-dropdown-color: var(--pico-color);
|
||||
--pico-dropdown-hover-background-color: #202632;
|
||||
--pico-loading-spinner-opacity: 0.5;
|
||||
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
|
||||
--pico-progress-background-color: #202632;
|
||||
|
|
@ -608,11 +590,6 @@ nav details[role=list] summary:focus-visible {
|
|||
--pico-card-border-color: var(--pico-card-background-color);
|
||||
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||
--pico-card-sectioning-background-color: #1a1f28;
|
||||
--pico-dropdown-background-color: #181c25;
|
||||
--pico-dropdown-border-color: #202632;
|
||||
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||
--pico-dropdown-color: var(--pico-color);
|
||||
--pico-dropdown-hover-background-color: #202632;
|
||||
--pico-loading-spinner-opacity: 0.5;
|
||||
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
|
||||
--pico-progress-background-color: #202632;
|
||||
|
|
@ -1884,160 +1861,6 @@ article > footer {
|
|||
border-bottom-left-radius: var(--pico-border-radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
*/
|
||||
details[role=list] {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
}
|
||||
details[role=list] summary::after,
|
||||
details[role=list] > button::after,
|
||||
details[role=list] > a::after {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: calc(1rem * var(--pico-line-height, 1.5));
|
||||
-webkit-margin-start: 0.25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
float: right;
|
||||
transform: rotate(0deg) translateX(0.2rem);
|
||||
background-image: var(--pico-icon-chevron);
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav details[role=list] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[role=list] summary:not([role]) {
|
||||
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);
|
||||
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
background-color: var(--pico-form-element-background-color);
|
||||
color: var(--pico-form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-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);
|
||||
}
|
||||
details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {
|
||||
border-color: var(--pico-form-element-active-border-color);
|
||||
background-color: var(--pico-form-element-active-background-color);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
details[role=list] summary:not([role])[aria-invalid=false] {
|
||||
--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-focus-color: var(--pico-form-element-valid-focus-color);
|
||||
}
|
||||
details[role=list] summary:not([role])[aria-invalid=true] {
|
||||
--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-focus-color: var(--pico-form-element-invalid-focus-color);
|
||||
}
|
||||
|
||||
nav details[role=list] {
|
||||
display: inline;
|
||||
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
||||
}
|
||||
nav details[role=list] summary:not([role]) {
|
||||
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);
|
||||
}
|
||||
nav details[role=list] summary:not([role]):focus-visible {
|
||||
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
||||
}
|
||||
|
||||
details[role=list] summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
margin: 0;
|
||||
margin-top: var(--pico-outline-width);
|
||||
padding: 0;
|
||||
border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
|
||||
border-radius: var(--pico-border-radius);
|
||||
background-color: var(--pico-dropdown-background-color);
|
||||
box-shadow: var(--pico-dropdown-box-shadow);
|
||||
color: var(--pico-dropdown-color);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
|
||||
}
|
||||
details[role=list] summary + ul[dir=rtl] {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
details[role=list] summary + ul li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
}
|
||||
details[role=list] summary + ul li:first-of-type {
|
||||
margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
details[role=list] summary + ul li:last-of-type {
|
||||
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
details[role=list] summary + ul li a {
|
||||
display: block;
|
||||
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);
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
color: var(--pico-dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
details[role=list] summary + ul li label {
|
||||
width: 100%;
|
||||
}
|
||||
details[role=list] summary + ul li:has(label):hover {
|
||||
background-color: var(--pico-dropdown-hover-background-color);
|
||||
}
|
||||
|
||||
details[role=list][open] summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
details[role=list][open] summary + ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
|
||||
}
|
||||
|
||||
details[role=list][open] summary::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
inset: 0;
|
||||
background: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Group ([role="group"], [role="search"])
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -18,7 +18,7 @@
|
|||
@use "content/link"; // a, role="link"
|
||||
@use "content/typography"; // headings, p, ul, blockquote, ...
|
||||
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@use "content/button"; // button, [role="button"], type="button", type="submit" ...
|
||||
@use "content/button"; // button, role="button", type="button", type="submit" ...
|
||||
@use "content/table"; // table, tr, td, ...
|
||||
@use "content/code"; // pre, code, ...
|
||||
@use "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
// Components
|
||||
@use "components/accordion"; // details, summary
|
||||
@use "components/card"; // article
|
||||
@use "components/dropdown"; // details[role="list"]
|
||||
@use "components/group"; // details[role="list"]
|
||||
@use "components/dropdown"; // details.dropdown
|
||||
@use "components/group"; // role="group"
|
||||
@use "components/loading"; // aria-busy=true
|
||||
@use "components/modal"; // dialog
|
||||
@use "components/nav"; // nav
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@use "sass:map";
|
||||
@use "../settings" as *;
|
||||
|
||||
@if map.get($modules, "components/dropdown") {
|
||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
* Dropdown (details.dropdown)
|
||||
*/
|
||||
|
||||
// Container
|
||||
// ––––––––––––––––––––
|
||||
details[role="list"] {
|
||||
details.dropdown {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
// Container type accordion
|
||||
// inside a nav
|
||||
// ––––––––––––––––––––
|
||||
nav details[role="list"] {
|
||||
nav details.dropdown {
|
||||
// Override height
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
// Bouton as a select
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
details[role="list"] summary:not([role]) {
|
||||
details.dropdown summary:not([role]) {
|
||||
height: calc(
|
||||
1rem *
|
||||
var(#{$✨}line-height) +
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
|
||||
// Dropdown inside a nav
|
||||
// ––––––––––––––––––––
|
||||
nav details[role="list"] {
|
||||
nav details.dropdown {
|
||||
display: inline;
|
||||
margin: calc(var(#{$✨}nav-element-spacing-vertical) * -1) 0;
|
||||
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
|
||||
// Submenu
|
||||
// ––––––––––––––––––––
|
||||
details[role="list"] summary + ul {
|
||||
details.dropdown summary + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
|
|
@ -196,14 +196,14 @@
|
|||
// Button opened
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
details[role="list"][open] summary {
|
||||
details.dropdown[open] summary {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Menu opened
|
||||
// ––––––––––––––––––––
|
||||
// 1. Inside container type accordion
|
||||
details[role="list"][open] summary {
|
||||
details.dropdown[open] summary {
|
||||
+ ul {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
// Close for dropdown
|
||||
// inside container type accordion
|
||||
// ––––––––––––––––––––
|
||||
details[role="list"][open] summary {
|
||||
details.dropdown[open] summary {
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -167,8 +167,8 @@
|
|||
#{$✨}card-sectioning-background-color: #{mix($slate-900, $slate-850, 75%)};
|
||||
}
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
@if map.get($modules, "components/dropdown") {
|
||||
// Dropdown (details.dropdown)
|
||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||
#{$✨}dropdown-background-color: #{$slate-900};
|
||||
#{$✨}dropdown-border-color: #{$slate-850};
|
||||
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
|
||||
|
|
|
|||
|
|
@ -167,8 +167,8 @@
|
|||
#{$✨}card-sectioning-background-color: #{mix($slate-50, $white, 25%)};
|
||||
}
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
@if map.get($modules, "components/dropdown") {
|
||||
// Dropdown (details.dropdown)
|
||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||
#{$✨}dropdown-background-color: #{$white};
|
||||
#{$✨}dropdown-border-color: #{$slate-50};
|
||||
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
|
||||
|
|
|
|||
|
|
@ -358,15 +358,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Dropdown (<details role="list">)
|
||||
@if map.get($modules, "components/dropdown") {
|
||||
details[role="list"] {
|
||||
// Dropdown (details.dropdown)
|
||||
@if map.get($modules, "components/dropdown") and $enable-classes {
|
||||
details.dropdown {
|
||||
summary:not([role="button"]) {
|
||||
#{$✨}outline-width: 0.0625rem;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
details[role="list"] {
|
||||
details.dropdown {
|
||||
summary:focus-visible {
|
||||
#{$✨}outline-width: 0.1875rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue