mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 09:06:14 -04:00
Merge branch 'dev' into pr/172
This commit is contained in:
Lucas Larroche
commit
5776890352
87 changed files with 2883 additions and 1785 deletions
|
|
@ -14,7 +14,8 @@
|
|||
</p>
|
||||
|
||||
## Pico.css
|
||||
[](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
|
||||
[](https://unpkg.com/@picocss/pico@latest/css/pico.min.css)
|
||||
[](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css)
|
||||
[](https://github.com/picocss/pico/releases/latest)
|
||||
[](https://www.npmjs.com/package/@picocss/pico)
|
||||
[](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
||||
|
|
@ -40,6 +41,7 @@ Shipped with two beautiful color themes, automatically enabled according to the
|
|||
- [Examples](#examples)
|
||||
- [Limitations](#limitations)
|
||||
- [Documentation](#documentation)
|
||||
- [Browser Support](#browser-support)
|
||||
- [Contributing](#contributing)
|
||||
- [Copyright and license](#copyright-and-license)
|
||||
|
||||
|
|
@ -164,12 +166,15 @@ 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**
|
||||
- [Loading](https://picocss.com/docs/loading.html)
|
||||
- [Tooltips](https://picocss.com/docs/tooltips.html)
|
||||
## Browser Support
|
||||
|
||||
Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.
|
||||
## Contributing
|
||||
|
||||
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Pico.css v1.4.4 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
|
|
@ -21,6 +22,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 +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);
|
||||
|
|
@ -276,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");
|
||||
|
|
@ -363,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);
|
||||
|
|
@ -371,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");
|
||||
|
|
@ -457,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);
|
||||
|
|
@ -465,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");
|
||||
|
|
@ -482,6 +508,7 @@ kbd {
|
|||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
::before,
|
||||
|
|
@ -490,10 +517,11 @@ kbd {
|
|||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
|
|
@ -501,6 +529,7 @@ html {
|
|||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
font-family: var(--font-family);
|
||||
overflow-wrap: break-word;
|
||||
cursor: default;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
|
|
@ -604,21 +633,6 @@ sup {
|
|||
top: -0.5em;
|
||||
}
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
|
|
@ -637,7 +651,8 @@ ul {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
[role=link] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -649,11 +664,13 @@ 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:is([aria-current], :hover, :active, :focus),
|
||||
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
a:focus,
|
||||
[role=link]:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
|
|
@ -695,61 +712,7 @@ h6 {
|
|||
--color: var(--h6-color);
|
||||
}
|
||||
|
||||
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
||||
blockquote ~ h1,
|
||||
blockquote ~ h2,
|
||||
blockquote ~ h3,
|
||||
blockquote ~ h4,
|
||||
blockquote ~ h5,
|
||||
blockquote ~ h6,
|
||||
dl ~ h1,
|
||||
dl ~ h2,
|
||||
dl ~ h3,
|
||||
dl ~ h4,
|
||||
dl ~ h5,
|
||||
dl ~ h6,
|
||||
figure ~ h1,
|
||||
figure ~ h2,
|
||||
figure ~ h3,
|
||||
figure ~ h4,
|
||||
figure ~ h5,
|
||||
figure ~ h6,
|
||||
form ~ h1,
|
||||
form ~ h2,
|
||||
form ~ h3,
|
||||
form ~ h4,
|
||||
form ~ h5,
|
||||
form ~ h6,
|
||||
ol ~ h1,
|
||||
ol ~ h2,
|
||||
ol ~ h3,
|
||||
ol ~ h4,
|
||||
ol ~ h5,
|
||||
ol ~ h6,
|
||||
p ~ h1,
|
||||
p ~ h2,
|
||||
p ~ h3,
|
||||
p ~ h4,
|
||||
p ~ h5,
|
||||
p ~ h6,
|
||||
pre ~ h1,
|
||||
pre ~ h2,
|
||||
pre ~ h3,
|
||||
pre ~ h4,
|
||||
pre ~ h5,
|
||||
pre ~ h6,
|
||||
table ~ h1,
|
||||
table ~ h2,
|
||||
table ~ h3,
|
||||
table ~ h4,
|
||||
table ~ h5,
|
||||
table ~ h6,
|
||||
ul ~ h1,
|
||||
ul ~ h2,
|
||||
ul ~ h3,
|
||||
ul ~ h4,
|
||||
ul ~ h5,
|
||||
ul ~ h6 {
|
||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
|
|
@ -774,8 +737,7 @@ small {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
-webkit-padding-start: var(--spacing);
|
||||
|
|
@ -783,11 +745,15 @@ ol {
|
|||
-webkit-padding-end: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
ul li,
|
||||
ol li {
|
||||
:where(dl, ol, ul) li {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||
margin: 0;
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
|
@ -841,12 +807,7 @@ del {
|
|||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -860,7 +821,7 @@ audio:not([controls]) {
|
|||
height: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
:where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -870,7 +831,7 @@ img {
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not([fill]) {
|
||||
:where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
@ -895,14 +856,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -937,19 +890,11 @@ 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,
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
button:is([aria-current], :hover, :active, :focus),
|
||||
input[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||
input[type=button]:is([aria-current], :hover, :active, :focus),
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||
[role=button]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
|
|
@ -970,7 +915,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]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -979,12 +924,9 @@ input[type=reset]:focus {
|
|||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
[role=button][disabled] {
|
||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
|
||||
a[role=button]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1120,19 +1062,13 @@ textarea {
|
|||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
textarea:active,
|
||||
textarea:focus {
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
|
||||
:where(select, textarea):is(:active, :focus) {
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
textarea:active,
|
||||
textarea:focus {
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
|
||||
:where(select, textarea):is(:active, :focus) {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
|
||||
|
|
@ -1144,15 +1080,15 @@ textarea:focus {
|
|||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled] {
|
||||
textarea[disabled],
|
||||
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||
|
|
@ -1163,50 +1099,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
|||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
input[aria-invalid=false],
|
||||
select[aria-invalid=false],
|
||||
textarea[aria-invalid=false] {
|
||||
:where(input, select, textarea)[aria-invalid=false] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
}
|
||||
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
||||
select[aria-invalid=false]:active,
|
||||
select[aria-invalid=false]:focus,
|
||||
textarea[aria-invalid=false]:active,
|
||||
textarea[aria-invalid=false]:focus {
|
||||
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||
}
|
||||
input[aria-invalid=true],
|
||||
select[aria-invalid=true],
|
||||
textarea[aria-invalid=true] {
|
||||
:where(input, select, textarea)[aria-invalid=true] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
}
|
||||
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
||||
select[aria-invalid=true]:active,
|
||||
select[aria-invalid=true]:focus,
|
||||
textarea[aria-invalid=true]:active,
|
||||
textarea[aria-invalid=true]:focus {
|
||||
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||
}
|
||||
|
||||
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -1246,9 +1160,7 @@ select:not([multiple]):not([size]) {
|
|||
background-position: center left 0.75rem;
|
||||
}
|
||||
|
||||
input + small,
|
||||
select + small,
|
||||
textarea + small {
|
||||
:where(input, select, textarea) + small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
|
|
@ -1256,7 +1168,7 @@ textarea + small {
|
|||
color: var(--muted-color);
|
||||
}
|
||||
|
||||
label > input, label > select, label > textarea {
|
||||
label > :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
|
||||
|
|
@ -1389,11 +1301,11 @@ label > input, label > select, label > textarea {
|
|||
padding: 0;
|
||||
}
|
||||
[type=color]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
[type=color]::-moz-color-swatch {
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -1421,25 +1333,17 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
[dir=rtl] [type=date],
|
||||
[dir=rtl] [type=datetime-local],
|
||||
[dir=rtl] [type=month],
|
||||
[dir=rtl] [type=time],
|
||||
[dir=rtl] [type=week] {
|
||||
[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[type=file] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
[type=file]:hover, [type=file]:active, [type=file]:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
[type=file]::-webkit-file-upload-button {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
|
|
@ -1489,11 +1393,11 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
||||
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
|
||||
[type=file]::file-selector-button:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1522,7 +1426,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
||||
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1549,7 +1453,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
|
||||
[type=file]::-ms-browse:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1560,7 +1464,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: 1.25rem;
|
||||
background: transparent;
|
||||
background: none;
|
||||
}
|
||||
[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
|
|
@ -1640,25 +1544,43 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
|
||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
background-position: center left 1.125rem, center right 0.75rem;
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
|
||||
background-image: var(--icon-search), var(--icon-valid);
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
|
||||
background-image: var(--icon-search), var(--icon-invalid);
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
|
||||
background-position: center right 1.125rem;
|
||||
}
|
||||
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
|
||||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
table {
|
||||
:where(table) {
|
||||
width: 100%;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
|
|
@ -1725,7 +1647,7 @@ pre {
|
|||
pre > code {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
background: transparent;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
|
@ -1757,11 +1679,10 @@ kbd {
|
|||
* Miscs
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
|
|
@ -1779,16 +1700,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;
|
||||
}
|
||||
|
|
@ -1802,10 +1725,12 @@ details summary::after {
|
|||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center;
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
|
@ -1813,26 +1738,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, 1.5));
|
||||
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 center;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1841,7 +1774,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);
|
||||
|
|
@ -1886,7 +1818,7 @@ dialog {
|
|||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: var(--spacing);
|
||||
border: none;
|
||||
border: 0;
|
||||
background-color: var(--modal-overlay-background-color);
|
||||
}
|
||||
dialog article {
|
||||
|
|
@ -1931,6 +1863,11 @@ dialog:not([open]), dialog[open=false] {
|
|||
/**
|
||||
* Nav
|
||||
*/
|
||||
:where(nav li)::before {
|
||||
float: left;
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav,
|
||||
nav ul {
|
||||
display: flex;
|
||||
|
|
@ -1948,31 +1885,35 @@ 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 :where(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;
|
||||
}
|
||||
nav a:hover, nav a:active, nav a:focus {
|
||||
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
|
||||
text-decoration: none;
|
||||
}
|
||||
nav [role=button] {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
aside nav,
|
||||
aside ol,
|
||||
|
|
@ -1981,11 +1922,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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2012,7 +1955,7 @@ progress {
|
|||
}
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
background: none;
|
||||
}
|
||||
progress[value]::-webkit-progress-value {
|
||||
background-color: var(--progress-color);
|
||||
|
|
@ -2034,6 +1977,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 +2000,177 @@ progress::-moz-progress-bar {
|
|||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
*/
|
||||
details[role=list],
|
||||
li[role=list] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details[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,
|
||||
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,
|
||||
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,
|
||||
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,
|
||||
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,
|
||||
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: 1rem;
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
-webkit-margin-start: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
background-position: right center;
|
||||
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: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
nav details[role=list] summary,
|
||||
nav li[role=list] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
nav details[role=list] summary + ul,
|
||||
nav li[role=list] > ul {
|
||||
min-width: -webkit-fit-content;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav details[role=list] summary + ul li a,
|
||||
nav li[role=list] > ul li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav details[role=list] summary,
|
||||
nav details[role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
nav details[role=list][open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav details[role=list] summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
-webkit-margin-start: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
nav details[role=list] summary[role=link] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
nav details[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
4
css/pico.classless.min.css
vendored
4
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
698
css/pico.css
698
css/pico.css
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,4 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* Pico.css v1.4.4 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
|
|
@ -21,6 +22,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 +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);
|
||||
|
|
@ -276,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");
|
||||
|
|
@ -363,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);
|
||||
|
|
@ -371,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");
|
||||
|
|
@ -457,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);
|
||||
|
|
@ -465,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");
|
||||
|
|
@ -482,6 +508,7 @@ kbd {
|
|||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
::before,
|
||||
|
|
@ -490,10 +517,11 @@ kbd {
|
|||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
|
|
@ -501,6 +529,7 @@ html {
|
|||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
font-family: var(--font-family);
|
||||
overflow-wrap: break-word;
|
||||
cursor: default;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
|
|
@ -574,21 +603,6 @@ sup {
|
|||
top: -0.5em;
|
||||
}
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
|
|
@ -607,7 +621,8 @@ ul {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
[role=link] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -619,11 +634,13 @@ 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:is([aria-current], :hover, :active, :focus),
|
||||
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
a:focus,
|
||||
[role=link]:focus {
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
|
|
@ -665,61 +682,7 @@ h6 {
|
|||
--color: var(--h6-color);
|
||||
}
|
||||
|
||||
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
||||
blockquote ~ h1,
|
||||
blockquote ~ h2,
|
||||
blockquote ~ h3,
|
||||
blockquote ~ h4,
|
||||
blockquote ~ h5,
|
||||
blockquote ~ h6,
|
||||
dl ~ h1,
|
||||
dl ~ h2,
|
||||
dl ~ h3,
|
||||
dl ~ h4,
|
||||
dl ~ h5,
|
||||
dl ~ h6,
|
||||
figure ~ h1,
|
||||
figure ~ h2,
|
||||
figure ~ h3,
|
||||
figure ~ h4,
|
||||
figure ~ h5,
|
||||
figure ~ h6,
|
||||
form ~ h1,
|
||||
form ~ h2,
|
||||
form ~ h3,
|
||||
form ~ h4,
|
||||
form ~ h5,
|
||||
form ~ h6,
|
||||
ol ~ h1,
|
||||
ol ~ h2,
|
||||
ol ~ h3,
|
||||
ol ~ h4,
|
||||
ol ~ h5,
|
||||
ol ~ h6,
|
||||
p ~ h1,
|
||||
p ~ h2,
|
||||
p ~ h3,
|
||||
p ~ h4,
|
||||
p ~ h5,
|
||||
p ~ h6,
|
||||
pre ~ h1,
|
||||
pre ~ h2,
|
||||
pre ~ h3,
|
||||
pre ~ h4,
|
||||
pre ~ h5,
|
||||
pre ~ h6,
|
||||
table ~ h1,
|
||||
table ~ h2,
|
||||
table ~ h3,
|
||||
table ~ h4,
|
||||
table ~ h5,
|
||||
table ~ h6,
|
||||
ul ~ h1,
|
||||
ul ~ h2,
|
||||
ul ~ h3,
|
||||
ul ~ h4,
|
||||
ul ~ h5,
|
||||
ul ~ h6 {
|
||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
|
|
@ -744,8 +707,7 @@ small {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
-webkit-padding-start: var(--spacing);
|
||||
|
|
@ -753,11 +715,15 @@ ol {
|
|||
-webkit-padding-end: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
ul li,
|
||||
ol li {
|
||||
:where(dl, ol, ul) li {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||
margin: 0;
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
|
@ -811,12 +777,7 @@ del {
|
|||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -830,7 +791,7 @@ audio:not([controls]) {
|
|||
height: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
:where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -840,7 +801,7 @@ img {
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not([fill]) {
|
||||
:where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
@ -865,14 +826,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -907,19 +860,11 @@ 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,
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
button:is([aria-current], :hover, :active, :focus),
|
||||
input[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||
input[type=button]:is([aria-current], :hover, :active, :focus),
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||
[role=button]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
|
|
@ -940,7 +885,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]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -949,12 +894,9 @@ input[type=reset]:focus {
|
|||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
[role=button][disabled] {
|
||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
|
||||
a[role=button]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1090,19 +1032,13 @@ textarea {
|
|||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
textarea:active,
|
||||
textarea:focus {
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
|
||||
:where(select, textarea):is(:active, :focus) {
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
textarea:active,
|
||||
textarea:focus {
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
|
||||
:where(select, textarea):is(:active, :focus) {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
|
||||
|
|
@ -1114,15 +1050,15 @@ textarea:focus {
|
|||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled] {
|
||||
textarea[disabled],
|
||||
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||
|
|
@ -1133,50 +1069,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
|||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
input[aria-invalid=false],
|
||||
select[aria-invalid=false],
|
||||
textarea[aria-invalid=false] {
|
||||
:where(input, select, textarea)[aria-invalid=false] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
}
|
||||
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
||||
select[aria-invalid=false]:active,
|
||||
select[aria-invalid=false]:focus,
|
||||
textarea[aria-invalid=false]:active,
|
||||
textarea[aria-invalid=false]:focus {
|
||||
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||
}
|
||||
input[aria-invalid=true],
|
||||
select[aria-invalid=true],
|
||||
textarea[aria-invalid=true] {
|
||||
:where(input, select, textarea)[aria-invalid=true] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
}
|
||||
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
||||
select[aria-invalid=true]:active,
|
||||
select[aria-invalid=true]:focus,
|
||||
textarea[aria-invalid=true]:active,
|
||||
textarea[aria-invalid=true]:focus {
|
||||
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||
}
|
||||
|
||||
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -1216,9 +1130,7 @@ select:not([multiple]):not([size]) {
|
|||
background-position: center left 0.75rem;
|
||||
}
|
||||
|
||||
input + small,
|
||||
select + small,
|
||||
textarea + small {
|
||||
:where(input, select, textarea) + small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
|
|
@ -1226,7 +1138,7 @@ textarea + small {
|
|||
color: var(--muted-color);
|
||||
}
|
||||
|
||||
label > input, label > select, label > textarea {
|
||||
label > :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
|
||||
|
|
@ -1359,11 +1271,11 @@ label > input, label > select, label > textarea {
|
|||
padding: 0;
|
||||
}
|
||||
[type=color]::-webkit-color-swatch {
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
[type=color]::-moz-color-swatch {
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -1391,25 +1303,17 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
[dir=rtl] [type=date],
|
||||
[dir=rtl] [type=datetime-local],
|
||||
[dir=rtl] [type=month],
|
||||
[dir=rtl] [type=time],
|
||||
[dir=rtl] [type=week] {
|
||||
[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[type=file] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
[type=file]:hover, [type=file]:active, [type=file]:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
[type=file]::-webkit-file-upload-button {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
|
|
@ -1459,11 +1363,11 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
cursor: pointer;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
||||
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
|
||||
[type=file]::file-selector-button:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1492,7 +1396,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
-webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
|
||||
[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1519,7 +1423,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
-ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus {
|
||||
[type=file]::-ms-browse:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -1530,7 +1434,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: 1.25rem;
|
||||
background: transparent;
|
||||
background: none;
|
||||
}
|
||||
[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
|
|
@ -1610,25 +1514,43 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[
|
|||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
|
||||
-webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
background-position: center left 1.125rem, center right 0.75rem;
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] {
|
||||
background-image: var(--icon-search), var(--icon-valid);
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] {
|
||||
background-image: var(--icon-search), var(--icon-invalid);
|
||||
}
|
||||
|
||||
[type=search]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] {
|
||||
background-position: center right 1.125rem;
|
||||
}
|
||||
[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] {
|
||||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
table {
|
||||
:where(table) {
|
||||
width: 100%;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
|
|
@ -1695,7 +1617,7 @@ pre {
|
|||
pre > code {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
background: transparent;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
|
@ -1727,11 +1649,10 @@ kbd {
|
|||
* Miscs
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
|
|
@ -1749,16 +1670,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;
|
||||
}
|
||||
|
|
@ -1772,10 +1695,12 @@ details summary::after {
|
|||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
-webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center;
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
|
@ -1783,26 +1708,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, 1.5));
|
||||
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 center;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1811,7 +1744,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);
|
||||
|
|
@ -1856,7 +1788,7 @@ dialog {
|
|||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: var(--spacing);
|
||||
border: none;
|
||||
border: 0;
|
||||
background-color: var(--modal-overlay-background-color);
|
||||
}
|
||||
dialog article {
|
||||
|
|
@ -1901,6 +1833,11 @@ dialog:not([open]), dialog[open=false] {
|
|||
/**
|
||||
* Nav
|
||||
*/
|
||||
:where(nav li)::before {
|
||||
float: left;
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav,
|
||||
nav ul {
|
||||
display: flex;
|
||||
|
|
@ -1918,31 +1855,35 @@ 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 :where(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;
|
||||
}
|
||||
nav a:hover, nav a:active, nav a:focus {
|
||||
nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
|
||||
text-decoration: none;
|
||||
}
|
||||
nav [role=button] {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
aside nav,
|
||||
aside ol,
|
||||
|
|
@ -1951,11 +1892,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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -1982,7 +1925,7 @@ progress {
|
|||
}
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
background: none;
|
||||
}
|
||||
progress[value]::-webkit-progress-value {
|
||||
background-color: var(--progress-color);
|
||||
|
|
@ -2004,6 +1947,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 +1970,177 @@ progress::-moz-progress-bar {
|
|||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Dropdown ([role="list"])
|
||||
*/
|
||||
details[role=list],
|
||||
li[role=list] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
details[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,
|
||||
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,
|
||||
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,
|
||||
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,
|
||||
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,
|
||||
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: 1rem;
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
-webkit-margin-start: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
background-position: right center;
|
||||
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: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
nav details[role=list] summary,
|
||||
nav li[role=list] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
nav details[role=list] summary + ul,
|
||||
nav li[role=list] > ul {
|
||||
min-width: -webkit-fit-content;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav details[role=list] summary + ul li a,
|
||||
nav li[role=list] > ul li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav details[role=list] summary,
|
||||
nav details[role=list] summary:not([role]) {
|
||||
height: auto;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
nav details[role=list][open] summary {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
nav details[role=list] summary + ul {
|
||||
margin-top: var(--outline-width);
|
||||
-webkit-margin-start: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
nav details[role=list] summary[role=link] {
|
||||
margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
nav details[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
4
css/pico.fluid.classless.min.css
vendored
4
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
4
css/pico.min.css
vendored
4
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");
|
||||
|
|
@ -419,6 +444,7 @@ kbd {
|
|||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
::before,
|
||||
|
|
@ -427,10 +453,11 @@ kbd {
|
|||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
|
|
@ -438,6 +465,7 @@ html {
|
|||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
font-family: var(--font-family);
|
||||
overflow-wrap: break-word;
|
||||
cursor: default;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
|
|
@ -566,21 +594,6 @@ sup {
|
|||
top: -0.5em;
|
||||
}
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
|
|
@ -599,7 +612,8 @@ ul {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
[role=link] {
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
|
|
@ -608,29 +622,37 @@ a {
|
|||
-webkit-text-decoration: var(--text-decoration);
|
||||
text-decoration: var(--text-decoration);
|
||||
}
|
||||
a:hover, a:active, a:focus {
|
||||
a:is([aria-current], :hover, :active, :focus),
|
||||
[role=link]:is([aria-current], :hover, :active, :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:is([aria-current], :hover, :active, :focus),
|
||||
[role=link].secondary:is([aria-current], :hover, :active, :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:is([aria-current], :hover, :active, :focus),
|
||||
[role=link].contrast:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
a.contrast:focus {
|
||||
a.contrast:focus,
|
||||
[role=link].contrast:focus {
|
||||
--background-color: var(--contrast-focus);
|
||||
}
|
||||
|
||||
|
|
@ -672,61 +694,7 @@ h6 {
|
|||
--color: var(--h6-color);
|
||||
}
|
||||
|
||||
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
|
||||
blockquote ~ h1,
|
||||
blockquote ~ h2,
|
||||
blockquote ~ h3,
|
||||
blockquote ~ h4,
|
||||
blockquote ~ h5,
|
||||
blockquote ~ h6,
|
||||
dl ~ h1,
|
||||
dl ~ h2,
|
||||
dl ~ h3,
|
||||
dl ~ h4,
|
||||
dl ~ h5,
|
||||
dl ~ h6,
|
||||
figure ~ h1,
|
||||
figure ~ h2,
|
||||
figure ~ h3,
|
||||
figure ~ h4,
|
||||
figure ~ h5,
|
||||
figure ~ h6,
|
||||
form ~ h1,
|
||||
form ~ h2,
|
||||
form ~ h3,
|
||||
form ~ h4,
|
||||
form ~ h5,
|
||||
form ~ h6,
|
||||
ol ~ h1,
|
||||
ol ~ h2,
|
||||
ol ~ h3,
|
||||
ol ~ h4,
|
||||
ol ~ h5,
|
||||
ol ~ h6,
|
||||
p ~ h1,
|
||||
p ~ h2,
|
||||
p ~ h3,
|
||||
p ~ h4,
|
||||
p ~ h5,
|
||||
p ~ h6,
|
||||
pre ~ h1,
|
||||
pre ~ h2,
|
||||
pre ~ h3,
|
||||
pre ~ h4,
|
||||
pre ~ h5,
|
||||
pre ~ h6,
|
||||
table ~ h1,
|
||||
table ~ h2,
|
||||
table ~ h3,
|
||||
table ~ h4,
|
||||
table ~ h5,
|
||||
table ~ h6,
|
||||
ul ~ h1,
|
||||
ul ~ h2,
|
||||
ul ~ h3,
|
||||
ul ~ h4,
|
||||
ul ~ h5,
|
||||
ul ~ h6 {
|
||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
|
|
@ -754,8 +722,7 @@ small {
|
|||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
-webkit-padding-start: var(--spacing);
|
||||
|
|
@ -763,11 +730,15 @@ ol {
|
|||
-webkit-padding-end: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
ul li,
|
||||
ol li {
|
||||
:where(dl, ol, ul) li {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
:where(dl, ol, ul) :is(dl, ol, ul) {
|
||||
margin: 0;
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
|
@ -821,12 +792,7 @@ del {
|
|||
/**
|
||||
* Embedded content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -840,7 +806,7 @@ audio:not([controls]) {
|
|||
height: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
:where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -850,7 +816,7 @@ img {
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not([fill]) {
|
||||
:where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
@ -875,14 +841,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type=button]::-moz-focus-inner,
|
||||
[type=reset]::-moz-focus-inner,
|
||||
[type=submit]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -916,19 +874,11 @@ input[type=reset],
|
|||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover, button:active, button:focus,
|
||||
input[type=submit]:hover,
|
||||
input[type=submit]:active,
|
||||
input[type=submit]:focus,
|
||||
input[type=button]:hover,
|
||||
input[type=button]:active,
|
||||
input[type=button]:focus,
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button]:hover,
|
||||
[role=button]:active,
|
||||
[role=button]:focus {
|
||||
button:is([aria-current], :hover, :active, :focus),
|
||||
input[type=submit]:is([aria-current], :hover, :active, :focus),
|
||||
input[type=button]:is([aria-current], :hover, :active, :focus),
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus),
|
||||
[role=button]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
|
|
@ -943,154 +893,70 @@ input[type=reset]:focus,
|
|||
0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
|
||||
button.secondary,
|
||||
input[type=submit].secondary,
|
||||
input[type=button].secondary,
|
||||
input[type=reset],
|
||||
[role=button].secondary {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).secondary,
|
||||
input[type=reset] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.secondary:hover, button.secondary:active, button.secondary:focus,
|
||||
input[type=submit].secondary:hover,
|
||||
input[type=submit].secondary:active,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary:hover,
|
||||
input[type=button].secondary:active,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset]:hover,
|
||||
input[type=reset]:active,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary:hover,
|
||||
[role=button].secondary:active,
|
||||
[role=button].secondary:focus {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
|
||||
input[type=reset]:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
}
|
||||
button.secondary:focus,
|
||||
input[type=submit].secondary:focus,
|
||||
input[type=button].secondary:focus,
|
||||
input[type=reset]:focus,
|
||||
[role=button].secondary:focus {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus,
|
||||
input[type=reset]:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
|
||||
button.contrast,
|
||||
input[type=submit].contrast,
|
||||
input[type=button].contrast,
|
||||
input[type=reset].contrast,
|
||||
[role=button].contrast {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
button.contrast:hover, button.contrast:active, button.contrast:focus,
|
||||
input[type=submit].contrast:hover,
|
||||
input[type=submit].contrast:active,
|
||||
input[type=submit].contrast:focus,
|
||||
input[type=button].contrast:hover,
|
||||
input[type=button].contrast:active,
|
||||
input[type=button].contrast:focus,
|
||||
input[type=reset].contrast:hover,
|
||||
input[type=reset].contrast:active,
|
||||
input[type=reset].contrast:focus,
|
||||
[role=button].contrast:hover,
|
||||
[role=button].contrast:active,
|
||||
[role=button].contrast:focus {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
--color: var(--contrast-inverse);
|
||||
}
|
||||
button.contrast:focus,
|
||||
input[type=submit].contrast:focus,
|
||||
input[type=button].contrast:focus,
|
||||
input[type=reset].contrast:focus,
|
||||
[role=button].contrast:focus {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
|
||||
button.outline,
|
||||
input[type=submit].outline,
|
||||
input[type=button].outline,
|
||||
input[type=reset].outline,
|
||||
[role=button].outline {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).outline,
|
||||
input[type=reset].outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
}
|
||||
button.outline:hover, button.outline:active, button.outline:focus,
|
||||
input[type=submit].outline:hover,
|
||||
input[type=submit].outline:active,
|
||||
input[type=submit].outline:focus,
|
||||
input[type=button].outline:hover,
|
||||
input[type=button].outline:active,
|
||||
input[type=button].outline:focus,
|
||||
input[type=reset].outline:hover,
|
||||
input[type=reset].outline:active,
|
||||
input[type=reset].outline:focus,
|
||||
[role=button].outline:hover,
|
||||
[role=button].outline:active,
|
||||
[role=button].outline:focus {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
|
||||
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
|
||||
button.outline.secondary,
|
||||
input[type=submit].outline.secondary,
|
||||
input[type=button].outline.secondary,
|
||||
input[type=reset].outline.secondary,
|
||||
[role=button].outline.secondary {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary,
|
||||
input[type=reset].outline {
|
||||
--color: var(--secondary);
|
||||
}
|
||||
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
|
||||
input[type=submit].outline.secondary:hover,
|
||||
input[type=submit].outline.secondary:active,
|
||||
input[type=submit].outline.secondary:focus,
|
||||
input[type=button].outline.secondary:hover,
|
||||
input[type=button].outline.secondary:active,
|
||||
input[type=button].outline.secondary:focus,
|
||||
input[type=reset].outline.secondary:hover,
|
||||
input[type=reset].outline.secondary:active,
|
||||
input[type=reset].outline.secondary:focus,
|
||||
[role=button].outline.secondary:hover,
|
||||
[role=button].outline.secondary:active,
|
||||
[role=button].outline.secondary:focus {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
|
||||
input[type=reset].outline:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
button.outline.contrast,
|
||||
input[type=submit].outline.contrast,
|
||||
input[type=button].outline.contrast,
|
||||
input[type=reset].outline.contrast,
|
||||
[role=button].outline.contrast {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast {
|
||||
--color: var(--contrast);
|
||||
}
|
||||
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
|
||||
input[type=submit].outline.contrast:hover,
|
||||
input[type=submit].outline.contrast:active,
|
||||
input[type=submit].outline.contrast:focus,
|
||||
input[type=button].outline.contrast:hover,
|
||||
input[type=button].outline.contrast:active,
|
||||
input[type=button].outline.contrast:focus,
|
||||
input[type=reset].outline.contrast:hover,
|
||||
input[type=reset].outline.contrast:active,
|
||||
input[type=reset].outline.contrast:focus,
|
||||
[role=button].outline.contrast:hover,
|
||||
[role=button].outline.contrast:active,
|
||||
[role=button].outline.contrast:focus {
|
||||
:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
input[type=submit][disabled],
|
||||
input[type=button][disabled],
|
||||
input[type=reset][disabled],
|
||||
a[role=button]:not([href]),
|
||||
[role=button][disabled] {
|
||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
|
||||
a[role=button]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1225,19 +1091,13 @@ textarea {
|
|||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
textarea:active,
|
||||
textarea:focus {
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus),
|
||||
:where(select, textarea):is(:active, :focus) {
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
|
||||
select:active,
|
||||
select:focus,
|
||||
textarea:active,
|
||||
textarea:focus {
|
||||
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus),
|
||||
:where(select, textarea):is(:active, :focus) {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
|
||||
|
|
@ -1249,15 +1109,15 @@ textarea:focus {
|
|||
|
||||
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled] {
|
||||
textarea[disabled],
|
||||
:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||||
|
|
@ -1268,50 +1128,28 @@ textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
|||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||
:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] {
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
input[aria-invalid=false],
|
||||
select[aria-invalid=false],
|
||||
textarea[aria-invalid=false] {
|
||||
:where(input, select, textarea)[aria-invalid=false] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
}
|
||||
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
|
||||
select[aria-invalid=false]:active,
|
||||
select[aria-invalid=false]:focus,
|
||||
textarea[aria-invalid=false]:active,
|
||||
textarea[aria-invalid=false]:focus {
|
||||
:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||
}
|
||||
input[aria-invalid=true],
|
||||
select[aria-invalid=true],
|
||||
textarea[aria-invalid=true] {
|
||||
:where(input, select, textarea)[aria-invalid=true] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
}
|
||||
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
|
||||
select[aria-invalid=true]:active,
|
||||
select[aria-invalid=true]:focus,
|
||||
textarea[aria-invalid=true]:active,
|
||||
textarea[aria-invalid=true]:focus {
|
||||
:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||
}
|
||||
|
||||
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
|
||||
|
|
@ -1351,9 +1189,7 @@ select:not([multiple]):not([size]) {
|
|||
background-position: center left 0.75rem;
|
||||
}
|
||||
|
||||
input + small,
|
||||
select + small,
|
||||
textarea + small {
|
||||
:where(input, select, textarea) + small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
|
|
@ -1361,16 +1197,15 @@ textarea + small {
|
|||
color: var(--muted-color);
|
||||
}
|
||||
|
||||
label > input, label > select, label > textarea {
|
||||
label > :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
table {
|
||||
:where(table) {
|
||||
width: 100%;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
text-indent: 0;
|
||||
|
|
|
|||
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
2
docs/js/commons.min.js
vendored
2
docs/js/commons.min.js
vendored
|
|
@ -1 +1 @@
|
|||
"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){var t=this;document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(){"dark"==t.scheme?t.scheme="light":t.scheme="dark"},!1)})},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var i=this;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){var t="dark"==i.scheme?i.change.dark:i.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){var t=this;this.toggleLink.addEventListener("click",function(e){e.preventDefault(),"closed-on-mobile"==t.state?t.state="open":t.state="closed-on-mobile",t.nav.removeAttribute("class"),t.nav.classList.add(t.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
|
||||
"use strict";!function(){const e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",localStorageKey:"picoPreferedColorScheme",init(){this.scheme=this.schemeFromLocalStorage,this.initSwitchers()},get schemeFromLocalStorage(){return void 0!==window.localStorage&&null!==window.localStorage.getItem(this.localStorageKey)?window.localStorage.getItem(this.localStorageKey):this._scheme},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers(){const e=document.querySelectorAll(this.buttonsTarget);e.forEach(e=>{e.addEventListener("click",()=>{"dark"==this.scheme?this.scheme="light":this.scheme="dark"},!1)})},addButton(e){let t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme(),this.schemeToLocalStorage()},get scheme(){return this._scheme},applyScheme(){document.querySelector("html").setAttribute("data-theme",this.scheme);const e=document.querySelectorAll(this.buttonsTarget);e.forEach(e=>{const t="dark"==this.scheme?this.change.dark:this.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})},schemeToLocalStorage(){void 0!==window.localStorage&&window.localStorage.setItem(this.localStorageKey,this.scheme)}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init(){this.onToggleClick()},onToggleClick(){this.toggleLink.addEventListener("click",e=>{e.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
|
||||
2
docs/js/customization.min.js
vendored
2
docs/js/customization.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/js/grid.min.js
vendored
2
docs/js/grid.min.js
vendored
|
|
@ -1 +1 @@
|
|||
"use strict";var grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=this,e=document.createElement("P");e.innerHTML='\n <button class="secondary add">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"></line>\n <line x1="5" y1="12" x2="19" y2="12">\'</line>\n </svg>\n '.concat(this.buttons.text.add,'\n </button>\n\n <button class="secondary remove">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"></line>\n </svg>\n ').concat(this.buttons.text.remove,"\n </button>"),document.querySelector(this.buttons.target).before(e),document.querySelector("#grid button.add").addEventListener("click",function(){t.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",function(){t.removeColumn()},!1)},generateGrid:function(){for(var t="",e='<<b>div</b> <i>class</i>=<u>"grid"</u>>\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+=" <<b>div</b>>"+(n+1)+"</<b>div</b>>\n";e+="</<b>div</b>>",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();
|
||||
"use strict";const grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init(){this.addButtons(),this.generateGrid()},addButtons(){let t=document.createElement("P");t.innerHTML='\n <button class="secondary add">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"></line>\n <line x1="5" y1="12" x2="19" y2="12">\'</line>\n </svg>\n '.concat(this.buttons.text.add,'\n </button>\n\n <button class="secondary remove">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"></line>\n </svg>\n ').concat(this.buttons.text.remove,"\n </button>"),document.querySelector(this.buttons.target).before(t),document.querySelector("#grid button.add").addEventListener("click",()=>{this.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",()=>{this.removeColumn()},!1)},generateGrid(){let e="",r='<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';for(let t=0;t<this.grid.current;t++)e+="<div>"+(t+1)+"</div>",r+=" <<b>div</b>>"+(t+1)+"</<b>div</b>>\n";r+="</<b>div</b>>",document.querySelector(this.grid.gridTarget).innerHTML=e,document.querySelector(this.grid.codeTarget).innerHTML=r},addColumn(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();
|
||||
2
docs/js/modal.min.js
vendored
2
docs/js/modal.min.js
vendored
|
|
@ -1 +1 @@
|
|||
"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400,visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width","".concat(getScrollbarWidth(),"px")),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});var getScrollbarWidth=function(){var e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div");e.appendChild(t);t=e.offsetWidth-t.offsetWidth;return e.parentNode.removeChild(e),t},isScrollbarVisible=function(){return document.body.scrollHeight>screen.height};
|
||||
"use strict";const isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",animationDuration=400;let visibleModal=null;const toggleModal=e=>{e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=e=>!(!e.hasAttribute("open")||"false"==e.getAttribute("open")),openModal=e=>{isScrollbarVisible()&&document.documentElement.style.setProperty("--scrollbar-width","".concat(getScrollbarWidth(),"px")),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(()=>{visibleModal=e,document.documentElement.classList.remove(openingClass)},animationDuration),e.setAttribute("open",!0)},closeModal=e=>{visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(()=>{document.documentElement.classList.remove(closingClass,isOpenClass),document.documentElement.style.removeProperty("--scrollbar-width"),e.removeAttribute("open")},animationDuration)},getScrollbarWidth=(document.addEventListener("click",e=>{if(null!=visibleModal){const t=visibleModal.querySelector("article");t.contains(e.target)||closeModal(visibleModal)}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)}),()=>{const e=document.createElement("div");e.style.visibility="hidden",e.style.overflow="scroll",e.style.msOverflowStyle="scrollbar",document.body.appendChild(e);var t=document.createElement("div"),t=(e.appendChild(t),e.offsetWidth-t.offsetWidth);return e.parentNode.removeChild(e),t}),isScrollbarVisible=()=>document.body.scrollHeight>screen.height;
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
* Theme switcher
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
* Copyright 2019-2022 - Licensed under MIT
|
||||
*/
|
||||
|
||||
export const themeSwitcher = {
|
||||
|
|
@ -14,13 +14,24 @@ export const themeSwitcher = {
|
|||
dark: '<i>Turn off dark mode</i>',
|
||||
},
|
||||
buttonsTarget: '.theme-switcher',
|
||||
localStorageKey: 'picoPreferedColorScheme',
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.scheme = this._scheme;
|
||||
this.scheme = this.schemeFromLocalStorage;
|
||||
this.initSwitchers();
|
||||
},
|
||||
|
||||
// Get color scheme from local storage
|
||||
get schemeFromLocalStorage() {
|
||||
if (typeof window.localStorage !== 'undefined') {
|
||||
if (window.localStorage.getItem(this.localStorageKey) !== null) {
|
||||
return window.localStorage.getItem(this.localStorageKey);
|
||||
}
|
||||
}
|
||||
return this._scheme;
|
||||
},
|
||||
|
||||
// Prefered color scheme
|
||||
get preferedColorScheme() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
|
|
@ -52,6 +63,7 @@ export const themeSwitcher = {
|
|||
this._scheme = scheme;
|
||||
}
|
||||
this.applyScheme();
|
||||
this.schemeToLocalStorage();
|
||||
},
|
||||
|
||||
// Get scheme
|
||||
|
|
@ -71,6 +83,13 @@ export const themeSwitcher = {
|
|||
}
|
||||
);
|
||||
},
|
||||
|
||||
// Store scheme to local storage
|
||||
schemeToLocalStorage() {
|
||||
if (typeof window.localStorage !== 'undefined') {
|
||||
window.localStorage.setItem(this.localStorageKey, this.scheme);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default themeSwitcher;
|
||||
|
|
|
|||
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,18 +28,24 @@ body > nav {
|
|||
}
|
||||
|
||||
// Band & Title
|
||||
ul:first-of-type li {
|
||||
ul:first-of-type {
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
|
||||
// Brand
|
||||
&:first-of-type {
|
||||
a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--h1-color);
|
||||
color: var(--nav-logo-color);
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -46,7 +54,7 @@ body > nav {
|
|||
// Title
|
||||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: var(--spacing);
|
||||
margin-left: calc(var(--spacing) * 1.5);
|
||||
color: var(--h1-color);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
|
|
@ -55,3 +63,4 @@ body > nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -65,6 +66,13 @@ 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>
|
||||
|
||||
|
|
@ -211,8 +210,10 @@
|
|||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>Others input types:</p>
|
||||
<article aria-label="File browser, range slider, date, time, color examples">
|
||||
<article aria-label="Search, file browser, range slider, date, time, color examples">
|
||||
<input type="search" id="search" name="search" placeholder="Search">
|
||||
<label for="file">File browser
|
||||
<input type="file" id="file" name="file">
|
||||
</label>
|
||||
|
|
@ -230,7 +231,10 @@
|
|||
</label>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- File browser --></em>
|
||||
<pre><code><em><!-- Search --></em>
|
||||
<<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>>
|
||||
|
||||
<!-- File browser --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
||||
<<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>>
|
||||
</<b>label</b>>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<ul>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||
<<b>li</b>><<b>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> <i>role</i>=<u>"button"</u>>Button</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</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
784
package-lock.json
generated
784
package-lock.json
generated
File diff suppressed because it is too large
Load diff
19
package.json
19
package.json
|
|
@ -79,25 +79,26 @@
|
|||
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.16.8",
|
||||
"@babel/core": "^7.16.5",
|
||||
"@babel/preset-env": "^7.16.8",
|
||||
"@babel/cli": "^7.17.6",
|
||||
"@babel/core": "^7.17.5",
|
||||
"@babel/preset-env": "^7.16.11",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"clean-css-cli": "^5.5.0",
|
||||
"clean-css-cli": "^5.5.2",
|
||||
"css-declaration-sorter": "^6.1.4",
|
||||
"html-includes": "^4.4.1",
|
||||
"nodemon": "^2.0.15",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.5",
|
||||
"postcss": "^8.4.7",
|
||||
"postcss-cli": "^9.1.0",
|
||||
"postcss-scss": "^4.0.3",
|
||||
"rollup": "^2.64.0",
|
||||
"sass": "^1.48.0",
|
||||
"uglify-js": "^3.14.5"
|
||||
"rollup": "^2.69.2",
|
||||
"sass": "^1.49.9",
|
||||
"uglify-js": "^3.15.2"
|
||||
},
|
||||
"browserslist": [
|
||||
">= 0.5%",
|
||||
"last 2 major versions",
|
||||
"not dead"
|
||||
"not dead",
|
||||
"not ie > 0"
|
||||
]
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -36,10 +39,11 @@ details {
|
|||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center;
|
||||
background-position: right center;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
|
|
@ -51,14 +55,31 @@ details {
|
|||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&: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, 1.5));
|
||||
background-image: var(--icon-chevron-button);
|
||||
}
|
||||
|
||||
@if $enable-classes {
|
||||
// .contrast
|
||||
&:not(.outline).contrast {
|
||||
// Marker
|
||||
&::after {
|
||||
background-image: var(--icon-chevron-button-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -66,11 +87,13 @@ details {
|
|||
// Open
|
||||
&[open] {
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing));
|
||||
|
||||
&:not([role]) {
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
|
|
@ -82,8 +105,11 @@ details {
|
|||
[dir="rtl"] {
|
||||
details {
|
||||
summary {
|
||||
text-align: right;
|
||||
|
||||
&::after {
|
||||
float: left;
|
||||
background-position: left center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
details[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;
|
||||
|
||||
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: 1rem;
|
||||
height: calc(1rem * var(--line-height, 1.5));
|
||||
margin-inline-start: 0.5rem;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
background-position: right center;
|
||||
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: none;
|
||||
content: "";
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All Dropdowns inside <nav>
|
||||
nav details[role="list"] summary,
|
||||
nav li[role="list"] a {
|
||||
display: flex;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
nav details[role="list"] summary + ul,
|
||||
nav li[role="list"] > ul {
|
||||
min-width: fit-content;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
li a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdowns inside <nav> as nested <details>
|
||||
nav details[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);
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@ dialog {
|
|||
height: inherit;
|
||||
min-height: 100%;
|
||||
padding: var(--spacing);
|
||||
border: none;
|
||||
border: 0;
|
||||
background-color: var(--modal-overlay-background-color);
|
||||
|
||||
// Content
|
||||
|
|
@ -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,9 +92,7 @@ dialog {
|
|||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -103,7 +101,7 @@ dialog {
|
|||
|
||||
// Closed state
|
||||
&:not([open]),
|
||||
&[open='false'] {
|
||||
&[open="false"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -125,8 +123,7 @@ dialog {
|
|||
@if ($enable-classes and $enable-transitions) {
|
||||
$animation-duration: 0.2s;
|
||||
|
||||
.modal-is-opening,
|
||||
.modal-is-closing {
|
||||
:where(.modal-is-opening, .modal-is-closing) {
|
||||
dialog,
|
||||
dialog > article {
|
||||
animation-duration: $animation-duration;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,18 @@
|
|||
* Nav
|
||||
*/
|
||||
|
||||
// Reboot based on :
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
||||
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
|
||||
:where(nav li)::before {
|
||||
float: left;
|
||||
content: "\200B";
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Horizontal Nav
|
||||
nav,
|
||||
nav ul {
|
||||
|
|
@ -19,38 +31,45 @@ 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);
|
||||
:where(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;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Minimal support for role="button"
|
||||
[role="button"] {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Vertical Nav
|
||||
|
|
@ -63,11 +82,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add the correct display in Edge 18- and IE
|
||||
|
|
@ -40,7 +40,7 @@ progress {
|
|||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
background: none;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--progress-color);
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
// 2. Remove the margin on controls in Safari
|
||||
// 3. Show the overflow in Edge
|
||||
button {
|
||||
margin: 0; // 2
|
||||
|
|
@ -17,7 +17,7 @@ button {
|
|||
text-transform: none; // 1
|
||||
}
|
||||
|
||||
// Correct the inability to style clickable types in iOS and Safari
|
||||
// Correct the inability to style buttons in iOS and Safari
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
|
|
@ -25,15 +25,6 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Remove the inner border and padding in Firefox
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -77,9 +68,7 @@ input[type="reset"],
|
|||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
|
|
@ -96,19 +85,14 @@ input[type="reset"],
|
|||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
button.secondary,
|
||||
input[type="submit"].secondary,
|
||||
input[type="button"].secondary,
|
||||
input[type="reset"],
|
||||
[role="button"].secondary {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
--color: var(--secondary-inverse);
|
||||
|
|
@ -121,18 +105,12 @@ input[type="reset"],
|
|||
}
|
||||
|
||||
// Contrast
|
||||
button.contrast,
|
||||
input[type="submit"].contrast,
|
||||
input[type="button"].contrast,
|
||||
input[type="reset"].contrast,
|
||||
[role="button"].contrast {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
--color: var(--contrast-inverse);
|
||||
|
|
@ -145,53 +123,36 @@ input[type="reset"],
|
|||
}
|
||||
|
||||
// Outline (primary)
|
||||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
input[type="button"].outline,
|
||||
input[type="reset"].outline,
|
||||
[role="button"].outline {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline,
|
||||
input[type="reset"].outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
button.outline.secondary,
|
||||
input[type="submit"].outline.secondary,
|
||||
input[type="button"].outline.secondary,
|
||||
input[type="reset"].outline.secondary,
|
||||
[role="button"].outline.secondary {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.secondary,
|
||||
input[type="reset"].outline {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
button.outline.contrast,
|
||||
input[type="submit"].outline.contrast,
|
||||
input[type="button"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
[role="button"].outline.contrast {
|
||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
|
|
@ -200,9 +161,7 @@ input[type="reset"],
|
|||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -215,13 +174,10 @@ input[type="reset"],
|
|||
}
|
||||
|
||||
// Button [disabled]
|
||||
// 1. Links without href are disabled by default
|
||||
button[disabled],
|
||||
input[type="submit"][disabled],
|
||||
input[type="button"][disabled],
|
||||
input[type="reset"][disabled],
|
||||
a[role="button"]:not([href]), // 1
|
||||
[role="button"][disabled] {
|
||||
// Links without href are disabled by default
|
||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||
:where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
||||
a[role="button"]:not([href]) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -4,11 +4,11 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the font sizing in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
|
|
@ -50,7 +50,7 @@ pre {
|
|||
> code {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
background: transparent;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,11 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change the alignment on media elements in all browsers (opinionated)
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
:where(audio, canvas, iframe, img, svg, video) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +25,7 @@ audio:not([controls]) {
|
|||
}
|
||||
|
||||
// Remove the border on iframes in all browsers (opinionated)
|
||||
iframe {
|
||||
:where(iframe) {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +38,7 @@ img {
|
|||
}
|
||||
|
||||
// Change the fill color to match the text color in all browsers (opinionated)
|
||||
svg:not([fill]) {
|
||||
:where(svg:not([fill])) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
// Swatch
|
||||
@mixin color-swatch {
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
// Date & Time
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
|
||||
&[type="date"],
|
||||
&[type="datetime-local"],
|
||||
&[type="month"],
|
||||
|
|
@ -70,31 +70,19 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
[dir="rtl"]
|
||||
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// File
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@mixin file-selector-button {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
|
|
@ -123,9 +111,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is(:hover, :active, :focus) {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
|
@ -157,7 +143,7 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: transparent;
|
||||
background: none;
|
||||
|
||||
// Slider Track
|
||||
@mixin slider-track {
|
||||
|
|
@ -238,14 +224,32 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
|
||||
// Search
|
||||
// :not() are needed to add Specificity and avoid !important on padding
|
||||
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]) {
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
|
||||
&[type="search"] {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
border-radius: 5rem;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-size: 1rem auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
}
|
||||
@else {
|
||||
padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
|
||||
}
|
||||
background-position: center left 1.125rem, center right 0.75rem;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-search), var(--icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"] {
|
||||
background-image: var(--icon-search), var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -256,3 +260,17 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
:where(input) {
|
||||
&:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
|
||||
&[type="search"] {
|
||||
background-position: center right 1.125rem;
|
||||
|
||||
&[aria-invalid] {
|
||||
background-position: center right 1.125rem, center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Change the font styles in all browsers
|
||||
|
|
@ -174,20 +174,16 @@ textarea {
|
|||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
:where(select, textarea) {
|
||||
&:is(:active, :focus) {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -202,21 +198,18 @@ textarea {
|
|||
}
|
||||
|
||||
// Disabled
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
|
||||
select,
|
||||
textarea {
|
||||
&[disabled] {
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
:where(fieldset[disabled]) :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]), select, textarea) {
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: var(--form-element-disabled-opacity);
|
||||
}
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Aria-invalid
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"]):not([type="radio"]) {
|
||||
&[aria-invalid] {
|
||||
@if $enable-important {
|
||||
|
|
@ -228,7 +221,8 @@ textarea {
|
|||
padding-inline-end: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
|
|
@ -251,12 +245,12 @@ textarea {
|
|||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
|
||||
}
|
||||
|
|
@ -266,12 +260,12 @@ textarea {
|
|||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is(:active, :focus) {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
|
||||
}
|
||||
|
|
@ -280,9 +274,7 @@ textarea {
|
|||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
:where(input, select, textarea) {
|
||||
&:not([type="checkbox"]):not([type="radio"]) {
|
||||
&[aria-invalid],
|
||||
&[aria-invalid="true"],
|
||||
|
|
@ -339,9 +331,7 @@ select {
|
|||
}
|
||||
|
||||
// Helper
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
:where(input, select, textarea) {
|
||||
+ small {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -353,9 +343,7 @@ textarea {
|
|||
|
||||
// Styles for Input inside a label
|
||||
label {
|
||||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
> :where(input, select, textarea) {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,17 +4,16 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Add the correct box sizing in Firefox
|
||||
// 2. Show the overflow in Edge and IE
|
||||
// 1. Correct the inheritance of border color in Firefox
|
||||
// 2. Add the correct box sizing in Firefox
|
||||
hr {
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
border: none;
|
||||
height: 0; // 2
|
||||
border: 0;
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
color: inherit; // 1
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
|
|
@ -22,7 +21,8 @@ hr {
|
|||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
}
|
||||
@else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,18 +4,16 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Collapse border spacing in all browsers (opinionated).
|
||||
// 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
|
||||
// 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
|
||||
table {
|
||||
// 1. Collapse border spacing in all browsers (opinionated)
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||
:where(table) {
|
||||
width: 100%;
|
||||
border-color: inherit; // 2
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
text-indent: 0; // 3
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Pico
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
|
|
@ -28,23 +28,6 @@ sup {
|
|||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Remove the margin on nested lists in Edge 18- and IE
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -68,7 +51,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,9 +65,7 @@ a {
|
|||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
|
@ -97,9 +79,7 @@ a {
|
|||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
|
|
@ -112,9 +92,7 @@ a {
|
|||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
&:is([aria-current], :hover, :active, :focus) {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
|
|
@ -160,22 +138,8 @@ h6 {
|
|||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
& ~ h1,
|
||||
& ~ h2,
|
||||
& ~ h3,
|
||||
& ~ h4,
|
||||
& ~ h5,
|
||||
& ~ h6 {
|
||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
|
@ -227,8 +191,7 @@ small {
|
|||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
:where(dl, ol, ul) {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
padding-inline-start: var(--spacing);
|
||||
|
|
@ -239,6 +202,15 @@ ol {
|
|||
}
|
||||
}
|
||||
|
||||
// Margin-top for nested lists
|
||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
:where(dl, ol, ul) {
|
||||
:is(dl, ol, ul) {
|
||||
margin: 0; // 1
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: square;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,16 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
|
||||
// 1. Add border box sizing in all browsers (opinionated)
|
||||
// 2. Backgrounds do not repeat by default (opinionated)
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
background-repeat: no-repeat; // 2
|
||||
}
|
||||
|
||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||
|
|
@ -23,23 +25,24 @@
|
|||
vertical-align: inherit; // 2
|
||||
}
|
||||
|
||||
// 1. Correct the line height in all browsers
|
||||
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||
// 3. Change the default tap highlight to be completely transparent in iOS
|
||||
// 4. Use the default cursor in all browsers (opinionated)
|
||||
// 5. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
|
||||
-ms-text-size-adjust: 100%; // 6
|
||||
// 1. Use the default cursor in all browsers (opinionated)
|
||||
// 2. Change the line height in all browsers (opinionated)
|
||||
// 3. Breaks words to prevent overflow in all browsers (opinionated)
|
||||
// 4. Use a 4-space tab width in all browsers (opinionated)
|
||||
// 5. Remove the grey highlight on links in iOS (opinionated)
|
||||
// 6. Prevent adjustments of font size after orientation changes in iOS
|
||||
:where(:root) {
|
||||
-webkit-tap-highlight-color: transparent; // 5
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
text-size-adjust: 100%; // 6
|
||||
text-rendering: optimizeLegibility;
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height); // 1
|
||||
line-height: var(--line-height); // 2
|
||||
font-family: var(--font-family);
|
||||
cursor: default; // 4
|
||||
tab-size: 4; // 5
|
||||
overflow-wrap: break-word; // 3
|
||||
cursor: default; // 1
|
||||
tab-size: 4; // 4
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Render the `main` element consistently in IE
|
||||
|
|
@ -16,9 +16,10 @@ main {
|
|||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove the margin in all browsers (opinionated)
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin: 0; // 1
|
||||
|
||||
> header,
|
||||
> main,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
* Accessibility & User interaction
|
||||
*/
|
||||
|
||||
|
||||
// Based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Accessibility
|
||||
|
|
@ -45,7 +44,6 @@ textarea,
|
|||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
@if $enable-transitions and $enable-important {
|
||||
|
||||
/**
|
||||
* Reduce Motion Features
|
||||
*/
|
||||
|
||||
|
||||
// Based on :
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// 1. Remove animations when motion is reduced (opinionated)
|
||||
|
|
|
|||
|
|
@ -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