mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 09:56:14 -04:00
Lucas Larroche
GitHub
commit
502ff46d5c
57 changed files with 3443 additions and 2062 deletions
24
README.md
24
README.md
|
|
@ -53,11 +53,19 @@ npm install @picocss/pico
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
|
Minimalist templates to discover Pico in action:
|
||||||
|
|
||||||
[](https://picocss.com/#examples)
|
[](https://picocss.com/#examples)
|
||||||
|
|
||||||
|
- **[Preview](https://picocss.com/examples/preview/)**
|
||||||
|
A starter example with all elements and components used in Pico
|
||||||
|
|
||||||
- **[Class-less](https://picocss.com/examples/classless/)**
|
- **[Class-less](https://picocss.com/examples/classless/)**
|
||||||
Just a pure semantic HTML markup, without `.classes`
|
Just a pure semantic HTML markup, without `.classes`
|
||||||
|
|
||||||
|
- **[Basic template](https://picocss.com/examples/basic-template/)**
|
||||||
|
A basic custom template for Pico using only CSS custom properties (variables)
|
||||||
|
|
||||||
- **[Company](https://picocss.com/examples/company/)**
|
- **[Company](https://picocss.com/examples/company/)**
|
||||||
A classic company or blog layout with a sidebar
|
A classic company or blog layout with a sidebar
|
||||||
|
|
||||||
|
|
@ -67,9 +75,6 @@ npm install @picocss/pico
|
||||||
- **[Sign in](https://picocss.com/examples/sign-in/)**
|
- **[Sign in](https://picocss.com/examples/sign-in/)**
|
||||||
A minimalist layout for Login pages
|
A minimalist layout for Login pages
|
||||||
|
|
||||||
- **[Form elements](https://picocss.com/examples/form-elements/)**
|
|
||||||
Semantic HTML form markup, without any `.classes` or `JavaScript`
|
|
||||||
|
|
||||||
- **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
|
- **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)**
|
||||||
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
|
Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico
|
||||||
|
|
||||||
|
|
@ -101,15 +106,6 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
|
||||||
|
|
||||||
## Copyright and license
|
## Copyright and license
|
||||||
|
|
||||||
- Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md)
|
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
|
||||||
- Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
|
|
||||||
- Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free))
|
|
||||||
|
|
||||||
Openly inspired by:
|
Openly inspired by: [Bootstrap](https://github.com/twbs/bootstrap), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/), [Sanitize](https://csstools.github.io/sanitize.css/), [Spectre](https://github.com/picturepan2/spectre), [Wing](https://github.com/kbrsh/wing/).
|
||||||
|
|
||||||
- [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE))
|
|
||||||
- [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE))
|
|
||||||
- [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE))
|
|
||||||
- [CSS Bed](https://github.com/ubershmekel/cssbed)
|
|
||||||
- [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
|
|
||||||
- [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md))
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
4
css/pico.classless.min.css
vendored
4
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
702
css/pico.css
702
css/pico.css
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
4
css/pico.fluid.classless.min.css
vendored
4
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
4
css/pico.min.css
vendored
4
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.1.0 (https://picocss.com)
|
* Pico.css v1.2.0 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*
|
*
|
||||||
* Slim version example
|
* Slim version example
|
||||||
|
|
@ -8,6 +8,61 @@
|
||||||
/**
|
/**
|
||||||
* Theme: default
|
* Theme: default
|
||||||
*/
|
*/
|
||||||
|
:root {
|
||||||
|
--text-font: 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";
|
||||||
|
--titles-font: var(--text-font);
|
||||||
|
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--line-height: 1.5;
|
||||||
|
--text-weight: 400;
|
||||||
|
--titles-weight: 700;
|
||||||
|
--form-element-weight: var(--text-weight);
|
||||||
|
--buttons-weight: var(--text-weight);
|
||||||
|
--code-weight: var(--text-weight);
|
||||||
|
--base-font-xs: 16px;
|
||||||
|
--base-font-sm: 17px;
|
||||||
|
--base-font-md: 18px;
|
||||||
|
--base-font-lg: 19px;
|
||||||
|
--base-font-xl: 20px;
|
||||||
|
--h1-size: 2rem;
|
||||||
|
--h2-size: 1.75rem;
|
||||||
|
--h3-size: 1.5rem;
|
||||||
|
--h4-size: 1.25rem;
|
||||||
|
--h5-size: 1.125rem;
|
||||||
|
--block-round: .25rem;
|
||||||
|
--form-element-border-width: 1px;
|
||||||
|
--form-element-outline-width: 3px;
|
||||||
|
--checkbox-radio-border-width: 2px;
|
||||||
|
--switch-border-width: 3px;
|
||||||
|
--form-element-spacing-vertical: .75rem;
|
||||||
|
--form-element-spacing-horizontal: 1rem;
|
||||||
|
--button-round: var(--block-round);
|
||||||
|
--button-border-width: var(--form-element-border-width);
|
||||||
|
--button-outline-width: var(--form-element-outline-width);
|
||||||
|
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||||
|
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||||
|
--spacing-gutter: 1rem;
|
||||||
|
--spacing-block: 2rem;
|
||||||
|
--spacing-factor-xs: 1;
|
||||||
|
--spacing-factor-sm: 1.25;
|
||||||
|
--spacing-factor-md: 1.5;
|
||||||
|
--spacing-factor-lg: 1.75;
|
||||||
|
--spacing-factor-xl: 2;
|
||||||
|
--spacing-typography: 1.5rem;
|
||||||
|
--spacing-form-element: .25rem;
|
||||||
|
--transition: .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-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='%23FFF' 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-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='rgba(40, 138, 106, 0.999)' 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='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme="light"],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
--background: #FFF;
|
--background: #FFF;
|
||||||
|
|
@ -19,24 +74,34 @@
|
||||||
--h5: #73828c;
|
--h5: #73828c;
|
||||||
--h6: #8a99a3;
|
--h6: #8a99a3;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
|
--primary-border: var(--primary);
|
||||||
--primary-hover: #08769b;
|
--primary-hover: #08769b;
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||||
--primary-inverse: #FFF;
|
--primary-inverse: #FFF;
|
||||||
--secondary: #73828c;
|
--secondary: #73828c;
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
--secondary-hover: #415462;
|
--secondary-hover: #415462;
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #FFF;
|
||||||
--contrast: #2c3d49;
|
--contrast: #2c3d49;
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
--contrast-hover: #0d1419;
|
--contrast-hover: #0d1419;
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
--contrast-focus: rgba(115, 130, 140, 0.125);
|
--contrast-focus: rgba(115, 130, 140, 0.125);
|
||||||
--contrast-border: rgba(255, 223, 128, 0.5);
|
|
||||||
--contrast-border-h: #ffdf80;
|
|
||||||
--contrast-inverse: #FFF;
|
--contrast-inverse: #FFF;
|
||||||
--input-background: #FFF;
|
--input-background: #FFF;
|
||||||
--input-border: #c8d1d8;
|
--input-border: #c8d1d8;
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
--valid: #288a6a;
|
--valid: #288a6a;
|
||||||
--invalid: #b94646;
|
--invalid: #b94646;
|
||||||
--mark: rgba(255, 223, 128, 0.5);
|
--mark: rgba(255, 223, 128, 0.33);
|
||||||
--mark-text: #2c3d49;
|
--mark-text: #2c3d49;
|
||||||
--muted-text: #7e8d98;
|
--muted-text: #7e8d98;
|
||||||
--muted-background: #edf0f3;
|
--muted-background: #edf0f3;
|
||||||
|
|
@ -52,7 +117,7 @@
|
||||||
--code-color-4: #998866;
|
--code-color-4: #998866;
|
||||||
--code-color-5: #96a4ae;
|
--code-color-5: #96a4ae;
|
||||||
--table-border: rgba(237, 240, 243, 0.75);
|
--table-border: rgba(237, 240, 243, 0.75);
|
||||||
--table-stripping: rgba(115, 130, 140, 0.04);
|
--table-stripping: rgba(115, 130, 140, 0.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
|
@ -66,27 +131,37 @@
|
||||||
--h5: #8a99a3;
|
--h5: #8a99a3;
|
||||||
--h6: #73828c;
|
--h6: #73828c;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
|
--primary-border: var(--primary);
|
||||||
--primary-hover: #1ab3e6;
|
--primary-hover: #1ab3e6;
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
--primary-inverse: #FFF;
|
--primary-inverse: #FFF;
|
||||||
--secondary: #596b78;
|
--secondary: #596b78;
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
--secondary-hover: #73828c;
|
--secondary-hover: #73828c;
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #FFF;
|
||||||
--contrast: #d5dce2;
|
--contrast: #d5dce2;
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #FFF;
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||||
--contrast-border: rgba(255, 223, 128, 0.33);
|
|
||||||
--contrast-border-h: rgba(255, 223, 128, 0.5);
|
|
||||||
--contrast-inverse: #10181e;
|
--contrast-inverse: #10181e;
|
||||||
--input-background: #10181e;
|
--input-background: #10181e;
|
||||||
--input-border: #374956;
|
--input-border: #374956;
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
--valid: #1f7a5c;
|
--valid: #1f7a5c;
|
||||||
--invalid: #943838;
|
--invalid: #943838;
|
||||||
--mark: rgba(255, 223, 128, 0.5);
|
--mark: rgba(255, 223, 128, 0.1875);
|
||||||
--mark-text: #FFF;
|
--mark-text: #FFF;
|
||||||
--muted-text: #73828c;
|
--muted-text: #73828c;
|
||||||
--muted-background: #10181e;
|
--muted-background: #23333e;
|
||||||
--muted-border: #23333e;
|
--muted-border: #23333e;
|
||||||
--card-background: #17232b;
|
--card-background: #17232b;
|
||||||
--card-sections: #141d24;
|
--card-sections: #141d24;
|
||||||
|
|
@ -98,8 +173,8 @@
|
||||||
--code-color-3: #599fa6;
|
--code-color-3: #599fa6;
|
||||||
--code-color-4: #8c8473;
|
--code-color-4: #8c8473;
|
||||||
--code-color-5: #4d606d;
|
--code-color-5: #4d606d;
|
||||||
--table-border: rgba(115, 130, 140, 0.06);
|
--table-border: rgba(115, 130, 140, 0.075);
|
||||||
--table-stripping: rgba(115, 130, 140, 0.02);
|
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -113,26 +188,37 @@
|
||||||
--h5: #8a99a3;
|
--h5: #8a99a3;
|
||||||
--h6: #73828c;
|
--h6: #73828c;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
|
--primary-border: var(--primary);
|
||||||
--primary-hover: #1ab3e6;
|
--primary-hover: #1ab3e6;
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
--primary-inverse: #FFF;
|
--primary-inverse: #FFF;
|
||||||
--secondary: #596b78;
|
--secondary: #596b78;
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
--secondary-hover: #73828c;
|
--secondary-hover: #73828c;
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #FFF;
|
||||||
--contrast: #d5dce2;
|
--contrast: #d5dce2;
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #FFF;
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||||
--contrast-border: rgba(255, 223, 128, 0.33);
|
|
||||||
--contrast-inverse: #10181e;
|
--contrast-inverse: #10181e;
|
||||||
--input-background: #10181e;
|
--input-background: #10181e;
|
||||||
--input-border: #374956;
|
--input-border: #374956;
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
--valid: #1f7a5c;
|
--valid: #1f7a5c;
|
||||||
--invalid: #943838;
|
--invalid: #943838;
|
||||||
--mark: rgba(255, 223, 128, 0.5);
|
--mark: rgba(255, 223, 128, 0.1875);
|
||||||
--mark-text: #FFF;
|
--mark-text: #FFF;
|
||||||
--muted-text: #73828c;
|
--muted-text: #73828c;
|
||||||
--muted-background: #10181e;
|
--muted-background: #23333e;
|
||||||
--muted-border: #23333e;
|
--muted-border: #23333e;
|
||||||
--card-background: #17232b;
|
--card-background: #17232b;
|
||||||
--card-sections: #141d24;
|
--card-sections: #141d24;
|
||||||
|
|
@ -144,8 +230,8 @@
|
||||||
--code-color-3: #599fa6;
|
--code-color-3: #599fa6;
|
||||||
--code-color-4: #8c8473;
|
--code-color-4: #8c8473;
|
||||||
--code-color-5: #4d606d;
|
--code-color-5: #4d606d;
|
||||||
--table-border: rgba(115, 130, 140, 0.06);
|
--table-border: rgba(115, 130, 140, 0.075);
|
||||||
--table-stripping: rgba(115, 130, 140, 0.02);
|
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -172,35 +258,35 @@ html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
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";
|
font-family: var(--text-font);
|
||||||
font-size: 16px;
|
font-size: var(--base-font-xs);
|
||||||
font-weight: 400;
|
font-weight: var(--text-weight);
|
||||||
line-height: 1.5;
|
line-height: var(--line-height);
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
html {
|
html {
|
||||||
font-size: 17px;
|
font-size: var(--base-font-sm);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
html {
|
html {
|
||||||
font-size: 18px;
|
font-size: var(--base-font-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
html {
|
html {
|
||||||
font-size: 19px;
|
font-size: var(--base-font-lg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
html {
|
html {
|
||||||
font-size: 20px;
|
font-size: var(--base-font-xl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -223,7 +309,7 @@ body > footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding: 2rem 0;
|
padding: var(--spacing-block) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -234,8 +320,8 @@ body > footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-right: 1rem;
|
padding-right: var(--spacing-gutter);
|
||||||
padding-left: 1rem;
|
padding-left: var(--spacing-gutter);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -269,8 +355,8 @@ body > footer {
|
||||||
* Minimal grid system with auto-layout columns
|
* Minimal grid system with auto-layout columns
|
||||||
*/
|
*/
|
||||||
.grid {
|
.grid {
|
||||||
grid-column-gap: 1rem;
|
grid-column-gap: var(--spacing-gutter);
|
||||||
grid-row-gap: 1rem;
|
grid-row-gap: var(--spacing-gutter);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -297,7 +383,7 @@ figure {
|
||||||
}
|
}
|
||||||
|
|
||||||
figure figcaption {
|
figure figcaption {
|
||||||
padding: 0.5rem 0;
|
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -351,7 +437,7 @@ pre,
|
||||||
table,
|
table,
|
||||||
ul {
|
ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -375,6 +461,7 @@ a:focus {
|
||||||
|
|
||||||
a.secondary {
|
a.secondary {
|
||||||
color: var(--secondary);
|
color: var(--secondary);
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
||||||
|
|
@ -385,18 +472,16 @@ a.secondary:focus {
|
||||||
background-color: var(--secondary-focus);
|
background-color: var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.contrast:not([role="button"]) {
|
a.contrast {
|
||||||
box-shadow: inset 0 -0.33rem 0 var(--contrast-border);
|
|
||||||
color: var(--contrast);
|
color: var(--contrast);
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
|
a.contrast:hover, a.contrast:active, a.contrast:focus {
|
||||||
box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
|
|
||||||
color: var(--contrast-hover);
|
color: var(--contrast-hover);
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a.contrast:not([role="button"]):focus {
|
a.contrast:focus {
|
||||||
background-color: var(--contrast-focus);
|
background-color: var(--contrast-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -407,43 +492,44 @@ h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
font-weight: 700;
|
font-family: var(--titles-font);
|
||||||
|
font-weight: var(--titles-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: 3rem;
|
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||||
color: var(--h1);
|
color: var(--h1);
|
||||||
font-size: 2rem;
|
font-size: var(--h1-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 2.625rem;
|
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||||
color: var(--h2);
|
color: var(--h2);
|
||||||
font-size: 1.75rem;
|
font-size: var(--h2-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-bottom: 2.25rem;
|
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||||
color: var(--h3);
|
color: var(--h3);
|
||||||
font-size: 1.5rem;
|
font-size: var(--h3-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
margin-bottom: 1.875rem;
|
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||||
color: var(--h4);
|
color: var(--h4);
|
||||||
font-size: 1.25rem;
|
font-size: var(--h4-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
margin-bottom: 1.6875rem;
|
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||||
color: var(--h5);
|
color: var(--h5);
|
||||||
font-size: 1.125rem;
|
font-size: var(--h5-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
color: var(--h6);
|
color: var(--h6);
|
||||||
font-size: 1rem;
|
font-size: var(--h6-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h1,
|
address ~ h1,
|
||||||
|
|
@ -456,7 +542,7 @@ p ~ h1,
|
||||||
pre ~ h1,
|
pre ~ h1,
|
||||||
table ~ h1,
|
table ~ h1,
|
||||||
ul ~ h1 {
|
ul ~ h1 {
|
||||||
margin-top: 3rem;
|
margin-top: calc(var(--spacing-typography) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h2,
|
address ~ h2,
|
||||||
|
|
@ -469,7 +555,7 @@ p ~ h2,
|
||||||
pre ~ h2,
|
pre ~ h2,
|
||||||
table ~ h2,
|
table ~ h2,
|
||||||
ul ~ h2 {
|
ul ~ h2 {
|
||||||
margin-top: 2.625rem;
|
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h3,
|
address ~ h3,
|
||||||
|
|
@ -482,7 +568,7 @@ p ~ h3,
|
||||||
pre ~ h3,
|
pre ~ h3,
|
||||||
table ~ h3,
|
table ~ h3,
|
||||||
ul ~ h3 {
|
ul ~ h3 {
|
||||||
margin-top: 2.25rem;
|
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h4,
|
address ~ h4,
|
||||||
|
|
@ -495,7 +581,7 @@ p ~ h4,
|
||||||
pre ~ h4,
|
pre ~ h4,
|
||||||
table ~ h4,
|
table ~ h4,
|
||||||
ul ~ h4 {
|
ul ~ h4 {
|
||||||
margin-top: 1.875rem;
|
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h5,
|
address ~ h5,
|
||||||
|
|
@ -508,7 +594,7 @@ p ~ h5,
|
||||||
pre ~ h5,
|
pre ~ h5,
|
||||||
table ~ h5,
|
table ~ h5,
|
||||||
ul ~ h5 {
|
ul ~ h5 {
|
||||||
margin-top: 1.6875rem;
|
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
address ~ h6,
|
address ~ h6,
|
||||||
|
|
@ -521,11 +607,11 @@ p ~ h6,
|
||||||
pre ~ h6,
|
pre ~ h6,
|
||||||
table ~ h6,
|
table ~ h6,
|
||||||
ul ~ h6 {
|
ul ~ h6 {
|
||||||
margin-top: 1.5rem;
|
margin-top: calc(var(--spacing-typography));
|
||||||
}
|
}
|
||||||
|
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
hgroup * {
|
hgroup * {
|
||||||
|
|
@ -534,12 +620,13 @@ hgroup * {
|
||||||
|
|
||||||
hgroup > *:last-child {
|
hgroup > *:last-child {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
font-family: unset;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: normal;
|
font-weight: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
|
|
@ -572,12 +659,12 @@ small {
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
padding-left: 1.5rem;
|
padding-left: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li,
|
ul li,
|
||||||
ol li {
|
ol li {
|
||||||
margin-bottom: 0.375rem;
|
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li {
|
ul li {
|
||||||
|
|
@ -593,13 +680,13 @@ mark {
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 3rem 0;
|
margin: var(--spacing-typography) 0;
|
||||||
padding: 1rem;
|
padding: var(--spacing-gutter);
|
||||||
border-left: 0.25rem solid var(--muted-border);
|
border-left: 0.25rem solid var(--muted-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
margin-top: 0.75rem;
|
margin-top: calc(var(--spacing-typography) / 2);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -690,7 +777,7 @@ button::-moz-focus-inner,
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
|
|
@ -701,17 +788,19 @@ a[role="button"] {
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
[type="file"]::-webkit-file-upload-button,
|
[type="file"]::-webkit-file-upload-button,
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
padding: 0.75rem 1rem;
|
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||||
border: 1px solid transparent;
|
border: var(--button-border-width) solid var(--primary-border);
|
||||||
border-radius: 0.25rem;
|
border-radius: var(--button-round);
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
|
box-shadow: var(--button-shadow);
|
||||||
color: var(--primary-inverse);
|
color: var(--primary-inverse);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: var(--buttons-weight);
|
||||||
line-height: 1.5;
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -723,21 +812,27 @@ input[type="submit"]:focus,
|
||||||
input[type="button"]:hover,
|
input[type="button"]:hover,
|
||||||
input[type="button"]:active,
|
input[type="button"]:active,
|
||||||
input[type="button"]:focus,
|
input[type="button"]:focus,
|
||||||
|
input[type="reset"]:hover,
|
||||||
|
input[type="reset"]:active,
|
||||||
|
input[type="reset"]:focus,
|
||||||
[type="file"]::-webkit-file-upload-button:hover,
|
[type="file"]::-webkit-file-upload-button:hover,
|
||||||
[type="file"]::-webkit-file-upload-button:active,
|
[type="file"]::-webkit-file-upload-button:active,
|
||||||
[type="file"]::-webkit-file-upload-button:focus,
|
[type="file"]::-webkit-file-upload-button:focus,
|
||||||
a[role="button"]:hover,
|
a[role="button"]:hover,
|
||||||
a[role="button"]:active,
|
a[role="button"]:active,
|
||||||
a[role="button"]:focus {
|
a[role="button"]:focus {
|
||||||
|
border-color: var(--primary-hover-border);
|
||||||
background-color: var(--primary-hover);
|
background-color: var(--primary-hover);
|
||||||
|
box-shadow: var(--button-hover-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:focus,
|
button:focus,
|
||||||
input[type="submit"]:focus,
|
input[type="submit"]:focus,
|
||||||
input[type="button"]:focus,
|
input[type="button"]:focus,
|
||||||
|
input[type="reset"]:focus,
|
||||||
[type="file"]::-webkit-file-upload-button:focus,
|
[type="file"]::-webkit-file-upload-button:focus,
|
||||||
a[role="button"]:focus {
|
a[role="button"]:focus {
|
||||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="reset"] {
|
input[type="reset"] {
|
||||||
|
|
@ -764,7 +859,7 @@ textarea {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
letter-spacing: inherit;
|
letter-spacing: inherit;
|
||||||
line-height: 1.5;
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -776,7 +871,6 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
display: table;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -838,12 +932,12 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||||
height: calc(1.5rem + 1.5rem + 2px);
|
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -851,7 +945,7 @@ fieldset {
|
||||||
label,
|
label,
|
||||||
fieldset legend {
|
fieldset legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: var(--spacing-form-element);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -869,19 +963,19 @@ textarea {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: 0.75rem 1rem;
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
border: 1px solid var(--input-border);
|
border: var(--form-element-border-width) solid var(--input-border);
|
||||||
border-radius: 0.25rem;
|
border-radius: var(--block-round);
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--input-background);
|
background-color: var(--input-background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-weight: normal;
|
font-weight: var(--form-element-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
input::placeholder, input::-webkit-input-placeholder,
|
input::placeholder, input::-webkit-input-placeholder,
|
||||||
|
|
@ -898,7 +992,8 @@ select:active,
|
||||||
select:focus,
|
select:focus,
|
||||||
textarea:active,
|
textarea:active,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border-color: var(--primary);
|
border-color: var(--input-hover-border);
|
||||||
|
background-color: var(--input-hover-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[readonly], input[disabled],
|
input[readonly], input[disabled],
|
||||||
|
|
@ -918,6 +1013,18 @@ textarea[disabled] ~ label {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus,
|
||||||
|
select[readonly]:active,
|
||||||
|
select[readonly]:focus,
|
||||||
|
select[disabled]:active,
|
||||||
|
select[disabled]:focus,
|
||||||
|
textarea[readonly]:active,
|
||||||
|
textarea[readonly]:focus,
|
||||||
|
textarea[disabled]:active,
|
||||||
|
textarea[disabled]:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
|
input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
|
||||||
select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
|
select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
|
||||||
textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||||
|
|
@ -927,20 +1034,19 @@ textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"])
|
||||||
input[disabled],
|
input[disabled],
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled] {
|
textarea[disabled] {
|
||||||
cursor: not-allowed;
|
opacity: .66;
|
||||||
opacity: .5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="radio"]),
|
input:not([type="checkbox"]):not([type="radio"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type="range"]):not([type="file"]):focus,
|
input:not([type="range"]):not([type="file"]):focus,
|
||||||
select:focus,
|
select:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
select::-ms-expand {
|
select::-ms-expand {
|
||||||
|
|
@ -949,8 +1055,8 @@ select::-ms-expand {
|
||||||
}
|
}
|
||||||
|
|
||||||
select:not([multiple]):not([size]) {
|
select:not([multiple]):not([size]) {
|
||||||
padding-right: 2.5rem;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right .75rem;
|
background-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -963,14 +1069,14 @@ form small {
|
||||||
input + small,
|
input + small,
|
||||||
select + small,
|
select + small,
|
||||||
textarea + small {
|
textarea + small {
|
||||||
margin-top: -1rem;
|
margin-top: calc(var(--spacing-typography) * -0.5);
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
label > input,
|
label > input,
|
||||||
label > select,
|
label > select,
|
||||||
label > textarea {
|
label > textarea {
|
||||||
margin-top: 0.25rem;
|
margin-top: var(--spacing-form-element);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -986,11 +1092,11 @@ table {
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
padding: 0.5rem 1rem;
|
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
|
||||||
border-bottom: 1px solid var(--table-border);
|
border-bottom: 1px solid var(--table-border);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 400;
|
font-weight: var(--text-weight);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1005,7 +1111,7 @@ thead td {
|
||||||
border-bottom: 3px solid var(--table-border);
|
border-bottom: 3px solid var(--table-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:nth-child(odd) {
|
table[role="grid"] tbody tr:nth-child(odd) {
|
||||||
background-color: var(--table-stripping);
|
background-color: var(--table-stripping);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
4
css/pico.slim.min.css
vendored
4
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
228
css/themes/default.css
Normal file
228
css/themes/default.css
Normal file
|
|
@ -0,0 +1,228 @@
|
||||||
|
/**
|
||||||
|
* Theme: default
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--text-font: 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";
|
||||||
|
--titles-font: var(--text-font);
|
||||||
|
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--line-height: 1.5;
|
||||||
|
--text-weight: 400;
|
||||||
|
--titles-weight: 700;
|
||||||
|
--form-element-weight: var(--text-weight);
|
||||||
|
--buttons-weight: var(--text-weight);
|
||||||
|
--code-weight: var(--text-weight);
|
||||||
|
--base-font-xs: 16px;
|
||||||
|
--base-font-sm: 17px;
|
||||||
|
--base-font-md: 18px;
|
||||||
|
--base-font-lg: 19px;
|
||||||
|
--base-font-xl: 20px;
|
||||||
|
--h1-size: 2rem;
|
||||||
|
--h2-size: 1.75rem;
|
||||||
|
--h3-size: 1.5rem;
|
||||||
|
--h4-size: 1.25rem;
|
||||||
|
--h5-size: 1.125rem;
|
||||||
|
--block-round: .25rem;
|
||||||
|
--form-element-border-width: 1px;
|
||||||
|
--form-element-outline-width: 3px;
|
||||||
|
--checkbox-radio-border-width: 2px;
|
||||||
|
--switch-border-width: 3px;
|
||||||
|
--form-element-spacing-vertical: .75rem;
|
||||||
|
--form-element-spacing-horizontal: 1rem;
|
||||||
|
--button-round: var(--block-round);
|
||||||
|
--button-border-width: var(--form-element-border-width);
|
||||||
|
--button-outline-width: var(--form-element-outline-width);
|
||||||
|
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||||
|
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||||
|
--spacing-gutter: 1rem;
|
||||||
|
--spacing-block: 2rem;
|
||||||
|
--spacing-factor-xs: 1;
|
||||||
|
--spacing-factor-sm: 1.25;
|
||||||
|
--spacing-factor-md: 1.5;
|
||||||
|
--spacing-factor-lg: 1.75;
|
||||||
|
--spacing-factor-xl: 2;
|
||||||
|
--spacing-typography: 1.5rem;
|
||||||
|
--spacing-form-element: .25rem;
|
||||||
|
--transition: .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-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='%23FFF' 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-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='rgba(40, 138, 106, 0.999)' 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='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="light"],
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
--background: #FFF;
|
||||||
|
--text: #415462;
|
||||||
|
--h1: #1b2832;
|
||||||
|
--h2: #2c3d49;
|
||||||
|
--h3: #415462;
|
||||||
|
--h4: #596b78;
|
||||||
|
--h5: #73828c;
|
||||||
|
--h6: #8a99a3;
|
||||||
|
--primary: #1095c1;
|
||||||
|
--primary-border: var(--primary);
|
||||||
|
--primary-hover: #08769b;
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
|
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||||
|
--primary-inverse: #FFF;
|
||||||
|
--secondary: #73828c;
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
|
--secondary-hover: #415462;
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
|
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||||
|
--secondary-inverse: #FFF;
|
||||||
|
--contrast: #2c3d49;
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
|
--contrast-hover: #0d1419;
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
|
--contrast-focus: rgba(115, 130, 140, 0.125);
|
||||||
|
--contrast-inverse: #FFF;
|
||||||
|
--input-background: #FFF;
|
||||||
|
--input-border: #c8d1d8;
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--valid: #288a6a;
|
||||||
|
--invalid: #b94646;
|
||||||
|
--mark: rgba(255, 223, 128, 0.33);
|
||||||
|
--mark-text: #2c3d49;
|
||||||
|
--muted-text: #7e8d98;
|
||||||
|
--muted-background: #edf0f3;
|
||||||
|
--muted-border: #edf0f3;
|
||||||
|
--card-background: #FFF;
|
||||||
|
--card-sections: #f3f5f7;
|
||||||
|
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
|
--code-background: #f3f5f7;
|
||||||
|
--code-inlined: #edf0f3;
|
||||||
|
--code-color-1: #73828c;
|
||||||
|
--code-color-2: #b34d80;
|
||||||
|
--code-color-3: #3d888f;
|
||||||
|
--code-color-4: #998866;
|
||||||
|
--code-color-5: #96a4ae;
|
||||||
|
--table-border: rgba(237, 240, 243, 0.75);
|
||||||
|
--table-stripping: rgba(115, 130, 140, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]) {
|
||||||
|
--background: #10181e;
|
||||||
|
--text: #a2afb9;
|
||||||
|
--h1: #edf0f3;
|
||||||
|
--h2: #d5dce2;
|
||||||
|
--h3: #bbc6ce;
|
||||||
|
--h4: #a2afb9;
|
||||||
|
--h5: #8a99a3;
|
||||||
|
--h6: #73828c;
|
||||||
|
--primary: #1095c1;
|
||||||
|
--primary-border: var(--primary);
|
||||||
|
--primary-hover: #1ab3e6;
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
|
--primary-inverse: #FFF;
|
||||||
|
--secondary: #596b78;
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
|
--secondary-hover: #73828c;
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
|
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||||
|
--secondary-inverse: #FFF;
|
||||||
|
--contrast: #d5dce2;
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
|
--contrast-hover: #FFF;
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
|
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||||
|
--contrast-inverse: #10181e;
|
||||||
|
--input-background: #10181e;
|
||||||
|
--input-border: #374956;
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--valid: #1f7a5c;
|
||||||
|
--invalid: #943838;
|
||||||
|
--mark: rgba(255, 223, 128, 0.1875);
|
||||||
|
--mark-text: #FFF;
|
||||||
|
--muted-text: #73828c;
|
||||||
|
--muted-background: #23333e;
|
||||||
|
--muted-border: #23333e;
|
||||||
|
--card-background: #17232b;
|
||||||
|
--card-sections: #141d24;
|
||||||
|
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
||||||
|
--code-background: #141d24;
|
||||||
|
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||||
|
--code-color-1: #73828c;
|
||||||
|
--code-color-2: #a65980;
|
||||||
|
--code-color-3: #599fa6;
|
||||||
|
--code-color-4: #8c8473;
|
||||||
|
--code-color-5: #4d606d;
|
||||||
|
--table-border: rgba(115, 130, 140, 0.075);
|
||||||
|
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--background: #10181e;
|
||||||
|
--text: #a2afb9;
|
||||||
|
--h1: #edf0f3;
|
||||||
|
--h2: #d5dce2;
|
||||||
|
--h3: #bbc6ce;
|
||||||
|
--h4: #a2afb9;
|
||||||
|
--h5: #8a99a3;
|
||||||
|
--h6: #73828c;
|
||||||
|
--primary: #1095c1;
|
||||||
|
--primary-border: var(--primary);
|
||||||
|
--primary-hover: #1ab3e6;
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
|
--primary-inverse: #FFF;
|
||||||
|
--secondary: #596b78;
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
|
--secondary-hover: #73828c;
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
|
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||||
|
--secondary-inverse: #FFF;
|
||||||
|
--contrast: #d5dce2;
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
|
--contrast-hover: #FFF;
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
|
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||||
|
--contrast-inverse: #10181e;
|
||||||
|
--input-background: #10181e;
|
||||||
|
--input-border: #374956;
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--valid: #1f7a5c;
|
||||||
|
--invalid: #943838;
|
||||||
|
--mark: rgba(255, 223, 128, 0.1875);
|
||||||
|
--mark-text: #FFF;
|
||||||
|
--muted-text: #73828c;
|
||||||
|
--muted-background: #23333e;
|
||||||
|
--muted-border: #23333e;
|
||||||
|
--card-background: #17232b;
|
||||||
|
--card-sections: #141d24;
|
||||||
|
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
||||||
|
--code-background: #141d24;
|
||||||
|
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||||
|
--code-color-1: #73828c;
|
||||||
|
--code-color-2: #a65980;
|
||||||
|
--code-color-3: #599fa6;
|
||||||
|
--code-color-4: #8c8473;
|
||||||
|
--code-color-5: #4d606d;
|
||||||
|
--table-border: rgba(115, 130, 140, 0.075);
|
||||||
|
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||||
|
}
|
||||||
1
css/themes/default.min.css
vendored
Normal file
1
css/themes/default.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -4,6 +4,12 @@
|
||||||
/**
|
/**
|
||||||
* Theme: Additions for docs
|
* Theme: Additions for docs
|
||||||
*/
|
*/
|
||||||
|
:root {
|
||||||
|
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme="light"],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
--nav-background: rgba(255, 255, 255, 0.7);
|
--nav-background: rgba(255, 255, 255, 0.7);
|
||||||
|
|
@ -33,33 +39,33 @@ html {
|
||||||
* Docs: Main (Grid)
|
* Docs: Main (Grid)
|
||||||
*/
|
*/
|
||||||
body > main {
|
body > main {
|
||||||
padding-top: 4.5rem;
|
padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
body > main {
|
body > main {
|
||||||
padding-top: 4.75rem;
|
padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
body > main {
|
body > main {
|
||||||
padding-top: 5rem;
|
padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > main {
|
body > main {
|
||||||
grid-column-gap: 4rem;
|
grid-column-gap: calc(var(--spacing-gutter) * 4);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 200px auto;
|
grid-template-columns: 200px auto;
|
||||||
padding-top: 5.25rem;
|
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
body > main {
|
body > main {
|
||||||
padding-top: 5.5rem;
|
padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,36 +75,36 @@ body > main > * {
|
||||||
|
|
||||||
div[role="document"] > section::before {
|
div[role="document"] > section::before {
|
||||||
display: block;
|
display: block;
|
||||||
height: 4.5rem;
|
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
|
||||||
margin-top: -4.5rem;
|
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem);
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
div[role="document"] > section::before {
|
div[role="document"] > section::before {
|
||||||
height: 4.75rem;
|
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
|
||||||
margin-top: -4.75rem;
|
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
div[role="document"] > section::before {
|
div[role="document"] > section::before {
|
||||||
height: 5rem;
|
height: calc(1rem * var(--spacing-factor-md) + 3.5rem);
|
||||||
margin-top: -5rem;
|
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
div[role="document"] > section::before {
|
div[role="document"] > section::before {
|
||||||
height: 5.25rem;
|
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
|
||||||
margin-top: -5.25rem;
|
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
div[role="document"] > section::before {
|
div[role="document"] > section::before {
|
||||||
height: 5.5rem;
|
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
|
||||||
margin-top: -5.5rem;
|
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -106,7 +112,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
background-image: var(--icon-external);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: .66rem auto;
|
||||||
|
|
@ -123,11 +129,11 @@ form.grid > button {
|
||||||
*/
|
*/
|
||||||
main > aside nav {
|
main > aside nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: var(--spacing-block);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside nav h1 {
|
main > aside nav h1 {
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
|
|
@ -207,8 +213,8 @@ main > aside details[open] summary {
|
||||||
#customization figure {
|
#customization figure {
|
||||||
grid-template-columns: repeat(18, 1fr);
|
grid-template-columns: repeat(18, 1fr);
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
border-top-right-radius: 0.25rem;
|
border-top-right-radius: var(--block-round);
|
||||||
border-top-left-radius: 0.25rem;
|
border-top-left-radius: var(--block-round);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -231,7 +237,7 @@ main > aside details[open] summary {
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button.picked {
|
#customization figure button.picked {
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
background-image: var(--icon-check);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: .66rem auto;
|
||||||
|
|
@ -239,11 +245,11 @@ main > aside details[open] summary {
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
|
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
background-image: var(--icon-check-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization h4 {
|
#customization h4 {
|
||||||
transition: color 0.2s ease-in-out;
|
transition: color var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization pre[data-theme="generated"] {
|
#customization pre[data-theme="generated"] {
|
||||||
|
|
@ -253,7 +259,7 @@ main > aside details[open] summary {
|
||||||
#grids button {
|
#grids button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
|
|
@ -267,19 +273,23 @@ main > aside details[open] summary {
|
||||||
#grids button svg {
|
#grids button svg {
|
||||||
stroke: var(--secondary);
|
stroke: var(--secondary);
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
border: 3px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids .grid > * {
|
#grids .grid > * {
|
||||||
padding: 0.5rem 0;
|
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||||
background: var(--code-background);
|
background: var(--code-background);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids details {
|
#grids details {
|
||||||
margin-top: 3rem;
|
margin-top: calc(var(--spacing-typography) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#grids details svg {
|
||||||
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
#forms div.grid {
|
#forms div.grid {
|
||||||
|
|
@ -290,12 +300,12 @@ main > aside details[open] summary {
|
||||||
* Docs: Typography
|
* Docs: Typography
|
||||||
*/
|
*/
|
||||||
section > hgroup {
|
section > hgroup {
|
||||||
margin-bottom: 3rem;
|
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
a[role=button] {
|
a[role=button] {
|
||||||
margin-right: 0.25rem;
|
margin-right: calc(var(--spacing-typography) / 4);
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
[role=document] section > h1,
|
[role=document] section > h1,
|
||||||
|
|
@ -309,25 +319,25 @@ a[role=button] {
|
||||||
*/
|
*/
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
pre {
|
pre {
|
||||||
padding: 2rem 2.5rem;
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
pre {
|
pre {
|
||||||
padding: 2rem 3rem;
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
pre {
|
pre {
|
||||||
padding: 2rem 3.5rem;
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
pre {
|
pre {
|
||||||
padding: 2rem 4rem;
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -353,8 +363,8 @@ a[role=button] {
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
[data-theme="invalid"]:before,
|
[data-theme="invalid"]:before,
|
||||||
[data-theme="valid"]:before {
|
[data-theme="valid"]:before {
|
||||||
top: 1rem;
|
top: var(--spacing-gutter);
|
||||||
right: 1rem;
|
right: var(--spacing-gutter);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -399,7 +409,7 @@ body > nav a svg {
|
||||||
body > nav ul:first-of-type li:first-of-type a {
|
body > nav ul:first-of-type li:first-of-type a {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
margin-left: -1rem;
|
margin-left: calc(var(--spacing-gutter) * -1);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: var(--h1);
|
background: var(--h1);
|
||||||
color: var(--background);
|
color: var(--background);
|
||||||
|
|
@ -407,7 +417,7 @@ body > nav ul:first-of-type li:first-of-type a {
|
||||||
|
|
||||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
display: none;
|
display: none;
|
||||||
margin-left: 1rem;
|
margin-left: var(--spacing-gutter);
|
||||||
color: var(--h1);
|
color: var(--h1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -422,15 +432,15 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
*/
|
*/
|
||||||
.switcher {
|
.switcher {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0.5rem;
|
right: calc(var(--spacing-gutter) / 2);
|
||||||
bottom: 1rem;
|
bottom: var(--spacing-gutter);
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: .75rem;
|
padding: .75rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
box-shadow: var(--card-shadow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher::after {
|
.switcher::after {
|
||||||
|
|
@ -442,7 +452,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
content: '';
|
content: '';
|
||||||
transition: transform 0.2s ease-in-out;
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher i {
|
.switcher i {
|
||||||
|
|
@ -457,7 +467,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
|
|
||||||
.switcher:hover, .switcher:focus {
|
.switcher:hover, .switcher:focus {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover::after {
|
.switcher:hover::after {
|
||||||
|
|
@ -466,8 +476,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
|
|
||||||
.switcher:hover i {
|
.switcher:hover i {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 0.5rem 0 0.25rem;
|
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
|
||||||
transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out;
|
transition: max-width var(--transition), padding var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:focus {
|
.switcher:focus {
|
||||||
|
|
@ -476,6 +486,6 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.switcher {
|
.switcher {
|
||||||
right: 1rem;
|
right: var(--spacing-gutter);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
311
docs/index.html
311
docs/index.html
|
|
@ -68,6 +68,7 @@
|
||||||
<li><a href="#typography" class="secondary">Typography</a></li>
|
<li><a href="#typography" class="secondary">Typography</a></li>
|
||||||
<li><a href="#buttons" class="secondary">Buttons</a></li>
|
<li><a href="#buttons" class="secondary">Buttons</a></li>
|
||||||
<li><a href="#forms" class="secondary">Forms</a></li>
|
<li><a href="#forms" class="secondary">Forms</a></li>
|
||||||
|
<li><a href="#tables" class="secondary">Tables</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
<details open>
|
<details open>
|
||||||
|
|
@ -76,6 +77,7 @@
|
||||||
<li><a href="#accordions" class="secondary">Accordions</a></li>
|
<li><a href="#accordions" class="secondary">Accordions</a></li>
|
||||||
<li><a href="#cards" class="secondary">Cards</a></li>
|
<li><a href="#cards" class="secondary">Cards</a></li>
|
||||||
<li><a href="#navs" class="secondary">Navs</a></li>
|
<li><a href="#navs" class="secondary">Navs</a></li>
|
||||||
|
<li><a href="#progress" class="secondary">Progress</a></li>
|
||||||
<li><a href="#tooltips" class="secondary">Tooltips</a></li>
|
<li><a href="#tooltips" class="secondary">Tooltips</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
|
|
@ -108,7 +110,7 @@
|
||||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>></code></pre>
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>></code></pre>
|
||||||
<h4>Install with NPM</h4>
|
<h4>Install with NPM</h4>
|
||||||
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
|
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
|
||||||
<p>Starter template:</p>
|
<p>Starter HTML template:</p>
|
||||||
|
|
||||||
<pre><code><em><!doctype html></em>
|
<pre><code><em><!doctype html></em>
|
||||||
<<b>html</b> <i>lang</i>=<u>"en"</u>>
|
<<b>html</b> <i>lang</i>=<u>"en"</u>>
|
||||||
|
|
@ -133,17 +135,17 @@
|
||||||
<h2>Themes</h2>
|
<h2>Themes</h2>
|
||||||
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
|
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
|
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
|
||||||
<article aria-label="Theme switcher">
|
<article aria-label="Theme switcher">
|
||||||
<button class="contrast theme-switcher">...</button>
|
<button class="contrast theme-switcher">...</button>
|
||||||
</article>
|
</article>
|
||||||
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code>.</p>
|
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code></p>
|
||||||
<article data-theme="light">
|
<article data-theme="light">
|
||||||
<h4>Light theme</h4>
|
<h4>Light theme</h4>
|
||||||
<form class="grid">
|
<form class="grid">
|
||||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
<button type="submit" aria-label="Example button">Login</button>
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
||||||
|
|
@ -156,7 +158,7 @@
|
||||||
<form class="grid">
|
<form class="grid">
|
||||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
<button type="submit" aria-label="Example button">Login</button>
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
||||||
|
|
@ -172,14 +174,15 @@
|
||||||
<h2>Customization</h2>
|
<h2>Customization</h2>
|
||||||
<h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
|
<h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<h5>Pick a color!</h5>
|
<p>Example: <strong>pick a color!</strong></p>
|
||||||
|
|
||||||
<article data-theme="generated">
|
<article data-theme="generated">
|
||||||
<h4><span class="name">Custom theme</span></h4>
|
<h4><span class="name">Custom theme</span></h4>
|
||||||
<form>
|
<form>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
<button type="submit" aria-label="Example button">Login</button>
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
</div>
|
</div>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="remember">
|
<label for="remember">
|
||||||
|
|
@ -189,20 +192,39 @@
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</article>
|
</article>
|
||||||
|
<p>There are 2 ways to customize your version of Pico.css:</p>
|
||||||
|
<h4>Importing SASS</h4>
|
||||||
|
<p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
|
||||||
|
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
|
||||||
|
|
||||||
<p>SCSS:</p>
|
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||||
|
|
||||||
<pre><code><em>// <span class="name">Custom colors</span></em>
|
<em>// Override default variables</em>
|
||||||
<i>$primary-500</i>: <u class="c500">...</u>;
|
<i>$primary-500</i>: <u class="c500">...</u>;
|
||||||
<i>$primary-600</i>: <u class="c600">...</u>;
|
<i>$primary-600</i>: <u class="c600">...</u>;
|
||||||
<i>$primary-700</i>: <u class="c700">...</u>;
|
<i>$primary-700</i>: <u class="c700">...</u>;
|
||||||
|
|
||||||
<em>// Pico library</em>
|
<em>// Import full Pico source code</em>
|
||||||
<b>@import</b> <u>"path/pico"</u>;</code></pre>
|
<b>@import</b> <u>"path/pico"</u>;</code></pre>
|
||||||
|
|
||||||
<p>CSS:</p>
|
<p>Alternatively, you can create a custom theme and import it in your project with the components you need.</p>
|
||||||
|
|
||||||
<pre><code><em>/* <span class="name"></span>Light theme (Default) */
|
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||||
|
|
||||||
|
<em>// Custom theme</em>
|
||||||
|
<b>@import</b> <u>"path/themes/custom"</u>;
|
||||||
|
|
||||||
|
<em>// Import needed components</em>
|
||||||
|
<b>@import</b> <u>"path/layout/document"</u>;
|
||||||
|
<b>@import</b> <u>"path/layout/sectioning"</u>;
|
||||||
|
<em>...</em>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||||
|
<h4>Overriding CSS variables</h4>
|
||||||
|
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
|
||||||
|
|
||||||
|
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
|
||||||
/* Can be forced with data-theme="light" */</em>
|
/* Can be forced with data-theme="light" */</em>
|
||||||
<b>[data-theme=<u>"light"</u>]</b>,
|
<b>[data-theme=<u>"light"</u>]</b>,
|
||||||
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
||||||
|
|
@ -212,30 +234,37 @@
|
||||||
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<em>/* <span class="name"></span>Dark scheme (Auto) */
|
||||||
<em>/* <span class="name"></span>Dark theme (Auto) */
|
|
||||||
/* Automatically enabled if user has Dark mode enabled */</em>
|
/* Automatically enabled if user has Dark mode enabled */</em>
|
||||||
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
|
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
|
||||||
<b>:root:not([data-theme="light"])</b> {
|
<b>:root:not([data-theme=<u>"light"</u>])</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">...</u>;
|
||||||
|
<i>--primary-hover</i>: <u class="c500">...</u>;
|
||||||
|
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
|
||||||
|
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
<em>/* <span class="name"></span>Dark scheme (Forced) */
|
||||||
|
/* Enabled if forced with data-theme="dark" */</em>
|
||||||
|
<b>[data-theme=<u>"dark"</u>]</b> {
|
||||||
<i>--primary</i>: <u class="c600">...</u>;
|
<i>--primary</i>: <u class="c600">...</u>;
|
||||||
<i>--primary-hover</i>: <u class="c500">...</u>;
|
<i>--primary-hover</i>: <u class="c500">...</u>;
|
||||||
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
|
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
|
||||||
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<em>/* <span class="name"></span>(Common styles) */</em>
|
||||||
|
<b>:root</b> {
|
||||||
|
<i>--primary-border</i>: <u>var</u>(<i>--primary</i>);
|
||||||
|
<i>--primary-hover-border</i>: <u>var</u>(<i>--primary-hover</i>);
|
||||||
|
<i>--input-hover-border</i>: <u>var</u>(<i>--primary</i>);
|
||||||
|
<i>--input-focus</i>: <u>var</u>(<i>--primary-focus</i>);
|
||||||
|
<i>--input-inverse</i>: <u>var</u>(<i>--primary-inverse</i>);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
<em>/* <span class="name"></span>Dark theme (Forced) */
|
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/default.css</a></p>
|
||||||
/* Enabled if forced with data-theme="dark" */</em>
|
|
||||||
<b>[data-theme="<u>dark</u>"]</b> {
|
|
||||||
<i>--primary</i>: <u class="c600">...</u>;
|
|
||||||
<i>--primary-hover</i>: <u class="c500">...</u>;
|
|
||||||
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
|
|
||||||
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
|
||||||
}</code></pre>
|
|
||||||
|
|
||||||
<p>Colors can be modified in <a href="https://github.com/picocss/pico/tree/master/scss/themes">scss/themes/</a>.</p>
|
|
||||||
<p>Spacings, Typography, Rounded, Transitions, Breakpoints, etc. can be modified in <a href="https://github.com/picocss/pico/blob/master/scss/_variables.scss">scss/_variables.scss</a>.</p>
|
|
||||||
<p>You can also compile pico with only the modules you need to generate a slimer version. Example in <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
|
||||||
</section><!-- ./ Docs: Customization -->
|
</section><!-- ./ Docs: Customization -->
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -270,7 +299,7 @@
|
||||||
|
|
||||||
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/4.3/layout/grid/#grid-options">Bootstrap</a>.</p>
|
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/4.3/layout/grid/#grid-options">Bootstrap</a>.</p>
|
||||||
<figure>
|
<figure>
|
||||||
<table>
|
<table role="grid">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Device</th>
|
<th>Device</th>
|
||||||
|
|
@ -301,7 +330,7 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</figure>
|
</figure>
|
||||||
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code>.</p>
|
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>
|
||||||
<p><code><<b>section</b>></code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
<p><code><<b>section</b>></code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||||
</section><!-- ./ Docs: Container -->
|
</section><!-- ./ Docs: Container -->
|
||||||
|
|
||||||
|
|
@ -327,7 +356,7 @@
|
||||||
</<b>div</b>></code></pre>
|
</<b>div</b>></code></pre>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
|
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
|
||||||
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
|
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
|
||||||
<details>
|
<details>
|
||||||
<summary>
|
<summary>
|
||||||
|
|
@ -353,9 +382,9 @@
|
||||||
<h2>Horizontal scroller</h2>
|
<h2>Horizontal scroller</h2>
|
||||||
<h3><code><<b>figure</b>></code> act as a container to make any content scrollable horizontally.</h3>
|
<h3><code><<b>figure</b>></code> act as a container to make any content scrollable horizontally.</h3>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<p>Useful to have responsives <code><<b>table</b>></code>.</p>
|
<p>Useful to have responsives <code><<b>table</b>></code></p>
|
||||||
<figure>
|
<figure>
|
||||||
<table>
|
<table role="grid">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">#</th>
|
<th scope="col">#</th>
|
||||||
|
|
@ -426,7 +455,7 @@
|
||||||
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</h3>
|
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</h3>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<figure>
|
<figure>
|
||||||
<table>
|
<table role="grid">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Device</th>
|
<th>Device</th>
|
||||||
|
|
@ -505,15 +534,13 @@
|
||||||
<h4>Heading 4</h4>
|
<h4>Heading 4</h4>
|
||||||
<h5>Heading 5</h5>
|
<h5>Heading 5</h5>
|
||||||
<h6>Heading 6</h6>
|
<h6>Heading 6</h6>
|
||||||
<p>Paragraph</p>
|
|
||||||
|
|
||||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
<<b>h3</b>>Heading 3</<b>h3</b>>
|
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||||||
<<b>h4</b>>Heading 4</<b>h4</b>>
|
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||||||
<<b>h5</b>>Heading 5</<b>h5</b>>
|
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||||
<<b>h6</b>>Heading 6</<b>h6</b>>
|
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||||
<<b>p</b>>Paragraph</<b>p</b>></code></pre>
|
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
|
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
|
||||||
|
|
@ -560,6 +587,23 @@
|
||||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p>Blockquote:</p>
|
||||||
|
<article aria-label="Links examples">
|
||||||
|
<blockquote>
|
||||||
|
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||||||
|
<footer>
|
||||||
|
<cite>- Phasellus eget lacinia</cite>
|
||||||
|
</footer>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<pre><code><<b>blockquote</b>>
|
||||||
|
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||||||
|
<<b>footer</b>>
|
||||||
|
<<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>>
|
||||||
|
</<b>footer</b>>
|
||||||
|
</<b>blockquote</b>></code></pre>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Typography -->
|
</section><!-- ./ Docs: Typography -->
|
||||||
|
|
||||||
|
|
@ -631,7 +675,7 @@
|
||||||
<label for="email">Email address</label>
|
<label for="email">Email address</label>
|
||||||
<input type="email" id="email" name="email" placeholder="Email address" required>
|
<input type="email" id="email" name="email" placeholder="Email address" required>
|
||||||
<small>We'll never share your email with anyone else.</small>
|
<small>We'll never share your email with anyone else.</small>
|
||||||
<button type="submit" aria-label="Example button">Submit</button>
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<pre><code><<b>form</b>>
|
<pre><code><<b>form</b>>
|
||||||
|
|
@ -755,9 +799,178 @@
|
||||||
</<b>fieldset</b>></code></pre>
|
</<b>fieldset</b>></code></pre>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
<p>Advanced example with all form elements supported in Pico <a href="https://picocss.com/examples/form-elements/">here</a>.</p>
|
<p>You can change a checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code></p>
|
||||||
|
<article>
|
||||||
|
<label for="indeterminate">
|
||||||
|
<input type="checkbox" id="indeterminate" name="indeterminate" indeterminate="true">
|
||||||
|
Select all
|
||||||
|
</label>
|
||||||
|
<script>
|
||||||
|
// Set indeterminate checkbox
|
||||||
|
document.getElementById('indeterminate').indeterminate = true;
|
||||||
|
</script>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<p>Others input types:</p>
|
||||||
|
<article aria-label="File browser, range slider, date, time, color examples">
|
||||||
|
<label for="file">File browser
|
||||||
|
<input type="file" id="file" name="file">
|
||||||
|
</label>
|
||||||
|
<label for="range">Range slider
|
||||||
|
<input type="range" min="0" max="100" value="50" id="range" name="range">
|
||||||
|
</label>
|
||||||
|
<label for="date">Date
|
||||||
|
<input type="date" id="date" name="date">
|
||||||
|
</label>
|
||||||
|
<label for="time">Time
|
||||||
|
<input type="time" id="time" name="time">
|
||||||
|
</label>
|
||||||
|
<label for="color">Color
|
||||||
|
<input type="color" id="color" name="color" value="#0eaaaa">
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<pre><code><em><!-- File browser --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
||||||
|
<<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Range slider --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"range"</u>>Range slider
|
||||||
|
<<b>input</b> <i>type</i>=<u>"range"</u> <i>min</i>=<u>"0"</u> <i>max</i>=<u>"100"</u> <i>value</i>=<u>"50"</u> <i>id</i>=<u>"range"</u> <i>name</i>=<u>"range"</u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Date --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"date"</u>>Date
|
||||||
|
<<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u></u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Time --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"time"</u>>Time
|
||||||
|
<<b>input</b> <i>type</i>=<u>"time"</u> <i>id</i>=<u>"time"</u> <i>name</i>=<u>"time"</u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Color --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"color"</u>>Color
|
||||||
|
<<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
|
||||||
|
</<b>label</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
</section><!-- ./ Docs: Form -->
|
</section><!-- ./ Docs: Form -->
|
||||||
|
|
||||||
|
<!-- Docs: Tables -->
|
||||||
|
<section id="tables">
|
||||||
|
<hgroup>
|
||||||
|
<h2>Tables</h2>
|
||||||
|
<h3>Default styles for tables without <code>.classes</code></h3>
|
||||||
|
</hgroup>
|
||||||
|
<figure>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<pre><code><<b>table</b>>
|
||||||
|
<<b>thead</b>>
|
||||||
|
<<b>tr</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>#</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading<</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||||
|
</<b>tr</b>>
|
||||||
|
</<b>thead</b>>
|
||||||
|
<<b>tbody</b>>
|
||||||
|
<<b>tr</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"row"</u>>1</<b>th</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
</<b>tr</b>>
|
||||||
|
</<b>tbody</b>>
|
||||||
|
</<b>table</b>></code></pre>
|
||||||
|
|
||||||
|
<p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>
|
||||||
|
<figure>
|
||||||
|
<table role="grid">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<pre><code><<b>table</b> <i>role</i>=<u>"grid"</u>>
|
||||||
|
<em>...</em>
|
||||||
|
</<b>table</b>></code></pre>
|
||||||
|
|
||||||
|
</section><!-- ./ Docs: Tables -->
|
||||||
|
|
||||||
<!-- Docs: Accordions -->
|
<!-- Docs: Accordions -->
|
||||||
<section id="accordions">
|
<section id="accordions">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
|
|
@ -917,6 +1130,22 @@
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Nav -->
|
</section><!-- ./ Docs: Nav -->
|
||||||
|
|
||||||
|
<!-- Docs: Progress -->
|
||||||
|
<section id="progress">
|
||||||
|
<hgroup>
|
||||||
|
<h2>Progress</h2>
|
||||||
|
<h3>Progress bar element in pure HTML, without JavaScript.</h3>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Tooltips examples">
|
||||||
|
<progress value="25" max="100"></progress>
|
||||||
|
<progress indeterminate="true"></progress>
|
||||||
|
|
||||||
|
<pre><code><<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>></<b>progress</b>>
|
||||||
|
<<b>progress</b> <i>indeterminate</i>=<u>"true"</u>></<b>progress</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section><!-- ./ Docs: Progress -->
|
||||||
|
|
||||||
<!-- Docs: Tooltips -->
|
<!-- Docs: Tooltips -->
|
||||||
<section id="tooltips">
|
<section id="tooltips">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
|
|
@ -933,12 +1162,12 @@
|
||||||
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>></code></pre>
|
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>></code></pre>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Nav -->
|
</section><!-- ./ Docs: Tooltips -->
|
||||||
|
|
||||||
<!-- Love -->
|
<!-- Love -->
|
||||||
<section id="love">
|
<section id="love">
|
||||||
<h2>We love <code>.classes</code></h2>
|
<h2>We love <code>.classes</code></h2>
|
||||||
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</p>
|
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
|
||||||
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
|
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
|
||||||
<p>Feel free to use <em>modifiers</em>.</p>
|
<p>Feel free to use <em>modifiers</em>.</p>
|
||||||
<div data-theme="valid">
|
<div data-theme="valid">
|
||||||
|
|
@ -955,7 +1184,7 @@
|
||||||
<hr>
|
<hr>
|
||||||
<p>
|
<p>
|
||||||
<small>
|
<small>
|
||||||
Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a>, <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a> & <a href="https://csstools.github.io/sanitize.css/" class="secondary">Sanitize</a><br>
|
Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a>, <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>, <a href="https://csstools.github.io/sanitize.css/" class="secondary">Sanitize</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a> & <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a><br>
|
||||||
Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
|
Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
|
||||||
</small>
|
</small>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
2
docs/js/pico.docs.min.js
vendored
2
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -12,7 +12,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var colors = {
|
var colors = {
|
||||||
target: '#customization h5', // Buttons inserted after target
|
target: '#customization article[data-theme="generated"]', // Buttons inserted before target
|
||||||
selectorButton: '#customization button[data-color]', // Button selector in Dom
|
selectorButton: '#customization button[data-color]', // Button selector in Dom
|
||||||
selectorTheme: '#customization', // Theme selector in Dom
|
selectorTheme: '#customization', // Theme selector in Dom
|
||||||
styles: '',
|
styles: '',
|
||||||
|
|
@ -221,7 +221,7 @@
|
||||||
"a200": "#eeff41",
|
"a200": "#eeff41",
|
||||||
"a400": "#c6ff00",
|
"a400": "#c6ff00",
|
||||||
"a700": "#aeea00",
|
"a700": "#aeea00",
|
||||||
"inverse": "#000"
|
"inverse": "rgba(0, 0, 0, 0.75)"
|
||||||
},
|
},
|
||||||
"yellow": {
|
"yellow": {
|
||||||
"50": "#fffde7",
|
"50": "#fffde7",
|
||||||
|
|
@ -238,7 +238,7 @@
|
||||||
"a200": "#ffff00",
|
"a200": "#ffff00",
|
||||||
"a400": "#ffea00",
|
"a400": "#ffea00",
|
||||||
"a700": "#ffd600",
|
"a700": "#ffd600",
|
||||||
"inverse": "#000"
|
"inverse": "rgba(0, 0, 0, 0.75)"
|
||||||
},
|
},
|
||||||
"amber": {
|
"amber": {
|
||||||
"50": "#fff8e1",
|
"50": "#fff8e1",
|
||||||
|
|
@ -255,7 +255,7 @@
|
||||||
"a200": "#ffd740",
|
"a200": "#ffd740",
|
||||||
"a400": "#ffc400",
|
"a400": "#ffc400",
|
||||||
"a700": "#ffab00",
|
"a700": "#ffab00",
|
||||||
"inverse": "#000"
|
"inverse": "rgba(0, 0, 0, 0.75)"
|
||||||
},
|
},
|
||||||
"orange": {
|
"orange": {
|
||||||
"50": "#fff3e0",
|
"50": "#fff3e0",
|
||||||
|
|
@ -377,14 +377,14 @@
|
||||||
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
|
||||||
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
|
||||||
+ 'background-color: '+ data[color]['500'] +'; '
|
+ 'background-color: '+ data[color]['500'] +'; '
|
||||||
+ '}'
|
+ '}';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Insert buttons
|
// Insert buttons
|
||||||
var buttons = document.createElement('FIGURE');
|
var buttons = document.createElement('FIGURE');
|
||||||
buttons.innerHTML = colorButtons;
|
buttons.innerHTML = colorButtons;
|
||||||
document.querySelector(colors.target).after(buttons);
|
document.querySelector(colors.target).before(buttons);
|
||||||
|
|
||||||
// Buttons listeners
|
// Buttons listeners
|
||||||
var buttonsAll = document.querySelectorAll(colors.selectorButton);
|
var buttonsAll = document.querySelectorAll(colors.selectorButton);
|
||||||
|
|
@ -438,41 +438,28 @@
|
||||||
|
|
||||||
function generateTheme(name, data) {
|
function generateTheme(name, data) {
|
||||||
|
|
||||||
// Code and Color name
|
// Update name and colors in demo code
|
||||||
// TODO: Create a function
|
var swap = {
|
||||||
var cName = document.querySelectorAll(colors.selectorTheme + ' .name');
|
'.name' : name.charAt(0).toUpperCase() + name.substring(1) + ' ',
|
||||||
for (var i = 0; i < cName.length; ++i) {
|
'.c500' : data[500],
|
||||||
cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' ';
|
'.c600' : data[600],
|
||||||
}
|
'.c700' : data[700],
|
||||||
var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500');
|
'.c600-outline-light' : hexToRgbA(data[600], .125),
|
||||||
for (var i = 0; i < c500.length; ++i) {
|
'.c600-outline-dark' : hexToRgbA(data[600], .25),
|
||||||
c500[i].innerHTML = data[500];
|
'.inverse' : data['inverse'],
|
||||||
}
|
|
||||||
var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600');
|
|
||||||
for (var i = 0; i < c600.length; ++i) {
|
|
||||||
c600[i].innerHTML = data[600];
|
|
||||||
}
|
|
||||||
var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700');
|
|
||||||
for (var i = 0; i < c700.length; ++i) {
|
|
||||||
c700[i].innerHTML = data[700];
|
|
||||||
}
|
|
||||||
var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light');
|
|
||||||
for (var i = 0; i < c600OutlineLight.length; ++i) {
|
|
||||||
c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125);
|
|
||||||
}
|
|
||||||
var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark');
|
|
||||||
for (var i = 0; i < c600OutlineDark.length; ++i) {
|
|
||||||
c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25);
|
|
||||||
}
|
|
||||||
var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse');
|
|
||||||
for (var i = 0; i < inverse.length; ++i) {
|
|
||||||
inverse[i].innerHTML = data['inverse'];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// CSS Style
|
Object.keys(swap).forEach(function(key) {
|
||||||
|
var target = document.querySelectorAll(colors.selectorTheme + ' ' + key);
|
||||||
|
for (var i = 0; i < target.length; ++i) {
|
||||||
|
target[i].innerHTML = swap[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update CSS Style
|
||||||
var generatedStyles = '[data-theme="generated"] {'
|
var generatedStyles = '[data-theme="generated"] {'
|
||||||
+ '--primary:' + data[600] + ';'
|
|
||||||
+ '--h4:' + data[700] + ';'
|
+ '--h4:' + data[700] + ';'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
+ '--primary-hover:' + data[700] + ';'
|
+ '--primary-hover:' + data[700] + ';'
|
||||||
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
|
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
|
||||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
|
@ -480,8 +467,8 @@
|
||||||
|
|
||||||
+ '@media only screen and (prefers-color-scheme: dark) {'
|
+ '@media only screen and (prefers-color-scheme: dark) {'
|
||||||
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
||||||
+ '--primary:' + data[600] + ';'
|
|
||||||
+ '--h4:' + data[400] + ';'
|
+ '--h4:' + data[400] + ';'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
+ '--primary-hover:' + data[500] + ';'
|
+ '--primary-hover:' + data[500] + ';'
|
||||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
|
@ -489,11 +476,19 @@
|
||||||
+ '}'
|
+ '}'
|
||||||
|
|
||||||
+ '[data-theme="dark"] [data-theme="generated"] {'
|
+ '[data-theme="dark"] [data-theme="generated"] {'
|
||||||
+ '--primary:' + data[600] + ';'
|
|
||||||
+ '--h4:' + data[500] + ';'
|
+ '--h4:' + data[500] + ';'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
+ '--primary-hover:' + data[500] + ';'
|
+ '--primary-hover:' + data[500] + ';'
|
||||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||||
+ '--primary-inverse:' + data['inverse'] + ';'
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
+ '}'
|
||||||
|
|
||||||
|
+ '[data-theme="generated"] {'
|
||||||
|
+ '--primary-border: var(--primary);'
|
||||||
|
+ '--primary-hover-border: var(--primary-hover);'
|
||||||
|
+ '--input-hover-border: var(--primary);'
|
||||||
|
+ '--input-focus: var(--primary-focus);'
|
||||||
|
+ '--input-inverse: var(--primary-inverse);'
|
||||||
+ '}';
|
+ '}';
|
||||||
|
|
||||||
// Insert CSS Styles
|
// Insert CSS Styles
|
||||||
|
|
@ -518,7 +513,7 @@
|
||||||
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||||
}
|
}
|
||||||
c= '0x' + c.join('');
|
c= '0x' + c.join('');
|
||||||
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')';
|
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')';
|
||||||
}
|
}
|
||||||
throw new Error('Bad Hex');
|
throw new Error('Bad Hex');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
function addButtons() {
|
function addButtons() {
|
||||||
var buttons = document.createElement('P');
|
var buttons = document.createElement('P');
|
||||||
buttons.innerHTML = '<button class="secondary add">'
|
buttons.innerHTML = '<button class="secondary add">'
|
||||||
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
|
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
|
||||||
+ '<line x1="12" y1="5" x2="12" y2="19">'
|
+ '<line x1="12" y1="5" x2="12" y2="19">'
|
||||||
+ '</line><line x1="5" y1="12" x2="19" y2="12">'
|
+ '</line><line x1="5" y1="12" x2="19" y2="12">'
|
||||||
+ '</line>'
|
+ '</line>'
|
||||||
|
|
@ -70,7 +70,7 @@
|
||||||
+ '</button>'
|
+ '</button>'
|
||||||
|
|
||||||
+ '<button class="secondary remove">'
|
+ '<button class="secondary remove">'
|
||||||
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
|
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
|
||||||
+ '<line x1="5" y1="12" x2="19" y2="12"></line>'
|
+ '<line x1="5" y1="12" x2="19" y2="12"></line>'
|
||||||
+ '</svg>'
|
+ '</svg>'
|
||||||
+ ' Remove column'
|
+ ' Remove column'
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ body > nav {
|
||||||
a {
|
a {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
margin-left: -$spacing-gutter;
|
margin-left: calc(var(--spacing-gutter) * -1);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: var(--h1);
|
background: var(--h1);
|
||||||
color: var(--background);
|
color: var(--background);
|
||||||
|
|
@ -38,7 +38,7 @@ body > nav {
|
||||||
// Title
|
// Title
|
||||||
&:nth-of-type(2) {
|
&:nth-of-type(2) {
|
||||||
display: none;
|
display: none;
|
||||||
margin-left: $spacing-gutter;
|
margin-left: var(--spacing-gutter);
|
||||||
color: var(--h1);
|
color: var(--h1);
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,15 @@
|
||||||
|
|
||||||
.switcher {
|
.switcher {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: $spacing-gutter/2;
|
right: calc(var(--spacing-gutter) / 2);
|
||||||
bottom: $spacing-gutter;
|
bottom: var(--spacing-gutter);
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: .75rem;
|
padding: .75rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
box-shadow: var(--card-shadow);
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
content: '';
|
content: '';
|
||||||
transition: transform $transition;
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
|
@ -40,10 +40,10 @@
|
||||||
&:focus {
|
&:focus {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
border-color $transition,
|
border-color var(--transition),
|
||||||
color $transition,
|
color var(--transition),
|
||||||
box-shadow $transition;
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -53,9 +53,9 @@
|
||||||
|
|
||||||
i {
|
i {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4);
|
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
|
||||||
transition: max-width $transition,
|
transition: max-width var(--transition),
|
||||||
padding $transition;
|
padding var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -65,6 +65,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
right: $spacing-gutter;
|
right: var(--spacing-gutter);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,38 +6,34 @@
|
||||||
pre {
|
pre {
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and
|
@if map-get($breakpoints, "sm") and
|
||||||
map-get($spacing-factor, "sm") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") and
|
@if map-get($breakpoints, "md") and
|
||||||
map-get($spacing-factor, "md") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") and
|
@if map-get($breakpoints, "lg") and
|
||||||
map-get($spacing-factor, "lg") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") and
|
@if map-get($breakpoints, "xl") and
|
||||||
map-get($spacing-factor, "xl") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -61,8 +57,8 @@ pre {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
top: $spacing-gutter;
|
top: var(--spacing-gutter);
|
||||||
right: $spacing-gutter;
|
right: var(--spacing-gutter);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,12 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
section > hgroup {
|
section > hgroup {
|
||||||
margin-bottom: $spacing-typography*2;
|
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
a[role=button] {
|
a[role=button] {
|
||||||
margin-right: $spacing-gutter/4;
|
margin-right: calc(var(--spacing-typography) / 4);
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
[role=document] {
|
[role=document] {
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,10 @@ main > aside {
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: $spacing-block;
|
margin-bottom: var(--spacing-block);
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
|
|
||||||
|
|
@ -26,8 +26,8 @@
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
grid-template-columns: repeat(18, 1fr);
|
grid-template-columns: repeat(18, 1fr);
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
border-top-right-radius: $round;
|
border-top-right-radius: var(--block-round);
|
||||||
border-top-left-radius: $round;
|
border-top-left-radius: var(--block-round);
|
||||||
}
|
}
|
||||||
|
|
||||||
~ article {
|
~ article {
|
||||||
|
|
@ -48,8 +48,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.picked {
|
&.picked {
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-check);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: .66rem auto;
|
||||||
|
|
@ -59,15 +58,14 @@
|
||||||
&[data-color="yellow"],
|
&[data-color="yellow"],
|
||||||
&[data-color="amber"] {
|
&[data-color="amber"] {
|
||||||
&.picked {
|
&.picked {
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-check-dark);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
transition: color $transition;
|
transition: color var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre[data-theme="generated"] {
|
pre[data-theme="generated"] {
|
||||||
|
|
@ -84,7 +82,7 @@
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: $spacing-typography/2;
|
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -95,20 +93,24 @@
|
||||||
svg {
|
svg {
|
||||||
stroke: var(--secondary);
|
stroke: var(--secondary);
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
border: 3px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid > * {
|
.grid > * {
|
||||||
padding: ($spacing-gutter/2) 0;
|
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||||
background: var(--code-background);
|
background: var(--code-background);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
details {
|
details {
|
||||||
margin-top: $spacing-typography*2;
|
margin-top: calc(var(--spacing-typography) * 2);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,25 +5,25 @@
|
||||||
$navHeight: 3.5rem;
|
$navHeight: 3.5rem;
|
||||||
|
|
||||||
body > main {
|
body > main {
|
||||||
padding-top:map-get($spacing-factor, "xs") + $navHeight;
|
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
padding-top: map-get($spacing-factor, "sm") + $navHeight;
|
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
padding-top: map-get($spacing-factor, "md") + $navHeight;
|
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
grid-column-gap: $spacing-gutter*4;
|
grid-column-gap: calc(var(--spacing-gutter) * 4);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 200px auto;
|
grid-template-columns: 200px auto;
|
||||||
padding-top: map-get($spacing-factor, "lg") + $navHeight;
|
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
padding-top: map-get($spacing-factor, "xl") + $navHeight;
|
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||||||
}
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
|
|
@ -37,29 +37,29 @@ body > main {
|
||||||
|
|
||||||
div[role="document"] > section::before {
|
div[role="document"] > section::before {
|
||||||
display: block;
|
display: block;
|
||||||
height: map-get($spacing-factor, "xs") + $navHeight;
|
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||||||
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
|
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
height: map-get($spacing-factor, "sm") + $navHeight;
|
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||||||
margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
|
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
height: map-get($spacing-factor, "md") + $navHeight;
|
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||||||
margin-top: -(map-get($spacing-factor, "md") + $navHeight);
|
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
height: map-get($spacing-factor, "lg") + $navHeight;
|
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||||||
margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
|
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
height: map-get($spacing-factor, "xl") + $navHeight;
|
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||||||
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
|
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -71,8 +71,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-external);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: .66rem auto;
|
||||||
|
|
|
||||||
|
|
@ -3,5 +3,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "../../../scss/themes/default/colors";
|
@import "../../../scss/themes/default/colors";
|
||||||
|
@import "docs/icons";
|
||||||
@import "docs/light";
|
@import "docs/light";
|
||||||
@import "docs/dark";
|
@import "docs/dark";
|
||||||
8
docs/scss/themes/docs/_icons.scss
Normal file
8
docs/scss/themes/docs/_icons.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
// Icons
|
||||||
|
// Source: https://feathericons.com/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@picocss/pico",
|
"name": "@picocss/pico",
|
||||||
"version": "1.1.0",
|
"version": "1.2.0",
|
||||||
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
|
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
|
||||||
"author": "Lucas Larroche",
|
"author": "Lucas Larroche",
|
||||||
"main": "./css/pico.min.css",
|
"main": "./css/pico.min.css",
|
||||||
|
|
|
||||||
|
|
@ -33,86 +33,6 @@ $enable-transitions: true !default;
|
||||||
$enable-important: true !default;
|
$enable-important: true !default;
|
||||||
|
|
||||||
|
|
||||||
// Spacings
|
|
||||||
// ––––––––––––––––––––
|
|
||||||
|
|
||||||
// Gutters and horizontals margins
|
|
||||||
// For <body>, .grid, <nav>, <table>
|
|
||||||
$spacing-gutter: 1rem !default;
|
|
||||||
|
|
||||||
// Blocks verticals margins and paddings
|
|
||||||
// For <header>, <main>, <footer>, <section>, <article>
|
|
||||||
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
|
||||||
$spacing-block: 2rem !default;
|
|
||||||
|
|
||||||
// Vertical margins for Typography and Form elements
|
|
||||||
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
|
||||||
$spacing-typography: 1.5rem !default;
|
|
||||||
|
|
||||||
// Spacing between: Label and Input, Checkboxes, Radios
|
|
||||||
$spacing-form-elements: $spacing-typography/6 !default;
|
|
||||||
|
|
||||||
// Padding for <input> and <button>
|
|
||||||
$spacing-input-button-vertical: .75rem !default;
|
|
||||||
$spacing-input-button-horizontal: 1rem !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
// ––––––––––––––––––––
|
|
||||||
|
|
||||||
// Sans serif native font stack
|
|
||||||
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
|
||||||
$sans-serif:
|
|
||||||
system-ui,
|
|
||||||
-apple-system, // macOS 10.11-10.12
|
|
||||||
"Segoe UI", // Windows 6+
|
|
||||||
"Roboto", // Android 4+
|
|
||||||
"Ubuntu", // Ubuntu 10.10+
|
|
||||||
"Cantarell", // Gnome 3+
|
|
||||||
"Noto Sans", // KDE Plasma 5+
|
|
||||||
sans-serif, // Fallback
|
|
||||||
"Apple Color Emoji", // macOS emoji
|
|
||||||
"Segoe UI Emoji", // Windows emoji
|
|
||||||
"Segoe UI Symbol", // Windows emoji
|
|
||||||
"Noto Color Emoji" // Linux emoji
|
|
||||||
!default;
|
|
||||||
|
|
||||||
// Monospace native font stack
|
|
||||||
// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
|
||||||
$monospace:
|
|
||||||
"Menlo", // macOS 10.10+
|
|
||||||
"Consolas", // Windows 6+
|
|
||||||
"Roboto Mono", // Android 4+
|
|
||||||
"Ubuntu Monospace", // Ubuntu 10.10+
|
|
||||||
"Noto Mono", // KDE Plasma 5+
|
|
||||||
"Oxygen Mono", // KDE Plasma 4+
|
|
||||||
"Liberation Mono", // Linux/OpenOffice fallback
|
|
||||||
monospace, // Fallback
|
|
||||||
"Apple Color Emoji", // macOS emoji
|
|
||||||
"Segoe UI Emoji", // Windows emoji
|
|
||||||
"Segoe UI Symbol", // Windows emoji
|
|
||||||
"Noto Color Emoji" // Linux emoji
|
|
||||||
!default;
|
|
||||||
|
|
||||||
$line-height: 1.5 !default;
|
|
||||||
$text-weight: 400 !default;
|
|
||||||
$heading-weight: 700 !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Blocks
|
|
||||||
// ––––––––––––––––––––
|
|
||||||
|
|
||||||
// For <form> elements, <button>, <article>, <details> inlined code, tooltips
|
|
||||||
$round: .25rem !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
// ––––––––––––––––––––
|
|
||||||
|
|
||||||
// For <a>, <form> elements and <button>
|
|
||||||
$transition: .2s ease-in-out !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Responsive
|
// Responsive
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -126,7 +46,6 @@ $transition: .2s ease-in-out !default;
|
||||||
// To provide an easy and fine styling on each breakpoint
|
// To provide an easy and fine styling on each breakpoint
|
||||||
// we didn't use @each, @mixin or @include.
|
// we didn't use @each, @mixin or @include.
|
||||||
// That means you need to edit each CSS selector file to add a breakpoint
|
// That means you need to edit each CSS selector file to add a breakpoint
|
||||||
// You can disable any viewports, base-font and spacing-factor with 'null'
|
|
||||||
|
|
||||||
// Breakpoints
|
// Breakpoints
|
||||||
// 'null' disable the breakpoint
|
// 'null' disable the breakpoint
|
||||||
|
|
@ -146,24 +65,3 @@ $viewports: (
|
||||||
lg: 920px,
|
lg: 920px,
|
||||||
xl: 1130px
|
xl: 1130px
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
// Base font for .rem
|
|
||||||
// 'null' disable the base font on a breakpoint
|
|
||||||
// 'xs' should not be 'null'
|
|
||||||
$base-font: (
|
|
||||||
xs: 16px,
|
|
||||||
sm: 17px,
|
|
||||||
md: 18px,
|
|
||||||
lg: 19px,
|
|
||||||
xl: 20px
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
// Multiplication factor for spacings
|
|
||||||
// 'null' disable spacing factor on a breakpoint
|
|
||||||
$spacing-factor: (
|
|
||||||
xs: 1,
|
|
||||||
sm: 1.25,
|
|
||||||
md: 1.5,
|
|
||||||
lg: 1.75,
|
|
||||||
xl: 2
|
|
||||||
) !default;
|
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
|
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
padding-bottom: $spacing-typography/2;
|
padding-bottom: calc(var(--spacing-typography) / 2);
|
||||||
border-bottom: 1px solid var(--muted-border);
|
border-bottom: 1px solid var(--muted-border);
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
|
|
@ -32,12 +32,15 @@ details {
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-chevron);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' 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");
|
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: transform var(--transition);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
@ -45,7 +48,7 @@ details {
|
||||||
}
|
}
|
||||||
|
|
||||||
~ * {
|
~ * {
|
||||||
margin-top: $spacing-typography/2;
|
margin-top: calc(var(--spacing-typography) / 2);
|
||||||
|
|
||||||
~ * {
|
~ * {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -57,7 +60,7 @@ details {
|
||||||
&[open] {
|
&[open] {
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
margin-bottom: $spacing-typography/4;
|
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|
|
||||||
|
|
@ -10,135 +10,123 @@ article {
|
||||||
> header,
|
> header,
|
||||||
> footer,
|
> footer,
|
||||||
> pre {
|
> pre {
|
||||||
margin: -$spacing-gutter;
|
margin: calc(var(--spacing-gutter) * -1);
|
||||||
padding: $spacing-block $spacing-gutter;
|
padding: var(--spacing-block) var(--spacing-gutter);
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and
|
@if map-get($breakpoints, "sm") and
|
||||||
map-get($spacing-factor, "sm") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
margin: -$spacing-block*map-get($spacing-factor, "sm");
|
margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") and
|
@if map-get($breakpoints, "md") and
|
||||||
map-get($spacing-factor, "md") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
margin: -$spacing-block*map-get($spacing-factor, "md");
|
margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") and
|
@if map-get($breakpoints, "lg") and
|
||||||
map-get($spacing-factor, "lg") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
margin: -$spacing-block*map-get($spacing-factor, "lg");
|
margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") and
|
@if map-get($breakpoints, "xl") and
|
||||||
map-get($spacing-factor, "xl") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
margin: -$spacing-block*map-get($spacing-factor, "xl");
|
margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> header {
|
> header {
|
||||||
margin-top: -$spacing-gutter*2;
|
margin-top: calc(var(--spacing-gutter) * -2);
|
||||||
margin-bottom: $spacing-block;
|
margin-bottom: var(--spacing-block);
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and
|
@if map-get($breakpoints, "sm") and
|
||||||
map-get($spacing-factor, "sm") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "sm");
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") and
|
@if map-get($breakpoints, "md") and
|
||||||
map-get($spacing-factor, "md") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
margin-top: -($spacing-block*map-get($spacing-factor, "md"));
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "md");
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") and
|
@if map-get($breakpoints, "lg") and
|
||||||
map-get($spacing-factor, "lg") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "lg");
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") and
|
@if map-get($breakpoints, "xl") and
|
||||||
map-get($spacing-factor, "xl") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xl");
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> footer,
|
> footer,
|
||||||
> pre {
|
> pre {
|
||||||
margin-top: $spacing-block;
|
margin-top: var(--spacing-block);
|
||||||
margin-bottom: -$spacing-gutter*2;
|
margin-bottom: calc(var(--spacing-gutter) * -2);
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and
|
@if map-get($breakpoints, "sm") and
|
||||||
map-get($spacing-factor, "sm") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
margin-top: $spacing-block*map-get($spacing-factor, "sm");
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "sm"));
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") and
|
@if map-get($breakpoints, "md") and
|
||||||
map-get($spacing-factor, "md") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
margin-top: $spacing-block*map-get($spacing-factor, "md");
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "md"));
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") and
|
@if map-get($breakpoints, "lg") and
|
||||||
map-get($spacing-factor, "lg") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
margin-top: $spacing-block*map-get($spacing-factor, "lg");
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "lg"));
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") and
|
@if map-get($breakpoints, "xl") and
|
||||||
map-get($spacing-factor, "xl") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
margin-top: $spacing-block*map-get($spacing-factor, "xl");
|
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,53 +3,50 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
article {
|
article {
|
||||||
margin: $spacing-block 0;
|
margin: var(--spacing-block) 0;
|
||||||
padding: $spacing-block $spacing-gutter;
|
padding: var(--spacing-block) var(--spacing-gutter);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
background: var(--card-background);
|
background: var(--card-background);
|
||||||
box-shadow: var(--card-shadow);
|
box-shadow: var(--card-shadow);
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") {
|
@if map-get($breakpoints, "sm") {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
@if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
|
@if $enable-responsive-spacings {
|
||||||
margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
|
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
|
||||||
padding: $spacing-block*map-get($spacing-factor, "sm");
|
padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
margin: $spacing-block 0;
|
margin: var(--spacing-block) 0;
|
||||||
padding: $spacing-block;
|
padding: var(--spacing-block);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") and
|
@if map-get($breakpoints, "md") and
|
||||||
map-get($spacing-factor, "md") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
|
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
|
||||||
padding: $spacing-block*map-get($spacing-factor, "md");
|
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") and
|
@if map-get($breakpoints, "lg") and
|
||||||
map-get($spacing-factor, "lg") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
|
margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;
|
||||||
padding: $spacing-block*map-get($spacing-factor, "lg");
|
padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") and
|
@if map-get($breakpoints, "xl") and
|
||||||
map-get($spacing-factor, "xl") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
|
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
|
||||||
padding: $spacing-block*map-get($spacing-factor, "xl");
|
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,17 +19,17 @@ nav {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-left: -$spacing-gutter/2;
|
margin-left: calc(var(--spacing-gutter) * -0.5);
|
||||||
}
|
}
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-right: -$spacing-gutter/2;
|
margin-right: calc(var(--spacing-gutter) * -0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: $spacing-gutter $spacing-gutter/2;
|
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||||
|
|
||||||
// HACK: Input & Button inside Nav
|
// HACK: Input & Button inside Nav
|
||||||
> *,
|
> *,
|
||||||
|
|
@ -40,23 +40,25 @@ nav {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: -$spacing-gutter (-$spacing-gutter/2);
|
margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);
|
||||||
padding: $spacing-gutter $spacing-gutter/2;
|
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
|
|
||||||
|
@if $enable-important {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
text-decoration: none;
|
@if $enable-important {
|
||||||
|
text-decoration: none !important;
|
||||||
}
|
}
|
||||||
|
@else {
|
||||||
// Disable underline for a.contrast in nav
|
text-decoration: none;
|
||||||
@if $enable-classes {
|
|
||||||
&.contrast:not([role="button"]),
|
|
||||||
&.contrast:not([role="button"]):hover,
|
|
||||||
&.contrast:not([role="button"]):active,
|
|
||||||
&.contrast:not([role="button"]):focus {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -73,11 +75,11 @@ aside {
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding: $spacing-gutter/2;
|
padding: calc(var(--spacing-gutter) / 2);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
margin: -$spacing-gutter/2;
|
margin: calc(var(--spacing-gutter) * -0.5);
|
||||||
padding: $spacing-gutter/2;
|
padding: calc(var(--spacing-gutter) / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
74
scss/components/_progress.scss
Normal file
74
scss/components/_progress.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
/**
|
||||||
|
* Progress
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Reboot based on :
|
||||||
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// 1. Add the correct display in Edge 18- and IE
|
||||||
|
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
||||||
|
progress {
|
||||||
|
display: inline-block; // 1
|
||||||
|
vertical-align: baseline; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
progress {
|
||||||
|
|
||||||
|
// Reset the default appearance
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: .5rem;
|
||||||
|
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Remove Firefox and Opera border
|
||||||
|
border: 0;
|
||||||
|
border-radius: var(--block-round);
|
||||||
|
background-color: var(--muted-background);
|
||||||
|
|
||||||
|
// IE10 uses `color` to set the bar background-color
|
||||||
|
color: var(--primary);
|
||||||
|
|
||||||
|
&::-webkit-progress-bar {
|
||||||
|
border-radius: var(--block-round);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
&[value]::-webkit-progress-value {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:indeterminate {
|
||||||
|
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left / 150% 150% no-repeat;
|
||||||
|
animation: progress-indeterminate 1s linear infinite;
|
||||||
|
|
||||||
|
&[value]::-webkit-progress-value {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&::-moz-progress-bar {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes progress-indeterminate {
|
||||||
|
0% {
|
||||||
|
background-position: 200% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: -200% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* Tooltip ([data-tooltip])
|
* Tooltip ([data-tooltip])
|
||||||
*/
|
*/
|
||||||
|
|
||||||
[data-tooltip] {
|
[data-tooltip] {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:not(a):not(button):not(input) {
|
&:not(a):not(button):not(input) {
|
||||||
|
|
@ -21,12 +21,12 @@
|
||||||
padding: .25rem .5rem;
|
padding: .25rem .5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: translate(-50%, -.25rem);
|
transform: translate(-50%, -.25rem);
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
background: var(--contrast);
|
background: var(--contrast);
|
||||||
color: var(--contrast-inverse);
|
color: var(--contrast-inverse);
|
||||||
font-size: .85rem;
|
font-size: .85rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: var(--text-weight);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -46,6 +46,7 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--contrast);
|
color: var(--contrast);
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
@ -53,6 +54,45 @@
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
animation-duration: .2s;
|
||||||
|
animation-name: slide;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
@if $enable-transitions {
|
||||||
|
animation-name: slideCaret;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animations
|
||||||
|
@if $enable-transitions {
|
||||||
|
@keyframes slide {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, .75rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -.25rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideCaret {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(-50%, -.25rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, 0rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,17 +9,24 @@
|
||||||
input[type="submit"].secondary,
|
input[type="submit"].secondary,
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
a[role="button"].secondary {
|
a[role="button"].secondary {
|
||||||
|
border: var(--button-border-width) solid var(--secondary-border);
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
color: var(--secondary-inverse);
|
color: var(--secondary-inverse);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
border-color: var(--secondary-hover-border);
|
||||||
background-color: var(--secondary-hover);
|
background-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
@if $enable-important {
|
||||||
|
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -29,17 +36,19 @@
|
||||||
input[type="submit"].contrast,
|
input[type="submit"].contrast,
|
||||||
input[type="reset"].contrast,
|
input[type="reset"].contrast,
|
||||||
a[role="button"].contrast {
|
a[role="button"].contrast {
|
||||||
|
border: var(--button-border-width) solid var(--contrast-border);
|
||||||
background-color: var(--contrast);
|
background-color: var(--contrast);
|
||||||
color: var(--contrast-inverse);
|
color: var(--contrast-inverse);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
border-color: var(--contrast-hover-border);
|
||||||
background-color: var(--contrast-hover);
|
background-color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,14 +57,14 @@
|
||||||
button.outline,
|
button.outline,
|
||||||
input[type="submit"].outline,
|
input[type="submit"].outline,
|
||||||
a.outline[role="button"] {
|
a.outline[role="button"] {
|
||||||
border: 1px solid var(--primary);
|
border: var(--button-border-width) solid var(--primary-border);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 1px solid var(--primary-hover);
|
border: var(--button-border-width) solid var(--primary-hover-border);
|
||||||
color: var(--primary-hover);
|
color: var(--primary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -66,20 +75,16 @@
|
||||||
input[type="submit"].outline.secondary,
|
input[type="submit"].outline.secondary,
|
||||||
input[type="reset"].outline,
|
input[type="reset"].outline,
|
||||||
a[role="button"].outline.secondary {
|
a[role="button"].outline.secondary {
|
||||||
border: 1px solid var(--secondary);
|
border: var(--button-border-width) solid var(--secondary-border);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--secondary);
|
color: var(--secondary);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 1px solid var(--secondary-hover);
|
border: var(--button-border-width)solid var(--secondary-hover-border);
|
||||||
color: var(--secondary-hover);
|
color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -88,19 +93,41 @@
|
||||||
input[type="submit"].outline.contrast,
|
input[type="submit"].outline.contrast,
|
||||||
input[type="reset"].outline.contrast,
|
input[type="reset"].outline.contrast,
|
||||||
a[role="button"].outline.contrast {
|
a[role="button"].outline.contrast {
|
||||||
border: 1px solid var(--contrast);
|
border: var(--button-border-width) solid var(--contrast-border);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--contrast);
|
color: var(--contrast);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 1px solid var(--contrast-hover);
|
border: var(--button-border-width) solid var(--contrast-hover-border);
|
||||||
color: var(--contrast-hover);
|
color: var(--contrast-hover);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&:focus {
|
}
|
||||||
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
|
||||||
}
|
@else {
|
||||||
|
|
||||||
|
// Button reset only for classless version
|
||||||
|
input[type="reset"] {
|
||||||
|
border: var(--button-border-width) solid var(--secondary-border);
|
||||||
|
background-color: var(--secondary);
|
||||||
|
color: var(--secondary-inverse);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--secondary-hover-border);
|
||||||
|
background-color: var(--secondary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
@if $enable-important {
|
||||||
|
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ button::-moz-focus-inner,
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
|
|
@ -53,35 +53,40 @@ a[role="button"] {
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type="submit"],
|
||||||
input[type="button"],
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
[type="file"]::-webkit-file-upload-button,
|
[type="file"]::-webkit-file-upload-button,
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||||
border: 1px solid transparent;
|
border: var(--button-border-width) solid var(--primary-border);
|
||||||
border-radius: $round;
|
border-radius: var(--button-round);
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--primary);
|
background-color: var(--primary);
|
||||||
|
box-shadow: var(--button-shadow);
|
||||||
color: var(--primary-inverse);
|
color: var(--primary-inverse);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: var(--buttons-weight);
|
||||||
line-height: $line-height;
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
color $transition,
|
border-color var(--transition),
|
||||||
box-shadow $transition;
|
color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
border-color: var(--primary-hover-border);
|
||||||
background-color: var(--primary-hover);
|
background-color: var(--primary-hover);
|
||||||
|
box-shadow: var(--button-hover-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: $monospace; // 1
|
font-family: var(--code-font); // 1
|
||||||
font-size: 1rem; // 2
|
font-size: 1rem; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -34,7 +34,7 @@ kbd {
|
||||||
background: var(--code-inlined);
|
background: var(--code-inlined);
|
||||||
color: var(--code-color-1);
|
color: var(--code-color-1);
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
font-weight: 400;
|
font-weight: var(--code-weight);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||||
|
|
@ -65,13 +65,13 @@ code,
|
||||||
kbd {
|
kbd {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .375rem .5rem;
|
padding: .375rem .5rem;
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: $spacing-block;
|
margin-bottom: var(--spacing-block);
|
||||||
padding: $spacing-block $spacing-gutter;
|
padding: var(--spacing-block) var(--spacing-gutter);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
background: var(--code-background);
|
background: var(--code-background);
|
||||||
|
|
||||||
|
|
@ -80,7 +80,7 @@ pre {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: $line-height;
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -90,7 +90,7 @@ code {
|
||||||
// Tags
|
// Tags
|
||||||
b {
|
b {
|
||||||
color: var(--code-color-2);
|
color: var(--code-color-2);
|
||||||
font-weight: normal;
|
font-weight: var(--code-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Properties
|
// Properties
|
||||||
|
|
|
||||||
|
|
@ -17,11 +17,11 @@
|
||||||
// Swatch
|
// Swatch
|
||||||
&::-webkit-color-swatch {
|
&::-webkit-color-swatch {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: $round/2;
|
border-radius: calc(var(--block-round)/2);
|
||||||
}
|
}
|
||||||
&::-moz-color-swatch {
|
&::-moz-color-swatch {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: $round/2;
|
border-radius: calc(var(--block-round)/2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -31,9 +31,7 @@
|
||||||
[type="month"],
|
[type="month"],
|
||||||
[type="time"],
|
[type="time"],
|
||||||
[type="week"] {
|
[type="week"] {
|
||||||
|
background-image: var(--icon-date);
|
||||||
// Source: https://feathericons.com/
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%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");
|
|
||||||
background-position: center right .75rem;
|
background-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -45,38 +43,47 @@
|
||||||
|
|
||||||
// Time
|
// Time
|
||||||
[type="time"] {
|
[type="time"] {
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-time);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%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");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// File
|
// File
|
||||||
[type="file"] {
|
[type="file"] {
|
||||||
padding: $spacing-input-button-horizontal/2 0;
|
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
color: var(--muted-text);
|
|
||||||
|
|
||||||
&::-webkit-file-upload-button {
|
&::-webkit-file-upload-button {
|
||||||
padding-top: $spacing-input-button-horizontal/2;
|
padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);
|
||||||
padding-bottom: $spacing-input-button-horizontal/2;
|
border: var(--button-border-width) solid var(--secondary-border);
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
|
box-shadow: var(--button-shadow);
|
||||||
color: var(--secondary-inverse);
|
color: var(--secondary-inverse);
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition:
|
||||||
|
background-color var(--transition),
|
||||||
|
border-color var(--transition),
|
||||||
|
color var(--transition),
|
||||||
|
box-shadow var(--transition);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
border: none;
|
border: none;
|
||||||
|
background: none;
|
||||||
|
|
||||||
&::-webkit-file-upload-button {
|
&::-webkit-file-upload-button {
|
||||||
|
border-color: var(--secondary-hover-border);
|
||||||
background-color: var(--secondary-hover);
|
background-color: var(--secondary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: none;
|
|
||||||
&::-webkit-file-upload-button {
|
&::-webkit-file-upload-button {
|
||||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -101,38 +108,39 @@
|
||||||
&::-webkit-slider-runnable-track {
|
&::-webkit-slider-runnable-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $height-track;
|
height: $height-track;
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
background-color: var(--input-border);
|
background-color: var(--input-border);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
box-shadow $transition;
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-track {
|
&::-moz-range-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height:$height-track;
|
height:$height-track;
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
background-color: var(--input-border);
|
background-color: var(--input-border);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
box-shadow $transition;
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-ms-track {
|
&::-ms-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $height-track;
|
height: $height-track;
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
background-color: var(--input-border);
|
background-color: var(--input-border);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
box-shadow $transition;
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -146,16 +154,15 @@
|
||||||
width: $height-thumb;
|
width: $height-thumb;
|
||||||
height: $height-thumb;
|
height: $height-thumb;
|
||||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||||
border: 0;
|
border: $border-thumb solid var(--input-background);
|
||||||
border: $border-thumb solid var(--background);
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--text);
|
background-color: var(--text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
transform $transition;
|
transform var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -164,15 +171,15 @@
|
||||||
width: $height-thumb;
|
width: $height-thumb;
|
||||||
height: $height-thumb;
|
height: $height-thumb;
|
||||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||||
border: 0;
|
border: $border-thumb solid var(--input-background);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--text);
|
background-color: var(--text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
transform $transition;
|
transform var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -181,58 +188,68 @@
|
||||||
width: $height-thumb;
|
width: $height-thumb;
|
||||||
height: $height-thumb;
|
height: $height-thumb;
|
||||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||||
border: 0;
|
border: $border-thumb solid var(--input-background);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--text);
|
background-color: var(--text);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
transform $transition;
|
transform var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
||||||
|
@if $enable-important {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
// Slider Track
|
// Slider Track
|
||||||
&::-webkit-slider-runnable-track {
|
&::-webkit-slider-runnable-track {
|
||||||
background-color: var(--muted-text);
|
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-track {
|
&::-moz-range-track {
|
||||||
background-color: var(--muted-text);
|
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-ms-track {
|
&::-ms-track {
|
||||||
background-color: var(--muted-text);
|
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-ms-fill-lower {
|
&::-ms-fill-lower {
|
||||||
background-color: var(--muted-text);
|
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
|
|
||||||
|
@if $enable-important {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
// Slider Thumb
|
// Slider Thumb
|
||||||
&::-webkit-slider-thumb {
|
&::-webkit-slider-thumb {
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
background-color: var(--primary-hover);
|
background-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
background-color: var(--primary-hover);
|
background-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-ms-thumb {
|
&::-ms-thumb {
|
||||||
transform: scale(1.25);
|
transform: scale(1.25);
|
||||||
background-color: var(--primary-hover);
|
background-color: var(--primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -243,12 +260,11 @@
|
||||||
|
|
||||||
// Search
|
// Search
|
||||||
[type="search"] {
|
[type="search"] {
|
||||||
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
|
border-radius: 5rem;
|
||||||
|
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
|
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-search);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%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");
|
|
||||||
background-position: center left .75rem;
|
background-position: center left .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,9 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
|
margin-top: -.125rem;
|
||||||
margin-right: .375rem;
|
margin-right: .375rem;
|
||||||
margin-bottom: $spacing-form-elements;
|
border-width: var(--checkbox-radio-border-width);
|
||||||
border-width: 2px;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
|
@ -21,16 +21,20 @@
|
||||||
display: none; // unstyle IE checkboxes
|
display: none; // unstyle IE checkboxes
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked {
|
&:checked,
|
||||||
border-color: var(--primary);
|
&:indeterminate {
|
||||||
background-color: var(--primary);
|
border-color: var(--input-hover-border);
|
||||||
// Source: https://feathericons.com/
|
background-color: var(--input-hover-border);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
background-image: var(--icon-checkbox);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .75rem auto;
|
background-size: .75rem auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:indeterminate {
|
||||||
|
background-image: var(--icon-minus);
|
||||||
|
}
|
||||||
|
|
||||||
& ~ label {
|
& ~ label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: .375rem;
|
margin-right: .375rem;
|
||||||
|
|
@ -45,8 +49,8 @@
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
border-width: .33rem;
|
border-width: .33rem;
|
||||||
border-color: var(--primary);
|
border-color: var(--input-hover-border);
|
||||||
background-color: var(--primary-inverse);
|
background-color: var(--input-inverse);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -57,23 +61,22 @@
|
||||||
// Config
|
// Config
|
||||||
$switch-height: 1.25rem;
|
$switch-height: 1.25rem;
|
||||||
$switch-width: 2.25rem;
|
$switch-width: 2.25rem;
|
||||||
$switch-border: 3px;
|
|
||||||
$switch-transition: .1s ease-in-out;
|
$switch-transition: .1s ease-in-out;
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
width: $switch-width;
|
width: $switch-width;
|
||||||
height: $switch-height;
|
height: $switch-height;
|
||||||
border: $switch-border solid var(--input-border);
|
border: var(--switch-border-width) solid var(--input-border);
|
||||||
border-radius: $switch-height;
|
border-radius: $switch-height;
|
||||||
background-color: var(--input-border);
|
background-color: var(--input-border);
|
||||||
line-height: $switch-height;
|
line-height: $switch-height;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(#{$switch-height} - #{$switch-border*2});
|
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--primary-inverse);
|
background-color: var(--input-inverse);
|
||||||
content: '';
|
content: '';
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
|
|
@ -82,13 +85,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
border-color: var(--primary);
|
border-color: var(--input-hover-border);
|
||||||
background-color: var(--primary);
|
background-color: var(--input-hover-border);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: calc(#{$switch-width/2} - #{$switch-border});
|
margin-left: calc(#{$switch-width/2} - var(--switch-border-width));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ textarea {
|
||||||
font-family: inherit; // 1
|
font-family: inherit; // 1
|
||||||
font-size: 1rem; // 1
|
font-size: 1rem; // 1
|
||||||
letter-spacing: inherit; // 2
|
letter-spacing: inherit; // 2
|
||||||
line-height: $line-height; // 1
|
line-height: var(--line-height); // 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show the overflow in IE.
|
// Show the overflow in IE.
|
||||||
|
|
@ -36,7 +36,6 @@ select {
|
||||||
// 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 {
|
||||||
display: table; // 1
|
|
||||||
max-width: 100%; // 1
|
max-width: 100%; // 1
|
||||||
padding: 0; // 3
|
padding: 0; // 3
|
||||||
color: inherit; // 2
|
color: inherit; // 2
|
||||||
|
|
@ -118,13 +117,17 @@ textarea {
|
||||||
|
|
||||||
// Force height for alternatives input types
|
// Force height for alternatives input types
|
||||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||||
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
|
height: calc(
|
||||||
|
(1rem * var(--line-height)) +
|
||||||
|
(var(--form-element-spacing-vertical) * 2) +
|
||||||
|
(var(--form-element-border-width) * 2)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fieldset
|
// Fieldset
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -133,7 +136,7 @@ fieldset {
|
||||||
label,
|
label,
|
||||||
fieldset legend {
|
fieldset legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: $spacing-form-elements;
|
margin-bottom: var(--spacing-form-element);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -153,7 +156,7 @@ textarea {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -161,20 +164,20 @@ textarea {
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
border: 1px solid var(--input-border);
|
border: var(--form-element-border-width) solid var(--input-border);
|
||||||
border-radius: $round;
|
border-radius: var(--block-round);
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: var(--input-background);
|
background-color: var(--input-background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-weight: normal;
|
font-weight: var(--form-element-weight);
|
||||||
|
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
border-color $transition,
|
border-color var(--transition),
|
||||||
color $transition,
|
color var(--transition),
|
||||||
box-shadow $transition;
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::placeholder,
|
&::placeholder,
|
||||||
|
|
@ -185,7 +188,8 @@ textarea {
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: var(--primary);
|
border-color: var(--input-hover-border);
|
||||||
|
background-color: var(--input-hover-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[readonly],
|
&[readonly],
|
||||||
|
|
@ -196,6 +200,16 @@ textarea {
|
||||||
& ~ label {
|
& ~ label {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
@if $enable-important {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||||
|
|
@ -203,8 +217,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
cursor: not-allowed;
|
opacity: .66;
|
||||||
opacity: .5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validation states
|
// Validation states
|
||||||
|
|
@ -220,13 +233,11 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.valid {
|
&.valid {
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-valid);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.invalid {
|
&.invalid {
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-invalid);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -235,7 +246,7 @@ textarea {
|
||||||
input:not([type="checkbox"]):not([type="radio"]),
|
input:not([type="checkbox"]):not([type="radio"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Focus styles (Not Range and File)
|
// Focus styles (Not Range and File)
|
||||||
|
|
@ -243,7 +254,7 @@ input:not([type="range"]):not([type="file"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -257,9 +268,8 @@ select {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([multiple]):not([size]) {
|
&:not([multiple]):not([size]) {
|
||||||
padding-right: #{$spacing-input-button-horizontal + 1.5rem};
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
// Source: https://feathericons.com/
|
background-image: var(--icon-chevron);
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' 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");
|
|
||||||
background-position: center right .75rem;
|
background-position: center right .75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
@ -271,13 +281,12 @@ form small {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helper: padding
|
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
+ small {
|
+ small {
|
||||||
margin-top: -$spacing-typography/1.5;
|
margin-top: calc(var(--spacing-typography) * -0.5);
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -286,6 +295,6 @@ label {
|
||||||
& > input,
|
& > input,
|
||||||
& > select,
|
& > select,
|
||||||
& > textarea {
|
& > textarea {
|
||||||
margin-top: $spacing-form-elements;
|
margin-top: var(--spacing-form-element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,6 @@ hr {
|
||||||
border-top: 1px solid var(--muted-border);
|
border-top: 1px solid var(--muted-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 1. Add the correct display in Edge 18- and IE
|
|
||||||
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
|
|
||||||
progress {
|
|
||||||
display: inline-block; // 1
|
|
||||||
vertical-align: baseline; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add the correct display in IE 10+
|
// Add the correct display in IE 10+
|
||||||
[hidden],
|
[hidden],
|
||||||
template {
|
template {
|
||||||
|
|
|
||||||
|
|
@ -26,11 +26,11 @@ table {
|
||||||
// Cells
|
// Cells
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
padding: ($spacing-gutter/2) $spacing-gutter;
|
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
|
||||||
border-bottom: 1px solid var(--table-border);
|
border-bottom: 1px solid var(--table-border);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: $text-weight;
|
font-weight: var(--text-weight);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -50,6 +50,8 @@ thead {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Striping
|
// Striping
|
||||||
tbody tr:nth-child(odd) {
|
table[role="grid"] {
|
||||||
|
tbody tr:nth-child(odd) {
|
||||||
background-color: var(--table-stripping);
|
background-color: var(--table-stripping);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ pre,
|
||||||
table,
|
table,
|
||||||
ul {
|
ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
|
@ -76,10 +76,10 @@ a {
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition:
|
||||||
background-color $transition,
|
background-color var(--transition),
|
||||||
color $transition,
|
color var(--transition),
|
||||||
text-decoration $transition,
|
text-decoration var(--transition),
|
||||||
box-shadow $transition;
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -99,6 +99,7 @@ a {
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
a.secondary {
|
a.secondary {
|
||||||
color: var(--secondary);
|
color: var(--secondary);
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
|
|
@ -114,16 +115,14 @@ a {
|
||||||
|
|
||||||
// Link .contrast
|
// Link .contrast
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
a.contrast:not([role="button"]) {
|
a.contrast {
|
||||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border);
|
|
||||||
color: var(--contrast);
|
color: var(--contrast);
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border-h);
|
|
||||||
color: var(--contrast-hover);
|
color: var(--contrast-hover);
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
@ -141,43 +140,44 @@ h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
font-weight: $heading-weight;
|
font-family: var(--titles-font);
|
||||||
|
font-weight: var(--titles-weight);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: $spacing-typography*2;
|
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||||
color: var(--h1);
|
color: var(--h1);
|
||||||
font-size: 2rem;
|
font-size: var(--h1-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: $spacing-typography*1.75;
|
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||||
color: var(--h2);
|
color: var(--h2);
|
||||||
font-size: 1.75rem;
|
font-size: var(--h2-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-bottom: $spacing-typography*1.5;
|
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||||
color: var(--h3);
|
color: var(--h3);
|
||||||
font-size: 1.5rem;
|
font-size: var(--h3-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
margin-bottom: $spacing-typography*1.25;
|
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||||
color: var(--h4);
|
color: var(--h4);
|
||||||
font-size: 1.25rem;
|
font-size: var(--h4-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
margin-bottom: $spacing-typography*1.125;
|
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||||
color: var(--h5);
|
color: var(--h5);
|
||||||
font-size: 1.125rem;
|
font-size: var(--h5-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
color: var(--h6);
|
color: var(--h6);
|
||||||
font-size: 1rem;
|
font-size: var(--h6-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Margin-top for headings after a typography block
|
// Margin-top for headings after a typography block
|
||||||
|
|
@ -192,34 +192,34 @@ pre,
|
||||||
table,
|
table,
|
||||||
ul {
|
ul {
|
||||||
& ~ h1 {
|
& ~ h1 {
|
||||||
margin-top: $spacing-typography*2;
|
margin-top: calc(var(--spacing-typography) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ h2 {
|
& ~ h2 {
|
||||||
margin-top: $spacing-typography*1.75;
|
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ h3 {
|
& ~ h3 {
|
||||||
margin-top: $spacing-typography*1.5;
|
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ h4 {
|
& ~ h4 {
|
||||||
margin-top: $spacing-typography*1.25;
|
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ h5 {
|
& ~ h5 {
|
||||||
margin-top: $spacing-typography*1.125;
|
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ h6 {
|
& ~ h6 {
|
||||||
margin-top: $spacing-typography;
|
margin-top: calc(var(--spacing-typography));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Multi-level heading
|
// Multi-level heading
|
||||||
hgroup {
|
hgroup {
|
||||||
margin-bottom: $spacing-typography;
|
margin-bottom: var(--spacing-typography);
|
||||||
|
|
||||||
*{
|
*{
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -227,14 +227,15 @@ hgroup {
|
||||||
|
|
||||||
> *:last-child {
|
> *:last-child {
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
|
font-family: unset;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: normal;
|
font-weight: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Paragraphs
|
// Paragraphs
|
||||||
p {
|
p {
|
||||||
margin-bottom: $spacing-typography/2;
|
margin-bottom: var(--spacing-typography);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Small
|
// Small
|
||||||
|
|
@ -268,10 +269,10 @@ small {
|
||||||
// Lists
|
// Lists
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
padding-left: $spacing-typography;
|
padding-left: var(--spacing-typography);
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-bottom: $spacing-typography/4;
|
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -290,12 +291,12 @@ mark {
|
||||||
// Blockquote
|
// Blockquote
|
||||||
blockquote {
|
blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
margin: ($spacing-typography*2) 0;
|
margin: var(--spacing-typography) 0;
|
||||||
padding: $spacing-gutter;
|
padding: var(--spacing-gutter);
|
||||||
border-left: .25rem solid var(--muted-border);
|
border-left: .25rem solid var(--muted-border);
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: $spacing-typography/2;
|
margin-top: calc(var(--spacing-typography) / 2);
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-right: $spacing-gutter;
|
padding-right: var(--spacing-gutter);
|
||||||
padding-left: $spacing-gutter;
|
padding-left: var(--spacing-gutter);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
|
||||||
|
|
@ -38,46 +38,42 @@ html {
|
||||||
-webkit-text-size-adjust: 100%; // 6
|
-webkit-text-size-adjust: 100%; // 6
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-family: $sans-serif;
|
font-family: var(--text-font);
|
||||||
font-size: map-get($base-font, "xs");
|
font-size: var(--base-font-xs);
|
||||||
font-weight: $text-weight;
|
font-weight: var(--text-weight);
|
||||||
line-height: $line-height; // 1
|
line-height: var(--line-height); // 1
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
cursor: default; // 4
|
cursor: default; // 4
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and
|
@if map-get($breakpoints, "sm") and
|
||||||
map-get($base-font, "sm") and
|
|
||||||
$enable-responsive-typography {
|
$enable-responsive-typography {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
font-size: map-get($base-font, "sm");
|
font-size: var(--base-font-sm);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") and
|
@if map-get($breakpoints, "md") and
|
||||||
map-get($base-font, "md") and
|
|
||||||
$enable-responsive-typography {
|
$enable-responsive-typography {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
font-size: map-get($base-font, "md");
|
font-size: var(--base-font-md);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") and
|
@if map-get($breakpoints, "lg") and
|
||||||
map-get($base-font, "lg") and
|
|
||||||
$enable-responsive-typography {
|
$enable-responsive-typography {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
font-size: map-get($base-font, "lg");
|
font-size: var(--base-font-lg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") and
|
@if map-get($breakpoints, "xl") and
|
||||||
map-get($base-font, "xl") and
|
|
||||||
$enable-responsive-typography {
|
$enable-responsive-typography {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
font-size: map-get($base-font, "xl");
|
font-size: var(--base-font-xl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
grid-column-gap: $spacing-gutter;
|
grid-column-gap: var(--spacing-gutter);
|
||||||
grid-row-gap: $spacing-gutter;
|
grid-row-gap: var(--spacing-gutter);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ figure {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
padding: ($spacing-gutter/2) 0;
|
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,41 +4,37 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xs")*2;
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and
|
@if map-get($breakpoints, "sm") and
|
||||||
map-get($spacing-factor, "sm") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "sm")*2;
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") and
|
@if map-get($breakpoints, "md") and
|
||||||
map-get($spacing-factor, "md") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "md")*2;
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") and
|
@if map-get($breakpoints, "lg") and
|
||||||
map-get($spacing-factor, "lg") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "lg")*2;
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") and
|
@if map-get($breakpoints, "xl") and
|
||||||
map-get($spacing-factor, "xl") and
|
|
||||||
$enable-responsive-spacings {
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xl")*2;
|
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,8 @@ body {
|
||||||
> header,
|
> header,
|
||||||
> main,
|
> main,
|
||||||
> footer {
|
> footer {
|
||||||
$padding-horizontal: $spacing-gutter !default;
|
$padding-horizontal: var(--spacing-gutter) !default;
|
||||||
$spacing-vertical: $spacing-block !default;
|
$spacing-vertical: var(--spacing-block) !default;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
|
@ -50,13 +50,13 @@ body {
|
||||||
$padding-horizontal: 0;
|
$padding-horizontal: 0;
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
$padding-horizontal: $spacing-gutter;
|
$padding-horizontal: var(--spacing-gutter);
|
||||||
}
|
}
|
||||||
@if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
|
@if $enable-responsive-spacings {
|
||||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
|
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
$spacing-vertical: $spacing-block;
|
$spacing-vertical: var(--spacing-block);
|
||||||
}
|
}
|
||||||
padding: $spacing-vertical $padding-horizontal;
|
padding: $spacing-vertical $padding-horizontal;
|
||||||
}
|
}
|
||||||
|
|
@ -71,8 +71,8 @@ body {
|
||||||
@if $enable-viewport and $enable-semantic-container {
|
@if $enable-viewport and $enable-semantic-container {
|
||||||
max-width: map-get($viewports, "md");
|
max-width: map-get($viewports, "md");
|
||||||
}
|
}
|
||||||
@if $enable-responsive-spacings and map-get($spacing-factor, "md") {
|
@if $enable-responsive-spacings {
|
||||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "md");
|
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||||
padding: $spacing-vertical $padding-horizontal;
|
padding: $spacing-vertical $padding-horizontal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -86,8 +86,8 @@ body {
|
||||||
@if $enable-viewport and $enable-semantic-container {
|
@if $enable-viewport and $enable-semantic-container {
|
||||||
max-width: map-get($viewports, "lg");
|
max-width: map-get($viewports, "lg");
|
||||||
}
|
}
|
||||||
@if $enable-responsive-spacings and map-get($spacing-factor, "lg") {
|
@if $enable-responsive-spacings {
|
||||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "lg");
|
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||||
padding: $spacing-vertical $padding-horizontal;
|
padding: $spacing-vertical $padding-horizontal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -101,8 +101,8 @@ body {
|
||||||
@if $enable-viewport and $enable-semantic-container {
|
@if $enable-viewport and $enable-semantic-container {
|
||||||
max-width: map-get($viewports, "xl");
|
max-width: map-get($viewports, "xl");
|
||||||
}
|
}
|
||||||
@if $enable-responsive-spacings and map-get($spacing-factor, "xl") {
|
@if $enable-responsive-spacings {
|
||||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
|
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||||
padding: $spacing-vertical $padding-horizontal;
|
padding: $spacing-vertical $padding-horizontal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.1.0 (https://picocss.com)
|
* Pico.css v1.2.0 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -28,13 +28,14 @@
|
||||||
@import "content/table"; // table, tr, td, ...
|
@import "content/table"; // table, tr, td, ...
|
||||||
@import "content/code"; // pre, code, ...
|
@import "content/code"; // pre, code, ...
|
||||||
@import "content/accessibility"; // -ms-touch-action, aria-*
|
@import "content/accessibility"; // -ms-touch-action, aria-*
|
||||||
@import "content/miscs"; // hr, progress, template, [hidden], dialog, canvas
|
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
@import "components/accordion"; // details, summary
|
@import "components/accordion"; // details, summary
|
||||||
@import "components/card"; // article
|
@import "components/card"; // article
|
||||||
@import "components/card-sectioning"; // article > header, footer, pre
|
@import "components/card-sectioning"; // article > header, footer, pre
|
||||||
@import "components/nav"; // nav
|
@import "components/nav"; // nav
|
||||||
|
@import "components/progress"; // progress
|
||||||
@import "components/tooltip"; // data-tooltip
|
@import "components/tooltip"; // data-tooltip
|
||||||
|
|
||||||
// Reduce motion
|
// Reduce motion
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* Pico.css v1.1.0 (https://picocss.com)
|
* Pico.css v1.2.0 (https://picocss.com)
|
||||||
* Copyright 2020 - Licensed under MIT
|
* Copyright 2020 - Licensed under MIT
|
||||||
*
|
*
|
||||||
* Slim version example
|
* Slim version example
|
||||||
|
|
@ -51,13 +51,14 @@ $enable-important: false;
|
||||||
@import "content/table"; // table, tr, td, ...
|
@import "content/table"; // table, tr, td, ...
|
||||||
// @import "content/code"; // pre, code, ...
|
// @import "content/code"; // pre, code, ...
|
||||||
@import "content/accessibility"; // -ms-touch-action, aria-*
|
@import "content/accessibility"; // -ms-touch-action, aria-*
|
||||||
// @import "content/miscs"; // hr, progress, template, [hidden], dialog
|
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
// @import "components/accordion"; // details, summary
|
// @import "components/accordion"; // details, summary
|
||||||
// @import "components/card"; // article
|
// @import "components/card"; // article
|
||||||
// @import "components/card-sectioning"; // article > header, footer, pre
|
// @import "components/card-sectioning"; // article > header, footer, pre
|
||||||
// @import "components/nav"; // nav
|
// @import "components/nav"; // nav
|
||||||
|
// @import "components/progress"; // progress
|
||||||
// @import "components/tooltip"; // data-tooltip
|
// @import "components/tooltip"; // data-tooltip
|
||||||
|
|
||||||
// Reduce motion
|
// Reduce motion
|
||||||
|
|
|
||||||
|
|
@ -3,5 +3,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "default/colors";
|
@import "default/colors";
|
||||||
|
@import "default/styles";
|
||||||
|
@import "default/icons";
|
||||||
@import "default/light";
|
@import "default/light";
|
||||||
@import "default/dark";
|
@import "default/dark";
|
||||||
|
|
@ -35,9 +35,3 @@ $green-600: hsl(160, 55%, 35%) !default;
|
||||||
$green-700: hsl(160, 60%, 30%) !default;
|
$green-700: hsl(160, 60%, 30%) !default;
|
||||||
$red-700: hsl(0, 45%, 50%) !default;
|
$red-700: hsl(0, 45%, 50%) !default;
|
||||||
$red-900: hsl(0, 45%, 40%) !default;
|
$red-900: hsl(0, 45%, 40%) !default;
|
||||||
|
|
||||||
// Icons color
|
|
||||||
// For <details>, [type="date"], <select>, etc.
|
|
||||||
// Must be neutral to work in light or dark mode
|
|
||||||
// HACK: .99 opacity is used to force rgba() vs #hex
|
|
||||||
$icon-color: #{rgba($grey-500, .999)};
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
// Dark theme (Auto)
|
// Dark theme (Auto)
|
||||||
// Automatically enabled if user has Dark mode enabled
|
// Automatically enabled if user has Dark mode enabled
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
:root:not([data-theme="light"]) {
|
:root:not([data-theme="light"]) {
|
||||||
|
|
||||||
|
|
@ -17,35 +18,47 @@
|
||||||
|
|
||||||
// Primary Call-to-Action and links
|
// Primary Call-to-Action and links
|
||||||
--primary: #{$primary-600};
|
--primary: #{$primary-600};
|
||||||
|
--primary-border: var(--primary);
|
||||||
--primary-hover: #{$primary-500};
|
--primary-hover: #{$primary-500};
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
--primary-focus: #{rgba($primary-600, .25)};
|
--primary-focus: #{rgba($primary-600, .25)};
|
||||||
--primary-inverse: #{$white};
|
--primary-inverse: #{$white};
|
||||||
|
|
||||||
// // Secondary Call-to-Action, links and kbd
|
// // Secondary Call-to-Action, links and kbd
|
||||||
--secondary: #{$grey-600};
|
--secondary: #{$grey-600};
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
--secondary-hover: #{$grey-500};
|
--secondary-hover: #{$grey-500};
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
--secondary-focus: #{rgba($grey-600, .25)};
|
--secondary-focus: #{rgba($grey-600, .25)};
|
||||||
--secondary-inverse: #{$white};
|
--secondary-inverse: #{$white};
|
||||||
|
|
||||||
// Contrast Call-to-Action and Tooltips
|
// Contrast Call-to-Action and Tooltips
|
||||||
--contrast: #{$grey-100};
|
--contrast: #{$grey-100};
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
--contrast-hover: #{$white};
|
--contrast-hover: #{$white};
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
--contrast-focus: #{rgba($grey-600, .25)};
|
--contrast-focus: #{rgba($grey-600, .25)};
|
||||||
--contrast-border: #{rgba($amber-200, .33)}; // Links underline for
|
|
||||||
--contrast-border-h: #{rgba($amber-200, .5)}; // Links hover underline
|
|
||||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
--input-background: #{darken($grey-900, 6%)};
|
--input-background: #{darken($grey-900, 6%)};
|
||||||
--input-border: #{mix($grey-800, $grey-700)};
|
--input-border: #{mix($grey-800, $grey-700)};
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
|
||||||
|
// Button
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
// Utilities states
|
// Utilities states
|
||||||
--valid: #{$green-700};
|
--valid: #{$green-700};
|
||||||
--invalid: #{$red-900};
|
--invalid: #{$red-900};
|
||||||
--mark: #{rgba($amber-200, .5)};
|
--mark: #{rgba($amber-200, .1875)};
|
||||||
--mark-text: #{$white};
|
--mark-text: #{$white};
|
||||||
--muted-text: #{$grey-500};
|
--muted-text: #{$grey-500};
|
||||||
--muted-background: #{darken($grey-900, 6%)};
|
--muted-background: #{mix($grey-800, $grey-900)};
|
||||||
--muted-border: #{mix($grey-800, $grey-900)};
|
--muted-border: #{mix($grey-800, $grey-900)};
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
|
|
@ -63,8 +76,8 @@
|
||||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||||
|
|
||||||
// Table
|
// Table
|
||||||
--table-border: #{rgba($grey-500, .06)};
|
--table-border: #{rgba($grey-500, .075)};
|
||||||
--table-stripping: #{rgba($grey-500, .02)};
|
--table-stripping: #{rgba($grey-500, .05)};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -88,34 +101,47 @@
|
||||||
|
|
||||||
// Primary Call-to-Action and links
|
// Primary Call-to-Action and links
|
||||||
--primary: #{$primary-600};
|
--primary: #{$primary-600};
|
||||||
|
--primary-border: var(--primary);
|
||||||
--primary-hover: #{$primary-500};
|
--primary-hover: #{$primary-500};
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
--primary-focus: #{rgba($primary-600, .25)};
|
--primary-focus: #{rgba($primary-600, .25)};
|
||||||
--primary-inverse: #{$white};
|
--primary-inverse: #{$white};
|
||||||
|
|
||||||
// Secondary Call-to-Action, links and kbd
|
// // Secondary Call-to-Action, links and kbd
|
||||||
--secondary: #{$grey-600};
|
--secondary: #{$grey-600};
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
--secondary-hover: #{$grey-500};
|
--secondary-hover: #{$grey-500};
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
--secondary-focus: #{rgba($grey-600, .25)};
|
--secondary-focus: #{rgba($grey-600, .25)};
|
||||||
--secondary-inverse: #{$white};
|
--secondary-inverse: #{$white};
|
||||||
|
|
||||||
// Contrast Call-to-Action and Tooltips
|
// Contrast Call-to-Action and Tooltips
|
||||||
--contrast: #{$grey-100};
|
--contrast: #{$grey-100};
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
--contrast-hover: #{$white};
|
--contrast-hover: #{$white};
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
--contrast-focus: #{rgba($grey-600, .25)};
|
--contrast-focus: #{rgba($grey-600, .25)};
|
||||||
--contrast-border: #{rgba($amber-200, .33)}; // For links
|
|
||||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
--input-background: #{darken($grey-900, 6%)};
|
--input-background: #{darken($grey-900, 6%)};
|
||||||
--input-border: #{mix($grey-800, $grey-700)};
|
--input-border: #{mix($grey-800, $grey-700)};
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
|
||||||
|
// Button
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
// Utilities states
|
// Utilities states
|
||||||
--valid: #{$green-700};
|
--valid: #{$green-700};
|
||||||
--invalid: #{$red-900};
|
--invalid: #{$red-900};
|
||||||
--mark: #{rgba($amber-200, .5)};
|
--mark: #{rgba($amber-200, .1875)};
|
||||||
--mark-text: #{$white};
|
--mark-text: #{$white};
|
||||||
--muted-text: #{$grey-500};
|
--muted-text: #{$grey-500};
|
||||||
--muted-background: #{darken($grey-900, 6%)};
|
--muted-background: #{mix($grey-800, $grey-900)};
|
||||||
--muted-border: #{mix($grey-800, $grey-900)};
|
--muted-border: #{mix($grey-800, $grey-900)};
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
|
|
@ -133,6 +159,6 @@
|
||||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||||
|
|
||||||
// Table
|
// Table
|
||||||
--table-border: #{rgba($grey-500, .06)};
|
--table-border: #{rgba($grey-500, .075)};
|
||||||
--table-stripping: #{rgba($grey-500, .02)};
|
--table-stripping: #{rgba($grey-500, .05)};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
13
scss/themes/default/_icons.scss
Normal file
13
scss/themes/default/_icons.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Icons
|
||||||
|
// Source: https://feathericons.com/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' 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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' 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-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='#{rgba($grey-500, .999)}' opacity='0.66' 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-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='#{rgba($grey-500, .999)}' opacity='0.66' 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-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
--icon-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='%23FFF' 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-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='#{rgba($green-600, .999)}' 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='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
// Light theme (Default)
|
// Light theme (Default)
|
||||||
// Can be forced with data-theme="light"
|
// Can be forced with data-theme="light"
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme="light"],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
|
|
||||||
|
|
@ -17,32 +18,44 @@
|
||||||
|
|
||||||
// Primary Call-to-Action and links
|
// Primary Call-to-Action and links
|
||||||
--primary: #{$primary-600};
|
--primary: #{$primary-600};
|
||||||
|
--primary-border: var(--primary);
|
||||||
--primary-hover: #{$primary-700};
|
--primary-hover: #{$primary-700};
|
||||||
|
--primary-hover-border: var(--primary-hover);
|
||||||
--primary-focus: #{rgba($primary-600, .125)};
|
--primary-focus: #{rgba($primary-600, .125)};
|
||||||
--primary-inverse: #{$white};
|
--primary-inverse: #{$white};
|
||||||
|
|
||||||
// Secondary Call-to-Action, links and kbd
|
// Secondary Call-to-Action, links and kbd
|
||||||
--secondary: #{$grey-500};
|
--secondary: #{$grey-500};
|
||||||
|
--secondary-border: var(--secondary);
|
||||||
--secondary-hover: #{$grey-700};
|
--secondary-hover: #{$grey-700};
|
||||||
|
--secondary-hover-border: var(--secondary-hover);
|
||||||
--secondary-focus: #{rgba($grey-500, .125)};
|
--secondary-focus: #{rgba($grey-500, .125)};
|
||||||
--secondary-inverse: #{$white};
|
--secondary-inverse: #{$white};
|
||||||
|
|
||||||
// Contrast Call-to-Action and Tooltips
|
// Contrast Call-to-Action and Tooltips
|
||||||
--contrast: #{$grey-800};
|
--contrast: #{$grey-800};
|
||||||
|
--contrast-border: var(--contrast);
|
||||||
--contrast-hover: #{mix($grey-900, $black)};
|
--contrast-hover: #{mix($grey-900, $black)};
|
||||||
|
--contrast-hover-border: var(--contrast-hover);
|
||||||
--contrast-focus: #{rgba($grey-500, .125)};
|
--contrast-focus: #{rgba($grey-500, .125)};
|
||||||
--contrast-border: #{rgba($amber-200, .5)}; // Links underline
|
|
||||||
--contrast-border-h: #{rgba($amber-200, 1)}; // Links hover underline
|
|
||||||
--contrast-inverse: #{$white};
|
--contrast-inverse: #{$white};
|
||||||
|
|
||||||
// Form elements
|
// Form elements
|
||||||
--input-background: #{$white};
|
--input-background: #{$white};
|
||||||
--input-border: #{mix($grey-100, $grey-200)};
|
--input-border: #{mix($grey-100, $grey-200)};
|
||||||
|
--input-hover-background: var(--input-background);
|
||||||
|
--input-hover-border: var(--primary);
|
||||||
|
--input-focus: var(--primary-focus);
|
||||||
|
--input-inverse: var(--primary-inverse);
|
||||||
|
|
||||||
|
// Button
|
||||||
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
// Utilities states
|
// Utilities states
|
||||||
--valid: #{$green-600};
|
--valid: #{$green-600};
|
||||||
--invalid: #{$red-700};
|
--invalid: #{$red-700};
|
||||||
--mark: #{rgba($amber-200, .5)};
|
--mark: #{rgba($amber-200, .33)};
|
||||||
--mark-text: #{$grey-800};
|
--mark-text: #{$grey-800};
|
||||||
--muted-text: #{mix($grey-400, $grey-500)};
|
--muted-text: #{mix($grey-400, $grey-500)};
|
||||||
--muted-background: #{$grey-50};
|
--muted-background: #{$grey-50};
|
||||||
|
|
@ -64,5 +77,5 @@
|
||||||
|
|
||||||
// Table
|
// Table
|
||||||
--table-border: #{rgba($grey-50, .75)};
|
--table-border: #{rgba($grey-50, .75)};
|
||||||
--table-stripping: #{rgba($grey-500, .04)};
|
--table-stripping: #{rgba($grey-500, .075)};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
92
scss/themes/default/_styles.scss
Normal file
92
scss/themes/default/_styles.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
// Commons Styles
|
||||||
|
|
||||||
|
:root {
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Fonts family
|
||||||
|
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||||
|
--text-font: 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";
|
||||||
|
--titles-font: var(--text-font);
|
||||||
|
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
|
||||||
|
// Typography styles
|
||||||
|
--line-height: 1.5;
|
||||||
|
--text-weight: 400;
|
||||||
|
--titles-weight: 700;
|
||||||
|
--form-element-weight: var(--text-weight);
|
||||||
|
--buttons-weight: var(--text-weight);
|
||||||
|
--code-weight: var(--text-weight);
|
||||||
|
|
||||||
|
// Base font sizes
|
||||||
|
// All the others sizes are relative to this font base sizes (rem)
|
||||||
|
--base-font-xs: 16px;
|
||||||
|
--base-font-sm: 17px;
|
||||||
|
--base-font-md: 18px;
|
||||||
|
--base-font-lg: 19px;
|
||||||
|
--base-font-xl: 20px;
|
||||||
|
|
||||||
|
// Font sizes
|
||||||
|
// All the others sizes are relative to this sizes
|
||||||
|
--h1-size: 2rem;
|
||||||
|
--h2-size: 1.75rem;
|
||||||
|
--h3-size: 1.5rem;
|
||||||
|
--h4-size: 1.25rem;
|
||||||
|
--h5-size: 1.125rem;
|
||||||
|
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
|
||||||
|
--block-round: .25rem;
|
||||||
|
|
||||||
|
// Form elements
|
||||||
|
--form-element-border-width: 1px;
|
||||||
|
--form-element-outline-width: 3px;
|
||||||
|
--checkbox-radio-border-width: 2px;
|
||||||
|
--switch-border-width: 3px;
|
||||||
|
--form-element-spacing-vertical: .75rem;
|
||||||
|
--form-element-spacing-horizontal: 1rem;
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
--button-round: var(--block-round);
|
||||||
|
--button-border-width: var(--form-element-border-width);
|
||||||
|
--button-outline-width: var(--form-element-outline-width);
|
||||||
|
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||||
|
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||||
|
|
||||||
|
|
||||||
|
// Spacings
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Gutters and horizontals margins
|
||||||
|
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
|
||||||
|
--spacing-gutter: 1rem;
|
||||||
|
|
||||||
|
// Vertical spacing for blocks
|
||||||
|
// For <header>, <main>, <footer>, <section>, <article>
|
||||||
|
--spacing-block: 2rem;
|
||||||
|
|
||||||
|
// Multiplication factor for --spacing-block
|
||||||
|
// '1' disable spacing factor on a breakpoint
|
||||||
|
--spacing-factor-xs: 1;
|
||||||
|
--spacing-factor-sm: 1.25;
|
||||||
|
--spacing-factor-md: 1.5;
|
||||||
|
--spacing-factor-lg: 1.75;
|
||||||
|
--spacing-factor-xl: 2;
|
||||||
|
|
||||||
|
// Vertical margins for typography elements
|
||||||
|
--spacing-typography: 1.5rem;
|
||||||
|
|
||||||
|
// Spacing between <form> elements
|
||||||
|
--spacing-form-element: .25rem;
|
||||||
|
|
||||||
|
|
||||||
|
// Transitions
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
// Transitions: <a>, <form> elements and <button>
|
||||||
|
--transition: .2s ease-in-out;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue