mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
Merge pull request #140 from picocss/ll/feature/dropdown
Feature: Dropdown
This commit is contained in:
Lucas Larroche
GitHub
commit
665fe42350
54 changed files with 1144 additions and 442 deletions
|
|
@ -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)
|
- [Cards](https://picocss.com/docs/cards.html)
|
||||||
- [Modal](https://picocss.com/docs/modal.html)
|
- [Modal](https://picocss.com/docs/modal.html)
|
||||||
- [Navs](https://picocss.com/docs/navs.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)
|
- [Progress](https://picocss.com/docs/progress.html)
|
||||||
|
|
||||||
**Utilities**
|
**Utilities**
|
||||||
|
|
|
||||||
|
|
@ -272,6 +272,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--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);
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -369,6 +374,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -465,6 +475,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -1793,7 +1808,7 @@ canvas {
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
padding-bottom: calc(var(--spacing));
|
padding-bottom: var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
}
|
}
|
||||||
details summary {
|
details summary {
|
||||||
|
|
@ -1816,12 +1831,12 @@ details summary::-moz-list-bullet {
|
||||||
}
|
}
|
||||||
details summary::after {
|
details summary::after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1.5rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: right;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -1856,6 +1871,7 @@ details[open] > summary::after {
|
||||||
}
|
}
|
||||||
[dir=rtl] details summary::after {
|
[dir=rtl] details summary::after {
|
||||||
float: left;
|
float: left;
|
||||||
|
background-position: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -2080,85 +2096,162 @@ progress::-moz-progress-bar {
|
||||||
background-position: -200% 0;
|
background-position: -200% 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
details[role=list] {
|
/**
|
||||||
|
* Dropdown ([role="list"])
|
||||||
|
*/
|
||||||
|
details[role=list],
|
||||||
|
li[role=list] {
|
||||||
position: relative;
|
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;
|
padding: 0;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details[role=list] summary {
|
details[role=list] summary {
|
||||||
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
|
|
||||||
margin-bottom: 0;
|
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);
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
border: var(--border-width) solid var(--form-element-border-color);
|
border: var(--border-width) solid var(--form-element-border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--form-element-background-color);
|
||||||
|
color: var(--form-element-placeholder-color);
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
details[role=list] summary::after {
|
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
|
||||||
height: 100%;
|
border-color: var(--form-element-active-border-color);
|
||||||
transform: rotate(0deg);
|
background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul {
|
details[role=list] summary:not([role=button]):focus {
|
||||||
z-index: 100;
|
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||||
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][open] summary {
|
details[role=list][open] summary {
|
||||||
margin-bottom: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
details[role=list][open] summary::before {
|
details[role=list][open] summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 80;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
content: " ";
|
content: "";
|
||||||
cursor: default;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
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
File diff suppressed because one or more lines are too long
201
css/pico.css
201
css/pico.css
|
|
@ -277,6 +277,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--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);
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -374,6 +379,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -470,6 +480,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -1991,7 +2006,7 @@ canvas {
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
padding-bottom: calc(var(--spacing));
|
padding-bottom: var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
}
|
}
|
||||||
details summary {
|
details summary {
|
||||||
|
|
@ -2014,12 +2029,12 @@ details summary::-moz-list-bullet {
|
||||||
}
|
}
|
||||||
details summary::after {
|
details summary::after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1.5rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: right;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -2057,6 +2072,7 @@ details[open] > summary::after {
|
||||||
}
|
}
|
||||||
[dir=rtl] details summary::after {
|
[dir=rtl] details summary::after {
|
||||||
float: left;
|
float: left;
|
||||||
|
background-position: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -2377,85 +2393,162 @@ progress::-moz-progress-bar {
|
||||||
background-position: -200% 0;
|
background-position: -200% 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
details[role=list] {
|
/**
|
||||||
|
* Dropdown ([role="list"])
|
||||||
|
*/
|
||||||
|
details[role=list],
|
||||||
|
li[role=list] {
|
||||||
position: relative;
|
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;
|
padding: 0;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details[role=list] summary {
|
details[role=list] summary {
|
||||||
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
|
|
||||||
margin-bottom: 0;
|
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);
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
border: var(--border-width) solid var(--form-element-border-color);
|
border: var(--border-width) solid var(--form-element-border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--form-element-background-color);
|
||||||
|
color: var(--form-element-placeholder-color);
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
details[role=list] summary::after {
|
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
|
||||||
height: 100%;
|
border-color: var(--form-element-active-border-color);
|
||||||
transform: rotate(0deg);
|
background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul {
|
details[role=list] summary:not([role=button]):focus {
|
||||||
z-index: 100;
|
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||||
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][open] summary {
|
details[role=list][open] summary {
|
||||||
margin-bottom: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
details[role=list][open] summary::before {
|
details[role=list][open] summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 80;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
content: " ";
|
content: "";
|
||||||
cursor: default;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -272,6 +272,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--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);
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -369,6 +374,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -465,6 +475,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -1763,7 +1778,7 @@ canvas {
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
padding-bottom: calc(var(--spacing));
|
padding-bottom: var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
}
|
}
|
||||||
details summary {
|
details summary {
|
||||||
|
|
@ -1786,12 +1801,12 @@ details summary::-moz-list-bullet {
|
||||||
}
|
}
|
||||||
details summary::after {
|
details summary::after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1.5rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: right;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -1826,6 +1841,7 @@ details[open] > summary::after {
|
||||||
}
|
}
|
||||||
[dir=rtl] details summary::after {
|
[dir=rtl] details summary::after {
|
||||||
float: left;
|
float: left;
|
||||||
|
background-position: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -2050,85 +2066,162 @@ progress::-moz-progress-bar {
|
||||||
background-position: -200% 0;
|
background-position: -200% 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
details[role=list] {
|
/**
|
||||||
|
* Dropdown ([role="list"])
|
||||||
|
*/
|
||||||
|
details[role=list],
|
||||||
|
li[role=list] {
|
||||||
position: relative;
|
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;
|
padding: 0;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
details[role=list] summary {
|
details[role=list] summary {
|
||||||
height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
|
|
||||||
margin-bottom: 0;
|
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);
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
border: var(--border-width) solid var(--form-element-border-color);
|
border: var(--border-width) solid var(--form-element-border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--form-element-background-color);
|
||||||
|
color: var(--form-element-placeholder-color);
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
details[role=list] summary::after {
|
details[role=list] summary:not([role=button]):active, details[role=list] summary:not([role=button]):focus {
|
||||||
height: 100%;
|
border-color: var(--form-element-active-border-color);
|
||||||
transform: rotate(0deg);
|
background-color: var(--form-element-active-background-color);
|
||||||
}
|
}
|
||||||
details[role=list] summary + ul {
|
details[role=list] summary:not([role=button]):focus {
|
||||||
z-index: 100;
|
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||||
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][open] summary {
|
details[role=list][open] summary {
|
||||||
margin-bottom: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
details[role=list][open] summary::before {
|
details[role=list][open] summary::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 80;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
content: " ";
|
content: "";
|
||||||
cursor: default;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
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
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
File diff suppressed because one or more lines are too long
|
|
@ -209,6 +209,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--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);
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -306,6 +311,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -402,6 +412,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -273,6 +273,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--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);
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -370,6 +375,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
@ -466,6 +476,11 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--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);
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
2
css/themes/default.min.css
vendored
2
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
135
docs/dropdowns.html
Normal file
135
docs/dropdowns.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -43,7 +43,7 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
|
<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="./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="./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="./navs.html" id="navs-link" class="secondary">Navs</a></li>
|
||||||
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
|
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
|
||||||
|
|
|
||||||
|
|
@ -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><!-- For Single-select --></em>
|
|
||||||
<<b>details role="list"</b>>
|
|
||||||
<<b>summary aria-haspopup="listbox"</b>>Single select<<b>/summary</b>>
|
|
||||||
<<b>ul role="listbox"</b>>
|
|
||||||
<<b>li</b>>
|
|
||||||
<<b>label for="01"</b>>
|
|
||||||
<<b>input type="radio" id="01" name="option1" /</b>>
|
|
||||||
Option 1
|
|
||||||
<<b>/label</b>>
|
|
||||||
<<b>/li</b>>
|
|
||||||
<<b>li</b>>
|
|
||||||
<<b>label for="02"</b>>
|
|
||||||
<<b>input type="radio" id="02" name="option1" /</b>>
|
|
||||||
Option 2
|
|
||||||
<<b>/label</b>>
|
|
||||||
<<b>/li</b>>
|
|
||||||
<<b>/ul</b>>
|
|
||||||
<<b>/details</b>>
|
|
||||||
|
|
||||||
|
|
||||||
<em><!-- For Multi-select --></em>
|
|
||||||
<<b>details role="list"</b>>
|
|
||||||
<<b>summary aria-haspopup="listbox"</b>>Multi select<<b>/summary</b>>
|
|
||||||
<<b>ul role="listbox"</b>>
|
|
||||||
<<b>li</b>>
|
|
||||||
<<b>label for="01"</b>>
|
|
||||||
<<b>input type="checkbox" id="01" name="option1" /</b>>
|
|
||||||
Option 1
|
|
||||||
<<b>/label</b>>
|
|
||||||
<<b>/li</b>>
|
|
||||||
<<b>li</b>>
|
|
||||||
<<b>label for="01"</b>>
|
|
||||||
<<b>input type="checkbox" id="02" name="option1" /</b>>
|
|
||||||
Option 2
|
|
||||||
<<b>/label</b>>
|
|
||||||
<<b>/li</b>>
|
|
||||||
<<b>/ul</b>>
|
|
||||||
<<b>/details</b>>
|
|
||||||
</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
325
docs/src/dropdowns.html
Normal 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><<b>details</b> <i>role</i>=<u>"list"</u>></code> as a wrapper and <code><<b>summary</b>></code> and <code><<b>ul</b>></code> as direct childs.</p>
|
||||||
|
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html"><select></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><!-- Dropdown --></em>
|
||||||
|
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||||
|
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
|
||||||
|
<em><!-- Select --></em>
|
||||||
|
<<b>select</b></u>>
|
||||||
|
<<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>>Select</<b>option</b>>
|
||||||
|
<<b>option</b>>…</<b>option</b>>
|
||||||
|
</<b>select</b>>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p><code><<b>summary</b> <i>role</i>=<u>"button"</u>></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><!-- Primary --></em>
|
||||||
|
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||||
|
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>
|
||||||
|
Dropdown as a button 1
|
||||||
|
</<b>summary</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
|
||||||
|
<em><!-- Secondary --></em>
|
||||||
|
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||||
|
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>
|
||||||
|
Dropdown as a button 2
|
||||||
|
</<b>summary</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
|
||||||
|
<em><!-- Contrast --></em>
|
||||||
|
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||||
|
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>
|
||||||
|
Dropdown as a button 3
|
||||||
|
</<b>summary</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Dropdowns can be used as custom selects with <code><<b>input</b> <i>type</i>=<u>"radio"</u>></code> or <code><<b>input</b> <i>type</i>=<u>"checkbox"</u>></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><!-- With radio buttons --></em>
|
||||||
|
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||||
|
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"small"</u>>
|
||||||
|
<<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>>
|
||||||
|
Small
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
<<b>li</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"medium"</u>>
|
||||||
|
<<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>>
|
||||||
|
Medium
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
<<b>li</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"large"</u>>
|
||||||
|
<<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>>
|
||||||
|
Large
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
|
||||||
|
<em><!-- With checkboxes --></em>
|
||||||
|
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||||
|
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>>
|
||||||
|
<<b>label</b>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||||||
|
Banana
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
<<b>li</b>>
|
||||||
|
<<b>label</b>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||||||
|
Watermelon
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
<<b>li</b>>
|
||||||
|
<<b>label</b>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||||||
|
Apple
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Dropdowns can be used inside a <a href="navs.html"><nav></a> with a nested <code><<b>details</b> <i>role</i>=<u>"list"</u>></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><<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>>
|
||||||
|
<<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
||||||
|
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>rolep</i>=<u>"button"</u>>Dropdown</<b>summary</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>You can also use <code><<b>li</b> <i>role</i>=<u>"list"</u>></code> as a nested wrapper to render a list as a dropdown.</p>
|
||||||
|
<p>ℹ️ 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><<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>a</b>>
|
||||||
|
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||||
|
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
<em>...</em>
|
<em>...</em>
|
||||||
</<b>html</b>></code></pre>
|
</<b>html</b>></code></pre>
|
||||||
|
|
||||||
<p>The RTL feature is still experimental and will probably evolve.</p>
|
<p>ℹ️ The RTL feature is still experimental and will probably evolve.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
${require('./_footer.html')}
|
${require('./_footer.html')}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,7 @@
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
padding-bottom: calc(var(--spacing));
|
padding-bottom: var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
|
|
@ -38,12 +38,12 @@ details {
|
||||||
// Marker
|
// Marker
|
||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1.5rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: right;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
@ -111,6 +111,7 @@ details {
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
float: left;
|
float: left;
|
||||||
|
background-position: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,93 +1,182 @@
|
||||||
details[role='list'] {
|
/**
|
||||||
|
* Dropdown ([role="list"])
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
details[role="list"],
|
||||||
|
li[role="list"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
|
||||||
border-bottom: none;
|
|
||||||
|
|
||||||
summary {
|
summary + ul,
|
||||||
height: calc(
|
> ul {
|
||||||
1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
|
display: flex;
|
||||||
var(--border-width) * 2
|
z-index: 99;
|
||||||
);
|
position: absolute;
|
||||||
margin-bottom: 0;
|
top: auto;
|
||||||
padding: var(--form-element-spacing-vertical)
|
right: 0;
|
||||||
var(--form-element-spacing-horizontal);
|
left: 0;
|
||||||
border: var(--border-width) solid var(--form-element-border-color);
|
flex-direction: column;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: var(--border-width) solid var(--dropdown-border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
line-height: inherit;
|
border-top-right-radius: 0;
|
||||||
cursor: pointer;
|
border-top-left-radius: 0;
|
||||||
|
background-color: var(--dropdown-background-color);
|
||||||
|
box-shadow: var(--card-box-shadow);
|
||||||
|
color: var(--dropdown-color);
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
&::after {
|
li {
|
||||||
height: 100%;
|
width: 100%;
|
||||||
transform: rotate(0deg);
|
margin-bottom: 0;
|
||||||
}
|
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||||
|
var(--form-element-spacing-horizontal);
|
||||||
& + 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;
|
list-style: none;
|
||||||
|
|
||||||
li {
|
&:first-of-type {
|
||||||
margin-bottom: 0;
|
margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
&::marker {
|
}
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
&:last-of-type {
|
||||||
position: relative;
|
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
|
||||||
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'],
|
a {
|
||||||
input[type='checkbox'] {
|
display: block;
|
||||||
appearance: none;
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&[disabled] summary,
|
// Marker
|
||||||
&.disabled summary {
|
details[role="list"] summary,
|
||||||
color: var(--muted-color);
|
li[role="list"] > a {
|
||||||
cursor: not-allowed;
|
&::after {
|
||||||
pointer-events: none;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Close for details[role="list"]
|
||||||
&[open] summary {
|
&[open] summary {
|
||||||
margin-bottom: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
z-index: 80;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
content: ' ';
|
content: "";
|
||||||
cursor: default;
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@ dialog {
|
||||||
> footer {
|
> footer {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
[role='button'] {
|
[role="button"] {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
&:not(:first-of-type) {
|
||||||
|
|
@ -104,7 +104,7 @@ dialog {
|
||||||
|
|
||||||
// Closed state
|
// Closed state
|
||||||
&:not([open]),
|
&:not([open]),
|
||||||
&[open='false'] {
|
&[open="false"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -112,6 +112,13 @@
|
||||||
0 0 0 0.0625rem #{rgba($black, 0.036)};
|
0 0 0 0.0625rem #{rgba($black, 0.036)};
|
||||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
--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 (<dialog>)
|
||||||
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
|
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -112,6 +112,13 @@
|
||||||
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
||||||
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
--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 (<dialog>)
|
||||||
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
|
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
border: 0.1875em solid currentColor;
|
border: 0.1875em solid currentColor;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
border-right-color: transparent;
|
border-right-color: transparent;
|
||||||
content: '';
|
content: "";
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
vertical-align: -.125em; // Visual alignment
|
vertical-align: -.125em; // Visual alignment
|
||||||
animation: spinner 0.75s linear infinite;
|
animation: spinner 0.75s linear infinite;
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
border-left: .3rem solid transparent;
|
border-left: .3rem solid transparent;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
content: '';
|
content: "";
|
||||||
color: var(--tooltip-background-color);
|
color: var(--tooltip-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue