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

refactor: dropdown

Browse source
This commit is contained in:
Lucas Larroche 2023-04-02 22:37:00 +07:00
parent 09dc2a75b5
commit f0a2480fc6
14 changed files with 56 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

58
css/pico.css
View file

@ -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;