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

Merge pull request #140 from picocss/ll/feature/dropdown

Browse source 
Feature: Dropdown
This commit is contained in:
Lucas Larroche 2022-02-28 02:00:53 +07:00 • committed by GitHub
commit 665fe42350
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 1144 additions and 442 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -164,7 +164,7 @@ Pico can be used without custom CSS for quick or small projects. However, it’s
- [Cards](https://picocss.com/docs/cards.html)
- [Modal](https://picocss.com/docs/modal.html)
- [Navs](https://picocss.com/docs/navs.html)
- [Dropdown](https://picocss.com/docs/dropdown.html)
- [Dropdowns](https://picocss.com/docs/dropdowns.html)
- [Progress](https://picocss.com/docs/progress.html)
**Utilities**

199
css/pico.classless.css
View file

@ -272,6 +272,11 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
@ -369,6 +374,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -465,6 +475,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -1793,7 +1808,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -1816,12 +1831,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -1856,6 +1871,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2080,74 +2096,120 @@ progress::-moz-progress-bar {
background-position: -200% 0;
}
}
details[role=list] {
/**
* Dropdown ([role="list"])
*/
details[role=list],
li[role=list] {
position: relative;
}
details[role=list] summary + ul,
details[role=list] > ul,
li[role=list] summary + ul,
li[role=list] > 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;
}
details[role=list] summary + ul li,
details[role=list] > ul li,
li[role=list] summary + ul li,
li[role=list] > ul li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
}
details[role=list] summary + ul li:first-of-type,
details[role=list] > ul li:first-of-type,
li[role=list] summary + ul li:first-of-type,
li[role=list] > ul li:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role=list] summary + ul li:last-of-type,
details[role=list] > ul li:last-of-type,
li[role=list] summary + ul li:last-of-type,
li[role=list] > ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role=list] summary + ul li a,
details[role=list] > ul li a,
li[role=list] summary + ul li a,
li[role=list] > ul li a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
}
details[role=list] summary + ul li a:hover,
details[role=list] > ul li a:hover,
li[role=list] summary + ul li a:hover,
li[role=list] > ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after,
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: "";
}
details[role=list] {
padding: 0;
border-bottom: none;
}
details[role=list] summary {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
margin-bottom: 0;
}
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;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary::after {
height: 100%;
transform: rotate(0deg);
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary + ul {
z-index: 100;
position: absolute;
top: auto;
right: 0px;
left: 0px;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--form-element-border-color);
border-top: none;
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
background-color: var(--background-color);
list-style: none;
}
details[role=list] summary + ul li {
margin-bottom: 0;
}
details[role=list] summary + ul li::marker {
content: "";
}
details[role=list] summary + ul li label {
position: relative;
width: 100%;
margin: 0;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
cursor: pointer;
}
details[role=list] summary + ul li label:hover {
background-color: var(--secondary-focus);
}
details[role=list] summary + ul li label input[type=radio],
details[role=list] summary + ul li label input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
details[role=list][disabled] summary, details[role=list].disabled summary {
color: var(--muted-color);
cursor: not-allowed;
pointer-events: none;
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list][open] summary {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
details[role=list][open] summary::before {
display: block;
z-index: 80;
z-index: 1;
position: fixed;
top: 0;
right: 0;
@ -2157,8 +2219,39 @@ details[role=list][open] summary::before {
content: "";
cursor: default;
}
details[role=list][open] summary::after {
transform: rotate(180deg);
nav [role=list] summary + ul,
nav [role=list] > ul {
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
border-radius: var(--border-radius);
}
nav [role=list] summary + ul li a,
nav [role=list] > ul li a {
border-radius: 0;
}
nav [role=list][open] summary {
border-radius: var(--border-radius);
}
nav [role=list] summary + ul {
margin-top: 2px;
}
li[role=list]:hover > ul,
li[role=list] a:active ~ ul,
li[role=list] a:focus ~ ul {
display: flex;
}
li[role=list] > ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
}
li[role=list] > a::after {
background-image: var(--icon-chevron);
}
/**

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

199
css/pico.css
View file

@ -277,6 +277,11 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
@ -374,6 +379,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -470,6 +480,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -1991,7 +2006,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -2014,12 +2029,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -2057,6 +2072,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2377,74 +2393,120 @@ progress::-moz-progress-bar {
background-position: -200% 0;
}
}
details[role=list] {
/**
* Dropdown ([role="list"])
*/
details[role=list],
li[role=list] {
position: relative;
}
details[role=list] summary + ul,
details[role=list] > ul,
li[role=list] summary + ul,
li[role=list] > 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;
}
details[role=list] summary + ul li,
details[role=list] > ul li,
li[role=list] summary + ul li,
li[role=list] > ul li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
}
details[role=list] summary + ul li:first-of-type,
details[role=list] > ul li:first-of-type,
li[role=list] summary + ul li:first-of-type,
li[role=list] > ul li:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role=list] summary + ul li:last-of-type,
details[role=list] > ul li:last-of-type,
li[role=list] summary + ul li:last-of-type,
li[role=list] > ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role=list] summary + ul li a,
details[role=list] > ul li a,
li[role=list] summary + ul li a,
li[role=list] > ul li a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
}
details[role=list] summary + ul li a:hover,
details[role=list] > ul li a:hover,
li[role=list] summary + ul li a:hover,
li[role=list] > ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after,
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: "";
}
details[role=list] {
padding: 0;
border-bottom: none;
}
details[role=list] summary {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
margin-bottom: 0;
}
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;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary::after {
height: 100%;
transform: rotate(0deg);
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary + ul {
z-index: 100;
position: absolute;
top: auto;
right: 0px;
left: 0px;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--form-element-border-color);
border-top: none;
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
background-color: var(--background-color);
list-style: none;
}
details[role=list] summary + ul li {
margin-bottom: 0;
}
details[role=list] summary + ul li::marker {
content: "";
}
details[role=list] summary + ul li label {
position: relative;
width: 100%;
margin: 0;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
cursor: pointer;
}
details[role=list] summary + ul li label:hover {
background-color: var(--secondary-focus);
}
details[role=list] summary + ul li label input[type=radio],
details[role=list] summary + ul li label input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
details[role=list][disabled] summary, details[role=list].disabled summary {
color: var(--muted-color);
cursor: not-allowed;
pointer-events: none;
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list][open] summary {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
details[role=list][open] summary::before {
display: block;
z-index: 80;
z-index: 1;
position: fixed;
top: 0;
right: 0;
@ -2454,8 +2516,39 @@ details[role=list][open] summary::before {
content: "";
cursor: default;
}
details[role=list][open] summary::after {
transform: rotate(180deg);
nav [role=list] summary + ul,
nav [role=list] > ul {
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
border-radius: var(--border-radius);
}
nav [role=list] summary + ul li a,
nav [role=list] > ul li a {
border-radius: 0;
}
nav [role=list][open] summary {
border-radius: var(--border-radius);
}
nav [role=list] summary + ul {
margin-top: 2px;
}
li[role=list]:hover > ul,
li[role=list] a:active ~ ul,
li[role=list] a:focus ~ ul {
display: flex;
}
li[role=list] > ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
}
li[role=list] > a::after {
background-image: var(--icon-chevron);
}
/**

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

199
css/pico.fluid.classless.css
View file

@ -272,6 +272,11 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
@ -369,6 +374,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -465,6 +475,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -1763,7 +1778,7 @@ canvas {
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
}
details summary {
@ -1786,12 +1801,12 @@ details summary::-moz-list-bullet {
}
details summary::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -1826,6 +1841,7 @@ details[open] > summary::after {
}
[dir=rtl] details summary::after {
float: left;
background-position: left;
}
/**
@ -2050,74 +2066,120 @@ progress::-moz-progress-bar {
background-position: -200% 0;
}
}
details[role=list] {
/**
* Dropdown ([role="list"])
*/
details[role=list],
li[role=list] {
position: relative;
}
details[role=list] summary + ul,
details[role=list] > ul,
li[role=list] summary + ul,
li[role=list] > 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;
}
details[role=list] summary + ul li,
details[role=list] > ul li,
li[role=list] summary + ul li,
li[role=list] > ul li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
list-style: none;
}
details[role=list] summary + ul li:first-of-type,
details[role=list] > ul li:first-of-type,
li[role=list] summary + ul li:first-of-type,
li[role=list] > ul li:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role=list] summary + ul li:last-of-type,
details[role=list] > ul li:last-of-type,
li[role=list] summary + ul li:last-of-type,
li[role=list] > ul li:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
details[role=list] summary + ul li a,
details[role=list] > ul li a,
li[role=list] summary + ul li a,
li[role=list] > ul li a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
}
details[role=list] summary + ul li a:hover,
details[role=list] > ul li a:hover,
li[role=list] summary + ul li a:hover,
li[role=list] > ul li a:hover {
background-color: var(--dropdown-hover-background-color);
}
details[role=list] summary::after,
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: "";
}
details[role=list] {
padding: 0;
border-bottom: none;
}
details[role=list] summary {
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
margin-bottom: 0;
}
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;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
details[role=list] summary::after {
height: 100%;
transform: rotate(0deg);
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
details[role=list] summary + ul {
z-index: 100;
position: absolute;
top: auto;
right: 0px;
left: 0px;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--form-element-border-color);
border-top: none;
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
background-color: var(--background-color);
list-style: none;
}
details[role=list] summary + ul li {
margin-bottom: 0;
}
details[role=list] summary + ul li::marker {
content: "";
}
details[role=list] summary + ul li label {
position: relative;
width: 100%;
margin: 0;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
cursor: pointer;
}
details[role=list] summary + ul li label:hover {
background-color: var(--secondary-focus);
}
details[role=list] summary + ul li label input[type=radio],
details[role=list] summary + ul li label input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
details[role=list][disabled] summary, details[role=list].disabled summary {
color: var(--muted-color);
cursor: not-allowed;
pointer-events: none;
details[role=list] summary:not([role=button]):focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
details[role=list][open] summary {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
details[role=list][open] summary::before {
display: block;
z-index: 80;
z-index: 1;
position: fixed;
top: 0;
right: 0;
@ -2127,8 +2189,39 @@ details[role=list][open] summary::before {
content: "";
cursor: default;
}
details[role=list][open] summary::after {
transform: rotate(180deg);
nav [role=list] summary + ul,
nav [role=list] > ul {
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
border-radius: var(--border-radius);
}
nav [role=list] summary + ul li a,
nav [role=list] > ul li a {
border-radius: 0;
}
nav [role=list][open] summary {
border-radius: var(--border-radius);
}
nav [role=list] summary + ul {
margin-top: 2px;
}
li[role=list]:hover > ul,
li[role=list] a:active ~ ul,
li[role=list] a:focus ~ ul {
display: flex;
}
li[role=list] > ul {
display: none;
margin-top: calc(var(--nav-link-spacing-vertical) + 2px);
-webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
}
li[role=list] > a::after {
background-image: var(--icon-chevron);
}
/**

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

15
css/pico.slim.css
View file

@ -209,6 +209,11 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
@ -306,6 +311,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -402,6 +412,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

15
css/themes/default.css
View file

@ -273,6 +273,11 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--dropdown-background-color: #fbfbfc;
--dropdown-border-color: #e1e6eb;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #edf0f3;
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
@ -370,6 +375,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
@ -466,6 +476,11 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--dropdown-background-color: #1b2832;
--dropdown-border-color: #24333e;
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

2
docs/accordions.html
View file

File diff suppressed because one or more lines are too long

2
docs/buttons.html
View file

File diff suppressed because one or more lines are too long

2
docs/cards.html
View file

File diff suppressed because one or more lines are too long

2
docs/classless.html
View file

File diff suppressed because one or more lines are too long

2
docs/containers.html
View file

File diff suppressed because one or more lines are too long

2
docs/customization.html
View file

File diff suppressed because one or more lines are too long

43
docs/dropdown.html
View file

File diff suppressed because one or more lines are too long

135
docs/dropdowns.html Normal file
View file

File diff suppressed because one or more lines are too long

2
docs/forms.html
View file

File diff suppressed because one or more lines are too long

2
docs/grid.html
View file

File diff suppressed because one or more lines are too long

2
docs/index.html
View file

File diff suppressed because one or more lines are too long

2
docs/loading.html
View file

File diff suppressed because one or more lines are too long

2
docs/modal.html
View file

File diff suppressed because one or more lines are too long

2
docs/navs.html
View file

File diff suppressed because one or more lines are too long

2
docs/progress.html
View file

File diff suppressed because one or more lines are too long

4
docs/rtl.html
View file

File diff suppressed because one or more lines are too long

2
docs/scroller.html
View file

File diff suppressed because one or more lines are too long

2
docs/src/_sidebar.html
View file

@ -43,7 +43,7 @@
<ul>
<li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
<li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
<li><a href="./dropdown.html" id="dropdown-link" class="secondary">Dropdown</a></li>
<li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li>
<li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
<li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>

128
docs/src/dropdown.html
View file

@ -1,128 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
${require('./_head.html') title="Dropdown" description="a dropdown
component, without JavaScript." canonical="dropdown.html" }
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdown-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdown</h1>
<h2>single / multi select dropdown, without JavaScript.</h2>
</hgroup>
<article aria-label="Dropdown examples">
<details role="list">
<summary aria-haspopup="listbox">Single select</summary>
<ul role="listbox">
<li>
<label for="01">
<input type="radio" id="01" name="option1" />
Option 1
</label>
</li>
<li>
<label for="02">
<input type="radio" id="02" name="option1" />
Option 2
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Multi-select</summary>
<ul role="listbox">
<li>
<label for="11">
<input type="checkbox" id="11" name="option2" />
Option 1
</label>
</li>
<li>
<label for="12">
<input type="checkbox" id="12" name="option2" />
Option 2
</label>
</li>
</ul>
</details>
</article>
<label><strong>Usage notes</strong></label>
<ul>
<li>
in order to use dropdown component, use
<code>role='list'</code> on details tag.
</li>
<li>
no need to use javascript to close the dropdown when clicked
outside.
</li>
<li>
for both single / multi-select case, need javascript to update
<code>summary</code> tag text when any option selected.
</li>
<li>
in case of single select, remove <code>open</code> attribute on
<code>details</code> tag using javascript when an option is
selected.
</li>
</ul>
<footer class="code">
<pre>
<code>
<em>&lt;!-- For Single-select --&gt;</em>
&lt;<b>details role="list"</b>&gt;
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Single select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
Option 1
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="02"</b>&gt;
&lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;
<em>&lt;!-- For Multi-select --&gt;</em>
&lt;<b>details role="list"</b>&gt;
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Multi select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
Option 1
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;
</code>
</pre>
</footer>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>

325
docs/src/dropdowns.html Normal file
View file

@ -0,0 +1,325 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Dropdowns"
description="Dropdown menus and custom selects without JavaScript."
canonical="dropdowns.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdowns-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdowns</h1>
<h2>Dropdown menus and custom selects without JavaScript.</h2>
</hgroup>
<p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct childs.</p>
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p>
<article aria-label="Dropdowns as Selects">
<details role="list">
<summary aria-haspopup="listbox">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<select required>
<option value="" disabled selected>Select</option>
<option>Option</option>
<option>Another option</option>
<option>Something else here</option>
</select>
<footer class="code">
<pre><code><em>&lt;!-- Dropdown --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Select --&gt;</em>
&lt;<b>select</b></u>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
</code></pre>
</footer>
</article>
<p><code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code> transforms the dropdown into a button.</p>
<article aria-label="Dropdowns as Buttons">
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- Primary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;
Dropdown as a button 1
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Secondary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;
Dropdown as a button 2
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Contrast --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;
Dropdown as a button 3
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</code></pre>
</footer>
</article>
<p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p>
<article aria-label="Dropdowns with radio buttons or checkboxes">
<details role="list">
<summary aria-haspopup="listbox">Select single element</summary>
<ul role="listbox">
<li>
<label for="small">
<input type="radio" id="small" name="size" value="small" />
Small
</label>
</li>
<li>
<label for="medium">
<input type="radio" id="medium" name="size" value="medium" />
Medium
</label>
</li>
<li>
<label for="large">
<input type="radio" id="large" name="size" value="large" />
Large
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Select multiple elements</summary>
<ul role="listbox">
<li>
<label>
<input type="checkbox" />
Banana
</label>
</li>
<li>
<label>
<input type="checkbox" />
Watermelon
</label>
</li>
<li>
<label>
<input type="checkbox" />
Apple
</label>
</li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- With radio buttons --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u>&gt;
Small
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Medium
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- With checkboxes --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Banana
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Watermelon
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Apple
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</footer>
</article>
<p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p>
<article aria-label="Dropdowns inside a nav">
<nav>
<ul>
<li><strong>Brand</strong></li>
</ul>
<ul>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li>
<details role="list" dir="rtl">
<summary aria-haspopup="listbox" role="button">Dropdown</summary>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</details>
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>rolep</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
<p>You can also use <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested wrapper to render a list as a dropdown.</p>
<p>ℹ️&nbsp;This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p>
<article aria-label="Dropdowns inside a nav">
<nav>
<ul>
<li><strong>Brand</strong></li>
</ul>
<ul>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
<li role="list" dir="rtl">
<a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
<ul role="listbox">
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
</ul>
</li>
</ul>
</nav>
<footer class="code">
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>a</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>

2
docs/src/rtl.html
View file

@ -27,7 +27,7 @@
<em>...</em>
&lt;/<b>html</b>&gt;</code></pre>
<p>The RTL feature is still experimental and will probably evolve.</p>
<p>ℹ️&nbsp;The RTL feature is still experimental and will probably evolve.</p>
</section>
${require('./_footer.html')}

2
docs/tables.html
View file

File diff suppressed because one or more lines are too long

2
docs/themes.html
View file

File diff suppressed because one or more lines are too long

2
docs/tooltips.html
View file

File diff suppressed because one or more lines are too long

2
docs/typography.html
View file

File diff suppressed because one or more lines are too long

2
docs/we-love-classes.html
View file

File diff suppressed because one or more lines are too long

7
scss/components/_accordion.scss
View file

@ -5,7 +5,7 @@
details {
display: block;
margin-bottom: var(--spacing);
padding-bottom: calc(var(--spacing));
padding-bottom: var(--spacing);
border-bottom: var(--border-width) solid var(--accordion-border-color);
summary {
@ -38,12 +38,12 @@ details {
// Marker
&::after {
display: block;
width: 1rem;
width: 1.5rem;
height: 1rem;
float: right;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: center;
background-position: right;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
@ -111,6 +111,7 @@ details {
&::after {
float: left;
background-position: left;
}
}
}

193
scss/components/_dropdown.scss
View file

@ -1,93 +1,182 @@
details[role='list'] {
/**
* Dropdown ([role="list"])
*/
// Menu
details[role="list"],
li[role="list"] {
position: relative;
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;
li {
width: 100%;
margin-bottom: 0;
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
list-style: none;
&:first-of-type {
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:last-of-type {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
a {
display: block;
margin: calc(var(--form-element-spacing-vertical) * -0.5)
calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
var(--form-element-spacing-horizontal);
overflow: hidden;
color: var(--dropdown-color);
text-decoration: none;
text-overflow: ellipsis;
&:hover {
background-color: var(--dropdown-hover-background-color);
}
}
}
}
}
// 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
);
margin-bottom: 0;
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;
&::after {
height: 100%;
transform: rotate(0deg);
@if $enable-transitions {
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
& + ul {
z-index: 100;
position: absolute;
top: auto;
right: 0px;
left: 0px;
margin: 0;
padding: 0;
border: var(--border-width) solid var(--form-element-border-color);
border-top: none;
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
background-color: var(--background-color);
list-style: none;
li {
margin-bottom: 0;
&::marker {
content: '';
&:active,
&:focus {
border-color: var(--form-element-active-border-color);
background-color: var(--form-element-active-background-color);
}
label {
position: relative;
width: 100%;
margin: 0;
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
cursor: pointer;
&:hover {
background-color: var(--secondary-focus);
}
input[type='radio'],
input[type='checkbox'] {
appearance: none;
}
}
&:focus {
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
}
}
&[disabled] summary,
&.disabled summary {
color: var(--muted-color);
cursor: not-allowed;
pointer-events: none;
}
// Close for details[role="list"]
&[open] summary {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
&::before {
display: block;
z-index: 80;
z-index: 1;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
content: ' ';
content: "";
cursor: default;
}
}
}
&::after {
transform: rotate(180deg);
// All Dropdowns inside <nav>
nav [role="list"] summary + ul,
nav [role="list"] > ul {
min-width: fit-content;
border-radius: var(--border-radius);
li a {
border-radius: 0;
}
}
// 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);
}
}

4
scss/components/_modal.scss
View file

@ -58,7 +58,7 @@ dialog {
> footer {
text-align: right;
[role='button'] {
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
@ -104,7 +104,7 @@ dialog {
// Closed state
&:not([open]),
&[open='false'] {
&[open="false"] {
display: none;
}
}

7
scss/themes/default/_dark.scss
View file

@ -112,6 +112,13 @@
0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{$grey-900};
--dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};

7
scss/themes/default/_light.scss
View file

@ -112,6 +112,13 @@
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
--dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};

2
scss/utilities/_loading.scss
View file

@ -18,7 +18,7 @@
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: '';
content: "";
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;

2
scss/utilities/_tooltip.scss
View file

@ -44,7 +44,7 @@
border-left: .3rem solid transparent;
border-radius: 0;
background-color: transparent;
content: '';
content: "";
color: var(--tooltip-background-color);
}