mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
refactor: modules and css vars
This commit is contained in:
Lucas Larroche
parent
2e4d6c66ec
commit
ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
|
|
@ -3,6 +3,309 @@
|
||||||
* Pico ✨ v2.0.0-alpha1 (https://picocss.com)
|
* Pico ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||||
* Copyright 2019-2022 - Licensed under MIT
|
* Copyright 2019-2022 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
/**
|
||||||
|
* Color schemes
|
||||||
|
*/
|
||||||
|
[data-theme=light],
|
||||||
|
:root:not([data-theme=dark]) {
|
||||||
|
--pico-background-color: #fff;
|
||||||
|
--pico-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-muted-color: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-muted-border-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-primary: hsl(195deg, 85%, 41%);
|
||||||
|
--pico-primary-hover: hsl(195deg, 90%, 32%);
|
||||||
|
--pico-primary-focus: rgba(16, 149, 193, 0.125);
|
||||||
|
--pico-primary-inverse: #fff;
|
||||||
|
--pico-secondary: hsl(205deg, 15%, 41%);
|
||||||
|
--pico-secondary-hover: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
|
||||||
|
--pico-secondary-inverse: #fff;
|
||||||
|
--pico-contrast: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-contrast-hover: #000;
|
||||||
|
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
|
||||||
|
--pico-contrast-inverse: #fff;
|
||||||
|
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
|
||||||
|
--pico-h1-color: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-h2-color: #24333e;
|
||||||
|
--pico-h3-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-h4-color: #374956;
|
||||||
|
--pico-h5-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-h6-color: #4d606d;
|
||||||
|
--pico-mark-background-color: #fff2ca;
|
||||||
|
--pico-mark-color: #543a26;
|
||||||
|
--pico-ins-color: #388e3c;
|
||||||
|
--pico-del-color: #c62828;
|
||||||
|
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-blockquote-footer-color: var(--pico-muted-color);
|
||||||
|
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-table-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-table-row-stripped-background-color: #f6f8f9;
|
||||||
|
--pico-code-background-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-code-color: var(--pico-muted-color);
|
||||||
|
--pico-code-kbd-background-color: var(--pico-contrast);
|
||||||
|
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-code-tag-color: hsl(330deg, 40%, 50%);
|
||||||
|
--pico-code-property-color: hsl(185deg, 40%, 40%);
|
||||||
|
--pico-code-value-color: hsl(40deg, 20%, 50%);
|
||||||
|
--pico-code-comment-color: hsl(205deg, 14%, 68%);
|
||||||
|
--pico-form-element-background-color: transparent;
|
||||||
|
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
|
||||||
|
--pico-form-element-color: var(--pico-color);
|
||||||
|
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
||||||
|
--pico-form-element-active-background-color: transparent;
|
||||||
|
--pico-form-element-active-border-color: var(--pico-primary);
|
||||||
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||||
|
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
|
||||||
|
--pico-form-element-disabled-opacity: 0.5;
|
||||||
|
--pico-form-element-invalid-border-color: #c62828;
|
||||||
|
--pico-form-element-invalid-active-border-color: #d32f2f;
|
||||||
|
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
|
||||||
|
--pico-form-element-valid-border-color: #388e3c;
|
||||||
|
--pico-form-element-valid-active-border-color: #43a047;
|
||||||
|
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
|
||||||
|
--pico-switch-background-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-switch-color: var(--pico-primary-inverse);
|
||||||
|
--pico-switch-checked-background-color: var(--pico-primary);
|
||||||
|
--pico-range-border-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
--pico-range-thumb-color: var(--pico-secondary);
|
||||||
|
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
||||||
|
--pico-range-thumb-active-color: var(--pico-primary);
|
||||||
|
--pico-accordion-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-accordion-active-summary-color: var(--pico-primary);
|
||||||
|
--pico-accordion-close-summary-color: var(--pico-color);
|
||||||
|
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
||||||
|
--pico-card-background-color: var(--pico-background-color);
|
||||||
|
--pico-card-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-card-sectionning-background-color: #fbfbfc;
|
||||||
|
--pico-dropdown-background-color: #fbfbfc;
|
||||||
|
--pico-dropdown-border-color: #e1e6eb;
|
||||||
|
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-dropdown-color: var(--pico-color);
|
||||||
|
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-loading-spinner-opacity: 0.5;
|
||||||
|
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
|
||||||
|
--pico-progress-background-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-progress-color: var(--pico-primary);
|
||||||
|
--pico-tooltip-background-color: var(--pico-contrast);
|
||||||
|
--pico-tooltip-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(65, 84, 98)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-search: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(115, 130, 140)' 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");
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme=light]) {
|
||||||
|
--pico-background-color: #11191f;
|
||||||
|
--pico-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-muted-color: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-muted-border-color: #1f2d38;
|
||||||
|
--pico-primary: hsl(195deg, 85%, 41%);
|
||||||
|
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
||||||
|
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
|
--pico-primary-inverse: #fff;
|
||||||
|
--pico-secondary: hsl(205deg, 15%, 41%);
|
||||||
|
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-secondary-inverse: #fff;
|
||||||
|
--pico-contrast: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-contrast-hover: #fff;
|
||||||
|
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-contrast-inverse: #000;
|
||||||
|
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
||||||
|
--pico-h1-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-h2-color: #e1e6eb;
|
||||||
|
--pico-h3-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-h4-color: #c8d1d8;
|
||||||
|
--pico-h5-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-h6-color: #afbbc4;
|
||||||
|
--pico-mark-background-color: #d1c284;
|
||||||
|
--pico-mark-color: #11191f;
|
||||||
|
--pico-ins-color: #388e3c;
|
||||||
|
--pico-del-color: #c62828;
|
||||||
|
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-blockquote-footer-color: var(--pico-muted-color);
|
||||||
|
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-table-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
|
--pico-code-background-color: #18232c;
|
||||||
|
--pico-code-color: var(--pico-muted-color);
|
||||||
|
--pico-code-kbd-background-color: var(--pico-contrast);
|
||||||
|
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
||||||
|
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
||||||
|
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
||||||
|
--pico-code-comment-color: #4d606d;
|
||||||
|
--pico-form-element-background-color: #11191f;
|
||||||
|
--pico-form-element-border-color: #374956;
|
||||||
|
--pico-form-element-color: var(--pico-color);
|
||||||
|
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
||||||
|
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
||||||
|
--pico-form-element-active-border-color: var(--pico-primary);
|
||||||
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||||
|
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-form-element-disabled-opacity: 0.5;
|
||||||
|
--pico-form-element-invalid-border-color: #b71c1c;
|
||||||
|
--pico-form-element-invalid-active-border-color: #c62828;
|
||||||
|
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||||||
|
--pico-form-element-valid-border-color: #2e7d32;
|
||||||
|
--pico-form-element-valid-active-border-color: #388e3c;
|
||||||
|
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||||||
|
--pico-switch-background-color: #374956;
|
||||||
|
--pico-switch-color: var(--pico-primary-inverse);
|
||||||
|
--pico-switch-checked-background-color: var(--pico-primary);
|
||||||
|
--pico-range-border-color: #24333e;
|
||||||
|
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
--pico-range-thumb-color: var(--pico-secondary);
|
||||||
|
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
||||||
|
--pico-range-thumb-active-color: var(--pico-primary);
|
||||||
|
--pico-accordion-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-accordion-active-summary-color: var(--pico-primary);
|
||||||
|
--pico-accordion-close-summary-color: var(--pico-color);
|
||||||
|
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
||||||
|
--pico-card-background-color: #141e26;
|
||||||
|
--pico-card-border-color: var(--pico-card-background-color);
|
||||||
|
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-card-sectionning-background-color: #18232c;
|
||||||
|
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-dropdown-border-color: #24333e;
|
||||||
|
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-dropdown-color: var(--pico-color);
|
||||||
|
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
||||||
|
--pico-loading-spinner-opacity: 0.5;
|
||||||
|
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
||||||
|
--pico-progress-background-color: #24333e;
|
||||||
|
--pico-progress-color: var(--pico-primary);
|
||||||
|
--pico-tooltip-background-color: var(--pico-contrast);
|
||||||
|
--pico-tooltip-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(162, 175, 185)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-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='rgb(0, 0, 0)' 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");
|
||||||
|
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(115, 130, 140)' 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");
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[data-theme=dark] {
|
||||||
|
--pico-background-color: #11191f;
|
||||||
|
--pico-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-muted-color: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-muted-border-color: #1f2d38;
|
||||||
|
--pico-primary: hsl(195deg, 85%, 41%);
|
||||||
|
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
||||||
|
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
|
--pico-primary-inverse: #fff;
|
||||||
|
--pico-secondary: hsl(205deg, 15%, 41%);
|
||||||
|
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-secondary-inverse: #fff;
|
||||||
|
--pico-contrast: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-contrast-hover: #fff;
|
||||||
|
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-contrast-inverse: #000;
|
||||||
|
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
||||||
|
--pico-h1-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-h2-color: #e1e6eb;
|
||||||
|
--pico-h3-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-h4-color: #c8d1d8;
|
||||||
|
--pico-h5-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-h6-color: #afbbc4;
|
||||||
|
--pico-mark-background-color: #d1c284;
|
||||||
|
--pico-mark-color: #11191f;
|
||||||
|
--pico-ins-color: #388e3c;
|
||||||
|
--pico-del-color: #c62828;
|
||||||
|
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-blockquote-footer-color: var(--pico-muted-color);
|
||||||
|
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-table-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
|
--pico-code-background-color: #18232c;
|
||||||
|
--pico-code-color: var(--pico-muted-color);
|
||||||
|
--pico-code-kbd-background-color: var(--pico-contrast);
|
||||||
|
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
||||||
|
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
||||||
|
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
||||||
|
--pico-code-comment-color: #4d606d;
|
||||||
|
--pico-form-element-background-color: #11191f;
|
||||||
|
--pico-form-element-border-color: #374956;
|
||||||
|
--pico-form-element-color: var(--pico-color);
|
||||||
|
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
||||||
|
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
||||||
|
--pico-form-element-active-border-color: var(--pico-primary);
|
||||||
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||||
|
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-form-element-disabled-opacity: 0.5;
|
||||||
|
--pico-form-element-invalid-border-color: #b71c1c;
|
||||||
|
--pico-form-element-invalid-active-border-color: #c62828;
|
||||||
|
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||||||
|
--pico-form-element-valid-border-color: #2e7d32;
|
||||||
|
--pico-form-element-valid-active-border-color: #388e3c;
|
||||||
|
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||||||
|
--pico-switch-background-color: #374956;
|
||||||
|
--pico-switch-color: var(--pico-primary-inverse);
|
||||||
|
--pico-switch-checked-background-color: var(--pico-primary);
|
||||||
|
--pico-range-border-color: #24333e;
|
||||||
|
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
--pico-range-thumb-color: var(--pico-secondary);
|
||||||
|
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
||||||
|
--pico-range-thumb-active-color: var(--pico-primary);
|
||||||
|
--pico-accordion-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-accordion-active-summary-color: var(--pico-primary);
|
||||||
|
--pico-accordion-close-summary-color: var(--pico-color);
|
||||||
|
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
||||||
|
--pico-card-background-color: #141e26;
|
||||||
|
--pico-card-border-color: var(--pico-card-background-color);
|
||||||
|
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-card-sectionning-background-color: #18232c;
|
||||||
|
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-dropdown-border-color: #24333e;
|
||||||
|
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-dropdown-color: var(--pico-color);
|
||||||
|
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
||||||
|
--pico-loading-spinner-opacity: 0.5;
|
||||||
|
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
||||||
|
--pico-progress-background-color: #24333e;
|
||||||
|
--pico-progress-color: var(--pico-primary);
|
||||||
|
--pico-tooltip-background-color: var(--pico-contrast);
|
||||||
|
--pico-tooltip-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(162, 175, 185)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-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='rgb(0, 0, 0)' 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");
|
||||||
|
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(115, 130, 140)' 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");
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress,
|
||||||
|
[type=checkbox],
|
||||||
|
[type=radio],
|
||||||
|
[type=range] {
|
||||||
|
accent-color: var(--pico-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Styles
|
||||||
|
*/
|
||||||
:root {
|
:root {
|
||||||
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
--pico-line-height: 1.5;
|
--pico-line-height: 1.5;
|
||||||
|
|
@ -11,19 +314,18 @@
|
||||||
--pico-border-radius: 0.25rem;
|
--pico-border-radius: 0.25rem;
|
||||||
--pico-border-width: 1px;
|
--pico-border-width: 1px;
|
||||||
--pico-outline-width: 3px;
|
--pico-outline-width: 3px;
|
||||||
|
--pico-transition: 0.2s ease-in-out;
|
||||||
--pico-spacing: 1rem;
|
--pico-spacing: 1rem;
|
||||||
--pico-typography-spacing-vertical: 1.5rem;
|
--pico-typography-spacing-vertical: 1.5rem;
|
||||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
|
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
|
||||||
--pico-block-spacing-horizontal: var(--pico-spacing);
|
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||||
--pico-form-element-spacing-vertical: 0.75rem;
|
--pico-form-element-spacing-vertical: 0.75rem;
|
||||||
--pico-form-element-spacing-horizontal: 1rem;
|
--pico-form-element-spacing-horizontal: 1rem;
|
||||||
|
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
|
||||||
--pico-nav-element-spacing-vertical: 1rem;
|
--pico-nav-element-spacing-vertical: 1rem;
|
||||||
--pico-nav-element-spacing-horizontal: 0.5rem;
|
--pico-nav-element-spacing-horizontal: 0.5rem;
|
||||||
--pico-nav-link-spacing-vertical: 0.5rem;
|
--pico-nav-link-spacing-vertical: 0.5rem;
|
||||||
--pico-nav-link-spacing-horizontal: 0.5rem;
|
--pico-nav-link-spacing-horizontal: 0.5rem;
|
||||||
--pico-form-label-font-weight: var(--pico-font-weight);
|
|
||||||
--pico-transition: 0.2s ease-in-out;
|
|
||||||
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
|
|
||||||
}
|
}
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -162,15 +464,6 @@ h5 {
|
||||||
--pico-typography-spacing-vertical: 1.6875rem;
|
--pico-typography-spacing-vertical: 1.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio] {
|
|
||||||
--pico-border-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=checkbox][role=switch] {
|
|
||||||
--pico-border-width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th,
|
thead th,
|
||||||
thead td,
|
thead td,
|
||||||
tfoot th,
|
tfoot th,
|
||||||
|
|
@ -193,309 +486,13 @@ kbd {
|
||||||
--pico-font-weight: bolder;
|
--pico-font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme=light],
|
|
||||||
:root:not([data-theme=dark]) {
|
|
||||||
--pico-background-color: #fff;
|
|
||||||
--pico-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-h1-color: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-h2-color: #24333e;
|
|
||||||
--pico-h3-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-h4-color: #374956;
|
|
||||||
--pico-h5-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-h6-color: #4d606d;
|
|
||||||
--pico-muted-color: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-muted-border-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-primary: hsl(195deg, 85%, 41%);
|
|
||||||
--pico-primary-hover: hsl(195deg, 90%, 32%);
|
|
||||||
--pico-primary-focus: rgba(16, 149, 193, 0.125);
|
|
||||||
--pico-primary-inverse: #fff;
|
|
||||||
--pico-secondary: hsl(205deg, 15%, 41%);
|
|
||||||
--pico-secondary-hover: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
|
|
||||||
--pico-secondary-inverse: #fff;
|
|
||||||
--pico-contrast: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-contrast-hover: #000;
|
|
||||||
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
|
|
||||||
--pico-contrast-inverse: #fff;
|
|
||||||
--pico-mark-background-color: #fff2ca;
|
|
||||||
--pico-mark-color: #543a26;
|
|
||||||
--pico-ins-color: #388e3c;
|
|
||||||
--pico-del-color: #c62828;
|
|
||||||
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-blockquote-footer-color: var(--pico-muted-color);
|
|
||||||
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-form-element-background-color: transparent;
|
|
||||||
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
|
|
||||||
--pico-form-element-color: var(--pico-color);
|
|
||||||
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
|
||||||
--pico-form-element-active-background-color: transparent;
|
|
||||||
--pico-form-element-active-border-color: var(--pico-primary);
|
|
||||||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
||||||
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
|
|
||||||
--pico-form-element-disabled-opacity: 0.5;
|
|
||||||
--pico-form-element-invalid-border-color: #c62828;
|
|
||||||
--pico-form-element-invalid-active-border-color: #d32f2f;
|
|
||||||
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
|
|
||||||
--pico-form-element-valid-border-color: #388e3c;
|
|
||||||
--pico-form-element-valid-active-border-color: #43a047;
|
|
||||||
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
|
|
||||||
--pico-switch-background-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-switch-color: var(--pico-primary-inverse);
|
|
||||||
--pico-switch-checked-background-color: var(--pico-primary);
|
|
||||||
--pico-range-border-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
|
||||||
--pico-range-thumb-color: var(--pico-secondary);
|
|
||||||
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
|
||||||
--pico-range-thumb-active-color: var(--pico-primary);
|
|
||||||
--pico-table-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-table-row-stripped-background-color: #f6f8f9;
|
|
||||||
--pico-code-background-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-code-color: var(--pico-muted-color);
|
|
||||||
--pico-code-kbd-background-color: var(--pico-contrast);
|
|
||||||
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-code-tag-color: hsl(330deg, 40%, 50%);
|
|
||||||
--pico-code-property-color: hsl(185deg, 40%, 40%);
|
|
||||||
--pico-code-value-color: hsl(40deg, 20%, 50%);
|
|
||||||
--pico-code-comment-color: hsl(205deg, 14%, 68%);
|
|
||||||
--pico-accordion-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-accordion-close-summary-color: var(--pico-color);
|
|
||||||
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
|
||||||
--pico-card-background-color: var(--pico-background-color);
|
|
||||||
--pico-card-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
|
|
||||||
--pico-card-sectionning-background-color: #fbfbfc;
|
|
||||||
--pico-dropdown-background-color: #fbfbfc;
|
|
||||||
--pico-dropdown-border-color: #e1e6eb;
|
|
||||||
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
|
|
||||||
--pico-dropdown-color: var(--pico-color);
|
|
||||||
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
|
|
||||||
--pico-progress-background-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-progress-color: var(--pico-primary);
|
|
||||||
--pico-loading-spinner-opacity: 0.5;
|
|
||||||
--pico-tooltip-background-color: var(--pico-contrast);
|
|
||||||
--pico-tooltip-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(65, 84, 98)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(115, 130, 140)' 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");
|
|
||||||
--pico-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='rgb(65, 84, 98)' 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");
|
|
||||||
--pico-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='rgb(198, 40, 40)' 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");
|
|
||||||
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-search: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-time: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
--pico-icon-valid: 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='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
color-scheme: light;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
|
||||||
:root:not([data-theme=light]) {
|
|
||||||
--pico-background-color: #11191f;
|
|
||||||
--pico-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h1-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-h2-color: #e1e6eb;
|
|
||||||
--pico-h3-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-h4-color: #c8d1d8;
|
|
||||||
--pico-h5-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h6-color: #afbbc4;
|
|
||||||
--pico-muted-color: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-muted-border-color: #1f2d38;
|
|
||||||
--pico-primary: hsl(195deg, 85%, 41%);
|
|
||||||
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
|
||||||
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
|
||||||
--pico-primary-inverse: #fff;
|
|
||||||
--pico-secondary: hsl(205deg, 15%, 41%);
|
|
||||||
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-secondary-inverse: #fff;
|
|
||||||
--pico-contrast: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-contrast-hover: #fff;
|
|
||||||
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-contrast-inverse: #000;
|
|
||||||
--pico-mark-background-color: #d1c284;
|
|
||||||
--pico-mark-color: #11191f;
|
|
||||||
--pico-ins-color: #388e3c;
|
|
||||||
--pico-del-color: #c62828;
|
|
||||||
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-blockquote-footer-color: var(--pico-muted-color);
|
|
||||||
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-form-element-background-color: #11191f;
|
|
||||||
--pico-form-element-border-color: #374956;
|
|
||||||
--pico-form-element-color: var(--pico-color);
|
|
||||||
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
|
||||||
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
|
||||||
--pico-form-element-active-border-color: var(--pico-primary);
|
|
||||||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
||||||
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-form-element-disabled-opacity: 0.5;
|
|
||||||
--pico-form-element-invalid-border-color: #b71c1c;
|
|
||||||
--pico-form-element-invalid-active-border-color: #c62828;
|
|
||||||
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
|
||||||
--pico-form-element-valid-border-color: #2e7d32;
|
|
||||||
--pico-form-element-valid-active-border-color: #388e3c;
|
|
||||||
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
|
||||||
--pico-switch-background-color: #374956;
|
|
||||||
--pico-switch-color: var(--pico-primary-inverse);
|
|
||||||
--pico-switch-checked-background-color: var(--pico-primary);
|
|
||||||
--pico-range-border-color: #24333e;
|
|
||||||
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
|
||||||
--pico-range-thumb-color: var(--pico-secondary);
|
|
||||||
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
|
||||||
--pico-range-thumb-active-color: var(--pico-primary);
|
|
||||||
--pico-table-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
|
||||||
--pico-code-background-color: #18232c;
|
|
||||||
--pico-code-color: var(--pico-muted-color);
|
|
||||||
--pico-code-kbd-background-color: var(--pico-contrast);
|
|
||||||
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
|
||||||
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
|
||||||
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
|
||||||
--pico-code-comment-color: #4d606d;
|
|
||||||
--pico-accordion-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-accordion-active-summary-color: var(--pico-primary);
|
|
||||||
--pico-accordion-close-summary-color: var(--pico-color);
|
|
||||||
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
|
||||||
--pico-card-background-color: #141e26;
|
|
||||||
--pico-card-border-color: var(--pico-card-background-color);
|
|
||||||
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
|
||||||
--pico-card-sectionning-background-color: #18232c;
|
|
||||||
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-dropdown-border-color: #24333e;
|
|
||||||
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
|
|
||||||
--pico-dropdown-color: var(--pico-color);
|
|
||||||
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
|
||||||
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
|
||||||
--pico-progress-background-color: #24333e;
|
|
||||||
--pico-progress-color: var(--pico-primary);
|
|
||||||
--pico-loading-spinner-opacity: 0.5;
|
|
||||||
--pico-tooltip-background-color: var(--pico-contrast);
|
|
||||||
--pico-tooltip-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(0, 0, 0)' 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");
|
|
||||||
--pico-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='rgb(115, 130, 140)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(183, 28, 28)' 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");
|
|
||||||
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-time: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
--pico-icon-valid: 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='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
[data-theme=dark] {
|
|
||||||
--pico-background-color: #11191f;
|
|
||||||
--pico-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h1-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-h2-color: #e1e6eb;
|
|
||||||
--pico-h3-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-h4-color: #c8d1d8;
|
|
||||||
--pico-h5-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h6-color: #afbbc4;
|
|
||||||
--pico-muted-color: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-muted-border-color: #1f2d38;
|
|
||||||
--pico-primary: hsl(195deg, 85%, 41%);
|
|
||||||
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
|
||||||
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
|
||||||
--pico-primary-inverse: #fff;
|
|
||||||
--pico-secondary: hsl(205deg, 15%, 41%);
|
|
||||||
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-secondary-inverse: #fff;
|
|
||||||
--pico-contrast: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-contrast-hover: #fff;
|
|
||||||
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-contrast-inverse: #000;
|
|
||||||
--pico-mark-background-color: #d1c284;
|
|
||||||
--pico-mark-color: #11191f;
|
|
||||||
--pico-ins-color: #388e3c;
|
|
||||||
--pico-del-color: #c62828;
|
|
||||||
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-blockquote-footer-color: var(--pico-muted-color);
|
|
||||||
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-form-element-background-color: #11191f;
|
|
||||||
--pico-form-element-border-color: #374956;
|
|
||||||
--pico-form-element-color: var(--pico-color);
|
|
||||||
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
|
||||||
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
|
||||||
--pico-form-element-active-border-color: var(--pico-primary);
|
|
||||||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
||||||
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-form-element-disabled-opacity: 0.5;
|
|
||||||
--pico-form-element-invalid-border-color: #b71c1c;
|
|
||||||
--pico-form-element-invalid-active-border-color: #c62828;
|
|
||||||
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
|
||||||
--pico-form-element-valid-border-color: #2e7d32;
|
|
||||||
--pico-form-element-valid-active-border-color: #388e3c;
|
|
||||||
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
|
||||||
--pico-switch-background-color: #374956;
|
|
||||||
--pico-switch-color: var(--pico-primary-inverse);
|
|
||||||
--pico-switch-checked-background-color: var(--pico-primary);
|
|
||||||
--pico-range-border-color: #24333e;
|
|
||||||
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
|
||||||
--pico-range-thumb-color: var(--pico-secondary);
|
|
||||||
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
|
||||||
--pico-range-thumb-active-color: var(--pico-primary);
|
|
||||||
--pico-table-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
|
||||||
--pico-code-background-color: #18232c;
|
|
||||||
--pico-code-color: var(--pico-muted-color);
|
|
||||||
--pico-code-kbd-background-color: var(--pico-contrast);
|
|
||||||
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
|
||||||
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
|
||||||
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
|
||||||
--pico-code-comment-color: #4d606d;
|
|
||||||
--pico-accordion-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-accordion-active-summary-color: var(--pico-primary);
|
|
||||||
--pico-accordion-close-summary-color: var(--pico-color);
|
|
||||||
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
|
||||||
--pico-card-background-color: #141e26;
|
|
||||||
--pico-card-border-color: var(--pico-card-background-color);
|
|
||||||
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
|
||||||
--pico-card-sectionning-background-color: #18232c;
|
|
||||||
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-dropdown-border-color: #24333e;
|
|
||||||
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
|
|
||||||
--pico-dropdown-color: var(--pico-color);
|
|
||||||
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
|
||||||
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
|
||||||
--pico-progress-background-color: #24333e;
|
|
||||||
--pico-progress-color: var(--pico-primary);
|
|
||||||
--pico-loading-spinner-opacity: 0.5;
|
|
||||||
--pico-tooltip-background-color: var(--pico-contrast);
|
|
||||||
--pico-tooltip-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(0, 0, 0)' 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");
|
|
||||||
--pico-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='rgb(115, 130, 140)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(183, 28, 28)' 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");
|
|
||||||
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-time: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
--pico-icon-valid: 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='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress,
|
|
||||||
[type=checkbox],
|
[type=checkbox],
|
||||||
[type=radio],
|
[type=radio] {
|
||||||
[type=range] {
|
--pico-border-width: 2px;
|
||||||
accent-color: var(--pico-primary);
|
}
|
||||||
|
|
||||||
|
[type=checkbox][role=switch] {
|
||||||
|
--pico-border-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -535,17 +532,17 @@ progress,
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sectioning
|
* Landmarks
|
||||||
* Container and responsive spacings for header, main, footer
|
|
||||||
*/
|
*/
|
||||||
main {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer {
|
body > footer {
|
||||||
|
|
@ -587,7 +584,6 @@ body > footer {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Section
|
* Section
|
||||||
* Responsive spacings for section
|
|
||||||
*/
|
*/
|
||||||
section {
|
section {
|
||||||
margin-bottom: var(--pico-block-spacing-vertical);
|
margin-bottom: var(--pico-block-spacing-vertical);
|
||||||
|
|
@ -607,6 +603,32 @@ figure figcaption {
|
||||||
color: var(--pico-muted-color);
|
color: var(--pico-muted-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Link
|
||||||
|
*/
|
||||||
|
a,
|
||||||
|
[role=link] {
|
||||||
|
--pico-color: var(--pico-primary);
|
||||||
|
--pico-background-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--pico-background-color);
|
||||||
|
color: var(--pico-color);
|
||||||
|
-webkit-text-decoration: var(--pico-text-decoration);
|
||||||
|
text-decoration: var(--pico-text-decoration);
|
||||||
|
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
||||||
|
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
|
||||||
|
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
||||||
|
}
|
||||||
|
a:is([aria-current], :hover, :active, :focus),
|
||||||
|
[role=link]:is([aria-current], :hover, :active, :focus) {
|
||||||
|
--pico-color: var(--pico-primary-hover);
|
||||||
|
--pico-text-decoration: underline;
|
||||||
|
}
|
||||||
|
a:focus,
|
||||||
|
[role=link]:focus {
|
||||||
|
--pico-background-color: var(--pico-primary-focus);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Typography
|
* Typography
|
||||||
*/
|
*/
|
||||||
|
|
@ -649,29 +671,6 @@ ul {
|
||||||
font-size: var(--pico-font-size);
|
font-size: var(--pico-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
|
||||||
[role=link] {
|
|
||||||
--pico-color: var(--pico-primary);
|
|
||||||
--pico-background-color: transparent;
|
|
||||||
outline: none;
|
|
||||||
background-color: var(--pico-background-color);
|
|
||||||
color: var(--pico-color);
|
|
||||||
-webkit-text-decoration: var(--pico-text-decoration);
|
|
||||||
text-decoration: var(--pico-text-decoration);
|
|
||||||
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
|
||||||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
|
|
||||||
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
|
|
||||||
}
|
|
||||||
a:is([aria-current], :hover, :active, :focus),
|
|
||||||
[role=link]:is([aria-current], :hover, :active, :focus) {
|
|
||||||
--pico-color: var(--pico-primary-hover);
|
|
||||||
--pico-text-decoration: underline;
|
|
||||||
}
|
|
||||||
a:focus,
|
|
||||||
[role=link]:focus {
|
|
||||||
--pico-background-color: var(--pico-primary-focus);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
|
|
@ -1800,7 +1799,7 @@ li[role=list] > ul {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
background-color: var(--pico-dropdown-background-color);
|
background-color: var(--pico-dropdown-background-color);
|
||||||
box-shadow: var(--pico-card-box-shadow);
|
box-shadow: var(--pico-dropdown-box-shadow);
|
||||||
color: var(--pico-dropdown-color);
|
color: var(--pico-dropdown-color);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
@ -2457,8 +2456,8 @@ textarea,
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reduce Motion Features
|
* Reduce Motion Features
|
||||||
*/
|
*/
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
*:not([aria-busy=true]),
|
*:not([aria-busy=true]),
|
||||||
:not([aria-busy=true])::before,
|
:not([aria-busy=true])::before,
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
744
css/pico.css
744
css/pico.css
|
|
@ -3,6 +3,309 @@
|
||||||
* Pico ✨ v2.0.0-alpha1 (https://picocss.com)
|
* Pico ✨ v2.0.0-alpha1 (https://picocss.com)
|
||||||
* Copyright 2019-2022 - Licensed under MIT
|
* Copyright 2019-2022 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
/**
|
||||||
|
* Color schemes
|
||||||
|
*/
|
||||||
|
[data-theme=light],
|
||||||
|
:root:not([data-theme=dark]) {
|
||||||
|
--pico-background-color: #fff;
|
||||||
|
--pico-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-muted-color: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-muted-border-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-primary: hsl(195deg, 85%, 41%);
|
||||||
|
--pico-primary-hover: hsl(195deg, 90%, 32%);
|
||||||
|
--pico-primary-focus: rgba(16, 149, 193, 0.125);
|
||||||
|
--pico-primary-inverse: #fff;
|
||||||
|
--pico-secondary: hsl(205deg, 15%, 41%);
|
||||||
|
--pico-secondary-hover: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
|
||||||
|
--pico-secondary-inverse: #fff;
|
||||||
|
--pico-contrast: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-contrast-hover: #000;
|
||||||
|
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
|
||||||
|
--pico-contrast-inverse: #fff;
|
||||||
|
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
|
||||||
|
--pico-h1-color: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-h2-color: #24333e;
|
||||||
|
--pico-h3-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-h4-color: #374956;
|
||||||
|
--pico-h5-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-h6-color: #4d606d;
|
||||||
|
--pico-mark-background-color: #fff2ca;
|
||||||
|
--pico-mark-color: #543a26;
|
||||||
|
--pico-ins-color: #388e3c;
|
||||||
|
--pico-del-color: #c62828;
|
||||||
|
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-blockquote-footer-color: var(--pico-muted-color);
|
||||||
|
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-table-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-table-row-stripped-background-color: #f6f8f9;
|
||||||
|
--pico-code-background-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-code-color: var(--pico-muted-color);
|
||||||
|
--pico-code-kbd-background-color: var(--pico-contrast);
|
||||||
|
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-code-tag-color: hsl(330deg, 40%, 50%);
|
||||||
|
--pico-code-property-color: hsl(185deg, 40%, 40%);
|
||||||
|
--pico-code-value-color: hsl(40deg, 20%, 50%);
|
||||||
|
--pico-code-comment-color: hsl(205deg, 14%, 68%);
|
||||||
|
--pico-form-element-background-color: transparent;
|
||||||
|
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
|
||||||
|
--pico-form-element-color: var(--pico-color);
|
||||||
|
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
||||||
|
--pico-form-element-active-background-color: transparent;
|
||||||
|
--pico-form-element-active-border-color: var(--pico-primary);
|
||||||
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||||
|
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
|
||||||
|
--pico-form-element-disabled-opacity: 0.5;
|
||||||
|
--pico-form-element-invalid-border-color: #c62828;
|
||||||
|
--pico-form-element-invalid-active-border-color: #d32f2f;
|
||||||
|
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
|
||||||
|
--pico-form-element-valid-border-color: #388e3c;
|
||||||
|
--pico-form-element-valid-active-border-color: #43a047;
|
||||||
|
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
|
||||||
|
--pico-switch-background-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-switch-color: var(--pico-primary-inverse);
|
||||||
|
--pico-switch-checked-background-color: var(--pico-primary);
|
||||||
|
--pico-range-border-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
--pico-range-thumb-color: var(--pico-secondary);
|
||||||
|
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
||||||
|
--pico-range-thumb-active-color: var(--pico-primary);
|
||||||
|
--pico-accordion-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-accordion-active-summary-color: var(--pico-primary);
|
||||||
|
--pico-accordion-close-summary-color: var(--pico-color);
|
||||||
|
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
||||||
|
--pico-card-background-color: var(--pico-background-color);
|
||||||
|
--pico-card-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-card-sectionning-background-color: #fbfbfc;
|
||||||
|
--pico-dropdown-background-color: #fbfbfc;
|
||||||
|
--pico-dropdown-border-color: #e1e6eb;
|
||||||
|
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-dropdown-color: var(--pico-color);
|
||||||
|
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-loading-spinner-opacity: 0.5;
|
||||||
|
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
|
||||||
|
--pico-progress-background-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-progress-color: var(--pico-primary);
|
||||||
|
--pico-tooltip-background-color: var(--pico-contrast);
|
||||||
|
--pico-tooltip-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(65, 84, 98)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-search: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(115, 130, 140)' 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");
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme=light]) {
|
||||||
|
--pico-background-color: #11191f;
|
||||||
|
--pico-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-muted-color: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-muted-border-color: #1f2d38;
|
||||||
|
--pico-primary: hsl(195deg, 85%, 41%);
|
||||||
|
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
||||||
|
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
|
--pico-primary-inverse: #fff;
|
||||||
|
--pico-secondary: hsl(205deg, 15%, 41%);
|
||||||
|
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-secondary-inverse: #fff;
|
||||||
|
--pico-contrast: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-contrast-hover: #fff;
|
||||||
|
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-contrast-inverse: #000;
|
||||||
|
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
||||||
|
--pico-h1-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-h2-color: #e1e6eb;
|
||||||
|
--pico-h3-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-h4-color: #c8d1d8;
|
||||||
|
--pico-h5-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-h6-color: #afbbc4;
|
||||||
|
--pico-mark-background-color: #d1c284;
|
||||||
|
--pico-mark-color: #11191f;
|
||||||
|
--pico-ins-color: #388e3c;
|
||||||
|
--pico-del-color: #c62828;
|
||||||
|
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-blockquote-footer-color: var(--pico-muted-color);
|
||||||
|
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-table-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
|
--pico-code-background-color: #18232c;
|
||||||
|
--pico-code-color: var(--pico-muted-color);
|
||||||
|
--pico-code-kbd-background-color: var(--pico-contrast);
|
||||||
|
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
||||||
|
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
||||||
|
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
||||||
|
--pico-code-comment-color: #4d606d;
|
||||||
|
--pico-form-element-background-color: #11191f;
|
||||||
|
--pico-form-element-border-color: #374956;
|
||||||
|
--pico-form-element-color: var(--pico-color);
|
||||||
|
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
||||||
|
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
||||||
|
--pico-form-element-active-border-color: var(--pico-primary);
|
||||||
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||||
|
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-form-element-disabled-opacity: 0.5;
|
||||||
|
--pico-form-element-invalid-border-color: #b71c1c;
|
||||||
|
--pico-form-element-invalid-active-border-color: #c62828;
|
||||||
|
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||||||
|
--pico-form-element-valid-border-color: #2e7d32;
|
||||||
|
--pico-form-element-valid-active-border-color: #388e3c;
|
||||||
|
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||||||
|
--pico-switch-background-color: #374956;
|
||||||
|
--pico-switch-color: var(--pico-primary-inverse);
|
||||||
|
--pico-switch-checked-background-color: var(--pico-primary);
|
||||||
|
--pico-range-border-color: #24333e;
|
||||||
|
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
--pico-range-thumb-color: var(--pico-secondary);
|
||||||
|
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
||||||
|
--pico-range-thumb-active-color: var(--pico-primary);
|
||||||
|
--pico-accordion-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-accordion-active-summary-color: var(--pico-primary);
|
||||||
|
--pico-accordion-close-summary-color: var(--pico-color);
|
||||||
|
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
||||||
|
--pico-card-background-color: #141e26;
|
||||||
|
--pico-card-border-color: var(--pico-card-background-color);
|
||||||
|
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-card-sectionning-background-color: #18232c;
|
||||||
|
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-dropdown-border-color: #24333e;
|
||||||
|
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-dropdown-color: var(--pico-color);
|
||||||
|
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
||||||
|
--pico-loading-spinner-opacity: 0.5;
|
||||||
|
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
||||||
|
--pico-progress-background-color: #24333e;
|
||||||
|
--pico-progress-color: var(--pico-primary);
|
||||||
|
--pico-tooltip-background-color: var(--pico-contrast);
|
||||||
|
--pico-tooltip-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(162, 175, 185)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-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='rgb(0, 0, 0)' 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");
|
||||||
|
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(115, 130, 140)' 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");
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[data-theme=dark] {
|
||||||
|
--pico-background-color: #11191f;
|
||||||
|
--pico-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-muted-color: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-muted-border-color: #1f2d38;
|
||||||
|
--pico-primary: hsl(195deg, 85%, 41%);
|
||||||
|
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
||||||
|
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
|
--pico-primary-inverse: #fff;
|
||||||
|
--pico-secondary: hsl(205deg, 15%, 41%);
|
||||||
|
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
||||||
|
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-secondary-inverse: #fff;
|
||||||
|
--pico-contrast: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-contrast-hover: #fff;
|
||||||
|
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
|
--pico-contrast-inverse: #000;
|
||||||
|
--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
||||||
|
--pico-h1-color: hsl(205deg, 20%, 94%);
|
||||||
|
--pico-h2-color: #e1e6eb;
|
||||||
|
--pico-h3-color: hsl(205deg, 18%, 86%);
|
||||||
|
--pico-h4-color: #c8d1d8;
|
||||||
|
--pico-h5-color: hsl(205deg, 16%, 77%);
|
||||||
|
--pico-h6-color: #afbbc4;
|
||||||
|
--pico-mark-background-color: #d1c284;
|
||||||
|
--pico-mark-color: #11191f;
|
||||||
|
--pico-ins-color: #388e3c;
|
||||||
|
--pico-del-color: #c62828;
|
||||||
|
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-blockquote-footer-color: var(--pico-muted-color);
|
||||||
|
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--pico-table-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||||
|
--pico-code-background-color: #18232c;
|
||||||
|
--pico-code-color: var(--pico-muted-color);
|
||||||
|
--pico-code-kbd-background-color: var(--pico-contrast);
|
||||||
|
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
||||||
|
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
||||||
|
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
||||||
|
--pico-code-comment-color: #4d606d;
|
||||||
|
--pico-form-element-background-color: #11191f;
|
||||||
|
--pico-form-element-border-color: #374956;
|
||||||
|
--pico-form-element-color: var(--pico-color);
|
||||||
|
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
||||||
|
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
||||||
|
--pico-form-element-active-border-color: var(--pico-primary);
|
||||||
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||||
|
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
||||||
|
--pico-form-element-disabled-opacity: 0.5;
|
||||||
|
--pico-form-element-invalid-border-color: #b71c1c;
|
||||||
|
--pico-form-element-invalid-active-border-color: #c62828;
|
||||||
|
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
||||||
|
--pico-form-element-valid-border-color: #2e7d32;
|
||||||
|
--pico-form-element-valid-active-border-color: #388e3c;
|
||||||
|
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
||||||
|
--pico-switch-background-color: #374956;
|
||||||
|
--pico-switch-color: var(--pico-primary-inverse);
|
||||||
|
--pico-switch-checked-background-color: var(--pico-primary);
|
||||||
|
--pico-range-border-color: #24333e;
|
||||||
|
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
||||||
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
--pico-range-thumb-color: var(--pico-secondary);
|
||||||
|
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
||||||
|
--pico-range-thumb-active-color: var(--pico-primary);
|
||||||
|
--pico-accordion-border-color: var(--pico-muted-border-color);
|
||||||
|
--pico-accordion-active-summary-color: var(--pico-primary);
|
||||||
|
--pico-accordion-close-summary-color: var(--pico-color);
|
||||||
|
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
||||||
|
--pico-card-background-color: #141e26;
|
||||||
|
--pico-card-border-color: var(--pico-card-background-color);
|
||||||
|
--pico-card-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-card-sectionning-background-color: #18232c;
|
||||||
|
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
||||||
|
--pico-dropdown-border-color: #24333e;
|
||||||
|
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
||||||
|
--pico-dropdown-color: var(--pico-color);
|
||||||
|
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
||||||
|
--pico-loading-spinner-opacity: 0.5;
|
||||||
|
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
||||||
|
--pico-progress-background-color: #24333e;
|
||||||
|
--pico-progress-color: var(--pico-primary);
|
||||||
|
--pico-tooltip-background-color: var(--pico-contrast);
|
||||||
|
--pico-tooltip-color: var(--pico-contrast-inverse);
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(162, 175, 185)' 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");
|
||||||
|
--pico-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='rgb(255, 255, 255)' 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");
|
||||||
|
--pico-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='rgb(0, 0, 0)' 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");
|
||||||
|
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--pico-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='rgb(115, 130, 140)' 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");
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress,
|
||||||
|
[type=checkbox],
|
||||||
|
[type=radio],
|
||||||
|
[type=range] {
|
||||||
|
accent-color: var(--pico-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Styles
|
||||||
|
*/
|
||||||
:root {
|
:root {
|
||||||
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
--pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
--pico-line-height: 1.5;
|
--pico-line-height: 1.5;
|
||||||
|
|
@ -11,6 +314,7 @@
|
||||||
--pico-border-radius: 0.25rem;
|
--pico-border-radius: 0.25rem;
|
||||||
--pico-border-width: 1px;
|
--pico-border-width: 1px;
|
||||||
--pico-outline-width: 3px;
|
--pico-outline-width: 3px;
|
||||||
|
--pico-transition: 0.2s ease-in-out;
|
||||||
--pico-spacing: 1rem;
|
--pico-spacing: 1rem;
|
||||||
--pico-typography-spacing-vertical: 1.5rem;
|
--pico-typography-spacing-vertical: 1.5rem;
|
||||||
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
|
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 2);
|
||||||
|
|
@ -19,13 +323,11 @@
|
||||||
--pico-grid-spacing-horizontal: var(--pico-spacing);
|
--pico-grid-spacing-horizontal: var(--pico-spacing);
|
||||||
--pico-form-element-spacing-vertical: 0.75rem;
|
--pico-form-element-spacing-vertical: 0.75rem;
|
||||||
--pico-form-element-spacing-horizontal: 1rem;
|
--pico-form-element-spacing-horizontal: 1rem;
|
||||||
|
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
|
||||||
--pico-nav-element-spacing-vertical: 1rem;
|
--pico-nav-element-spacing-vertical: 1rem;
|
||||||
--pico-nav-element-spacing-horizontal: 0.5rem;
|
--pico-nav-element-spacing-horizontal: 0.5rem;
|
||||||
--pico-nav-link-spacing-vertical: 0.5rem;
|
--pico-nav-link-spacing-vertical: 0.5rem;
|
||||||
--pico-nav-link-spacing-horizontal: 0.5rem;
|
--pico-nav-link-spacing-horizontal: 0.5rem;
|
||||||
--pico-form-label-font-weight: var(--pico-font-weight);
|
|
||||||
--pico-transition: 0.2s ease-in-out;
|
|
||||||
--pico-modal-overlay-backdrop-filter: blur(0.25rem);
|
|
||||||
}
|
}
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -164,15 +466,6 @@ h5 {
|
||||||
--pico-typography-spacing-vertical: 1.6875rem;
|
--pico-typography-spacing-vertical: 1.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio] {
|
|
||||||
--pico-border-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=checkbox][role=switch] {
|
|
||||||
--pico-border-width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th,
|
thead th,
|
||||||
thead td,
|
thead td,
|
||||||
tfoot th,
|
tfoot th,
|
||||||
|
|
@ -195,309 +488,13 @@ kbd {
|
||||||
--pico-font-weight: bolder;
|
--pico-font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme=light],
|
|
||||||
:root:not([data-theme=dark]) {
|
|
||||||
--pico-background-color: #fff;
|
|
||||||
--pico-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-h1-color: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-h2-color: #24333e;
|
|
||||||
--pico-h3-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-h4-color: #374956;
|
|
||||||
--pico-h5-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-h6-color: #4d606d;
|
|
||||||
--pico-muted-color: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-muted-border-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-primary: hsl(195deg, 85%, 41%);
|
|
||||||
--pico-primary-hover: hsl(195deg, 90%, 32%);
|
|
||||||
--pico-primary-focus: rgba(16, 149, 193, 0.125);
|
|
||||||
--pico-primary-inverse: #fff;
|
|
||||||
--pico-secondary: hsl(205deg, 15%, 41%);
|
|
||||||
--pico-secondary-hover: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-secondary-focus: rgba(89, 107, 120, 0.125);
|
|
||||||
--pico-secondary-inverse: #fff;
|
|
||||||
--pico-contrast: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-contrast-hover: #000;
|
|
||||||
--pico-contrast-focus: rgba(89, 107, 120, 0.125);
|
|
||||||
--pico-contrast-inverse: #fff;
|
|
||||||
--pico-mark-background-color: #fff2ca;
|
|
||||||
--pico-mark-color: #543a26;
|
|
||||||
--pico-ins-color: #388e3c;
|
|
||||||
--pico-del-color: #c62828;
|
|
||||||
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-blockquote-footer-color: var(--pico-muted-color);
|
|
||||||
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-form-element-background-color: transparent;
|
|
||||||
--pico-form-element-border-color: hsl(205deg, 14%, 68%);
|
|
||||||
--pico-form-element-color: var(--pico-color);
|
|
||||||
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
|
||||||
--pico-form-element-active-background-color: transparent;
|
|
||||||
--pico-form-element-active-border-color: var(--pico-primary);
|
|
||||||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
||||||
--pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%);
|
|
||||||
--pico-form-element-disabled-opacity: 0.5;
|
|
||||||
--pico-form-element-invalid-border-color: #c62828;
|
|
||||||
--pico-form-element-invalid-active-border-color: #d32f2f;
|
|
||||||
--pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
|
|
||||||
--pico-form-element-valid-border-color: #388e3c;
|
|
||||||
--pico-form-element-valid-active-border-color: #43a047;
|
|
||||||
--pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
|
|
||||||
--pico-switch-background-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-switch-color: var(--pico-primary-inverse);
|
|
||||||
--pico-switch-checked-background-color: var(--pico-primary);
|
|
||||||
--pico-range-border-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-range-active-border-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
|
||||||
--pico-range-thumb-color: var(--pico-secondary);
|
|
||||||
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
|
||||||
--pico-range-thumb-active-color: var(--pico-primary);
|
|
||||||
--pico-table-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-table-row-stripped-background-color: #f6f8f9;
|
|
||||||
--pico-code-background-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-code-color: var(--pico-muted-color);
|
|
||||||
--pico-code-kbd-background-color: var(--pico-contrast);
|
|
||||||
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-code-tag-color: hsl(330deg, 40%, 50%);
|
|
||||||
--pico-code-property-color: hsl(185deg, 40%, 40%);
|
|
||||||
--pico-code-value-color: hsl(40deg, 20%, 50%);
|
|
||||||
--pico-code-comment-color: hsl(205deg, 14%, 68%);
|
|
||||||
--pico-accordion-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-accordion-close-summary-color: var(--pico-color);
|
|
||||||
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
|
||||||
--pico-card-background-color: var(--pico-background-color);
|
|
||||||
--pico-card-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
|
|
||||||
--pico-card-sectionning-background-color: #fbfbfc;
|
|
||||||
--pico-dropdown-background-color: #fbfbfc;
|
|
||||||
--pico-dropdown-border-color: #e1e6eb;
|
|
||||||
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
|
|
||||||
--pico-dropdown-color: var(--pico-color);
|
|
||||||
--pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7);
|
|
||||||
--pico-progress-background-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-progress-color: var(--pico-primary);
|
|
||||||
--pico-loading-spinner-opacity: 0.5;
|
|
||||||
--pico-tooltip-background-color: var(--pico-contrast);
|
|
||||||
--pico-tooltip-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(65, 84, 98)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(115, 130, 140)' 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");
|
|
||||||
--pico-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='rgb(65, 84, 98)' 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");
|
|
||||||
--pico-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='rgb(198, 40, 40)' 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");
|
|
||||||
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-search: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-time: 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='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
--pico-icon-valid: 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='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
color-scheme: light;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
|
||||||
:root:not([data-theme=light]) {
|
|
||||||
--pico-background-color: #11191f;
|
|
||||||
--pico-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h1-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-h2-color: #e1e6eb;
|
|
||||||
--pico-h3-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-h4-color: #c8d1d8;
|
|
||||||
--pico-h5-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h6-color: #afbbc4;
|
|
||||||
--pico-muted-color: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-muted-border-color: #1f2d38;
|
|
||||||
--pico-primary: hsl(195deg, 85%, 41%);
|
|
||||||
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
|
||||||
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
|
||||||
--pico-primary-inverse: #fff;
|
|
||||||
--pico-secondary: hsl(205deg, 15%, 41%);
|
|
||||||
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-secondary-inverse: #fff;
|
|
||||||
--pico-contrast: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-contrast-hover: #fff;
|
|
||||||
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-contrast-inverse: #000;
|
|
||||||
--pico-mark-background-color: #d1c284;
|
|
||||||
--pico-mark-color: #11191f;
|
|
||||||
--pico-ins-color: #388e3c;
|
|
||||||
--pico-del-color: #c62828;
|
|
||||||
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-blockquote-footer-color: var(--pico-muted-color);
|
|
||||||
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-form-element-background-color: #11191f;
|
|
||||||
--pico-form-element-border-color: #374956;
|
|
||||||
--pico-form-element-color: var(--pico-color);
|
|
||||||
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
|
||||||
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
|
||||||
--pico-form-element-active-border-color: var(--pico-primary);
|
|
||||||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
||||||
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-form-element-disabled-opacity: 0.5;
|
|
||||||
--pico-form-element-invalid-border-color: #b71c1c;
|
|
||||||
--pico-form-element-invalid-active-border-color: #c62828;
|
|
||||||
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
|
||||||
--pico-form-element-valid-border-color: #2e7d32;
|
|
||||||
--pico-form-element-valid-active-border-color: #388e3c;
|
|
||||||
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
|
||||||
--pico-switch-background-color: #374956;
|
|
||||||
--pico-switch-color: var(--pico-primary-inverse);
|
|
||||||
--pico-switch-checked-background-color: var(--pico-primary);
|
|
||||||
--pico-range-border-color: #24333e;
|
|
||||||
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
|
||||||
--pico-range-thumb-color: var(--pico-secondary);
|
|
||||||
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
|
||||||
--pico-range-thumb-active-color: var(--pico-primary);
|
|
||||||
--pico-table-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
|
||||||
--pico-code-background-color: #18232c;
|
|
||||||
--pico-code-color: var(--pico-muted-color);
|
|
||||||
--pico-code-kbd-background-color: var(--pico-contrast);
|
|
||||||
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
|
||||||
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
|
||||||
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
|
||||||
--pico-code-comment-color: #4d606d;
|
|
||||||
--pico-accordion-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-accordion-active-summary-color: var(--pico-primary);
|
|
||||||
--pico-accordion-close-summary-color: var(--pico-color);
|
|
||||||
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
|
||||||
--pico-card-background-color: #141e26;
|
|
||||||
--pico-card-border-color: var(--pico-card-background-color);
|
|
||||||
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
|
||||||
--pico-card-sectionning-background-color: #18232c;
|
|
||||||
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-dropdown-border-color: #24333e;
|
|
||||||
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
|
|
||||||
--pico-dropdown-color: var(--pico-color);
|
|
||||||
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
|
||||||
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
|
||||||
--pico-progress-background-color: #24333e;
|
|
||||||
--pico-progress-color: var(--pico-primary);
|
|
||||||
--pico-loading-spinner-opacity: 0.5;
|
|
||||||
--pico-tooltip-background-color: var(--pico-contrast);
|
|
||||||
--pico-tooltip-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(0, 0, 0)' 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");
|
|
||||||
--pico-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='rgb(115, 130, 140)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(183, 28, 28)' 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");
|
|
||||||
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-time: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
--pico-icon-valid: 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='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
[data-theme=dark] {
|
|
||||||
--pico-background-color: #11191f;
|
|
||||||
--pico-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h1-color: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-h2-color: #e1e6eb;
|
|
||||||
--pico-h3-color: hsl(205deg, 18%, 86%);
|
|
||||||
--pico-h4-color: #c8d1d8;
|
|
||||||
--pico-h5-color: hsl(205deg, 16%, 77%);
|
|
||||||
--pico-h6-color: #afbbc4;
|
|
||||||
--pico-muted-color: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-muted-border-color: #1f2d38;
|
|
||||||
--pico-primary: hsl(195deg, 85%, 41%);
|
|
||||||
--pico-primary-hover: hsl(195deg, 80%, 50%);
|
|
||||||
--pico-primary-focus: rgba(16, 149, 193, 0.25);
|
|
||||||
--pico-primary-inverse: #fff;
|
|
||||||
--pico-secondary: hsl(205deg, 15%, 41%);
|
|
||||||
--pico-secondary-hover: hsl(205deg, 10%, 50%);
|
|
||||||
--pico-secondary-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-secondary-inverse: #fff;
|
|
||||||
--pico-contrast: hsl(205deg, 20%, 94%);
|
|
||||||
--pico-contrast-hover: #fff;
|
|
||||||
--pico-contrast-focus: rgba(115, 130, 140, 0.25);
|
|
||||||
--pico-contrast-inverse: #000;
|
|
||||||
--pico-mark-background-color: #d1c284;
|
|
||||||
--pico-mark-color: #11191f;
|
|
||||||
--pico-ins-color: #388e3c;
|
|
||||||
--pico-del-color: #c62828;
|
|
||||||
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-blockquote-footer-color: var(--pico-muted-color);
|
|
||||||
--pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
||||||
--pico-form-element-background-color: #11191f;
|
|
||||||
--pico-form-element-border-color: #374956;
|
|
||||||
--pico-form-element-color: var(--pico-color);
|
|
||||||
--pico-form-element-placeholder-color: var(--pico-muted-color);
|
|
||||||
--pico-form-element-active-background-color: var(--pico-form-element-background-color);
|
|
||||||
--pico-form-element-active-border-color: var(--pico-primary);
|
|
||||||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
||||||
--pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%);
|
|
||||||
--pico-form-element-disabled-opacity: 0.5;
|
|
||||||
--pico-form-element-invalid-border-color: #b71c1c;
|
|
||||||
--pico-form-element-invalid-active-border-color: #c62828;
|
|
||||||
--pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
|
|
||||||
--pico-form-element-valid-border-color: #2e7d32;
|
|
||||||
--pico-form-element-valid-active-border-color: #388e3c;
|
|
||||||
--pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
|
|
||||||
--pico-switch-background-color: #374956;
|
|
||||||
--pico-switch-color: var(--pico-primary-inverse);
|
|
||||||
--pico-switch-checked-background-color: var(--pico-primary);
|
|
||||||
--pico-range-border-color: #24333e;
|
|
||||||
--pico-range-active-border-color: hsl(205deg, 25%, 23%);
|
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
|
||||||
--pico-range-thumb-color: var(--pico-secondary);
|
|
||||||
--pico-range-thumb-hover-color: var(--pico-secondary-hover);
|
|
||||||
--pico-range-thumb-active-color: var(--pico-primary);
|
|
||||||
--pico-table-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
|
||||||
--pico-code-background-color: #18232c;
|
|
||||||
--pico-code-color: var(--pico-muted-color);
|
|
||||||
--pico-code-kbd-background-color: var(--pico-contrast);
|
|
||||||
--pico-code-kbd-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-code-tag-color: hsl(330deg, 30%, 50%);
|
|
||||||
--pico-code-property-color: hsl(185deg, 30%, 50%);
|
|
||||||
--pico-code-value-color: hsl(40deg, 10%, 50%);
|
|
||||||
--pico-code-comment-color: #4d606d;
|
|
||||||
--pico-accordion-border-color: var(--pico-muted-border-color);
|
|
||||||
--pico-accordion-active-summary-color: var(--pico-primary);
|
|
||||||
--pico-accordion-close-summary-color: var(--pico-color);
|
|
||||||
--pico-accordion-open-summary-color: var(--pico-muted-color);
|
|
||||||
--pico-card-background-color: #141e26;
|
|
||||||
--pico-card-border-color: var(--pico-card-background-color);
|
|
||||||
--pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
|
|
||||||
--pico-card-sectionning-background-color: #18232c;
|
|
||||||
--pico-dropdown-background-color: hsl(205deg, 30%, 15%);
|
|
||||||
--pico-dropdown-border-color: #24333e;
|
|
||||||
--pico-dropdown-box-shadow: var(--pico-card-box-shadow);
|
|
||||||
--pico-dropdown-color: var(--pico-color);
|
|
||||||
--pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
|
|
||||||
--pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8);
|
|
||||||
--pico-progress-background-color: #24333e;
|
|
||||||
--pico-progress-color: var(--pico-primary);
|
|
||||||
--pico-loading-spinner-opacity: 0.5;
|
|
||||||
--pico-tooltip-background-color: var(--pico-contrast);
|
|
||||||
--pico-tooltip-color: var(--pico-contrast-inverse);
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(255, 255, 255)' 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");
|
|
||||||
--pico-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='rgb(0, 0, 0)' 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");
|
|
||||||
--pico-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='rgb(115, 130, 140)' 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");
|
|
||||||
--pico-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='rgb(162, 175, 185)' 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");
|
|
||||||
--pico-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='rgb(183, 28, 28)' 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");
|
|
||||||
--pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-search: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
--pico-icon-time: 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='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
--pico-icon-valid: 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='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress,
|
|
||||||
[type=checkbox],
|
[type=checkbox],
|
||||||
[type=radio],
|
[type=radio] {
|
||||||
[type=range] {
|
--pico-border-width: 2px;
|
||||||
accent-color: var(--pico-primary);
|
}
|
||||||
|
|
||||||
|
[type=checkbox][role=switch] {
|
||||||
|
--pico-border-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -537,29 +534,26 @@ progress,
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Sectioning
|
* Landmarks
|
||||||
* Container and responsive spacings for header, main, footer
|
|
||||||
*/
|
*/
|
||||||
main {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer {
|
body > footer {
|
||||||
width: 100%;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
padding: var(--pico-block-spacing-vertical) 0;
|
padding: var(--pico-block-spacing-vertical) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Container
|
* Container
|
||||||
*/
|
*/
|
||||||
.container,
|
.container,
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -594,16 +588,15 @@ body > footer {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Section
|
* Section
|
||||||
* Responsive spacings for section
|
|
||||||
*/
|
*/
|
||||||
section {
|
section {
|
||||||
margin-bottom: var(--pico-block-spacing-vertical);
|
margin-bottom: var(--pico-block-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Grid
|
* Grid
|
||||||
* Minimal grid system with auto-layout columns
|
* Minimal grid system with auto-layout columns
|
||||||
*/
|
*/
|
||||||
.grid {
|
.grid {
|
||||||
grid-column-gap: var(--pico-grid-spacing-horizontal);
|
grid-column-gap: var(--pico-grid-spacing-horizontal);
|
||||||
grid-row-gap: var(--pico-grid-spacing-vertical);
|
grid-row-gap: var(--pico-grid-spacing-vertical);
|
||||||
|
|
@ -635,47 +628,8 @@ figure figcaption {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Typography
|
* Link
|
||||||
*/
|
*/
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
position: relative;
|
|
||||||
font-size: 0.75em;
|
|
||||||
line-height: 0;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
address,
|
|
||||||
blockquote,
|
|
||||||
dl,
|
|
||||||
figure,
|
|
||||||
form,
|
|
||||||
ol,
|
|
||||||
p,
|
|
||||||
pre,
|
|
||||||
table,
|
|
||||||
ul {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: var(--pico-typography-spacing-vertical);
|
|
||||||
color: var(--pico-color);
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: var(--pico-font-weight);
|
|
||||||
font-size: var(--pico-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
a,
|
||||||
[role=link] {
|
[role=link] {
|
||||||
--pico-color: var(--pico-primary);
|
--pico-color: var(--pico-primary);
|
||||||
|
|
@ -723,6 +677,48 @@ a.contrast:focus,
|
||||||
--pico-background-color: var(--pico-contrast-focus);
|
--pico-background-color: var(--pico-contrast-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Typography
|
||||||
|
*/
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.75em;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
address,
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
figure,
|
||||||
|
form,
|
||||||
|
ol,
|
||||||
|
p,
|
||||||
|
pre,
|
||||||
|
table,
|
||||||
|
ul {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--pico-typography-spacing-vertical);
|
||||||
|
color: var(--pico-color);
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: var(--pico-font-weight);
|
||||||
|
font-size: var(--pico-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
|
|
@ -1902,7 +1898,7 @@ li[role=list] > ul {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
background-color: var(--pico-dropdown-background-color);
|
background-color: var(--pico-dropdown-background-color);
|
||||||
box-shadow: var(--pico-card-box-shadow);
|
box-shadow: var(--pico-dropdown-box-shadow);
|
||||||
color: var(--pico-dropdown-color);
|
color: var(--pico-dropdown-color);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
@ -2160,8 +2156,8 @@ dialog article .close {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
margin-top: calc(var(--pico-block-spacing-vertical) * -0.5);
|
margin-top: calc(var(--pico-spacing) * -1);
|
||||||
margin-bottom: var(--pico-typography-spacing-vertical);
|
margin-bottom: var(--pico-spacing);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
background-image: var(--pico-icon-close);
|
background-image: var(--pico-icon-close);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
|
@ -2619,8 +2615,8 @@ textarea,
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reduce Motion Features
|
* Reduce Motion Features
|
||||||
*/
|
*/
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
*:not([aria-busy=true]),
|
*:not([aria-busy=true]),
|
||||||
:not([aria-busy=true])::before,
|
:not([aria-busy=true])::before,
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,21 +1,19 @@
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
|
|
||||||
// Config
|
// Settings
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Prefix for CSS variables
|
// Prefix for CSS variables
|
||||||
$css-var-prefix: "pico-" !default;
|
$css-var-prefix: "pico-" !default;
|
||||||
|
|
||||||
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
|
// Define the root element used to target <header>, <main>, <footer>
|
||||||
|
// with $enable-semantic-container and $enable-responsive-spacings
|
||||||
$semantic-root-element: "body" !default;
|
$semantic-root-element: "body" !default;
|
||||||
|
|
||||||
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
||||||
$enable-semantic-container: false !default;
|
$enable-semantic-container: false !default;
|
||||||
|
|
||||||
// Enable .container and .container-fluid
|
// Enable a centered viewport for <header>, <main>, <footer> inside $semantic-root-element
|
||||||
$enable-class-container: true !default;
|
|
||||||
|
|
||||||
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
|
||||||
// Fluid layout if disabled
|
// Fluid layout if disabled
|
||||||
$enable-viewport: true !default;
|
$enable-viewport: true !default;
|
||||||
|
|
||||||
|
|
@ -31,9 +29,6 @@ $enable-responsive-typography: true !default;
|
||||||
// .classless version if disabled
|
// .classless version if disabled
|
||||||
$enable-classes: true !default;
|
$enable-classes: true !default;
|
||||||
|
|
||||||
// Enable .grid class
|
|
||||||
$enable-grid: true !default;
|
|
||||||
|
|
||||||
// Enable transitions
|
// Enable transitions
|
||||||
$enable-transitions: true !default;
|
$enable-transitions: true !default;
|
||||||
|
|
||||||
|
|
@ -45,32 +40,86 @@ $breakpoints: () !default;
|
||||||
$breakpoints: map.deep-merge(
|
$breakpoints: map.deep-merge(
|
||||||
(
|
(
|
||||||
// Small (landscape phones)
|
// Small (landscape phones)
|
||||||
sm: (
|
sm:
|
||||||
|
(
|
||||||
breakpoint: 576px,
|
breakpoint: 576px,
|
||||||
viewport: 510px,
|
viewport: 510px,
|
||||||
root-font-size: 17px,
|
root-font-size: 17px,
|
||||||
),
|
),
|
||||||
// Medium (tablets)
|
// Medium (tablets)
|
||||||
md: (
|
md:
|
||||||
|
(
|
||||||
breakpoint: 768px,
|
breakpoint: 768px,
|
||||||
viewport: 700px,
|
viewport: 700px,
|
||||||
root-font-size: 18px,
|
root-font-size: 18px,
|
||||||
),
|
),
|
||||||
// Large (desktops)
|
// Large (desktops)
|
||||||
lg: (
|
lg:
|
||||||
|
(
|
||||||
breakpoint: 992px,
|
breakpoint: 992px,
|
||||||
viewport: 920px,
|
viewport: 920px,
|
||||||
root-font-size: 19px,
|
root-font-size: 19px,
|
||||||
),
|
),
|
||||||
// Extra large (large desktops)
|
// Extra large (large desktops)
|
||||||
xl: (
|
xl:
|
||||||
|
(
|
||||||
breakpoint: 1200px,
|
breakpoint: 1200px,
|
||||||
viewport: 1130px,
|
viewport: 1130px,
|
||||||
root-font-size: 20px,
|
root-font-size: 20px,
|
||||||
),
|
)
|
||||||
),
|
),
|
||||||
$breakpoints
|
$breakpoints
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Modules to export
|
||||||
|
$modules: () !default;
|
||||||
|
$modules: map.merge(
|
||||||
|
(
|
||||||
|
// Theme
|
||||||
|
"themes/default": true,
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
"layout/document": true,
|
||||||
|
"layout/landmarks": true,
|
||||||
|
"layout/container": true,
|
||||||
|
"layout/section": true,
|
||||||
|
"layout/grid": true,
|
||||||
|
"layout/scroller": true,
|
||||||
|
|
||||||
|
// Content
|
||||||
|
"content/link": true,
|
||||||
|
"content/typography": true,
|
||||||
|
"content/embedded": true,
|
||||||
|
"content/button": true,
|
||||||
|
"content/table": true,
|
||||||
|
"content/code": true,
|
||||||
|
"content/miscs": true,
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
"forms/basics": true,
|
||||||
|
"forms/checkbox-radio-switch": true,
|
||||||
|
"forms/input-color": true,
|
||||||
|
"forms/input-date": true,
|
||||||
|
"forms/input-file": true,
|
||||||
|
"forms/input-range": true,
|
||||||
|
"forms/input-search": true,
|
||||||
|
|
||||||
|
// Components
|
||||||
|
"components/accordion": true,
|
||||||
|
"components/card": true,
|
||||||
|
"components/dropdown": true,
|
||||||
|
"components/loading": true,
|
||||||
|
"components/modal": true,
|
||||||
|
"components/nav": true,
|
||||||
|
"components/progress": true,
|
||||||
|
"components/tooltip": true,
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
"utilities/accessibility": true,
|
||||||
|
"utilities/reduce-motion": true
|
||||||
|
),
|
||||||
|
$modules
|
||||||
|
);
|
||||||
|
|
||||||
// // Shortcut for CSS vars prefix
|
// // Shortcut for CSS vars prefix
|
||||||
$✨: --#{$css-var-prefix};
|
$✨: --#{$css-var-prefix};
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/accordion") {
|
||||||
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(#{$✨}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
padding-bottom: var(#{$✨}spacing);
|
padding-bottom: var(#{$✨}spacing);
|
||||||
|
|
@ -102,9 +104,9 @@ details {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
details {
|
details {
|
||||||
summary {
|
summary {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
@ -115,4 +117,5 @@ details {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/card") {
|
||||||
|
/**
|
||||||
* Card (<article>)
|
* Card (<article>)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
article {
|
article {
|
||||||
margin: var(#{$✨}block-spacing-vertical) 0;
|
margin: var(#{$✨}block-spacing-vertical) 0;
|
||||||
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
||||||
border-radius: var(#{$✨}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
|
|
@ -34,4 +36,5 @@ article {
|
||||||
border-bottom-right-radius: var(#{$✨}border-radius);
|
border-bottom-right-radius: var(#{$✨}border-radius);
|
||||||
border-bottom-left-radius: var(#{$✨}border-radius);
|
border-bottom-left-radius: var(#{$✨}border-radius);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,19 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/dropdown") {
|
||||||
|
/**
|
||||||
* Dropdown ([role="list"])
|
* Dropdown ([role="list"])
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Menu
|
// Menu
|
||||||
details[role="list"],
|
details[role="list"],
|
||||||
li[role="list"] {
|
li[role="list"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
details[role="list"] summary + ul,
|
details[role="list"] summary + ul,
|
||||||
li[role="list"] > ul {
|
li[role="list"] > ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -26,7 +28,7 @@ li[role="list"] > ul {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
background-color: var(#{$✨}dropdown-background-color);
|
background-color: var(#{$✨}dropdown-background-color);
|
||||||
box-shadow: var(#{$✨}card-box-shadow);
|
box-shadow: var(#{$✨}dropdown-box-shadow);
|
||||||
color: var(#{$✨}dropdown-color);
|
color: var(#{$✨}dropdown-color);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
|
@ -61,11 +63,11 @@ li[role="list"] > ul {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Marker
|
// Marker
|
||||||
details[role="list"] summary,
|
details[role="list"] summary,
|
||||||
li[role="list"] > a {
|
li[role="list"] > a {
|
||||||
&::after {
|
&::after {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
|
|
@ -78,10 +80,10 @@ li[role="list"] > a {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Global dropdown only
|
// Global dropdown only
|
||||||
details[role="list"] {
|
details[role="list"] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
|
|
@ -91,10 +93,15 @@ details[role="list"] {
|
||||||
|
|
||||||
&:not([role]) {
|
&:not([role]) {
|
||||||
height: calc(
|
height: calc(
|
||||||
1rem * var(#{$✨}line-height) + var(#{$✨}form-element-spacing-vertical) * 2 +
|
1rem *
|
||||||
var(#{$✨}border-width) * 2
|
var(#{$✨}line-height) +
|
||||||
|
var(#{$✨}form-element-spacing-vertical) *
|
||||||
|
2 +
|
||||||
|
var(#{$✨}border-width) *
|
||||||
|
2
|
||||||
);
|
);
|
||||||
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
padding: var(#{$✨}form-element-spacing-vertical)
|
||||||
|
var(#{$✨}form-element-spacing-horizontal);
|
||||||
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
|
border: var(#{$✨}border-width) solid var(#{$✨}form-element-border-color);
|
||||||
border-radius: var(#{$✨}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background-color: var(#{$✨}form-element-background-color);
|
background-color: var(#{$✨}form-element-background-color);
|
||||||
|
|
@ -137,27 +144,27 @@ details[role="list"] {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// All Dropdowns inside <nav>
|
// All Dropdowns inside <nav>
|
||||||
nav details[role="list"] summary,
|
nav details[role="list"] summary,
|
||||||
nav li[role="list"] a {
|
nav li[role="list"] a {
|
||||||
display: flex;
|
display: flex;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav details[role="list"] summary + ul,
|
nav details[role="list"] summary + ul,
|
||||||
nav li[role="list"] > ul {
|
nav li[role="list"] > ul {
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
border-radius: var(#{$✨}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
|
|
||||||
li a {
|
li a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdowns inside <nav> as nested <details>
|
// Dropdowns inside <nav> as nested <details>
|
||||||
nav details[role="list"] {
|
nav details[role="list"] {
|
||||||
summary,
|
summary,
|
||||||
summary:not([role]) {
|
summary:not([role]) {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -182,10 +189,10 @@ nav details[role="list"] {
|
||||||
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
|
margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdowns inside a <nav> without using <details>
|
// Dropdowns inside a <nav> without using <details>
|
||||||
li[role="list"] {
|
li[role="list"] {
|
||||||
// Open on hover (for mobile)
|
// Open on hover (for mobile)
|
||||||
// or on active/focus (for keyboard navigation)
|
// or on active/focus (for keyboard navigation)
|
||||||
&:hover > ul,
|
&:hover > ul,
|
||||||
|
|
@ -205,4 +212,5 @@ li[role="list"] {
|
||||||
> a::after {
|
> a::after {
|
||||||
background-image: var(#{$✨}icon-chevron);
|
background-image: var(#{$✨}icon-chevron);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,18 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/loading") {
|
||||||
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Cursor
|
// Cursor
|
||||||
[aria-busy="true"] {
|
[aria-busy="true"] {
|
||||||
cursor: progress;
|
cursor: progress;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Everyting except form elements
|
// Everything except form elements
|
||||||
[aria-busy="true"]:not(input, select, textarea) {
|
[aria-busy="true"]:not(input, select, textarea) {
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
|
|
@ -37,22 +39,23 @@
|
||||||
&:empty {
|
&:empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Buttons and links
|
// Buttons and links
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
a {
|
a {
|
||||||
&[aria-busy="true"] {
|
&[aria-busy="true"] {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Animation: rotate
|
// Animation: rotate
|
||||||
@keyframes spinner {
|
@keyframes spinner {
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,16 @@
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/modal") {
|
||||||
|
/**
|
||||||
* Modal (<dialog>)
|
* Modal (<dialog>)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
#{$✨}scrollbar-width: 0px;
|
#{$✨}scrollbar-width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog {
|
dialog {
|
||||||
display: flex;
|
display: flex;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -83,8 +84,8 @@ dialog {
|
||||||
display: block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
margin-top: calc(var(#{$✨}block-spacing-vertical) * -0.5);
|
margin-top: calc(var(#{$✨}spacing) * -1);
|
||||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
background-image: var(#{$✨}icon-close);
|
background-image: var(#{$✨}icon-close);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
|
@ -108,10 +109,10 @@ dialog {
|
||||||
&[open="false"] {
|
&[open="false"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Utilities
|
// Utilities
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
.modal-is-open {
|
.modal-is-open {
|
||||||
padding-right: var(#{$✨}scrollbar-width, 0px);
|
padding-right: var(#{$✨}scrollbar-width, 0px);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -121,10 +122,10 @@ dialog {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Animations
|
// Animations
|
||||||
@if ($enable-classes and $enable-transitions) {
|
@if $enable-classes and $enable-transitions {
|
||||||
$animation-duration: 0.2s;
|
$animation-duration: 0.2s;
|
||||||
|
|
||||||
:where(.modal-is-opening, .modal-is-closing) {
|
:where(.modal-is-opening, .modal-is-closing) {
|
||||||
|
|
@ -167,4 +168,5 @@ dialog {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,30 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/nav") {
|
||||||
|
/**
|
||||||
* Nav
|
* Nav
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
||||||
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
|
// Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
|
||||||
:where(nav li)::before {
|
:where(nav li)::before {
|
||||||
float: left;
|
float: left;
|
||||||
content: "\200B";
|
content: "\200B";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Horizontal Nav
|
// Horizontal Nav
|
||||||
nav,
|
nav,
|
||||||
nav ul {
|
nav ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
|
|
@ -100,10 +102,10 @@ nav {
|
||||||
margin-left: inherit;
|
margin-left: inherit;
|
||||||
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
|
padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vertical Nav
|
// Vertical Nav
|
||||||
aside {
|
aside {
|
||||||
nav,
|
nav,
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
|
|
@ -124,10 +126,10 @@ aside {
|
||||||
margin: inherit;
|
margin: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Breadcrumb RTL
|
// Breadcrumb RTL
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
nav {
|
nav {
|
||||||
&[aria-label="breadcrumb"] {
|
&[aria-label="breadcrumb"] {
|
||||||
& ul li {
|
& ul li {
|
||||||
|
|
@ -139,4 +141,5 @@ aside {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,27 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/progress") {
|
||||||
|
/**
|
||||||
* Progress
|
* Progress
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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
|
// 1. Add the correct display in Edge 18- and IE
|
||||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||||
progress {
|
progress {
|
||||||
display: inline-block; // 1
|
display: inline-block; // 1
|
||||||
vertical-align: baseline; // 2
|
vertical-align: baseline; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
// Reset the default appearance
|
// Reset the default appearance
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
|
|
@ -71,21 +73,22 @@ progress {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
progress:indeterminate {
|
progress:indeterminate {
|
||||||
animation-direction: reverse;
|
animation-direction: reverse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes progress-indeterminate {
|
@keyframes progress-indeterminate {
|
||||||
0% {
|
0% {
|
||||||
background-position: 200% 0;
|
background-position: 200% 0;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
background-position: -200% 0;
|
background-position: -200% 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "components/tooltip") {
|
||||||
|
/**
|
||||||
* Tooltip ([data-tooltip])
|
* Tooltip ([data-tooltip])
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[data-tooltip] {
|
[data-tooltip] {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:not(a, button, input) {
|
&:not(a, button, input) {
|
||||||
|
|
@ -274,4 +276,5 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,53 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "content/button") {
|
||||||
|
/**
|
||||||
* Button
|
* Button
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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
|
// 1. Change the font styles in all browsers
|
||||||
// 2. Remove the margin on controls in Safari
|
// 2. Remove the margin on controls in Safari
|
||||||
// 3. Show the overflow in Edge
|
// 3. Show the overflow in Edge
|
||||||
button {
|
button {
|
||||||
margin: 0; // 2
|
margin: 0; // 2
|
||||||
overflow: visible; // 3
|
overflow: visible; // 3
|
||||||
font-family: inherit; // 1
|
font-family: inherit; // 1
|
||||||
text-transform: none; // 1
|
text-transform: none; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct the inability to style buttons in iOS and Safari
|
// Correct the inability to style buttons in iOS and Safari
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type="button"],
|
||||||
[type="reset"],
|
[type="reset"],
|
||||||
[type="submit"] {
|
[type="submit"] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(#{$✨}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
#{$✨}background-color: var(#{$✨}primary);
|
#{$✨}background-color: var(#{$✨}primary);
|
||||||
#{$✨}border-color: var(#{$✨}primary);
|
#{$✨}border-color: var(#{$✨}primary);
|
||||||
#{$✨}color: var(#{$✨}primary-inverse);
|
#{$✨}color: var(#{$✨}primary-inverse);
|
||||||
|
|
@ -79,10 +81,10 @@ input[type="reset"],
|
||||||
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
#{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||||
0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .secondary, .contrast & .outline
|
// .secondary, .contrast & .outline
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
// Secondary
|
// Secondary
|
||||||
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
:is(button, input[type="submit"], input[type="button"], [role="button"]).secondary,
|
||||||
input[type="reset"] {
|
input[type="reset"] {
|
||||||
|
|
@ -151,7 +153,7 @@ input[type="reset"],
|
||||||
#{$✨}color: var(#{$✨}contrast-hover);
|
#{$✨}color: var(#{$✨}contrast-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} @else {
|
} @else {
|
||||||
// Secondary button without .class
|
// Secondary button without .class
|
||||||
input[type="reset"] {
|
input[type="reset"] {
|
||||||
#{$✨}background-color: var(#{$✨}secondary);
|
#{$✨}background-color: var(#{$✨}secondary);
|
||||||
|
|
@ -169,14 +171,15 @@ input[type="reset"],
|
||||||
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Button [disabled]
|
// Button [disabled]
|
||||||
// Links without href are disabled by default
|
// Links without href are disabled by default
|
||||||
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])[disabled],
|
||||||
:where(fieldset[disabled])
|
:where(fieldset[disabled])
|
||||||
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]),
|
||||||
a[role="button"]:not([href]) {
|
a[role="button"]:not([href]) {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1,52 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "content/code") {
|
||||||
|
/**
|
||||||
* Code
|
* Code
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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
|
// 1. Correct the inheritance and scaling of font size in all browsers
|
||||||
// 2. Correct the odd `em` font sizing in all browsers
|
// 2. Correct the odd `em` font sizing in all browsers
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-size: 0.875em; // 2
|
font-size: 0.875em; // 2
|
||||||
font-family: var(#{$✨}font-family); // 1
|
font-family: var(#{$✨}font-family); // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent overflow of the container in all browsers (opinionated)
|
// Prevent overflow of the container in all browsers (opinionated)
|
||||||
pre {
|
pre {
|
||||||
-ms-overflow-style: scrollbar;
|
-ms-overflow-style: scrollbar;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
border-radius: var(#{$✨}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
background: var(#{$✨}code-background-color);
|
background: var(#{$✨}code-background-color);
|
||||||
color: var(#{$✨}code-color);
|
color: var(#{$✨}code-color);
|
||||||
font-weight: var(#{$✨}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.375rem 0.5rem;
|
padding: 0.375rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(#{$✨}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|
@ -56,10 +58,10 @@ pre {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: var(#{$✨}line-height);
|
line-height: var(#{$✨}line-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Code Syntax
|
// Code Syntax
|
||||||
code {
|
code {
|
||||||
// Tags
|
// Tags
|
||||||
b {
|
b {
|
||||||
color: var(#{$✨}code-tag-color);
|
color: var(#{$✨}code-tag-color);
|
||||||
|
|
@ -83,11 +85,12 @@ code {
|
||||||
color: var(#{$✨}code-comment-color);
|
color: var(#{$✨}code-comment-color);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// kbd
|
// kbd
|
||||||
kbd {
|
kbd {
|
||||||
background-color: var(#{$✨}code-kbd-background-color);
|
background-color: var(#{$✨}code-kbd-background-color);
|
||||||
color: var(#{$✨}code-kbd-color);
|
color: var(#{$✨}code-kbd-color);
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1,53 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "content/embedded") {
|
||||||
|
/**
|
||||||
* Embedded content
|
* Embedded content
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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)
|
// Change the alignment on media elements in all browsers (opinionated)
|
||||||
:where(audio, canvas, iframe, img, svg, video) {
|
:where(audio, canvas, iframe, img, svg, video) {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the correct display in IE 9-
|
// Add the correct display in IE 9-
|
||||||
audio,
|
audio,
|
||||||
video {
|
video {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the correct display in iOS 4-7
|
// Add the correct display in iOS 4-7
|
||||||
audio:not([controls]) {
|
audio:not([controls]) {
|
||||||
display: none;
|
display: none;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the border on iframes in all browsers (opinionated)
|
// Remove the border on iframes in all browsers (opinionated)
|
||||||
:where(iframe) {
|
:where(iframe) {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Remove the border on images inside links in IE 10.
|
// 1. Remove the border on images inside links in IE 10.
|
||||||
// 2. Responsive by default
|
// 2. Responsive by default
|
||||||
img {
|
img {
|
||||||
max-width: 100%; // 2
|
max-width: 100%; // 2
|
||||||
height: auto; // 2
|
height: auto; // 2
|
||||||
border-style: none; // 1
|
border-style: none; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Change the fill color to match the text color in all browsers (opinionated)
|
// Change the fill color to match the text color in all browsers (opinionated)
|
||||||
:where(svg:not([fill])) {
|
:where(svg:not([fill])) {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide the overflow in IE
|
// Hide the overflow in IE
|
||||||
svg:not(:root) {
|
svg:not(:root) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
60
scss/content/_link.scss
Normal file
60
scss/content/_link.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
@use "sass:map";
|
||||||
|
@use "../settings" as *;
|
||||||
|
|
||||||
|
@if map.get($modules, "content/link") {
|
||||||
|
/**
|
||||||
|
* Link
|
||||||
|
*/
|
||||||
|
|
||||||
|
a,
|
||||||
|
[role="link"] {
|
||||||
|
#{$✨}color: var(#{$✨}primary);
|
||||||
|
#{$✨}background-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
background-color: var(#{$✨}background-color); // 1
|
||||||
|
color: var(#{$✨}color);
|
||||||
|
text-decoration: var(#{$✨}text-decoration);
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
|
||||||
|
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
#{$✨}color: var(#{$✨}primary-hover);
|
||||||
|
#{$✨}text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
#{$✨}background-color: var(#{$✨}primary-focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $enable-classes {
|
||||||
|
// Secondary
|
||||||
|
&.secondary {
|
||||||
|
#{$✨}color: var(#{$✨}secondary);
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
#{$✨}color: var(#{$✨}secondary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
#{$✨}background-color: var(#{$✨}secondary-focus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contrast
|
||||||
|
&.contrast {
|
||||||
|
#{$✨}color: var(#{$✨}contrast);
|
||||||
|
|
||||||
|
&:is([aria-current], :hover, :active, :focus) {
|
||||||
|
#{$✨}color: var(#{$✨}contrast-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
#{$✨}background-color: var(#{$✨}contrast-focus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,34 +1,37 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "content/miscs") {
|
||||||
|
/**
|
||||||
* Miscs
|
* Miscs
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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 of border color in Firefox
|
// 1. Correct the inheritance of border color in Firefox
|
||||||
// 2. Add the correct box sizing in Firefox
|
// 2. Add the correct box sizing in Firefox
|
||||||
hr {
|
hr {
|
||||||
height: 0; // 2
|
height: 0; // 2
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid var(#{$✨}muted-border-color);
|
border-top: 1px solid var(#{$✨}muted-border-color);
|
||||||
color: inherit; // 1
|
color: inherit; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the correct display in IE 10+
|
// Add the correct display in IE 10+
|
||||||
[hidden],
|
[hidden],
|
||||||
template {
|
template {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
} @else {
|
} @else {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add the correct display in IE 9-
|
// Add the correct display in IE 9-
|
||||||
canvas {
|
canvas {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,31 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "content/table") {
|
||||||
|
/**
|
||||||
* Table
|
* Table
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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)
|
// 1. Collapse border spacing in all browsers (opinionated)
|
||||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari
|
||||||
:where(table) {
|
:where(table) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse; // 1
|
border-collapse: collapse; // 1
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
text-indent: 0; // 2
|
text-indent: 0; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Cells
|
// Cells
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
padding: calc(var(#{$✨}spacing) / 2) var(#{$✨}spacing);
|
padding: calc(var(#{$✨}spacing) / 2) var(#{$✨}spacing);
|
||||||
border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
border-bottom: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
||||||
color: var(#{$✨}color);
|
color: var(#{$✨}color);
|
||||||
|
|
@ -31,22 +33,23 @@ td {
|
||||||
font-size: var(#{$✨}font-size);
|
font-size: var(#{$✨}font-size);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
tfoot {
|
tfoot {
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
border-top: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
border-top: var(#{$✨}border-width) solid var(#{$✨}table-border-color);
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Striped
|
// Striped
|
||||||
table {
|
table {
|
||||||
&[role="grid"] {
|
&[role="grid"] {
|
||||||
tbody tr:nth-child(odd) {
|
tbody tr:nth-child(odd) {
|
||||||
background-color: var(#{$✨}table-row-stripped-background-color);
|
background-color: var(#{$✨}table-row-stripped-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,153 +1,101 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "content/typography") {
|
||||||
|
/**
|
||||||
* Typography
|
* Typography
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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
|
// Add the correct font weight in Chrome, Edge, and Safari
|
||||||
b,
|
b,
|
||||||
strong {
|
strong {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
sub {
|
sub {
|
||||||
bottom: -0.25em;
|
bottom: -0.25em;
|
||||||
}
|
}
|
||||||
sup {
|
sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
address,
|
address,
|
||||||
blockquote,
|
blockquote,
|
||||||
dl,
|
dl,
|
||||||
figure,
|
figure,
|
||||||
form,
|
form,
|
||||||
ol,
|
ol,
|
||||||
p,
|
p,
|
||||||
pre,
|
pre,
|
||||||
table,
|
table,
|
||||||
ul {
|
ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
color: var(#{$✨}color);
|
color: var(#{$✨}color);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(#{$✨}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
font-size: var(#{$✨}font-size);
|
font-size: var(#{$✨}font-size);
|
||||||
}
|
|
||||||
|
|
||||||
// Links
|
|
||||||
// 1. Remove the gray background on active links in IE 10
|
|
||||||
a,
|
|
||||||
[role="link"] {
|
|
||||||
#{$✨}color: var(#{$✨}primary);
|
|
||||||
#{$✨}background-color: transparent;
|
|
||||||
outline: none;
|
|
||||||
background-color: var(#{$✨}background-color); // 1
|
|
||||||
color: var(#{$✨}color);
|
|
||||||
text-decoration: var(#{$✨}text-decoration);
|
|
||||||
|
|
||||||
@if $enable-transitions {
|
|
||||||
transition: background-color var(#{$✨}transition), color var(#{$✨}transition),
|
|
||||||
text-decoration var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:is([aria-current], :hover, :active, :focus) {
|
// Headings
|
||||||
#{$✨}color: var(#{$✨}primary-hover);
|
h1,
|
||||||
#{$✨}text-decoration: underline;
|
h2,
|
||||||
}
|
h3,
|
||||||
|
h4,
|
||||||
&:focus {
|
h5,
|
||||||
#{$✨}background-color: var(#{$✨}primary-focus);
|
h6 {
|
||||||
}
|
|
||||||
|
|
||||||
@if $enable-classes {
|
|
||||||
// Secondary
|
|
||||||
&.secondary {
|
|
||||||
#{$✨}color: var(#{$✨}secondary);
|
|
||||||
|
|
||||||
&:is([aria-current], :hover, :active, :focus) {
|
|
||||||
#{$✨}color: var(#{$✨}secondary-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
#{$✨}background-color: var(#{$✨}secondary-focus);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Contrast
|
|
||||||
&.contrast {
|
|
||||||
#{$✨}color: var(#{$✨}contrast);
|
|
||||||
|
|
||||||
&:is([aria-current], :hover, :active, :focus) {
|
|
||||||
#{$✨}color: var(#{$✨}contrast-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
#{$✨}background-color: var(#{$✨}contrast-focus);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Headings
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
color: var(#{$✨}color);
|
color: var(#{$✨}color);
|
||||||
font-weight: var(#{$✨}font-weight);
|
font-weight: var(#{$✨}font-weight);
|
||||||
font-size: var(#{$✨}font-size);
|
font-size: var(#{$✨}font-size);
|
||||||
font-family: var(#{$✨}font-family);
|
font-family: var(#{$✨}font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
#{$✨}color: var(#{$✨}h1-color);
|
#{$✨}color: var(#{$✨}h1-color);
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
#{$✨}color: var(#{$✨}h2-color);
|
#{$✨}color: var(#{$✨}h2-color);
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
#{$✨}color: var(#{$✨}h3-color);
|
#{$✨}color: var(#{$✨}h3-color);
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
#{$✨}color: var(#{$✨}h4-color);
|
#{$✨}color: var(#{$✨}h4-color);
|
||||||
}
|
}
|
||||||
h5 {
|
h5 {
|
||||||
#{$✨}color: var(#{$✨}h5-color);
|
#{$✨}color: var(#{$✨}h5-color);
|
||||||
}
|
}
|
||||||
h6 {
|
h6 {
|
||||||
#{$✨}color: var(#{$✨}h6-color);
|
#{$✨}color: var(#{$✨}h6-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Margin-top for headings after a typography block
|
// Margin-top for headings after a typography block
|
||||||
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {
|
||||||
~ :is(h1, h2, h3, h4, h5, h6) {
|
~ :is(h1, h2, h3, h4, h5, h6) {
|
||||||
margin-top: var(#{$✨}typography-spacing-vertical);
|
margin-top: var(#{$✨}typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Heading group
|
// Heading group
|
||||||
@if $enable-classes == false {
|
@if $enable-classes == false {
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
|
|
||||||
|
|
@ -162,9 +110,9 @@ h6 {
|
||||||
font-family: unset;
|
font-family: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
hgroup,
|
hgroup,
|
||||||
.headings {
|
.headings {
|
||||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
|
|
@ -180,20 +128,20 @@ h6 {
|
||||||
font-family: unset;
|
font-family: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Paragraphs
|
// Paragraphs
|
||||||
p {
|
p {
|
||||||
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
margin-bottom: var(#{$✨}typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Small
|
// Small
|
||||||
small {
|
small {
|
||||||
font-size: var(#{$✨}font-size);
|
font-size: var(#{$✨}font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Lists
|
// Lists
|
||||||
:where(dl, ol, ul) {
|
:where(dl, ol, ul) {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(#{$✨}spacing);
|
padding-left: var(#{$✨}spacing);
|
||||||
padding-inline-start: var(#{$✨}spacing);
|
padding-inline-start: var(#{$✨}spacing);
|
||||||
|
|
@ -202,31 +150,31 @@ small {
|
||||||
li {
|
li {
|
||||||
margin-bottom: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
margin-bottom: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Margin-top for nested lists
|
// Margin-top for nested lists
|
||||||
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||||
:where(dl, ol, ul) {
|
:where(dl, ol, ul) {
|
||||||
:is(dl, ol, ul) {
|
:is(dl, ol, ul) {
|
||||||
margin: 0; // 1
|
margin: 0; // 1
|
||||||
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
list-style: square;
|
list-style: square;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Highlighted text
|
// Highlighted text
|
||||||
mark {
|
mark {
|
||||||
padding: 0.125rem 0.25rem;
|
padding: 0.125rem 0.25rem;
|
||||||
background-color: var(#{$✨}mark-background-color);
|
background-color: var(#{$✨}mark-background-color);
|
||||||
color: var(#{$✨}mark-color);
|
color: var(#{$✨}mark-color);
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blockquote
|
// Blockquote
|
||||||
blockquote {
|
blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
margin: var(#{$✨}typography-spacing-vertical) 0;
|
margin: var(#{$✨}typography-spacing-vertical) 0;
|
||||||
padding: var(#{$✨}spacing);
|
padding: var(#{$✨}spacing);
|
||||||
|
|
@ -239,28 +187,29 @@ blockquote {
|
||||||
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.5);
|
margin-top: calc(var(#{$✨}typography-spacing-vertical) * 0.5);
|
||||||
color: var(#{$✨}blockquote-footer-color);
|
color: var(#{$✨}blockquote-footer-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Abbreviations
|
// Abbreviations
|
||||||
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: 1px dotted;
|
border-bottom: 1px dotted;
|
||||||
text-decoration: none; // 1
|
text-decoration: none; // 1
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ins
|
// Ins
|
||||||
ins {
|
ins {
|
||||||
color: var(#{$✨}ins-color);
|
color: var(#{$✨}ins-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// del
|
// del
|
||||||
del {
|
del {
|
||||||
color: var(#{$✨}del-color);
|
color: var(#{$✨}del-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// selection
|
// selection
|
||||||
::selection {
|
::selection {
|
||||||
background-color: var(#{$✨}primary-focus);
|
background-color: var(#{$✨}primary-focus);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,158 +1,161 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "forms/basics") {
|
||||||
|
/**
|
||||||
* Basics form elements
|
* Basics form elements
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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
|
// 1. Change the font styles in all browsers
|
||||||
// 2. Remove the margin in Firefox and Safari
|
// 2. Remove the margin in Firefox and Safari
|
||||||
input,
|
input,
|
||||||
optgroup,
|
optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin: 0; // 2
|
margin: 0; // 2
|
||||||
font-size: 1rem; // 1
|
font-size: 1rem; // 1
|
||||||
line-height: var(#{$✨}line-height); // 1
|
line-height: var(#{$✨}line-height); // 1
|
||||||
font-family: inherit; // 1
|
font-family: inherit; // 1
|
||||||
letter-spacing: inherit; // 2
|
letter-spacing: inherit; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show the overflow in IE.
|
// Show the overflow in IE.
|
||||||
input {
|
input {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
// Remove the inheritance of text transform in Edge, Firefox, and IE
|
||||||
select {
|
select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the text wrapping in Edge and IE
|
// 1. Correct the text wrapping in Edge and IE
|
||||||
// 2. Correct the color inheritance from `fieldset` elements in IE
|
// 2. Correct the color inheritance from `fieldset` elements in IE
|
||||||
// 3. Remove the padding so developers are not caught out when they zero out
|
// 3. Remove the padding so developers are not caught out when they zero out
|
||||||
// `fieldset` elements in all browsers
|
// `fieldset` elements in all browsers
|
||||||
legend {
|
legend {
|
||||||
max-width: 100%; // 1
|
max-width: 100%; // 1
|
||||||
padding: 0; // 3
|
padding: 0; // 3
|
||||||
color: inherit; // 2
|
color: inherit; // 2
|
||||||
white-space: normal; // 1
|
white-space: normal; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Remove the default vertical scrollbar in IE
|
// 1. Remove the default vertical scrollbar in IE
|
||||||
textarea {
|
textarea {
|
||||||
overflow: auto; // 1
|
overflow: auto; // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the padding in IE 10
|
// Remove the padding in IE 10
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct the cursor style of increment and decrement buttons in Safari
|
// Correct the cursor style of increment and decrement buttons in Safari
|
||||||
::-webkit-inner-spin-button,
|
::-webkit-inner-spin-button,
|
||||||
::-webkit-outer-spin-button {
|
::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the odd appearance in Chrome and Safari
|
// 1. Correct the odd appearance in Chrome and Safari
|
||||||
// 2. Correct the outline style in Safari
|
// 2. Correct the outline style in Safari
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
-webkit-appearance: textfield; // 1
|
-webkit-appearance: textfield; // 1
|
||||||
outline-offset: -2px; // 2
|
outline-offset: -2px; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inner padding in Chrome and Safari on macOS
|
// Remove the inner padding in Chrome and Safari on macOS
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type="search"]::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Correct the inability to style clickable types in iOS and Safari
|
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||||
// 2. Change font properties to `inherit` in Safari
|
// 2. Change font properties to `inherit` in Safari
|
||||||
::-webkit-file-upload-button {
|
::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button; // 1
|
-webkit-appearance: button; // 1
|
||||||
font: inherit; // 2
|
font: inherit; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the inner border and padding of focus outlines in Firefox
|
// Remove the inner border and padding of focus outlines in Firefox
|
||||||
::-moz-focus-inner {
|
::-moz-focus-inner {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the focus outline in Firefox
|
// Remove the focus outline in Firefox
|
||||||
:-moz-focusring {
|
:-moz-focusring {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the additional :invalid styles in Firefox
|
// Remove the additional :invalid styles in Firefox
|
||||||
:-moz-ui-invalid {
|
:-moz-ui-invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Change the inconsistent appearance in IE (opinionated)
|
// Change the inconsistent appearance in IE (opinionated)
|
||||||
::-ms-expand {
|
::-ms-expand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the border and padding in all browsers (opinionated)
|
// Remove the border and padding in all browsers (opinionated)
|
||||||
[type="file"],
|
[type="file"],
|
||||||
[type="range"] {
|
[type="range"] {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Force height for alternatives input types
|
// Force height for alternatives input types
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
||||||
height: calc(
|
height: calc(
|
||||||
(1rem * var(#{$✨}line-height)) + (var(#{$✨}form-element-spacing-vertical) * 2) +
|
(1rem * var(#{$✨}line-height)) +
|
||||||
|
(var(#{$✨}form-element-spacing-vertical) * 2) +
|
||||||
(var(#{$✨}border-width) * 2)
|
(var(#{$✨}border-width) * 2)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fieldset
|
// Fieldset
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: var(#{$✨}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Label & legend
|
// Label & legend
|
||||||
label,
|
label,
|
||||||
fieldset legend {
|
fieldset legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(#{$✨}spacing) * 0.25);
|
margin-bottom: calc(var(#{$✨}spacing) * 0.25);
|
||||||
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
|
font-weight: var(#{$✨}form-label-font-weight, var(#{$✨}font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blocks, 100%
|
// Blocks, 100%
|
||||||
input:not([type="checkbox"], [type="radio"]),
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset appearance (Not Checkboxes, Radios, Range and File)
|
// Reset appearance (Not Checkboxes, Radios, Range and File)
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
padding: var(#{$✨}form-element-spacing-vertical) var(#{$✨}form-element-spacing-horizontal);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Commons styles
|
// Commons styles
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
#{$✨}background-color: var(#{$✨}form-element-background-color);
|
#{$✨}background-color: var(#{$✨}form-element-background-color);
|
||||||
#{$✨}border-color: var(#{$✨}form-element-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-border-color);
|
||||||
#{$✨}color: var(#{$✨}form-element-color);
|
#{$✨}color: var(#{$✨}form-element-color);
|
||||||
|
|
@ -169,47 +172,47 @@ textarea {
|
||||||
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
|
transition: background-color var(#{$✨}transition), border-color var(#{$✨}transition),
|
||||||
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active & Focus
|
// Active & Focus
|
||||||
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
|
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]),
|
||||||
:where(select, textarea) {
|
:where(select, textarea) {
|
||||||
&:is(:active, :focus) {
|
&:is(:active, :focus) {
|
||||||
#{$✨}background-color: var(#{$✨}form-element-active-background-color);
|
#{$✨}background-color: var(#{$✨}form-element-active-background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active & Focus
|
// Active & Focus
|
||||||
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]),
|
||||||
:where(select, textarea) {
|
:where(select, textarea) {
|
||||||
&:is(:active, :focus) {
|
&:is(:active, :focus) {
|
||||||
#{$✨}border-color: var(#{$✨}form-element-active-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-active-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Focus
|
// Focus
|
||||||
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
|
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
&:focus {
|
&:focus {
|
||||||
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
|
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-focus-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled
|
// Disabled
|
||||||
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
:where(fieldset[disabled])
|
:where(fieldset[disabled])
|
||||||
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
||||||
#{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
|
#{$✨}background-color: var(#{$✨}form-element-disabled-background-color);
|
||||||
#{$✨}border-color: var(#{$✨}form-element-disabled-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-disabled-border-color);
|
||||||
opacity: var(#{$✨}form-element-disabled-opacity);
|
opacity: var(#{$✨}form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aria-invalid
|
// Aria-invalid
|
||||||
:where(input, select, textarea) {
|
:where(input, select, textarea) {
|
||||||
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
&:not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
|
|
@ -250,7 +253,11 @@ textarea[disabled],
|
||||||
var(#{$✨}form-element-valid-focus-color) !important;
|
var(#{$✨}form-element-valid-focus-color) !important;
|
||||||
} @else {
|
} @else {
|
||||||
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-valid-active-border-color);
|
||||||
#{$✨}box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}form-element-valid-focus-color);
|
#{$✨}box-shadow: 0
|
||||||
|
0
|
||||||
|
0
|
||||||
|
var(#{$✨}outline-width)
|
||||||
|
var(#{$✨}form-element-valid-focus-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -276,9 +283,9 @@ textarea[disabled],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
:where(input, select, textarea) {
|
:where(input, select, textarea) {
|
||||||
&:not([type="checkbox"], [type="radio"]) {
|
&:not([type="checkbox"], [type="radio"]) {
|
||||||
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
|
&:is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
|
||||||
|
|
@ -286,27 +293,27 @@ textarea[disabled],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Placeholder
|
// Placeholder
|
||||||
input::placeholder,
|
input::placeholder,
|
||||||
input::-webkit-input-placeholder,
|
input::-webkit-input-placeholder,
|
||||||
textarea::placeholder,
|
textarea::placeholder,
|
||||||
textarea::-webkit-input-placeholder,
|
textarea::-webkit-input-placeholder,
|
||||||
select:invalid {
|
select:invalid {
|
||||||
color: var(#{$✨}form-element-placeholder-color);
|
color: var(#{$✨}form-element-placeholder-color);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Margin bottom (Not Checkboxes and Radios)
|
// Margin bottom (Not Checkboxes and Radios)
|
||||||
input:not([type="checkbox"], [type="radio"]),
|
input:not([type="checkbox"], [type="radio"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin-bottom: var(#{$✨}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Select
|
// Select
|
||||||
select {
|
select {
|
||||||
// Unstyle the caret on `<select>`s in IE10+.
|
// Unstyle the caret on `<select>`s in IE10+.
|
||||||
&::-ms-expand {
|
&::-ms-expand {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -323,18 +330,18 @@ select {
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
select {
|
select {
|
||||||
&:not([multiple], [size]) {
|
&:not([multiple], [size]) {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper
|
// Helper
|
||||||
:where(input, select, textarea) {
|
:where(input, select, textarea) {
|
||||||
+ small {
|
+ small {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -342,11 +349,12 @@ select {
|
||||||
margin-bottom: var(#{$✨}spacing);
|
margin-bottom: var(#{$✨}spacing);
|
||||||
color: var(#{$✨}muted-color);
|
color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Styles for Input inside a label
|
// Styles for Input inside a label
|
||||||
label {
|
label {
|
||||||
> :where(input, select, textarea) {
|
> :where(input, select, textarea) {
|
||||||
margin-top: calc(var(#{$✨}spacing) * 0.25);
|
margin-top: calc(var(#{$✨}spacing) * 0.25);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
|
/**
|
||||||
* Checkboxes, Radios and Switches
|
* Checkboxes, Radios and Switches
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
@ -42,10 +44,10 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Checkboxes
|
// Checkboxes
|
||||||
[type="checkbox"] {
|
[type="checkbox"] {
|
||||||
&:indeterminate {
|
&:indeterminate {
|
||||||
#{$✨}background-color: var(#{$✨}primary);
|
#{$✨}background-color: var(#{$✨}primary);
|
||||||
#{$✨}border-color: var(#{$✨}primary);
|
#{$✨}border-color: var(#{$✨}primary);
|
||||||
|
|
@ -54,10 +56,10 @@
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Radios
|
// Radios
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
|
||||||
&:checked,
|
&:checked,
|
||||||
|
|
@ -67,10 +69,10 @@
|
||||||
border-width: 0.35em;
|
border-width: 0.35em;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Switchs
|
// Switchs
|
||||||
[type="checkbox"][role="switch"] {
|
[type="checkbox"][role="switch"] {
|
||||||
#{$✨}background-color: var(#{$✨}switch-background-color);
|
#{$✨}background-color: var(#{$✨}switch-background-color);
|
||||||
#{$✨}border-color: var(#{$✨}switch-background-color);
|
#{$✨}border-color: var(#{$✨}switch-background-color);
|
||||||
#{$✨}color: var(#{$✨}switch-color);
|
#{$✨}color: var(#{$✨}switch-color);
|
||||||
|
|
@ -119,15 +121,15 @@
|
||||||
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
|
margin-inline-start: calc(#{$switch-width * 0.5} - var(#{$✨}border-width));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Aria-invalid
|
// Aria-invalid
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="checkbox"]:checked,
|
[type="checkbox"]:checked,
|
||||||
[type="radio"],
|
[type="radio"],
|
||||||
[type="radio"]:checked,
|
[type="radio"]:checked,
|
||||||
[type="checkbox"][role="switch"],
|
[type="checkbox"][role="switch"],
|
||||||
[type="checkbox"][role="switch"]:checked {
|
[type="checkbox"][role="switch"]:checked {
|
||||||
&[aria-invalid="false"] {
|
&[aria-invalid="false"] {
|
||||||
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
|
@ -135,4 +137,5 @@
|
||||||
&[aria-invalid="true"] {
|
&[aria-invalid="true"] {
|
||||||
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
|
#{$✨}border-color: var(#{$✨}form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,23 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
// Wrapper
|
||||||
|
@mixin color-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Swatch
|
||||||
|
@mixin color-swatch {
|
||||||
|
border: 0;
|
||||||
|
border-radius: calc(var(#{$✨}border-radius) * 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map.get($modules, "forms/input-color") {
|
||||||
|
/**
|
||||||
* Input type color
|
* Input type color
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[type="color"] {
|
[type="color"] {
|
||||||
// Wrapper
|
|
||||||
@mixin color-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-color-swatch-wrapper {
|
&::-webkit-color-swatch-wrapper {
|
||||||
@include color-wrapper;
|
@include color-wrapper;
|
||||||
}
|
}
|
||||||
|
|
@ -18,12 +26,6 @@
|
||||||
@include color-wrapper;
|
@include color-wrapper;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Swatch
|
|
||||||
@mixin color-swatch {
|
|
||||||
border: 0;
|
|
||||||
border-radius: calc(var(#{$✨}border-radius) * 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-color-swatch {
|
&::-webkit-color-swatch {
|
||||||
@include color-swatch;
|
@include color-swatch;
|
||||||
}
|
}
|
||||||
|
|
@ -31,4 +33,5 @@
|
||||||
&::-moz-color-swatch {
|
&::-moz-color-swatch {
|
||||||
@include color-swatch;
|
@include color-swatch;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "forms/input-date") {
|
||||||
|
/**
|
||||||
* Input type datetime
|
* Input type datetime
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// :not() are needed to add Specificity and avoid !important on padding
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
&:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
#{$✨}icon-position: 0.75rem;
|
#{$✨}icon-position: 0.75rem;
|
||||||
#{$✨}icon-width: 1rem;
|
#{$✨}icon-width: 1rem;
|
||||||
|
|
@ -20,23 +22,24 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
&[type="time"] {
|
&[type="time"] {
|
||||||
background-image: var(#{$✨}icon-time);
|
background-image: var(#{$✨}icon-time);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calendar picker
|
// Calendar picker
|
||||||
[type="date"],
|
[type="date"],
|
||||||
[type="datetime-local"],
|
[type="datetime-local"],
|
||||||
[type="month"],
|
[type="month"],
|
||||||
[type="time"],
|
[type="time"],
|
||||||
[type="week"] {
|
[type="week"] {
|
||||||
&::-webkit-calendar-picker-indicator {
|
&::-webkit-calendar-picker-indicator {
|
||||||
width: var(#{$✨}icon-width);
|
width: var(#{$✨}icon-width);
|
||||||
margin-right: calc(var(#{$✨}icon-width) * -1);
|
margin-right: calc(var(#{$✨}icon-width) * -1);
|
||||||
margin-left: var(#{$✨}icon-position);
|
margin-left: var(#{$✨}icon-position);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"]
|
[dir="rtl"]
|
||||||
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
:is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,7 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@mixin file-selector-button {
|
||||||
* Input type file
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="file"] {
|
|
||||||
#{$✨}color: var(#{$✨}muted-color);
|
|
||||||
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
@mixin file-selector-button {
|
|
||||||
#{$✨}background-color: var(#{$✨}secondary);
|
#{$✨}background-color: var(#{$✨}secondary);
|
||||||
#{$✨}border-color: var(#{$✨}secondary);
|
#{$✨}border-color: var(#{$✨}secondary);
|
||||||
#{$✨}color: var(#{$✨}secondary-inverse);
|
#{$✨}color: var(#{$✨}secondary-inverse);
|
||||||
|
|
@ -42,7 +32,19 @@
|
||||||
#{$✨}background-color: var(#{$✨}secondary-hover);
|
#{$✨}background-color: var(#{$✨}secondary-hover);
|
||||||
#{$✨}border-color: var(#{$✨}secondary-hover);
|
#{$✨}border-color: var(#{$✨}secondary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@if map.get($modules, "forms/input-file") {
|
||||||
|
/**
|
||||||
|
* Input type file
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="file"] {
|
||||||
|
#{$✨}color: var(#{$✨}muted-color);
|
||||||
|
padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background: none;
|
||||||
|
|
||||||
&::file-selector-button {
|
&::file-selector-button {
|
||||||
@include file-selector-button;
|
@include file-selector-button;
|
||||||
|
|
@ -55,4 +57,5 @@
|
||||||
&::-ms-browse {
|
&::-ms-browse {
|
||||||
@include file-selector-button;
|
@include file-selector-button;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,13 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
// Config
|
||||||
* Input type range
|
$height-track: 0.25rem;
|
||||||
*/
|
$height-thumb: 1.25rem;
|
||||||
|
$border-thumb: 2px;
|
||||||
|
|
||||||
[type="range"] {
|
// Slider Track
|
||||||
// Config
|
@mixin slider-track {
|
||||||
$height-track: 0.25rem;
|
|
||||||
$height-thumb: 1.25rem;
|
|
||||||
$border-thumb: 2px;
|
|
||||||
|
|
||||||
// Styles
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 100%;
|
|
||||||
height: $height-thumb;
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
// Slider Track
|
|
||||||
@mixin slider-track {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $height-track;
|
height: $height-track;
|
||||||
border-radius: var(#{$✨}border-radius);
|
border-radius: var(#{$✨}border-radius);
|
||||||
|
|
@ -28,7 +16,37 @@
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: background-color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
transition: background-color var(#{$✨}transition), box-shadow var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Slider Thumb
|
||||||
|
@mixin slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: $height-thumb;
|
||||||
|
height: $height-thumb;
|
||||||
|
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||||
|
border: $border-thumb solid var(#{$✨}range-thumb-border-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(#{$✨}range-thumb-color);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map.get($modules, "forms/input-range") {
|
||||||
|
/**
|
||||||
|
* Input type range
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="range"] {
|
||||||
|
// Styles
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: $height-thumb;
|
||||||
|
background: none;
|
||||||
|
|
||||||
&::-webkit-slider-runnable-track {
|
&::-webkit-slider-runnable-track {
|
||||||
@include slider-track;
|
@include slider-track;
|
||||||
|
|
@ -42,21 +60,6 @@
|
||||||
@include slider-track;
|
@include slider-track;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Slider Thumb
|
|
||||||
@mixin slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: $height-thumb;
|
|
||||||
height: $height-thumb;
|
|
||||||
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
|
||||||
border: $border-thumb solid var(#{$✨}range-thumb-border-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(#{$✨}range-thumb-color);
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@if $enable-transitions {
|
|
||||||
transition: background-color var(#{$✨}transition), transform var(#{$✨}transition);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::-webkit-slider-thumb {
|
&::-webkit-slider-thumb {
|
||||||
@include slider-thumb;
|
@include slider-thumb;
|
||||||
}
|
}
|
||||||
|
|
@ -91,4 +94,5 @@
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "forms/input-search") {
|
||||||
|
/**
|
||||||
* Input type search
|
* Input type search
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// :not() are needed to add Specificity and avoid !important on padding
|
// :not() are needed to add Specificity and avoid !important on padding
|
||||||
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
&[type="search"] {
|
&[type="search"] {
|
||||||
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
||||||
border-radius: 5rem;
|
border-radius: 5rem;
|
||||||
|
|
@ -16,7 +18,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
|
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem) !important;
|
padding-inline-start: calc(
|
||||||
|
var(#{$✨}form-element-spacing-horizontal) + 1.75rem
|
||||||
|
) !important;
|
||||||
} @else {
|
} @else {
|
||||||
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
padding-inline-start: calc(var(#{$✨}form-element-spacing-horizontal) + 1.75rem);
|
||||||
}
|
}
|
||||||
|
|
@ -31,17 +35,17 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
|
background-image: var(#{$✨}icon-search), var(#{$✨}icon-invalid);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cancel button
|
// Cancel button
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
&::-webkit-search-cancel-button {
|
&::-webkit-search-cancel-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
:where(input) {
|
:where(input) {
|
||||||
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
&:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
&[type="search"] {
|
&[type="search"] {
|
||||||
|
|
@ -53,4 +57,5 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
@if ($enable-class-container and $enable-classes) {
|
@if map.get($modules, "layout/container") and $enable-classes {
|
||||||
/**
|
/**
|
||||||
* Container
|
* Container
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,41 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "layout/document") {
|
||||||
|
/**
|
||||||
* Document
|
* Document
|
||||||
* Content-box & Responsive typography
|
* Content-box & Responsive typography
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | 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 border box sizing in all browsers (opinionated)
|
// 1. Add border box sizing in all browsers (opinionated)
|
||||||
// 2. Backgrounds do not repeat by default (opinionated)
|
// 2. Backgrounds do not repeat by default (opinionated)
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: border-box; // 1
|
box-sizing: border-box; // 1
|
||||||
background-repeat: no-repeat; // 2
|
background-repeat: no-repeat; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||||
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
||||||
::before,
|
::before,
|
||||||
::after {
|
::after {
|
||||||
text-decoration: inherit; // 1
|
text-decoration: inherit; // 1
|
||||||
vertical-align: inherit; // 2
|
vertical-align: inherit; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Use the default cursor in all browsers (opinionated)
|
// 1. Use the default cursor in all browsers (opinionated)
|
||||||
// 2. Change the line height in all browsers (opinionated)
|
// 2. Change the line height in all browsers (opinionated)
|
||||||
// 3. Breaks words to prevent overflow 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)
|
// 4. Use a 4-space tab width in all browsers (opinionated)
|
||||||
// 5. Remove the grey highlight on links in iOS (opinionated)
|
// 5. Remove the grey highlight on links in iOS (opinionated)
|
||||||
// 6. Prevent adjustments of font size after orientation changes in iOS
|
// 6. Prevent adjustments of font size after orientation changes in iOS
|
||||||
:where(:root) {
|
:where(:root) {
|
||||||
-webkit-tap-highlight-color: transparent; // 5
|
-webkit-tap-highlight-color: transparent; // 5
|
||||||
-webkit-text-size-adjust: 100%; // 6
|
-webkit-text-size-adjust: 100%; // 6
|
||||||
text-size-adjust: 100%; // 6
|
text-size-adjust: 100%; // 6
|
||||||
|
|
@ -47,4 +49,5 @@
|
||||||
overflow-wrap: break-word; // 3
|
overflow-wrap: break-word; // 3
|
||||||
cursor: default; // 1
|
cursor: default; // 1
|
||||||
tab-size: 4; // 4
|
tab-size: 4; // 4
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
@if ($enable-classes and $enable-grid) {
|
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||||
/**
|
/**
|
||||||
* Grid
|
* Grid
|
||||||
* Minimal grid system with auto-layout columns
|
* Minimal grid system with auto-layout columns
|
||||||
|
|
|
||||||
61
scss/layout/_landmarks.scss
Normal file
61
scss/layout/_landmarks.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
@use "sass:map";
|
||||||
|
@use "../settings" as *;
|
||||||
|
|
||||||
|
@if map.get($modules, "layout/landmarks") {
|
||||||
|
/**
|
||||||
|
* Landmarks
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Reboot based on :
|
||||||
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Remove the margin in all browsers (opinionated)
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render the `main` element consistently in IE
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
#{$semantic-root-element} {
|
||||||
|
> header,
|
||||||
|
> main,
|
||||||
|
> footer {
|
||||||
|
// <header>, <main>, <footer> as containers
|
||||||
|
@if $enable-semantic-container {
|
||||||
|
$first-breakpoint: true;
|
||||||
|
width: 100%;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
||||||
|
|
||||||
|
@if $enable-viewport {
|
||||||
|
@each $key, $values in $breakpoints {
|
||||||
|
@if $values {
|
||||||
|
@media (min-width: map.get($values, "breakpoint")) {
|
||||||
|
max-width: map.get($values, "viewport");
|
||||||
|
@if $first-breakpoint {
|
||||||
|
$first-breakpoint: false;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Regular pacing <header>, <main>, <footer>
|
||||||
|
@else {
|
||||||
|
padding: var(#{$✨}block-spacing-vertical) 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "layout/scroller") {
|
||||||
|
/**
|
||||||
* Horizontal scroller (<figure>)
|
* Horizontal scroller (<figure>)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Wrapper to make any content responsive across all viewports
|
// Wrapper to make allow any content to be scrolled horizontally
|
||||||
figure {
|
figure {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -15,4 +17,5 @@ figure {
|
||||||
padding: calc(var(#{$✨}spacing) * 0.5) 0;
|
padding: calc(var(#{$✨}spacing) * 0.5) 0;
|
||||||
color: var(#{$✨}muted-color);
|
color: var(#{$✨}muted-color);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
/**
|
@if map.get($modules, "layout/section") {
|
||||||
|
/**
|
||||||
* Section
|
* Section
|
||||||
* Responsive spacings for section
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-bottom: var(#{$✨}block-spacing-vertical);
|
margin-bottom: var(#{$✨}block-spacing-vertical);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
@use "sass:map";
|
|
||||||
@use "../settings" as *;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sectioning
|
|
||||||
* Container and responsive spacings for header, main, footer
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Reboot based on :
|
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
|
||||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
|
||||||
// ––––––––––––––––––––
|
|
||||||
|
|
||||||
// Render the `main` element consistently in IE
|
|
||||||
main {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pico
|
|
||||||
// ––––––––––––––––––––
|
|
||||||
|
|
||||||
// 1. Remove the margin in all browsers (opinionated)
|
|
||||||
#{$semantic-root-element} {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0; // 1
|
|
||||||
|
|
||||||
> header,
|
|
||||||
> main,
|
|
||||||
> footer {
|
|
||||||
width: 100%;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
// Semantic container
|
|
||||||
@if $enable-semantic-container {
|
|
||||||
// Centered viewport
|
|
||||||
$first-breakpoint: true;
|
|
||||||
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
|
|
||||||
@each $key, $values in $breakpoints {
|
|
||||||
@if $values {
|
|
||||||
@media (min-width: map.get($values, "breakpoint")) {
|
|
||||||
max-width: map.get($values, "viewport");
|
|
||||||
@if $first-breakpoint {
|
|
||||||
$first-breakpoint: false;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Semantic container
|
|
||||||
@else {
|
|
||||||
padding: var(#{$✨}block-spacing-vertical) 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +1,48 @@
|
||||||
// Pico classless version
|
// Pico classless version
|
||||||
@use "pico" with (
|
@use "pico" with (
|
||||||
$enable-semantic-container: true,
|
$enable-semantic-container: true,
|
||||||
$enable-classes: false
|
$enable-classes: false,
|
||||||
|
$modules: (
|
||||||
|
// Theme
|
||||||
|
"themes/default": true,
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
"layout/document": true,
|
||||||
|
"layout/landmarks": true,
|
||||||
|
"layout/container": true,
|
||||||
|
"layout/section": true,
|
||||||
|
"layout/grid": true,
|
||||||
|
"layout/scroller": true,
|
||||||
|
|
||||||
|
// Content
|
||||||
|
"content/typography": true,
|
||||||
|
"content/embedded": true,
|
||||||
|
"content/button": true,
|
||||||
|
"content/table": true,
|
||||||
|
"content/code": true,
|
||||||
|
"content/miscs": true,
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
"forms/basics": true,
|
||||||
|
"forms/checkbox-radio-switch": true,
|
||||||
|
"forms/input-color": true,
|
||||||
|
"forms/input-date": true,
|
||||||
|
"forms/input-file": true,
|
||||||
|
"forms/input-range": true,
|
||||||
|
"forms/input-search": true,
|
||||||
|
|
||||||
|
// Components
|
||||||
|
"components/accordion": true,
|
||||||
|
"components/card": true,
|
||||||
|
"components/dropdown": true,
|
||||||
|
"components/loading": true,
|
||||||
|
"components/modal": true,
|
||||||
|
"components/nav": true,
|
||||||
|
"components/progress": true,
|
||||||
|
"components/tooltip": true,
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
"utilities/accessibility": true,
|
||||||
|
"utilities/reduce-motion": true,
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -8,14 +8,15 @@
|
||||||
|
|
||||||
// Layout
|
// Layout
|
||||||
@use "layout/document"; // html
|
@use "layout/document"; // html
|
||||||
@use "layout/sectioning"; // body, header, main, footer
|
@use "layout/landmarks"; // body, header, main, footer
|
||||||
@use "layout/container"; // .container, .container-fluid
|
@use "layout/container"; // .container, .container-fluid
|
||||||
@use "layout/section"; // section
|
@use "layout/section"; // section
|
||||||
@use "layout/grid"; // .grid
|
@use "layout/grid"; // .grid
|
||||||
@use "layout/scroller"; // figure
|
@use "layout/scroller"; // figure
|
||||||
|
|
||||||
// Content
|
// Content
|
||||||
@use "content/typography"; // a, headings, p, ul, blockquote, ...
|
@use "content/link"; // a, role="link"
|
||||||
|
@use "content/typography"; // headings, p, ul, blockquote, ...
|
||||||
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
|
@use "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||||
@use "content/button"; // button, a[role="button"], type="button", type="submit" ...
|
@use "content/button"; // button, a[role="button"], type="button", type="submit" ...
|
||||||
@use "content/table"; // table, tr, td, ...
|
@use "content/table"; // table, tr, td, ...
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,5 @@
|
||||||
@use "../settings" as *;
|
// Colors schemes
|
||||||
@use "default/light";
|
@use "default/schemes";
|
||||||
@use "default/dark";
|
|
||||||
|
|
||||||
// Commons styles
|
// Styles
|
||||||
@use "default/styles";
|
@use "default/styles";
|
||||||
|
|
||||||
// Light theme (Default)
|
|
||||||
// Can be forced with data-theme="light"
|
|
||||||
[data-theme="light"],
|
|
||||||
:root:not([data-theme="dark"]) {
|
|
||||||
@include light.theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dark theme (Auto)
|
|
||||||
// Automatically enabled if user has Dark mode enabled
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
|
||||||
:root:not([data-theme="light"]) {
|
|
||||||
@include dark.theme;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dark theme (Forced)
|
|
||||||
// Enabled if forced with data-theme="dark"
|
|
||||||
[data-theme="dark"] {
|
|
||||||
@include dark.theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress,
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"],
|
|
||||||
[type="range"] {
|
|
||||||
accent-color: var(#{$✨}primary);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,15 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "colors" as *;
|
@use "colors" as *;
|
||||||
@use "../../settings" as *;
|
@use "../../settings" as *;
|
||||||
|
@use "../../utils/box-shadow";
|
||||||
@use "../../utils/functions";
|
@use "../../utils/functions";
|
||||||
|
|
||||||
// Default: Dark theme
|
// Default: Dark theme
|
||||||
@mixin theme {
|
@mixin theme {
|
||||||
#{$✨}background-color: #{mix($black, $grey-900, 37.5%)};
|
#{$✨}background-color: #{mix($black, $grey-900, 37.5%)};
|
||||||
|
|
||||||
// Texts colors
|
// Text color
|
||||||
#{$✨}color: #{$grey-200};
|
#{$✨}color: #{$grey-200};
|
||||||
#{$✨}h1-color: #{$grey-50};
|
|
||||||
#{$✨}h2-color: #{mix($grey-100, $grey-50)};
|
|
||||||
#{$✨}h3-color: #{$grey-100};
|
|
||||||
#{$✨}h4-color: #{mix($grey-200, $grey-100)};
|
|
||||||
#{$✨}h5-color: #{$grey-200};
|
|
||||||
#{$✨}h6-color: #{mix($grey-300, $grey-200)};
|
|
||||||
|
|
||||||
// Muted colors
|
// Muted colors
|
||||||
#{$✨}muted-color: #{$grey-500};
|
#{$✨}muted-color: #{$grey-500};
|
||||||
|
|
@ -37,6 +33,19 @@
|
||||||
#{$✨}contrast-focus: #{rgba($grey-500, 0.25)};
|
#{$✨}contrast-focus: #{rgba($grey-500, 0.25)};
|
||||||
#{$✨}contrast-inverse: #{$black};
|
#{$✨}contrast-inverse: #{$black};
|
||||||
|
|
||||||
|
// Box shadow
|
||||||
|
#{$✨}box-shadow: box-shadow.shadow($black);
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
@if map.get($modules, "content/typography") {
|
||||||
|
// Headings colors
|
||||||
|
#{$✨}h1-color: #{$grey-50};
|
||||||
|
#{$✨}h2-color: #{mix($grey-100, $grey-50)};
|
||||||
|
#{$✨}h3-color: #{$grey-100};
|
||||||
|
#{$✨}h4-color: #{mix($grey-200, $grey-100)};
|
||||||
|
#{$✨}h5-color: #{$grey-200};
|
||||||
|
#{$✨}h6-color: #{mix($grey-300, $grey-200)};
|
||||||
|
|
||||||
// Highlighted text (<mark>)
|
// Highlighted text (<mark>)
|
||||||
#{$✨}mark-background-color: #{mix($grey-300, $amber-300)};
|
#{$✨}mark-background-color: #{mix($grey-300, $amber-300)};
|
||||||
#{$✨}mark-color: #{mix($black, $grey-900, 37.5%)};
|
#{$✨}mark-color: #{mix($black, $grey-900, 37.5%)};
|
||||||
|
|
@ -48,14 +57,36 @@
|
||||||
// Blockquote
|
// Blockquote
|
||||||
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
|
@if map.get($modules, "content/button") {
|
||||||
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||||
// Don't use, 'none, 'false, 'null', '0', etc.
|
// Don't use, 'none, 'false, 'null', '0', etc.
|
||||||
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table
|
||||||
|
@if map.get($modules, "content/table") {
|
||||||
|
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
||||||
|
#{$✨}table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Code
|
||||||
|
@if map.get($modules, "content/code") {
|
||||||
|
#{$✨}code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||||
|
#{$✨}code-color: var(#{$✨}muted-color);
|
||||||
|
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
|
||||||
|
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
|
||||||
|
#{$✨}code-tag-color: #{hsl(330, 30%, 50%)};
|
||||||
|
#{$✨}code-property-color: #{hsl(185, 30%, 50%)};
|
||||||
|
#{$✨}code-value-color: #{hsl(40, 10%, 50%)};
|
||||||
|
#{$✨}code-comment-color: #{mix($grey-700, $grey-600)};
|
||||||
|
}
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
|
@if map.get($modules, "forms/basics") {
|
||||||
#{$✨}form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
#{$✨}form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
||||||
#{$✨}form-element-border-color: #{mix($grey-800, $grey-700)};
|
#{$✨}form-element-border-color: #{mix($grey-800, $grey-700)};
|
||||||
#{$✨}form-element-color: var(#{$✨}color);
|
#{$✨}form-element-color: var(#{$✨}color);
|
||||||
|
|
@ -72,100 +103,109 @@
|
||||||
#{$✨}form-element-valid-border-color: #{$green-800};
|
#{$✨}form-element-valid-border-color: #{$green-800};
|
||||||
#{$✨}form-element-valid-active-border-color: #{$green-700};
|
#{$✨}form-element-valid-active-border-color: #{$green-700};
|
||||||
#{$✨}form-element-valid-focus-color: #{rgba($green-700, 0.25)};
|
#{$✨}form-element-valid-focus-color: #{rgba($green-700, 0.25)};
|
||||||
|
}
|
||||||
|
|
||||||
// Switch (input[type="checkbox"][role="switch"])
|
// Switch (input[type="checkbox"][role="switch"])
|
||||||
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
#{$✨}switch-background-color: #{mix($grey-800, $grey-700)};
|
#{$✨}switch-background-color: #{mix($grey-800, $grey-700)};
|
||||||
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
||||||
#{$✨}switch-checked-background-color: var(#{$✨}primary);
|
#{$✨}switch-checked-background-color: var(#{$✨}primary);
|
||||||
|
}
|
||||||
|
|
||||||
// Range (input[type="range"])
|
// Range (input[type="range"])
|
||||||
|
@if map.get($modules, "forms/input-range") {
|
||||||
#{$✨}range-border-color: #{mix($grey-900, $grey-800)};
|
#{$✨}range-border-color: #{mix($grey-900, $grey-800)};
|
||||||
#{$✨}range-active-border-color: #{$grey-800};
|
#{$✨}range-active-border-color: #{$grey-800};
|
||||||
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
||||||
#{$✨}range-thumb-color: var(#{$✨}secondary);
|
#{$✨}range-thumb-color: var(#{$✨}secondary);
|
||||||
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
|
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
|
||||||
#{$✨}range-thumb-active-color: var(#{$✨}primary);
|
#{$✨}range-thumb-active-color: var(#{$✨}primary);
|
||||||
|
}
|
||||||
// Table
|
|
||||||
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
|
||||||
#{$✨}table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
|
||||||
|
|
||||||
// Code
|
|
||||||
#{$✨}code-background-color: #{mix($black, $grey-900, 12.5%)};
|
|
||||||
#{$✨}code-color: var(#{$✨}muted-color);
|
|
||||||
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
|
|
||||||
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
|
|
||||||
#{$✨}code-tag-color: #{hsl(330, 30%, 50%)};
|
|
||||||
#{$✨}code-property-color: #{hsl(185, 30%, 50%)};
|
|
||||||
#{$✨}code-value-color: #{hsl(40, 10%, 50%)};
|
|
||||||
#{$✨}code-comment-color: #{mix($grey-700, $grey-600)};
|
|
||||||
|
|
||||||
// Accordion (<details>)
|
// Accordion (<details>)
|
||||||
|
@if map.get($modules, "components/accordion") {
|
||||||
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$✨}accordion-active-summary-color: var(#{$✨}primary);
|
#{$✨}accordion-active-summary-color: var(#{$✨}primary);
|
||||||
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
||||||
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
$box-shadow-elevation: 1rem;
|
@if map.get($modules, "components/card") {
|
||||||
$box-shadow-blur-strengh: 6rem;
|
|
||||||
$box-shadow-opacity: 0.06;
|
|
||||||
#{$✨}card-background-color: #{mix($black, $grey-900, 25%)};
|
#{$✨}card-background-color: #{mix($black, $grey-900, 25%)};
|
||||||
#{$✨}card-border-color: var(#{$✨}card-background-color);
|
#{$✨}card-border-color: var(#{$✨}card-background-color);
|
||||||
#{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
|
#{$✨}card-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{($box-shadow-blur-strengh * 0.029)} #{rgba($black, ($box-shadow-opacity * 0.283))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.067
|
|
||||||
)} #{rgba($black, ($box-shadow-opacity * 0.4))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.125
|
|
||||||
)} #{rgba($black, ($box-shadow-opacity * 0.5))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.225
|
|
||||||
)} #{rgba($black, ($box-shadow-opacity * 0.6))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.417
|
|
||||||
)} #{rgba($black, ($box-shadow-opacity * 0.717))},
|
|
||||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
|
|
||||||
$black,
|
|
||||||
$box-shadow-opacity
|
|
||||||
)},
|
|
||||||
0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25))};
|
|
||||||
#{$✨}card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
#{$✨}card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||||
|
}
|
||||||
|
|
||||||
// Dropdown (<details role="list">)
|
// Dropdown (<details role="list">)
|
||||||
|
@if map.get($modules, "components/dropdown") {
|
||||||
#{$✨}dropdown-background-color: #{$grey-900};
|
#{$✨}dropdown-background-color: #{$grey-900};
|
||||||
#{$✨}dropdown-border-color: #{mix($grey-900, $grey-800)};
|
#{$✨}dropdown-border-color: #{mix($grey-900, $grey-800)};
|
||||||
#{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
|
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{$✨}dropdown-color: var(#{$✨}color);
|
#{$✨}dropdown-color: var(#{$✨}color);
|
||||||
#{$✨}dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
|
#{$✨}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.8)};
|
|
||||||
|
|
||||||
// Progress
|
|
||||||
#{$✨}progress-background-color: #{mix($grey-900, $grey-800)};
|
|
||||||
#{$✨}progress-color: var(#{$✨}primary);
|
|
||||||
|
|
||||||
// Loading ([aria-busy=true])
|
// Loading ([aria-busy=true])
|
||||||
|
@if map.get($modules, "components/loading") {
|
||||||
#{$✨}loading-spinner-opacity: 0.5;
|
#{$✨}loading-spinner-opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal (<dialog>)
|
||||||
|
@if map.get($modules, "components/modal") {
|
||||||
|
#{$✨}modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Progress
|
||||||
|
@if map.get($modules, "components/progress") {
|
||||||
|
#{$✨}progress-background-color: #{mix($grey-900, $grey-800)};
|
||||||
|
#{$✨}progress-color: var(#{$✨}primary);
|
||||||
|
}
|
||||||
|
|
||||||
// Tooltip ([data-tooltip])
|
// Tooltip ([data-tooltip])
|
||||||
|
@if map.get($modules, "components/tooltip") {
|
||||||
#{$✨}tooltip-background-color: var(#{$✨}contrast);
|
#{$✨}tooltip-background-color: var(#{$✨}contrast);
|
||||||
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
// Icons
|
// Checkboxes icons
|
||||||
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
#{$✨}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='#{functions.display-rgb($white)}' 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-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='#{functions.display-rgb($white)}' 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-minus: 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='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chevron icons
|
||||||
|
@if map.get($modules, "forms/basic") or
|
||||||
|
map.get($modules, "components/accordion") or
|
||||||
|
map.get($modules, "components/dropdown")
|
||||||
|
{
|
||||||
#{$✨}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='#{functions.display-rgb($grey-300)}' 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: 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='#{functions.display-rgb($grey-300)}' 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='#{functions.display-rgb($white)}' 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='#{functions.display-rgb($white)}' 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='#{functions.display-rgb($black)}' 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='#{functions.display-rgb($black)}' 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='#{functions.display-rgb($grey-500)}' 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");
|
}
|
||||||
|
|
||||||
|
// Datetime icons
|
||||||
|
@if map.get($modules, "input-date") {
|
||||||
#{$✨}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='#{functions.display-rgb($grey-300)}' 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-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='#{functions.display-rgb($grey-300)}' 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='#{functions.display-rgb($red-900)}' 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");
|
|
||||||
#{$✨}icon-minus: 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='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
#{$✨}icon-search: 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='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
#{$✨}icon-time: 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='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-time: 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='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form validation icons
|
||||||
|
@if map.get($modules, "forms/basic") {
|
||||||
#{$✨}icon-valid: 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='#{functions.display-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-valid: 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='#{functions.display-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%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='#{functions.display-rgb($red-900)}' 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");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search icon
|
||||||
|
@if map.get($modules, "forms/input-search") {
|
||||||
|
#{$✨}icon-search: 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='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close icon
|
||||||
|
@if map.get($modules, "components/modal") {
|
||||||
|
#{$✨}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='#{functions.display-rgb($grey-500)}' 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");
|
||||||
|
}
|
||||||
|
|
||||||
// Document
|
// Document
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,15 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "colors" as *;
|
@use "colors" as *;
|
||||||
@use "../../settings" as *;
|
@use "../../settings" as *;
|
||||||
|
@use "../../utils/box-shadow";
|
||||||
@use "../../utils/functions";
|
@use "../../utils/functions";
|
||||||
|
|
||||||
// Default: Light theme
|
// Default: Light theme
|
||||||
@mixin theme {
|
@mixin theme {
|
||||||
#{$✨}background-color: #{$white};
|
#{$✨}background-color: #{$white};
|
||||||
|
|
||||||
// Texts colors
|
// Text color
|
||||||
#{$✨}color: #{$grey-700};
|
#{$✨}color: #{$grey-700};
|
||||||
#{$✨}h1-color: #{$grey-900};
|
|
||||||
#{$✨}h2-color: #{mix($grey-900, $grey-800)};
|
|
||||||
#{$✨}h3-color: #{$grey-800};
|
|
||||||
#{$✨}h4-color: #{mix($grey-800, $grey-700)};
|
|
||||||
#{$✨}h5-color: #{$grey-700};
|
|
||||||
#{$✨}h6-color: #{mix($grey-700, $grey-600)};
|
|
||||||
|
|
||||||
// Muted colors
|
// Muted colors
|
||||||
#{$✨}muted-color: #{$grey-500};
|
#{$✨}muted-color: #{$grey-500};
|
||||||
|
|
@ -37,6 +33,19 @@
|
||||||
#{$✨}contrast-focus: #{rgba($grey-600, 0.125)};
|
#{$✨}contrast-focus: #{rgba($grey-600, 0.125)};
|
||||||
#{$✨}contrast-inverse: #{$white};
|
#{$✨}contrast-inverse: #{$white};
|
||||||
|
|
||||||
|
// Box shadow
|
||||||
|
#{$✨}box-shadow: box-shadow.shadow($grey-900);
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
@if map.get($modules, "content/typography") {
|
||||||
|
// Headings colors
|
||||||
|
#{$✨}h1-color: #{$grey-900};
|
||||||
|
#{$✨}h2-color: #{mix($grey-900, $grey-800)};
|
||||||
|
#{$✨}h3-color: #{$grey-800};
|
||||||
|
#{$✨}h4-color: #{mix($grey-800, $grey-700)};
|
||||||
|
#{$✨}h5-color: #{$grey-700};
|
||||||
|
#{$✨}h6-color: #{mix($grey-700, $grey-600)};
|
||||||
|
|
||||||
// Highlighted text (<mark>)
|
// Highlighted text (<mark>)
|
||||||
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
|
#{$✨}mark-background-color: #{mix($amber-100, $amber-50)};
|
||||||
#{$✨}mark-color: #{mix($grey-900, $amber-900, 75%)};
|
#{$✨}mark-color: #{mix($grey-900, $amber-900, 75%)};
|
||||||
|
|
@ -48,14 +57,36 @@
|
||||||
// Blockquote
|
// Blockquote
|
||||||
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
#{$✨}blockquote-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
#{$✨}blockquote-footer-color: var(#{$✨}muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
|
@if map.get($modules, "content/button") {
|
||||||
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
// To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'
|
||||||
// Don't use, 'none, 'false, 'null', '0', etc.
|
// Don't use, 'none, 'false, 'null', '0', etc.
|
||||||
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
#{$✨}button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table
|
||||||
|
@if map.get($modules, "content/table") {
|
||||||
|
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
||||||
|
#{$✨}table-row-stripped-background-color: #{mix($grey-50, $white)};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Code
|
||||||
|
@if map.get($modules, "content/code") {
|
||||||
|
#{$✨}code-background-color: #{$grey-50};
|
||||||
|
#{$✨}code-color: var(#{$✨}muted-color);
|
||||||
|
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
|
||||||
|
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
|
||||||
|
#{$✨}code-tag-color: #{hsl(330, 40%, 50%)};
|
||||||
|
#{$✨}code-property-color: #{hsl(185, 40%, 40%)};
|
||||||
|
#{$✨}code-value-color: #{hsl(40, 20%, 50%)};
|
||||||
|
#{$✨}code-comment-color: #{$grey-300};
|
||||||
|
}
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
|
@if map.get($modules, "forms/basics") {
|
||||||
#{$✨}form-element-background-color: transparent;
|
#{$✨}form-element-background-color: transparent;
|
||||||
#{$✨}form-element-border-color: #{$grey-300};
|
#{$✨}form-element-border-color: #{$grey-300};
|
||||||
#{$✨}form-element-color: var(#{$✨}color);
|
#{$✨}form-element-color: var(#{$✨}color);
|
||||||
|
|
@ -72,99 +103,109 @@
|
||||||
#{$✨}form-element-valid-border-color: #{$green-700};
|
#{$✨}form-element-valid-border-color: #{$green-700};
|
||||||
#{$✨}form-element-valid-active-border-color: #{$green-600};
|
#{$✨}form-element-valid-active-border-color: #{$green-600};
|
||||||
#{$✨}form-element-valid-focus-color: #{rgba($green-600, 0.125)};
|
#{$✨}form-element-valid-focus-color: #{rgba($green-600, 0.125)};
|
||||||
|
}
|
||||||
|
|
||||||
// Switch (input[type="checkbox"][role="switch"])
|
// Switch (input[type="checkbox"][role="switch"])
|
||||||
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
#{$✨}switch-background-color: #{$grey-200};
|
#{$✨}switch-background-color: #{$grey-200};
|
||||||
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
#{$✨}switch-color: var(#{$✨}primary-inverse);
|
||||||
#{$✨}switch-checked-background-color: var(#{$✨}primary);
|
#{$✨}switch-checked-background-color: var(#{$✨}primary);
|
||||||
|
}
|
||||||
|
|
||||||
// Range (input[type="range"])
|
// Range (input[type="range"])
|
||||||
|
@if map.get($modules, "forms/input-range") {
|
||||||
#{$✨}range-border-color: #{$grey-100};
|
#{$✨}range-border-color: #{$grey-100};
|
||||||
#{$✨}range-active-border-color: #{$grey-200};
|
#{$✨}range-active-border-color: #{$grey-200};
|
||||||
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
#{$✨}range-thumb-border-color: var(#{$✨}background-color);
|
||||||
#{$✨}range-thumb-color: var(#{$✨}secondary);
|
#{$✨}range-thumb-color: var(#{$✨}secondary);
|
||||||
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
|
#{$✨}range-thumb-hover-color: var(#{$✨}secondary-hover);
|
||||||
#{$✨}range-thumb-active-color: var(#{$✨}primary);
|
#{$✨}range-thumb-active-color: var(#{$✨}primary);
|
||||||
|
}
|
||||||
// Table
|
|
||||||
#{$✨}table-border-color: var(#{$✨}muted-border-color);
|
|
||||||
#{$✨}table-row-stripped-background-color: #{mix($grey-50, $white)};
|
|
||||||
|
|
||||||
// Code
|
|
||||||
#{$✨}code-background-color: #{$grey-50};
|
|
||||||
#{$✨}code-color: var(#{$✨}muted-color);
|
|
||||||
#{$✨}code-kbd-background-color: var(#{$✨}contrast);
|
|
||||||
#{$✨}code-kbd-color: var(#{$✨}contrast-inverse);
|
|
||||||
#{$✨}code-tag-color: #{hsl(330, 40%, 50%)};
|
|
||||||
#{$✨}code-property-color: #{hsl(185, 40%, 40%)};
|
|
||||||
#{$✨}code-value-color: #{hsl(40, 20%, 50%)};
|
|
||||||
#{$✨}code-comment-color: #{$grey-300};
|
|
||||||
|
|
||||||
// Accordion (<details>)
|
// Accordion (<details>)
|
||||||
|
@if map.get($modules, "components/accordion") {
|
||||||
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
#{$✨}accordion-border-color: var(#{$✨}muted-border-color);
|
||||||
|
#{$✨}accordion-active-summary-color: var(#{$✨}primary);
|
||||||
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
#{$✨}accordion-close-summary-color: var(#{$✨}color);
|
||||||
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
#{$✨}accordion-open-summary-color: var(#{$✨}muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
$box-shadow-elevation: 1rem;
|
@if map.get($modules, "components/card") {
|
||||||
$box-shadow-blur-strengh: 6rem;
|
|
||||||
$box-shadow-opacity: 0.06;
|
|
||||||
#{$✨}card-background-color: var(#{$✨}background-color);
|
#{$✨}card-background-color: var(#{$✨}background-color);
|
||||||
#{$✨}card-border-color: var(#{$✨}muted-border-color);
|
#{$✨}card-border-color: var(#{$✨}muted-border-color);
|
||||||
#{$✨}card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)}
|
#{$✨}card-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{($box-shadow-blur-strengh * 0.029)} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.067
|
|
||||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.125
|
|
||||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.225
|
|
||||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},
|
|
||||||
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
|
|
||||||
$box-shadow-blur-strengh * 0.417
|
|
||||||
)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
|
|
||||||
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
|
|
||||||
$grey-900,
|
|
||||||
$box-shadow-opacity
|
|
||||||
)},
|
|
||||||
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25))};
|
|
||||||
#{$✨}card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
#{$✨}card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||||
|
}
|
||||||
|
|
||||||
// Dropdown (<details role="list">)
|
// Dropdown (<details role="list">)
|
||||||
|
@if map.get($modules, "components/dropdown") {
|
||||||
#{$✨}dropdown-background-color: #{mix($grey-50, $white, 25%)};
|
#{$✨}dropdown-background-color: #{mix($grey-50, $white, 25%)};
|
||||||
#{$✨}dropdown-border-color: #{mix($grey-100, $grey-50)};
|
#{$✨}dropdown-border-color: #{mix($grey-100, $grey-50)};
|
||||||
#{$✨}dropdown-box-shadow: var(#{$✨}card-box-shadow);
|
#{$✨}dropdown-box-shadow: var(#{$✨}box-shadow);
|
||||||
#{$✨}dropdown-color: var(#{$✨}color);
|
#{$✨}dropdown-color: var(#{$✨}color);
|
||||||
#{$✨}dropdown-hover-background-color: #{$grey-50};
|
#{$✨}dropdown-hover-background-color: #{$grey-50};
|
||||||
|
}
|
||||||
// Modal (<dialog>)
|
|
||||||
#{$✨}modal-overlay-background-color: #{rgba($grey-100, 0.7)};
|
|
||||||
|
|
||||||
// Progress
|
|
||||||
#{$✨}progress-background-color: #{$grey-100};
|
|
||||||
#{$✨}progress-color: var(#{$✨}primary);
|
|
||||||
|
|
||||||
// Loading ([aria-busy=true])
|
// Loading ([aria-busy=true])
|
||||||
|
@if map.get($modules, "components/loading") {
|
||||||
#{$✨}loading-spinner-opacity: 0.5;
|
#{$✨}loading-spinner-opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal (<dialog>)
|
||||||
|
@if map.get($modules, "components/modal") {
|
||||||
|
#{$✨}modal-overlay-background-color: #{rgba($grey-100, 0.7)};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Progress
|
||||||
|
@if map.get($modules, "components/progress") {
|
||||||
|
#{$✨}progress-background-color: #{$grey-100};
|
||||||
|
#{$✨}progress-color: var(#{$✨}primary);
|
||||||
|
}
|
||||||
|
|
||||||
// Tooltip ([data-tooltip])
|
// Tooltip ([data-tooltip])
|
||||||
|
@if map.get($modules, "components/tooltip") {
|
||||||
#{$✨}tooltip-background-color: var(#{$✨}contrast);
|
#{$✨}tooltip-background-color: var(#{$✨}contrast);
|
||||||
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
#{$✨}tooltip-color: var(#{$✨}contrast-inverse);
|
||||||
|
}
|
||||||
|
|
||||||
// Icons
|
// Checkboxes icon
|
||||||
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
#{$✨}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='#{functions.display-rgb($white)}' 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-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='#{functions.display-rgb($white)}' 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-minus: 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='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chevron icons
|
||||||
|
@if map.get($modules, "forms/basic") or
|
||||||
|
map.get($modules, "components/accordion") or
|
||||||
|
map.get($modules, "components/dropdown")
|
||||||
|
{
|
||||||
#{$✨}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='#{functions.display-rgb($grey-700)}' 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: 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='#{functions.display-rgb($grey-700)}' 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='#{functions.display-rgb($white)}' 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='#{functions.display-rgb($white)}' 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='#{functions.display-rgb($white)}' 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='#{functions.display-rgb($white)}' 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='#{functions.display-rgb($grey-500)}' 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");
|
}
|
||||||
|
|
||||||
|
// Datetime icons
|
||||||
|
@if map.get($modules, "input-date") {
|
||||||
#{$✨}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='#{functions.display-rgb($grey-700)}' 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-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='#{functions.display-rgb($grey-700)}' 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='#{functions.display-rgb($red-800)}' 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");
|
|
||||||
#{$✨}icon-minus: 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='#{functions.display-rgb($white)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
#{$✨}icon-search: 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='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
#{$✨}icon-time: 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='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-time: 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='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form validation icons
|
||||||
|
@if map.get($modules, "forms/basic") {
|
||||||
#{$✨}icon-valid: 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='#{functions.display-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
#{$✨}icon-valid: 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='#{functions.display-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%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='#{functions.display-rgb($red-800)}' 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");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search icon
|
||||||
|
@if map.get($modules, "forms/input-search") {
|
||||||
|
#{$✨}icon-search: 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='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close icon
|
||||||
|
@if map.get($modules, "components/modal") {
|
||||||
|
#{$✨}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='#{functions.display-rgb($grey-500)}' 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");
|
||||||
|
}
|
||||||
|
|
||||||
// Document
|
// Document
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
|
|
|
||||||
39
scss/themes/default/_schemes.scss
Normal file
39
scss/themes/default/_schemes.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
@use "sass:map";
|
||||||
|
@use "../../settings" as *;
|
||||||
|
|
||||||
|
@use "light";
|
||||||
|
@use "dark";
|
||||||
|
|
||||||
|
@if map.get($modules, "themes/default") {
|
||||||
|
/**
|
||||||
|
* Color schemes
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Light color scheme (Default)
|
||||||
|
// Can be forced with data-theme="light"
|
||||||
|
[data-theme="light"],
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
@include light.theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dark color scheme (Auto)
|
||||||
|
// Automatically enabled if user has Dark mode enabled
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]) {
|
||||||
|
@include dark.theme;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dark color scheme (Forced)
|
||||||
|
// Enabled if forced with data-theme="dark"
|
||||||
|
[data-theme="dark"] {
|
||||||
|
@include dark.theme;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress,
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"],
|
||||||
|
[type="range"] {
|
||||||
|
accent-color: var(#{$✨}primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,12 @@
|
||||||
@use "sass:map";
|
@use "sass:map";
|
||||||
@use "../../settings" as *;
|
@use "../../settings" as *;
|
||||||
|
|
||||||
// Commons Styles:
|
@if map.get($modules, "themes/default") {
|
||||||
:root {
|
/**
|
||||||
|
* Styles
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
// Typography
|
// Typography
|
||||||
#{$✨}font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
|
#{$✨}font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell",
|
||||||
"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||||
|
|
@ -27,44 +31,61 @@
|
||||||
#{$✨}border-width: 1px;
|
#{$✨}border-width: 1px;
|
||||||
#{$✨}outline-width: 3px;
|
#{$✨}outline-width: 3px;
|
||||||
|
|
||||||
|
// Transitions
|
||||||
|
#{$✨}transition: 0.2s ease-in-out;
|
||||||
|
|
||||||
// Spacings
|
// Spacings
|
||||||
#{$✨}spacing: 1rem;
|
#{$✨}spacing: 1rem;
|
||||||
|
|
||||||
// Spacings for typography elements
|
// Spacings for typography elements
|
||||||
|
@if map.get($modules, "content/typography") {
|
||||||
#{$✨}typography-spacing-vertical: 1.5rem;
|
#{$✨}typography-spacing-vertical: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
// Spacings for body > header, body > main, body > footer, section, article
|
// Spacings for body > header, body > main, body > footer, section, article
|
||||||
|
@if map.get($modules, "layout/landmarks") or
|
||||||
|
map.get($modules, "layout/section") or
|
||||||
|
map.get($modules, "components/card") or
|
||||||
|
map.get($modules, "components/modal")
|
||||||
|
{
|
||||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||||
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||||
|
}
|
||||||
|
|
||||||
@if ($enable-classes and $enable-grid) {
|
@if map.get($modules, "layout/grid") and $enable-classes {
|
||||||
#{$✨}grid-spacing-vertical: 0;
|
#{$✨}grid-spacing-vertical: 0;
|
||||||
#{$✨}grid-spacing-horizontal: var(#{$✨}spacing);
|
#{$✨}grid-spacing-horizontal: var(#{$✨}spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Spacings for form elements and button
|
// Spacings for form elements and button
|
||||||
|
@if map.get($modules, "content/button") or map.get($modules, "forms/basic") {
|
||||||
#{$✨}form-element-spacing-vertical: 0.75rem;
|
#{$✨}form-element-spacing-vertical: 0.75rem;
|
||||||
#{$✨}form-element-spacing-horizontal: 1rem;
|
#{$✨}form-element-spacing-horizontal: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Font weight for form labels & fieldsets legend
|
||||||
|
@if map.get($modules, "forms/basic") {
|
||||||
|
#{$✨}form-label-font-weight: var(#{$✨}font-weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modal (<dialog>)
|
||||||
|
@if map.get($modules, "components/modal") {
|
||||||
|
#{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
|
||||||
|
}
|
||||||
|
|
||||||
// Spacings for nav component
|
// Spacings for nav component
|
||||||
|
@if map.get($modules, "components/nav") {
|
||||||
#{$✨}nav-element-spacing-vertical: 1rem;
|
#{$✨}nav-element-spacing-vertical: 1rem;
|
||||||
#{$✨}nav-element-spacing-horizontal: 0.5rem;
|
#{$✨}nav-element-spacing-horizontal: 0.5rem;
|
||||||
#{$✨}nav-link-spacing-vertical: 0.5rem;
|
#{$✨}nav-link-spacing-vertical: 0.5rem;
|
||||||
#{$✨}nav-link-spacing-horizontal: 0.5rem;
|
#{$✨}nav-link-spacing-horizontal: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Font weight for form labels & fieldsets legend
|
// Responsives spacings
|
||||||
#{$✨}form-label-font-weight: var(#{$✨}font-weight);
|
@if $enable-responsive-spacings {
|
||||||
|
// Landmarks and section
|
||||||
// Transitions
|
@if map.get($modules, "layout/landmarks") or map.get($modules, "layout/section") {
|
||||||
#{$✨}transition: 0.2s ease-in-out;
|
|
||||||
|
|
||||||
// Modal (<dialog>)
|
|
||||||
#{$✨}modal-overlay-backdrop-filter: blur(0.25rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Responsives spacings
|
|
||||||
@if $enable-responsive-spacings {
|
|
||||||
// Sectioning
|
|
||||||
#{$semantic-root-element} > header,
|
#{$semantic-root-element} > header,
|
||||||
#{$semantic-root-element} > main,
|
#{$semantic-root-element} > main,
|
||||||
#{$semantic-root-element} > footer,
|
#{$semantic-root-element} > footer,
|
||||||
|
|
@ -87,8 +108,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
|
@if map.get($modules, "components/card") {
|
||||||
article {
|
article {
|
||||||
@each $key, $values in $breakpoints {
|
@each $key, $values in $breakpoints {
|
||||||
@if $values {
|
@if $values {
|
||||||
|
|
@ -108,8 +131,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Modal
|
// Modal
|
||||||
|
@if map.get($modules, "components/modal") {
|
||||||
dialog > article {
|
dialog > article {
|
||||||
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
#{$✨}block-spacing-vertical: calc(var(#{$✨}spacing) * 2);
|
||||||
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
#{$✨}block-spacing-horizontal: var(#{$✨}spacing);
|
||||||
|
|
@ -128,10 +153,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Link
|
// Link
|
||||||
a {
|
@if map.get($modules, "content/link") {
|
||||||
|
a {
|
||||||
#{$✨}text-decoration: none;
|
#{$✨}text-decoration: none;
|
||||||
|
|
||||||
// Secondary & Contrast
|
// Secondary & Contrast
|
||||||
|
|
@ -141,81 +168,92 @@ a {
|
||||||
#{$✨}text-decoration: underline;
|
#{$✨}text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Small
|
// Typography
|
||||||
small {
|
@if map.get($modules, "content/typography") {
|
||||||
|
// Small
|
||||||
|
small {
|
||||||
#{$✨}font-size: 0.875em;
|
#{$✨}font-size: 0.875em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headings
|
// Headings
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
#{$✨}font-weight: 700;
|
#{$✨}font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
#{$✨}font-size: 2rem;
|
#{$✨}font-size: 2rem;
|
||||||
#{$✨}typography-spacing-vertical: 3rem;
|
#{$✨}typography-spacing-vertical: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
#{$✨}font-size: 1.75rem;
|
#{$✨}font-size: 1.75rem;
|
||||||
#{$✨}typography-spacing-vertical: 2.625rem;
|
#{$✨}typography-spacing-vertical: 2.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
#{$✨}font-size: 1.5rem;
|
#{$✨}font-size: 1.5rem;
|
||||||
#{$✨}typography-spacing-vertical: 2.25rem;
|
#{$✨}typography-spacing-vertical: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
#{$✨}font-size: 1.25rem;
|
#{$✨}font-size: 1.25rem;
|
||||||
#{$✨}typography-spacing-vertical: 1.874rem;
|
#{$✨}typography-spacing-vertical: 1.874rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
#{$✨}font-size: 1.125rem;
|
#{$✨}font-size: 1.125rem;
|
||||||
#{$✨}typography-spacing-vertical: 1.6875rem;
|
#{$✨}typography-spacing-vertical: 1.6875rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Forms elements
|
// Table
|
||||||
[type="checkbox"],
|
@if map.get($modules, "content/table") {
|
||||||
[type="radio"] {
|
thead,
|
||||||
#{$✨}border-width: 2px;
|
tfoot {
|
||||||
}
|
|
||||||
|
|
||||||
[type="checkbox"][role="switch"] {
|
|
||||||
#{$✨}border-width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Table
|
|
||||||
thead,
|
|
||||||
tfoot {
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
#{$✨}border-width: 3px;
|
#{$✨}border-width: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(thead, tfoot) > * > td {
|
:not(thead, tfoot) > * > td {
|
||||||
#{$✨}font-size: 0.875em;
|
#{$✨}font-size: 0.875em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Code
|
// Code
|
||||||
pre,
|
@if map.get($modules, "content/code") {
|
||||||
code,
|
pre,
|
||||||
kbd,
|
code,
|
||||||
samp {
|
kbd,
|
||||||
|
samp {
|
||||||
#{$✨}font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono",
|
#{$✨}font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono",
|
||||||
"Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji",
|
"Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji",
|
||||||
"Segoe UI Symbol", "Noto Color Emoji";
|
"Segoe UI Symbol", "Noto Color Emoji";
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
#{$✨}font-weight: bolder;
|
#{$✨}font-weight: bolder;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Checkboxes, Radios and Switches
|
||||||
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
#{$✨}border-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="checkbox"][role="switch"] {
|
||||||
|
#{$✨}border-width: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,52 +1,57 @@
|
||||||
/**
|
@use "sass:map";
|
||||||
|
@use "../settings" as *;
|
||||||
|
|
||||||
|
@if map.get($modules, "utilities/accessibility") {
|
||||||
|
/**
|
||||||
* Accessibility & User interaction
|
* Accessibility & User interaction
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Based on :
|
// Based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Accessibility
|
// Accessibility
|
||||||
|
|
||||||
// Change the cursor on control elements in all browsers (opinionated)
|
// Change the cursor on control elements in all browsers (opinionated)
|
||||||
[aria-controls] {
|
[aria-controls] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
|
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
|
||||||
[aria-disabled="true"],
|
[aria-disabled="true"],
|
||||||
[disabled] {
|
[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Change the display on visually hidden accessible elements in all browsers (opinionated)
|
// Change the display on visually hidden accessible elements in all browsers (opinionated)
|
||||||
[aria-hidden="false"][hidden] {
|
[aria-hidden="false"][hidden] {
|
||||||
display: initial;
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
[aria-hidden="false"][hidden]:not(:focus) {
|
[aria-hidden="false"][hidden]:not(:focus) {
|
||||||
clip: rect(0, 0, 0, 0);
|
clip: rect(0, 0, 0, 0);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
// User interaction
|
// User interaction
|
||||||
// Remove the tapping delay in IE 10
|
// Remove the tapping delay in IE 10
|
||||||
a,
|
a,
|
||||||
area,
|
area,
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
label,
|
label,
|
||||||
select,
|
select,
|
||||||
summary,
|
summary,
|
||||||
textarea,
|
textarea,
|
||||||
[tabindex] {
|
[tabindex] {
|
||||||
-ms-touch-action: manipulation;
|
-ms-touch-action: manipulation;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
[dir="rtl"] {
|
[dir="rtl"] {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
|
@use "sass:map";
|
||||||
@use "../settings" as *;
|
@use "../settings" as *;
|
||||||
|
|
||||||
@if enable-transitions and enable-important {
|
@if map.get($modules, "utilities/reduce-motion") and enable-transitions and enable-important {
|
||||||
/**
|
/**
|
||||||
* Reduce Motion Features
|
* Reduce Motion Features
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
25
scss/utils/_box-shadow.scss
Normal file
25
scss/utils/_box-shadow.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
@function shadow($color) {
|
||||||
|
$box-shadow-elevation: 1rem;
|
||||||
|
$box-shadow-blur-strengh: 6rem;
|
||||||
|
$box-shadow-opacity: 0.06;
|
||||||
|
@return #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
|
||||||
|
$box-shadow-blur-strengh * 0.029
|
||||||
|
)} #{rgba($color, ($box-shadow-opacity * 0.283))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
|
||||||
|
$box-shadow-blur-strengh * 0.067
|
||||||
|
)} #{rgba($color, ($box-shadow-opacity * 0.4))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
|
||||||
|
$box-shadow-blur-strengh * 0.125
|
||||||
|
)} #{rgba($color, ($box-shadow-opacity * 0.5))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
|
||||||
|
$box-shadow-blur-strengh * 0.225
|
||||||
|
)} #{rgba($color, ($box-shadow-opacity * 0.6))},
|
||||||
|
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
|
||||||
|
$box-shadow-blur-strengh * 0.417
|
||||||
|
)} #{rgba($color, ($box-shadow-opacity * 0.717))},
|
||||||
|
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
|
||||||
|
$color,
|
||||||
|
$box-shadow-opacity
|
||||||
|
)},
|
||||||
|
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue