mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 19:26:14 -04:00
feat(dropdowns): Add nested list support
This commit is contained in:
Lucas Larroche
parent
e54d1ee4f7
commit
083d7e7e6a
15 changed files with 517 additions and 370 deletions
|
|
@ -1,80 +1,128 @@
|
|||
details[role="list"] {
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
*/
|
||||
|
||||
// Menu
|
||||
details[role="list"],
|
||||
li[role="list"] {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
|
||||
summary {
|
||||
summary + ul,
|
||||
> ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: var(--border-width) solid var(--dropdown-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
background-color: var(--dropdown-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
color: var(--dropdown-color);
|
||||
white-space: nowrap;
|
||||
|
||||
& + ul {
|
||||
display: flex;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
min-width: fit-content;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: var(--border-width) solid var(--dropdown-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
background-color: var(--dropdown-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
color: var(--dropdown-color);
|
||||
white-space: nowrap;
|
||||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
&:first-of-type {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
color: var(--dropdown-color);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--form-element-spacing-vertical) * -0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * -1);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
var(--form-element-spacing-horizontal);
|
||||
color: var(--dropdown-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--dropdown-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Marker
|
||||
&::after {
|
||||
height: calc(1rem * var(--line-height));
|
||||
transform: rotate(0deg);
|
||||
// Marker
|
||||
details[role="list"] summary,
|
||||
li[role="list"] > a {
|
||||
&::after {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: calc(1rem * var(--line-height));
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
background-position: right;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
// Global dropdown only
|
||||
details[role="list"] {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
|
||||
// Style <summary> as <select>
|
||||
summary {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not([role="button"]) {
|
||||
height: calc(
|
||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||||
var(--border-width) * 2
|
||||
);
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--form-element-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--form-element-background-color);
|
||||
color: var(--form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] summary,
|
||||
&.disabled summary {
|
||||
border-color: var(--form-element-disabled-border-color);
|
||||
background-color: var(--form-element-disabled-background-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Close for details[role="list"]
|
||||
&[open] summary {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
|
|
@ -90,87 +138,45 @@ details[role="list"] {
|
|||
}
|
||||
}
|
||||
|
||||
// <summary> as a <select>
|
||||
*:not(nav > ul > li):not(nav > aside > ul > li) {
|
||||
> details[role="list"] {
|
||||
summary {
|
||||
&:not([role="button"]) {
|
||||
height: calc(
|
||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
||||
var(--border-width) * 2
|
||||
);
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--form-element-border-color);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--form-element-background-color);
|
||||
color: var(--form-element-placeholder-color);
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
// All Dropdowns inside <nav>
|
||||
nav [role="list"] summary + ul,
|
||||
nav [role="list"] > ul {
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown inside <nav>
|
||||
nav ul li {
|
||||
details[role="list"] {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||||
calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
|
||||
summary:not([role="button"]) {
|
||||
padding: var(--nav-link-spacing-vertical)
|
||||
var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
line-height: var(--line-height);
|
||||
|
||||
&:focus {
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
a {
|
||||
pointer-events: none;
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
& + ul {
|
||||
margin-top: calc(var(--nav-link-spacing-horizontal) * 0.5);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[role="button"] {
|
||||
& + ul {
|
||||
margin-top: var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Dropdowns inside <nav> as nested <details>
|
||||
nav [role="list"] {
|
||||
&[open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
summary + ul {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns inside a <nav> without using <details>
|
||||
li[role="list"] {
|
||||
|
||||
// Open on hover (for mobile)
|
||||
// or on active/focus (for keyboard navigation)
|
||||
&:hover > ul,
|
||||
a:active ~ ul,
|
||||
a:focus ~ ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: none;
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
|
||||
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
|
||||
}
|
||||
|
||||
> a::after {
|
||||
background-image: var(--icon-chevron);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue