mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 10:26:13 -04:00
Merge branch 'dev' into pr/141
This commit is contained in:
Lucas Larroche
commit
f1bde7f7f7
69 changed files with 1999 additions and 258 deletions
|
|
@ -164,6 +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)
|
||||
- [Dropdowns](https://picocss.com/docs/dropdowns.html)
|
||||
- [Progress](https://picocss.com/docs/progress.html)
|
||||
|
||||
**Utilities**
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@
|
|||
--block-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
|
@ -268,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);
|
||||
|
|
@ -276,6 +285,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -363,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);
|
||||
|
|
@ -371,6 +387,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -457,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);
|
||||
|
|
@ -465,6 +488,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -637,7 +662,8 @@ ul {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
[role=link] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -649,11 +675,16 @@ a {
|
|||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
a[aria-current], a:hover, a:active, a:focus,
|
||||
[role=link][aria-current],
|
||||
[role=link]:hover,
|
||||
[role=link]:active,
|
||||
[role=link]:focus {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
a:focus,
|
||||
[role=link]:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
|
|
@ -937,16 +968,20 @@ input[type=reset],
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
button:hover, button:active, button:focus,
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
|
|
@ -970,7 +1005,7 @@ input[type=reset] {
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1779,16 +1814,18 @@ canvas {
|
|||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
}
|
||||
details summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
details summary:not([role]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
}
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1800,12 +1837,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: "";
|
||||
|
|
@ -1813,26 +1850,34 @@ details summary::after {
|
|||
}
|
||||
details summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
details summary:focus:not([role=button]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
}
|
||||
details summary ~ * {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
details summary[role=button] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
details summary ~ * ~ * {
|
||||
margin-top: 0;
|
||||
details summary[role=button]::after {
|
||||
height: calc(1rem * var(--line-height));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
details[open] > summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing));
|
||||
}
|
||||
details[open] > summary:not(:focus) {
|
||||
details[open] > summary:not([role]):not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
details[open] > summary::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
[dir=rtl] details summary {
|
||||
text-align: right;
|
||||
}
|
||||
[dir=rtl] details summary::after {
|
||||
float: left;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1841,7 +1886,6 @@ details[open] > summary::after {
|
|||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
|
@ -1948,29 +1992,33 @@ nav ul {
|
|||
}
|
||||
nav ol:first-of-type,
|
||||
nav ul:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
nav ol:last-of-type,
|
||||
nav ul:last-of-type {
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
|
||||
}
|
||||
nav li > *,
|
||||
nav li > input:not([type=checkbox]):not([type=radio]) {
|
||||
margin-bottom: 0;
|
||||
nav li > * {
|
||||
--spacing: 0;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
nav a,
|
||||
nav [role=link] {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:hover, nav a:active, nav a:focus {
|
||||
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
|
||||
nav [role=link][aria-current],
|
||||
nav [role=link]:hover,
|
||||
nav [role=link]:active,
|
||||
nav [role=link]:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -1981,11 +2029,13 @@ aside li {
|
|||
display: block;
|
||||
}
|
||||
aside li {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
|
||||
}
|
||||
aside li a {
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
display: block;
|
||||
}
|
||||
aside li [role=button] {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2034,6 +2084,12 @@ progress::-moz-progress-bar {
|
|||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
[dir=rtl] progress:indeterminate {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes progressIndeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
|
|
@ -2051,6 +2107,183 @@ progress::-moz-progress-bar {
|
|||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
details[role=list] summary:not([role]) {
|
||||
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:not([role]):active, details[role=list] summary:not([role]):focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
details[role=list][open] summary {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
details[role=list][open] summary::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
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] summary,
|
||||
nav [role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
nav [role=list][open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav [role=list] summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
}
|
||||
nav [role=list] summary[role=link] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
nav [role=list] summary[role=link] + ul {
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
|
||||
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) + var(--outline-width));
|
||||
-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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
|
|
|||
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
350
css/pico.css
350
css/pico.css
|
|
@ -23,6 +23,10 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
|
@ -273,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);
|
||||
|
|
@ -281,6 +290,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -368,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);
|
||||
|
|
@ -376,6 +392,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -462,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);
|
||||
|
|
@ -470,6 +493,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -667,7 +692,8 @@ ul {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
[role=link] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -679,29 +705,46 @@ a {
|
|||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
a[aria-current], a:hover, a:active, a:focus,
|
||||
[role=link][aria-current],
|
||||
[role=link]:hover,
|
||||
[role=link]:active,
|
||||
[role=link]:focus {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
a:focus,
|
||||
[role=link]:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
a.secondary {
|
||||
a.secondary,
|
||||
[role=link].secondary {
|
||||
--color: var(--secondary);
|
||||
}
|
||||
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
||||
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
|
||||
[role=link].secondary[aria-current],
|
||||
[role=link].secondary:hover,
|
||||
[role=link].secondary:active,
|
||||
[role=link].secondary:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
a.secondary:focus {
|
||||
a.secondary:focus,
|
||||
[role=link].secondary:focus {
|
||||
--background-color: var(--secondary-focus);
|
||||
}
|
||||
a.contrast {
|
||||
a.contrast,
|
||||
[role=link].contrast {
|
||||
--color: var(--contrast);
|
||||
}
|
||||
a.contrast:hover, a.contrast:active, a.contrast:focus {
|
||||
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
|
||||
[role=link].contrast[aria-current],
|
||||
[role=link].contrast:hover,
|
||||
[role=link].contrast:active,
|
||||
[role=link].contrast:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
a.contrast:focus {
|
||||
a.contrast:focus,
|
||||
[role=link].contrast:focus {
|
||||
--background-color: var(--contrast-focus);
|
||||
}
|
||||
|
||||
|
|
@ -988,16 +1031,20 @@ input[type=reset],
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
button:hover, button:active, button:focus,
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
|
|
@ -1025,16 +1072,20 @@ input[type=reset],
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||
button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||
input[type=submit].secondary[aria-current],
|
||||
input[type=submit].secondary:hover,
|
||||
input[type=submit].secondary:active,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary[aria-current],
|
||||
input[type=button].secondary:hover,
|
||||
input[type=button].secondary:active,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary[aria-current],
|
||||
[role=button].secondary:hover,
|
||||
[role=button].secondary:active,
|
||||
[role=button].secondary:focus {
|
||||
|
|
@ -1060,16 +1111,20 @@ input[type=reset].contrast,
|
|||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||
button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||
input[type=submit].contrast[aria-current],
|
||||
input[type=submit].contrast:hover,
|
||||
input[type=submit].contrast:active,
|
||||
input[type=submit].contrast:focus,
|
||||
input[type=button].contrast[aria-current],
|
||||
input[type=button].contrast:hover,
|
||||
input[type=button].contrast:active,
|
||||
input[type=button].contrast:focus,
|
||||
input[type=reset].contrast[aria-current],
|
||||
input[type=reset].contrast:hover,
|
||||
input[type=reset].contrast:active,
|
||||
input[type=reset].contrast:focus,
|
||||
[role=button].contrast[aria-current],
|
||||
[role=button].contrast:hover,
|
||||
[role=button].contrast:active,
|
||||
[role=button].contrast:focus {
|
||||
|
|
@ -1094,16 +1149,20 @@ input[type=reset].outline,
|
|||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
}
|
||||
button.outline:hover, button.outline:active, button.outline:focus,
|
||||
button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
|
||||
input[type=submit].outline[aria-current],
|
||||
input[type=submit].outline:hover,
|
||||
input[type=submit].outline:active,
|
||||
input[type=submit].outline:focus,
|
||||
input[type=button].outline[aria-current],
|
||||
input[type=button].outline:hover,
|
||||
input[type=button].outline:active,
|
||||
input[type=button].outline:focus,
|
||||
input[type=reset].outline[aria-current],
|
||||
input[type=reset].outline:hover,
|
||||
input[type=reset].outline:active,
|
||||
input[type=reset].outline:focus,
|
||||
[role=button].outline[aria-current],
|
||||
[role=button].outline:hover,
|
||||
[role=button].outline:active,
|
||||
[role=button].outline:focus {
|
||||
|
|
@ -1118,16 +1177,20 @@ input[type=reset].outline.secondary,
|
|||
[role=button].outline.secondary {
|
||||
--color: var(--secondary);
|
||||
}
|
||||
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||
button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||
input[type=submit].outline.secondary[aria-current],
|
||||
input[type=submit].outline.secondary:hover,
|
||||
input[type=submit].outline.secondary:active,
|
||||
input[type=submit].outline.secondary:focus,
|
||||
input[type=button].outline.secondary[aria-current],
|
||||
input[type=button].outline.secondary:hover,
|
||||
input[type=button].outline.secondary:active,
|
||||
input[type=button].outline.secondary:focus,
|
||||
input[type=reset].outline.secondary[aria-current],
|
||||
input[type=reset].outline.secondary:hover,
|
||||
input[type=reset].outline.secondary:active,
|
||||
input[type=reset].outline.secondary:focus,
|
||||
[role=button].outline.secondary[aria-current],
|
||||
[role=button].outline.secondary:hover,
|
||||
[role=button].outline.secondary:active,
|
||||
[role=button].outline.secondary:focus {
|
||||
|
|
@ -1141,16 +1204,20 @@ input[type=reset].outline.contrast,
|
|||
[role=button].outline.contrast {
|
||||
--color: var(--contrast);
|
||||
}
|
||||
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||
button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||
input[type=submit].outline.contrast[aria-current],
|
||||
input[type=submit].outline.contrast:hover,
|
||||
input[type=submit].outline.contrast:active,
|
||||
input[type=submit].outline.contrast:focus,
|
||||
input[type=button].outline.contrast[aria-current],
|
||||
input[type=button].outline.contrast:hover,
|
||||
input[type=button].outline.contrast:active,
|
||||
input[type=button].outline.contrast:focus,
|
||||
input[type=reset].outline.contrast[aria-current],
|
||||
input[type=reset].outline.contrast:hover,
|
||||
input[type=reset].outline.contrast:active,
|
||||
input[type=reset].outline.contrast:focus,
|
||||
[role=button].outline.contrast[aria-current],
|
||||
[role=button].outline.contrast:hover,
|
||||
[role=button].outline.contrast:active,
|
||||
[role=button].outline.contrast:focus {
|
||||
|
|
@ -1957,16 +2024,18 @@ canvas {
|
|||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
}
|
||||
details summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
details summary:not([role]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
}
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1978,12 +2047,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: "";
|
||||
|
|
@ -1991,26 +2060,37 @@ details summary::after {
|
|||
}
|
||||
details summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
details summary:focus:not([role=button]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
}
|
||||
details summary ~ * {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
details summary[role=button] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
details summary ~ * ~ * {
|
||||
margin-top: 0;
|
||||
details summary[role=button]::after {
|
||||
height: calc(1rem * var(--line-height));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
details summary[role=button]:not(.outline).contrast::after {
|
||||
background-image: var(--icon-chevron-button-inverse);
|
||||
}
|
||||
details[open] > summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing));
|
||||
}
|
||||
details[open] > summary:not(:focus) {
|
||||
details[open] > summary:not([role]):not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
details[open] > summary::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
[dir=rtl] details summary {
|
||||
text-align: right;
|
||||
}
|
||||
[dir=rtl] details summary::after {
|
||||
float: left;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2019,7 +2099,6 @@ details[open] > summary::after {
|
|||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
|
@ -2116,7 +2195,7 @@ dialog article .close {
|
|||
opacity: 0.5;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
|
||||
dialog article .close[aria-current], dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
dialog:not([open]), dialog[open=false] {
|
||||
|
|
@ -2222,29 +2301,33 @@ nav ul {
|
|||
}
|
||||
nav ol:first-of-type,
|
||||
nav ul:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
nav ol:last-of-type,
|
||||
nav ul:last-of-type {
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
|
||||
}
|
||||
nav li > *,
|
||||
nav li > input:not([type=checkbox]):not([type=radio]) {
|
||||
margin-bottom: 0;
|
||||
nav li > * {
|
||||
--spacing: 0;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
nav a,
|
||||
nav [role=link] {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:hover, nav a:active, nav a:focus {
|
||||
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
|
||||
nav [role=link][aria-current],
|
||||
nav [role=link]:hover,
|
||||
nav [role=link]:active,
|
||||
nav [role=link]:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -2255,11 +2338,13 @@ aside li {
|
|||
display: block;
|
||||
}
|
||||
aside li {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
|
||||
}
|
||||
aside li a {
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
display: block;
|
||||
}
|
||||
aside li [role=button] {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2308,6 +2393,12 @@ progress::-moz-progress-bar {
|
|||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
[dir=rtl] progress:indeterminate {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes progressIndeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
|
|
@ -2325,6 +2416,183 @@ progress::-moz-progress-bar {
|
|||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
details[role=list] summary:not([role]) {
|
||||
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:not([role]):active, details[role=list] summary:not([role]):focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
details[role=list][open] summary {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
details[role=list][open] summary::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
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] summary,
|
||||
nav [role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
nav [role=list][open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav [role=list] summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
}
|
||||
nav [role=list] summary[role=link] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
nav [role=list] summary[role=link] + ul {
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
|
||||
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) + var(--outline-width));
|
||||
-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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -21,6 +21,10 @@
|
|||
--block-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
|
@ -268,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);
|
||||
|
|
@ -276,6 +285,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -363,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);
|
||||
|
|
@ -371,6 +387,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -457,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);
|
||||
|
|
@ -465,6 +488,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -607,7 +632,8 @@ ul {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
[role=link] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -619,11 +645,16 @@ a {
|
|||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
a[aria-current], a:hover, a:active, a:focus,
|
||||
[role=link][aria-current],
|
||||
[role=link]:hover,
|
||||
[role=link]:active,
|
||||
[role=link]:focus {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
a:focus,
|
||||
[role=link]:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
|
|
@ -907,16 +938,20 @@ input[type=reset],
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
button:hover, button:active, button:focus,
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
|
|
@ -940,7 +975,7 @@ input[type=reset] {
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1749,16 +1784,18 @@ canvas {
|
|||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
}
|
||||
details summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
details summary:not([role]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
}
|
||||
details summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1770,12 +1807,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: "";
|
||||
|
|
@ -1783,26 +1820,34 @@ details summary::after {
|
|||
}
|
||||
details summary:focus {
|
||||
outline: none;
|
||||
}
|
||||
details summary:focus:not([role=button]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
}
|
||||
details summary ~ * {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
details summary[role=button] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
details summary ~ * ~ * {
|
||||
margin-top: 0;
|
||||
details summary[role=button]::after {
|
||||
height: calc(1rem * var(--line-height));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
details[open] > summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing));
|
||||
}
|
||||
details[open] > summary:not(:focus) {
|
||||
details[open] > summary:not([role]):not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
details[open] > summary::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
[dir=rtl] details summary {
|
||||
text-align: right;
|
||||
}
|
||||
[dir=rtl] details summary::after {
|
||||
float: left;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1811,7 +1856,6 @@ details[open] > summary::after {
|
|||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
|
@ -1918,29 +1962,33 @@ nav ul {
|
|||
}
|
||||
nav ol:first-of-type,
|
||||
nav ul:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
nav ol:last-of-type,
|
||||
nav ul:last-of-type {
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
|
||||
}
|
||||
nav li > *,
|
||||
nav li > input:not([type=checkbox]):not([type=radio]) {
|
||||
margin-bottom: 0;
|
||||
nav li > * {
|
||||
--spacing: 0;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
nav a,
|
||||
nav [role=link] {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:hover, nav a:active, nav a:focus {
|
||||
nav a[aria-current], nav a:hover, nav a:active, nav a:focus,
|
||||
nav [role=link][aria-current],
|
||||
nav [role=link]:hover,
|
||||
nav [role=link]:active,
|
||||
nav [role=link]:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -1951,11 +1999,13 @@ aside li {
|
|||
display: block;
|
||||
}
|
||||
aside li {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
|
||||
}
|
||||
aside li a {
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
display: block;
|
||||
}
|
||||
aside li [role=button] {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2004,6 +2054,12 @@ progress::-moz-progress-bar {
|
|||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
[dir=rtl] progress:indeterminate {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes progressIndeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
|
|
@ -2021,6 +2077,183 @@ progress::-moz-progress-bar {
|
|||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 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 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
details[role=list] summary:not([role]) {
|
||||
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:not([role]):active, details[role=list] summary:not([role]):focus {
|
||||
border-color: var(--form-element-active-border-color);
|
||||
background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
details[role=list] summary:not([role]):focus {
|
||||
box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
|
||||
}
|
||||
details[role=list][open] summary {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
details[role=list][open] summary::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
nav [role=list] summary,
|
||||
nav [role=list] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
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] summary,
|
||||
nav [role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
nav [role=list][open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav [role=list] summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
}
|
||||
nav [role=list] summary[role=link] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
nav [role=list] summary[role=link] + ul {
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
-webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
|
||||
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) + var(--outline-width));
|
||||
-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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading ([aria-busy=true])
|
||||
*/
|
||||
|
|
|
|||
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
|
|
@ -26,6 +26,10 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
|
@ -205,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);
|
||||
|
|
@ -213,6 +222,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -300,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);
|
||||
|
|
@ -308,6 +324,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -394,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);
|
||||
|
|
@ -402,6 +425,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -599,7 +624,8 @@ ul {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
[role=link] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -608,29 +634,46 @@ a {
|
|||
-webkit-text-decoration: var(--text-decoration);
|
||||
text-decoration: var(--text-decoration);
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
a[aria-current], a:hover, a:active, a:focus,
|
||||
[role=link][aria-current],
|
||||
[role=link]:hover,
|
||||
[role=link]:active,
|
||||
[role=link]:focus {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
a:focus,
|
||||
[role=link]:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
a.secondary {
|
||||
a.secondary,
|
||||
[role=link].secondary {
|
||||
--color: var(--secondary);
|
||||
}
|
||||
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
||||
a.secondary[aria-current], a.secondary:hover, a.secondary:active, a.secondary:focus,
|
||||
[role=link].secondary[aria-current],
|
||||
[role=link].secondary:hover,
|
||||
[role=link].secondary:active,
|
||||
[role=link].secondary:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
a.secondary:focus {
|
||||
a.secondary:focus,
|
||||
[role=link].secondary:focus {
|
||||
--background-color: var(--secondary-focus);
|
||||
}
|
||||
a.contrast {
|
||||
a.contrast,
|
||||
[role=link].contrast {
|
||||
--color: var(--contrast);
|
||||
}
|
||||
a.contrast:hover, a.contrast:active, a.contrast:focus {
|
||||
a.contrast[aria-current], a.contrast:hover, a.contrast:active, a.contrast:focus,
|
||||
[role=link].contrast[aria-current],
|
||||
[role=link].contrast:hover,
|
||||
[role=link].contrast:active,
|
||||
[role=link].contrast:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
a.contrast:focus {
|
||||
a.contrast:focus,
|
||||
[role=link].contrast:focus {
|
||||
--background-color: var(--contrast-focus);
|
||||
}
|
||||
|
||||
|
|
@ -916,16 +959,20 @@ input[type=reset],
|
|||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover, button:active, button:focus,
|
||||
button[aria-current], button:hover, button:active, button:focus,
|
||||
input[type=submit][aria-current],
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button][aria-current],
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button][aria-current],
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
|
|
@ -953,16 +1000,20 @@ input[type=reset],
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||
button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||
input[type=submit].secondary[aria-current],
|
||||
input[type=submit].secondary:hover,
|
||||
input[type=submit].secondary:active,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary[aria-current],
|
||||
input[type=button].secondary:hover,
|
||||
input[type=button].secondary:active,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset][aria-current],
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary[aria-current],
|
||||
[role=button].secondary:hover,
|
||||
[role=button].secondary:active,
|
||||
[role=button].secondary:focus {
|
||||
|
|
@ -988,16 +1039,20 @@ input[type=reset].contrast,
|
|||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||
button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||
input[type=submit].contrast[aria-current],
|
||||
input[type=submit].contrast:hover,
|
||||
input[type=submit].contrast:active,
|
||||
input[type=submit].contrast:focus,
|
||||
input[type=button].contrast[aria-current],
|
||||
input[type=button].contrast:hover,
|
||||
input[type=button].contrast:active,
|
||||
input[type=button].contrast:focus,
|
||||
input[type=reset].contrast[aria-current],
|
||||
input[type=reset].contrast:hover,
|
||||
input[type=reset].contrast:active,
|
||||
input[type=reset].contrast:focus,
|
||||
[role=button].contrast[aria-current],
|
||||
[role=button].contrast:hover,
|
||||
[role=button].contrast:active,
|
||||
[role=button].contrast:focus {
|
||||
|
|
@ -1022,16 +1077,20 @@ input[type=reset].outline,
|
|||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
}
|
||||
button.outline:hover, button.outline:active, button.outline:focus,
|
||||
button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
|
||||
input[type=submit].outline[aria-current],
|
||||
input[type=submit].outline:hover,
|
||||
input[type=submit].outline:active,
|
||||
input[type=submit].outline:focus,
|
||||
input[type=button].outline[aria-current],
|
||||
input[type=button].outline:hover,
|
||||
input[type=button].outline:active,
|
||||
input[type=button].outline:focus,
|
||||
input[type=reset].outline[aria-current],
|
||||
input[type=reset].outline:hover,
|
||||
input[type=reset].outline:active,
|
||||
input[type=reset].outline:focus,
|
||||
[role=button].outline[aria-current],
|
||||
[role=button].outline:hover,
|
||||
[role=button].outline:active,
|
||||
[role=button].outline:focus {
|
||||
|
|
@ -1046,16 +1105,20 @@ input[type=reset].outline.secondary,
|
|||
[role=button].outline.secondary {
|
||||
--color: var(--secondary);
|
||||
}
|
||||
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||
button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||
input[type=submit].outline.secondary[aria-current],
|
||||
input[type=submit].outline.secondary:hover,
|
||||
input[type=submit].outline.secondary:active,
|
||||
input[type=submit].outline.secondary:focus,
|
||||
input[type=button].outline.secondary[aria-current],
|
||||
input[type=button].outline.secondary:hover,
|
||||
input[type=button].outline.secondary:active,
|
||||
input[type=button].outline.secondary:focus,
|
||||
input[type=reset].outline.secondary[aria-current],
|
||||
input[type=reset].outline.secondary:hover,
|
||||
input[type=reset].outline.secondary:active,
|
||||
input[type=reset].outline.secondary:focus,
|
||||
[role=button].outline.secondary[aria-current],
|
||||
[role=button].outline.secondary:hover,
|
||||
[role=button].outline.secondary:active,
|
||||
[role=button].outline.secondary:focus {
|
||||
|
|
@ -1069,16 +1132,20 @@ input[type=reset].outline.contrast,
|
|||
[role=button].outline.contrast {
|
||||
--color: var(--contrast);
|
||||
}
|
||||
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||
button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||
input[type=submit].outline.contrast[aria-current],
|
||||
input[type=submit].outline.contrast:hover,
|
||||
input[type=submit].outline.contrast:active,
|
||||
input[type=submit].outline.contrast:focus,
|
||||
input[type=button].outline.contrast[aria-current],
|
||||
input[type=button].outline.contrast:hover,
|
||||
input[type=button].outline.contrast:active,
|
||||
input[type=button].outline.contrast:focus,
|
||||
input[type=reset].outline.contrast[aria-current],
|
||||
input[type=reset].outline.contrast:hover,
|
||||
input[type=reset].outline.contrast:active,
|
||||
input[type=reset].outline.contrast:focus,
|
||||
[role=button].outline.contrast[aria-current],
|
||||
[role=button].outline.contrast:hover,
|
||||
[role=button].outline.contrast:active,
|
||||
[role=button].outline.contrast:focus {
|
||||
|
|
|
|||
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
|
|
@ -19,6 +19,10 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
|
@ -269,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);
|
||||
|
|
@ -277,6 +286,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -364,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);
|
||||
|
|
@ -372,6 +388,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
@ -458,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);
|
||||
|
|
@ -466,6 +489,8 @@ kbd {
|
|||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
|
|||
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
|
|
@ -102,6 +102,7 @@ main > aside nav {
|
|||
}
|
||||
}
|
||||
main > aside nav a#toggle-docs-navigation {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
|
|
@ -134,14 +135,24 @@ main > aside nav.closed-on-mobile details {
|
|||
main > aside nav.open a#toggle-docs-navigation svg.expand {
|
||||
display: none;
|
||||
}
|
||||
main > aside details {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
main > aside details summary {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
main > aside li,
|
||||
main > aside summary {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
main > aside ul {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
main > aside li a {
|
||||
padding: 0.375rem 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.25rem;
|
||||
--nav-link-spacing-horizontal: 0.75rem;
|
||||
}
|
||||
main > aside li a svg {
|
||||
vertical-align: middle;
|
||||
|
|
@ -150,8 +161,8 @@ main > aside a.secondary:focus {
|
|||
background-color: transparent;
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
main > aside a.active,
|
||||
main > aside a.active:hover {
|
||||
main > aside a[aria-current],
|
||||
main > aside a[aria-current]:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
main > aside details {
|
||||
|
|
@ -167,9 +178,9 @@ main > aside details summary::after {
|
|||
display: none;
|
||||
}
|
||||
main > aside details[open] > summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
main > aside details[open] > summary:not(:focus) {
|
||||
main > aside details[open] > summary:not([role=button]):not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
||||
|
|
@ -266,6 +277,10 @@ main > aside details[open] > summary:not(:focus) {
|
|||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#buttons a[role=button] {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
#forms div.grid {
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
|
|
@ -285,11 +300,6 @@ section > hgroup {
|
|||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
[role=document] section > h1,
|
||||
[role=document] section > h2,
|
||||
[role=document] section > h3 {
|
||||
|
|
@ -390,6 +400,7 @@ dialog.example:not([open]), dialog.example[open=false] {
|
|||
* Docs: Navs
|
||||
*/
|
||||
body > nav {
|
||||
--nav-link-spacing-vertical: 1rem;
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
|
|
@ -409,20 +420,27 @@ body > nav a {
|
|||
body > nav svg {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
body > nav ul:first-of-type li:first-of-type a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
body > nav ul:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
}
|
||||
body > nav ul:first-of-type li {
|
||||
padding: 0;
|
||||
}
|
||||
body > nav ul:first-of-type li:first-of-type a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--h1-color);
|
||||
color: var(--nav-logo-color);
|
||||
}
|
||||
body > nav ul:first-of-type li:first-of-type a svg {
|
||||
display: block;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: var(--spacing);
|
||||
margin-left: calc(var(--spacing) * 1.5);
|
||||
color: var(--h1-color);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.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
157
docs/dropdowns.html
Normal file
157
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
|
|
@ -3,6 +3,8 @@
|
|||
*/
|
||||
|
||||
body > nav {
|
||||
--nav-link-spacing-vertical: 1rem;
|
||||
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
z-index: 99;
|
||||
position: fixed;
|
||||
|
|
@ -26,31 +28,38 @@ body > nav {
|
|||
}
|
||||
|
||||
// Band & Title
|
||||
ul:first-of-type li {
|
||||
// Brand
|
||||
&:first-of-type {
|
||||
a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
padding: 0;
|
||||
background: var(--h1-color);
|
||||
color: var(--nav-logo-color);
|
||||
ul:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
|
||||
svg {
|
||||
height: 3.5rem;
|
||||
li {
|
||||
padding: 0;
|
||||
|
||||
// Brand
|
||||
&:first-of-type {
|
||||
a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--h1-color);
|
||||
color: var(--nav-logo-color);
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: var(--spacing);
|
||||
color: var(--h1-color);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
display: inline;
|
||||
|
||||
// Title
|
||||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: calc(var(--spacing) * 1.5);
|
||||
color: var(--h1-color);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@ section > hgroup {
|
|||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
[role="document"] {
|
||||
section > h1,
|
||||
section > h2,
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ main > aside {
|
|||
}
|
||||
|
||||
a#toggle-docs-navigation {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
|
|
@ -64,7 +65,14 @@ main > aside {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
details {
|
||||
padding-bottom: 0;
|
||||
|
||||
summary {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
li,
|
||||
summary {
|
||||
|
|
@ -73,8 +81,13 @@ main > aside {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
li a {
|
||||
padding: 0.375rem 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.25rem;
|
||||
--nav-link-spacing-horizontal: 0.75rem;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
|
|
@ -86,8 +99,8 @@ main > aside {
|
|||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
a.active,
|
||||
a.active:hover {
|
||||
a[aria-current],
|
||||
a[aria-current]:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
|
|
@ -107,9 +120,9 @@ main > aside {
|
|||
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:focus) {
|
||||
&:not([role=button]):not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,6 +117,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Docs: Buttons
|
||||
#buttons {
|
||||
a[role="button"] {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Docs: Forms
|
||||
#forms div.grid {
|
||||
grid-row-gap: 0;
|
||||
|
|
|
|||
|
|
@ -43,6 +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="./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>
|
||||
|
|
@ -67,7 +68,7 @@
|
|||
<script>
|
||||
const activeLink = document.querySelector(`aside a#${props.active}`);
|
||||
const parentAccordion = activeLink.closest('details');
|
||||
activeLink.classList.add('active');
|
||||
activeLink.setAttribute('aria-current', 'page');
|
||||
parentAccordion.setAttribute('open', 'true');
|
||||
</script>
|
||||
</aside>
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
</hgroup>
|
||||
<article aria-label="Accordions examples">
|
||||
<details>
|
||||
<summary>Collapsible elements 1</summary>
|
||||
<summary>Accordion 1</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
|
||||
</details>
|
||||
<details open>
|
||||
<summary>Collapsible elements 2</summary>
|
||||
<summary>Accordion 2</summary>
|
||||
<ul>
|
||||
<li>Vestibulum id elit quis massa interdum sodales.</li>
|
||||
<li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
|
||||
|
|
@ -37,18 +37,54 @@
|
|||
<footer class="code">
|
||||
|
||||
<pre><code><<b>details</b>>
|
||||
<<b>summary</b>>Collapsible elements 1</<b>summary</b>>
|
||||
<<b>summary</b>>Accordion 1</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<<b>details</b> <i>open</i>>
|
||||
<<b>summary</b>>Collapsible elements 2</<b>summary</b>>
|
||||
<<b>summary</b>>Accordion 2</<b>summary</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>>…</<b>li</b>>
|
||||
<<b>li</b>>…</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code><<b>summary</b>></code> into a button.</p>
|
||||
<article aria-label="Accordions buttons examples">
|
||||
<details>
|
||||
<summary role="button">Accordion 1</summary>
|
||||
<p>Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary role="button" class="secondary">Accordion 2</summary>
|
||||
<p>Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary role="button" class="contrast">Accordion 3</summary>
|
||||
<p>Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.</p>
|
||||
</details>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Primary --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u>>Accordion 1</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Secondary --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Accordion 2</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Contrast --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Accordion 3</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
|
|
|||
379
docs/src/dropdowns.html
Normal file
379
docs/src/dropdowns.html
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
<!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>
|
||||
<p>Example with a dropdown as a link:</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>
|
||||
<details role="list" dir="rtl">
|
||||
<summary aria-haspopup="listbox" role="link">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>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>role</i>=<u>"link"</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>Example with a default dropdown and a dropdown as a button:</p>
|
||||
<article aria-label="Dropdowns inside a nav">
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<details role="list">
|
||||
<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>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>>
|
||||
</<b>li</b>>
|
||||
<<b>li</b>>
|
||||
<<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</<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>
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
</label>
|
||||
<label for="switch_disabled">
|
||||
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
|
||||
Publish on my profile my accomplishments
|
||||
User must change password at next logon
|
||||
</label>
|
||||
</fieldset>
|
||||
<footer class="code">
|
||||
|
|
@ -163,7 +163,6 @@
|
|||
<<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>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"extralarge"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>>
|
||||
Extra Large
|
||||
|
|
@ -190,7 +189,7 @@
|
|||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
||||
Publish on my profile my accomplishments
|
||||
User must change password at next logon
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>></code></pre>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<em>...</em>
|
||||
</<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>
|
||||
|
||||
${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,15 +5,18 @@
|
|||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:not([role]) {
|
||||
color: var(--accordion-close-summary-color);
|
||||
}
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
|
@ -34,12 +37,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: "";
|
||||
|
|
@ -51,14 +54,31 @@ details {
|
|||
|
||||
&:focus {
|
||||
outline: none;
|
||||
color: var(--accordion-active-summary-color);
|
||||
|
||||
&:not([role="button"]) {
|
||||
color: var(--accordion-active-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
~ * {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
// Type button
|
||||
&[role="button"] {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
// Marker
|
||||
&::after {
|
||||
height: calc(1rem * var(--line-height));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// .contrast
|
||||
&:not(.outline).contrast {
|
||||
// Marker
|
||||
&::after {
|
||||
background-image: var(--icon-chevron-button-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -66,15 +86,17 @@ details {
|
|||
// Open
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing));
|
||||
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
&:not([role]) {
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,8 +104,11 @@ details {
|
|||
[dir="rtl"] {
|
||||
details {
|
||||
summary {
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
float: left;
|
||||
background-position: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
article {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
|
|
|||
208
scss/components/_dropdown.scss
Normal file
208
scss/components/_dropdown.scss
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
/**
|
||||
* 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]) {
|
||||
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 {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All Dropdowns inside <nav>
|
||||
nav [role="list"] {
|
||||
summary,
|
||||
a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
summary + ul,
|
||||
> ul {
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns inside <nav> as nested <details>
|
||||
nav [role="list"] {
|
||||
summary,
|
||||
summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
&[open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
}
|
||||
|
||||
summary[role="link"] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
|
||||
+ ul {
|
||||
margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
|
||||
margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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) + var(--outline-width));
|
||||
margin-inline-start: calc(
|
||||
var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
|
||||
);
|
||||
}
|
||||
|
||||
> a::after {
|
||||
background-image: var(--icon-chevron);
|
||||
}
|
||||
}
|
||||
|
|
@ -29,15 +29,15 @@ dialog {
|
|||
max-height: calc(100vh - var(--spacing) * 2);
|
||||
overflow: auto;
|
||||
|
||||
@if map-get($breakpoints, 'sm') {
|
||||
@media (min-width: map-get($breakpoints, 'sm')) {
|
||||
max-width: map-get($viewports, 'sm');
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, 'md') {
|
||||
@media (min-width: map-get($breakpoints, 'md')) {
|
||||
max-width: map-get($viewports, 'md');
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ dialog {
|
|||
> footer {
|
||||
text-align: right;
|
||||
|
||||
[role='button'] {
|
||||
[role="button"] {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
|
|
@ -92,6 +92,7 @@ dialog {
|
|||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -103,7 +104,7 @@ dialog {
|
|||
|
||||
// Closed state
|
||||
&:not([open]),
|
||||
&[open='false'] {
|
||||
&[open="false"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,32 +19,35 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
padding: var(--nav-element-spacing-vertical)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
> input:not([type="checkbox"]):not([type="radio"]) {
|
||||
margin-bottom: 0;
|
||||
// Minimal support for buttons and forms elements
|
||||
> * {
|
||||
--spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
a,
|
||||
[role="link"] {
|
||||
display: inline-block;
|
||||
margin: calc(var(--nav-link-spacing-vertical) * -1)
|
||||
calc(var(--nav-link-spacing-horizontal) * -1);
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -63,11 +66,16 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
padding: calc(var(--nav-element-spacing-vertical) * 0.5)
|
||||
var(--nav-element-spacing-horizontal);
|
||||
|
||||
a {
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Minimal support for links as buttons
|
||||
[role="button"] {
|
||||
margin: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,6 +71,14 @@ progress {
|
|||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
progress:indeterminate {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progressIndeterminate {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@ input[type="reset"],
|
|||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -106,6 +107,7 @@ input[type="reset"],
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -130,6 +132,7 @@ input[type="reset"],
|
|||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -153,6 +156,7 @@ input[type="reset"],
|
|||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -169,6 +173,7 @@ input[type="reset"],
|
|||
[role="button"].outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -184,6 +189,7 @@ input[type="reset"],
|
|||
[role="button"].outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -200,6 +206,7 @@ input[type="reset"],
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,8 @@ ul {
|
|||
|
||||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a {
|
||||
a,
|
||||
[role="link"] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -81,6 +82,7 @@ a {
|
|||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&[aria-current],
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -97,7 +99,7 @@ a {
|
|||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:is(:hover, :active, :focus) {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +112,7 @@ a {
|
|||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:is(:hover, :active, :focus) {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
@import "components/modal"; // dialog
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
@import "components/dropdown"; // dropdown
|
||||
|
||||
// Utilities
|
||||
@import "utilities/loading"; // aria-busy=true
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
||||
|
|
@ -129,6 +136,8 @@
|
|||
// Icons
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($black, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
|
|||
|
|
@ -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)};
|
||||
|
||||
|
|
@ -129,6 +136,8 @@
|
|||
// Icons
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($white, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
|
|
|
|||
|
|
@ -59,6 +59,12 @@
|
|||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Spacings for nav component
|
||||
--nav-element-spacing-vertical: 1rem;
|
||||
--nav-element-spacing-horizontal: 0.5rem;
|
||||
--nav-link-spacing-vertical: 0.5rem;
|
||||
--nav-link-spacing-horizontal: 0.5rem;
|
||||
|
||||
// Font weight for form labels & fieldsets legend
|
||||
--form-label-font-weight: var(--font-weight);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
border-left: .3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
content: "";
|
||||
color: var(--tooltip-background-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue