mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 09:56:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #8 from picocss/dev

Browse source 
Minor Release (v1.2.0)
This commit is contained in:
Lucas Larroche 2020-10-01 13:43:29 +07:00 • committed by GitHub
commit 502ff46d5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
57 changed files with 3443 additions and 2062 deletions
Download patch file Download diff file Expand all files Collapse all files

24
README.md
View file

@ -53,11 +53,19 @@ npm install @picocss/pico
## Examples ## Examples
Minimalist templates to discover Pico in action:
[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples) [![Examples](https://picocss.com/img/examples.jpg)](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))

882
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

4
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

928
css/pico.css
View file

File diff suppressed because it is too large Load diff

882
css/pico.fluid.classless.css
View file

File diff suppressed because it is too large Load diff

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

518
css/pico.slim.css
View file

@ -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,144 +8,230 @@
/** /**
* 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;
--text: #415462; --text: #415462;
--h1: #1b2832; --h1: #1b2832;
--h2: #2c3d49; --h2: #2c3d49;
--h3: #415462; --h3: #415462;
--h4: #596b78; --h4: #596b78;
--h5: #73828c; --h5: #73828c;
--h6: #8a99a3; --h6: #8a99a3;
--primary: #1095c1; --primary: #1095c1;
--primary-hover: #08769b; --primary-border: var(--primary);
--primary-focus: rgba(16, 149, 193, 0.125); --primary-hover: #08769b;
--primary-inverse: #FFF; --primary-hover-border: var(--primary-hover);
--secondary: #73828c; --primary-focus: rgba(16, 149, 193, 0.125);
--secondary-hover: #415462; --primary-inverse: #FFF;
--secondary-focus: rgba(115, 130, 140, 0.125); --secondary: #73828c;
--secondary-inverse: #FFF; --secondary-border: var(--secondary);
--contrast: #2c3d49; --secondary-hover: #415462;
--contrast-hover: #0d1419; --secondary-hover-border: var(--secondary-hover);
--contrast-focus: rgba(115, 130, 140, 0.125); --secondary-focus: rgba(115, 130, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5); --secondary-inverse: #FFF;
--contrast-border-h: #ffdf80; --contrast: #2c3d49;
--contrast-inverse: #FFF; --contrast-border: var(--contrast);
--input-background: #FFF; --contrast-hover: #0d1419;
--input-border: #c8d1d8; --contrast-hover-border: var(--contrast-hover);
--valid: #288a6a; --contrast-focus: rgba(115, 130, 140, 0.125);
--invalid: #b94646; --contrast-inverse: #FFF;
--mark: rgba(255, 223, 128, 0.5); --input-background: #FFF;
--mark-text: #2c3d49; --input-border: #c8d1d8;
--muted-text: #7e8d98; --input-hover-background: var(--input-background);
--muted-background: #edf0f3; --input-hover-border: var(--primary);
--muted-border: #edf0f3; --input-focus: var(--primary-focus);
--card-background: #FFF; --input-inverse: var(--primary-inverse);
--card-sections: #f3f5f7; --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--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); --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--code-background: #f3f5f7; --valid: #288a6a;
--code-inlined: #edf0f3; --invalid: #b94646;
--code-color-1: #73828c; --mark: rgba(255, 223, 128, 0.33);
--code-color-2: #b34d80; --mark-text: #2c3d49;
--code-color-3: #3d888f; --muted-text: #7e8d98;
--code-color-4: #998866; --muted-background: #edf0f3;
--code-color-5: #96a4ae; --muted-border: #edf0f3;
--table-border: rgba(237, 240, 243, 0.75); --card-background: #FFF;
--table-stripping: rgba(115, 130, 140, 0.04); --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) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { :root:not([data-theme="light"]) {
--background: #10181e; --background: #10181e;
--text: #a2afb9; --text: #a2afb9;
--h1: #edf0f3; --h1: #edf0f3;
--h2: #d5dce2; --h2: #d5dce2;
--h3: #bbc6ce; --h3: #bbc6ce;
--h4: #a2afb9; --h4: #a2afb9;
--h5: #8a99a3; --h5: #8a99a3;
--h6: #73828c; --h6: #73828c;
--primary: #1095c1; --primary: #1095c1;
--primary-hover: #1ab3e6; --primary-border: var(--primary);
--primary-focus: rgba(16, 149, 193, 0.25); --primary-hover: #1ab3e6;
--primary-inverse: #FFF; --primary-hover-border: var(--primary-hover);
--secondary: #596b78; --primary-focus: rgba(16, 149, 193, 0.25);
--secondary-hover: #73828c; --primary-inverse: #FFF;
--secondary-focus: rgba(89, 107, 120, 0.25); --secondary: #596b78;
--secondary-inverse: #FFF; --secondary-border: var(--secondary);
--contrast: #d5dce2; --secondary-hover: #73828c;
--contrast-hover: #FFF; --secondary-hover-border: var(--secondary-hover);
--contrast-focus: rgba(89, 107, 120, 0.25); --secondary-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33); --secondary-inverse: #FFF;
--contrast-border-h: rgba(255, 223, 128, 0.5); --contrast: #d5dce2;
--contrast-inverse: #10181e; --contrast-border: var(--contrast);
--input-background: #10181e; --contrast-hover: #FFF;
--input-border: #374956; --contrast-hover-border: var(--contrast-hover);
--valid: #1f7a5c; --contrast-focus: rgba(89, 107, 120, 0.25);
--invalid: #943838; --contrast-inverse: #10181e;
--mark: rgba(255, 223, 128, 0.5); --input-background: #10181e;
--mark-text: #FFF; --input-border: #374956;
--muted-text: #73828c; --input-hover-background: var(--input-background);
--muted-background: #10181e; --input-hover-border: var(--primary);
--muted-border: #23333e; --input-focus: var(--primary-focus);
--card-background: #17232b; --input-inverse: var(--primary-inverse);
--card-sections: #141d24; --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--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); --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--code-background: #141d24; --valid: #1f7a5c;
--code-inlined: rgba(65, 84, 98, 0.25); --invalid: #943838;
--code-color-1: #73828c; --mark: rgba(255, 223, 128, 0.1875);
--code-color-2: #a65980; --mark-text: #FFF;
--code-color-3: #599fa6; --muted-text: #73828c;
--code-color-4: #8c8473; --muted-background: #23333e;
--code-color-5: #4d606d; --muted-border: #23333e;
--table-border: rgba(115, 130, 140, 0.06); --card-background: #17232b;
--table-stripping: rgba(115, 130, 140, 0.02); --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"] { [data-theme="dark"] {
--background: #10181e; --background: #10181e;
--text: #a2afb9; --text: #a2afb9;
--h1: #edf0f3; --h1: #edf0f3;
--h2: #d5dce2; --h2: #d5dce2;
--h3: #bbc6ce; --h3: #bbc6ce;
--h4: #a2afb9; --h4: #a2afb9;
--h5: #8a99a3; --h5: #8a99a3;
--h6: #73828c; --h6: #73828c;
--primary: #1095c1; --primary: #1095c1;
--primary-hover: #1ab3e6; --primary-border: var(--primary);
--primary-focus: rgba(16, 149, 193, 0.25); --primary-hover: #1ab3e6;
--primary-inverse: #FFF; --primary-hover-border: var(--primary-hover);
--secondary: #596b78; --primary-focus: rgba(16, 149, 193, 0.25);
--secondary-hover: #73828c; --primary-inverse: #FFF;
--secondary-focus: rgba(89, 107, 120, 0.25); --secondary: #596b78;
--secondary-inverse: #FFF; --secondary-border: var(--secondary);
--contrast: #d5dce2; --secondary-hover: #73828c;
--contrast-hover: #FFF; --secondary-hover-border: var(--secondary-hover);
--contrast-focus: rgba(89, 107, 120, 0.25); --secondary-focus: rgba(89, 107, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33); --secondary-inverse: #FFF;
--contrast-inverse: #10181e; --contrast: #d5dce2;
--input-background: #10181e; --contrast-border: var(--contrast);
--input-border: #374956; --contrast-hover: #FFF;
--valid: #1f7a5c; --contrast-hover-border: var(--contrast-hover);
--invalid: #943838; --contrast-focus: rgba(89, 107, 120, 0.25);
--mark: rgba(255, 223, 128, 0.5); --contrast-inverse: #10181e;
--mark-text: #FFF; --input-background: #10181e;
--muted-text: #73828c; --input-border: #374956;
--muted-background: #10181e; --input-hover-background: var(--input-background);
--muted-border: #23333e; --input-hover-border: var(--primary);
--card-background: #17232b; --input-focus: var(--primary-focus);
--card-sections: #141d24; --input-inverse: var(--primary-inverse);
--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); --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--code-background: #141d24; --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
--code-inlined: rgba(65, 84, 98, 0.25); --valid: #1f7a5c;
--code-color-1: #73828c; --invalid: #943838;
--code-color-2: #a65980; --mark: rgba(255, 223, 128, 0.1875);
--code-color-3: #599fa6; --mark-text: #FFF;
--code-color-4: #8c8473; --muted-text: #73828c;
--code-color-5: #4d606d; --muted-background: #23333e;
--table-border: rgba(115, 130, 140, 0.06); --muted-border: #23333e;
--table-stripping: rgba(115, 130, 140, 0.02); --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);
} }
/** /**
@ -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
View file

File diff suppressed because one or more lines are too long

228
css/themes/default.css Normal file
View 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
View file

File diff suppressed because one or more lines are too long

104
docs/css/pico.docs.css
View file

@ -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
View file

File diff suppressed because one or more lines are too long

325
docs/index.html
View file

@ -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>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>&gt;</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>&lt;!doctype html&gt;</em> <pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt; &lt;<b>html</b> <i>lang</i>=<u>"en"</u>&gt;
@ -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>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code>.</p> <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</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>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt; <pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
@ -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>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt; <pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
@ -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,53 +192,79 @@
</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> {
<i>--primary</i>: <u class="c600">...</u>; <i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c700">...</u>; <i>--primary-hover</i>: <u class="c700">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>; <i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
<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</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>Dark scheme (Forced) */
<em>/* <span class="name"></span>Dark theme (Forced) */
/* Enabled if forced with data-theme="dark" */</em> /* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme="<u>dark</u>"]</b> { <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>;
}</code></pre> }
<p>Colors can be modified in <a href="https://github.com/picocss/pico/tree/master/scss/themes">scss/themes/</a>.</p> <em>/* <span class="name"></span>(Common styles) */</em>
<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> <b>:root</b> {
<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> <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>
<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>
</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>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code>.</p> <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code></p>
<p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p> <p><code>&lt;<b>section</b>&gt;</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 @@
&lt;/<b>div</b>&gt;</code></pre> &lt;/<b>div</b>&gt;</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>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3> <h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
</hgroup> </hgroup>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code>.</p> <p>Useful to have responsives <code>&lt;<b>table</b>&gt;</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>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt; <pre><code>&lt;<b>h1</b>&gt;Heading 1&lt;/<b>h1</b>&gt;
&lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt; &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
&lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
&lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt; &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
&lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt; &lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt; &lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre>
&lt;<b>p</b>&gt;Paragraph&lt;/<b>p</b>&gt;</code></pre>
</article> </article>
<p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p> <p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
@ -560,6 +587,23 @@
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt; &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre> &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</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>&lt;<b>blockquote</b>&gt;
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
&lt;<b>footer</b>&gt;
&lt;<b>cite</b>&gt;- Phasellus eget lacinia&lt;/<b>cite</b>&gt;
&lt;/<b>footer</b>&gt;
&lt;/<b>blockquote</b>&gt;</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>&lt;<b>form</b>&gt; <pre><code>&lt;<b>form</b>&gt;
@ -755,9 +799,178 @@
&lt;/<b>fieldset</b>&gt;</code></pre> &lt;/<b>fieldset</b>&gt;</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>&lt;!-- File browser --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"file"</u>&gt;File browser
&lt;<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>&gt;
&lt;/<b>label</b>&gt;
<em>&lt;!-- Range slider --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"range"</u>&gt;Range slider
&lt;<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>&gt;
&lt;/<b>label</b>&gt;
<em>&lt;!-- Date --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"date"</u>&gt;Date
&lt;<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u></u>&gt;
&lt;/<b>label</b>&gt;
<em>&lt;!-- Time --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"time"</u>&gt;Time
&lt;<b>input</b> <i>type</i>=<u>"time"</u> <i>id</i>=<u>"time"</u> <i>name</i>=<u>"time"</u>&gt;
&lt;/<b>label</b>&gt;
<em>&lt;!-- Color --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"color"</u>&gt;Color
&lt;<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>>
&lt;/<b>label</b>&gt;</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>&lt;<b>table</b>&gt;
&lt;<b>thead</b>&gt;
&lt;<b>tr</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading<&lt;/<b>th</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
&lt;/<b>tr</b>&gt;
&lt;/<b>thead</b>&gt;
&lt;<b>tbody</b>&gt;
&lt;<b>tr</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"row"</u>>1&lt;/<b>th</b>&gt;
&lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
&lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
&lt;<b>td</b>>Cell&lt;/<b>td</b>&gt;
&lt;/<b>tr</b>&gt;
&lt;/<b>tbody</b>&gt;
&lt;/<b>table</b>&gt;</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>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt;
<em>...</em>
&lt;/<b>table</b>&gt;</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>&lt;<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;
&lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Progress -->
<!-- Docs: Tooltips --> <!-- Docs: Tooltips -->
<section id="tooltips"> <section id="tooltips">
<hgroup> <hgroup>
@ -933,12 +1162,12 @@
&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre> &lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</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
View file

File diff suppressed because one or more lines are too long

103
docs/js/src/color-picker.js
View file

@ -12,9 +12,9 @@
*/ */
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: '',
// Source: https://material.io/design/color/the-color-system.html // Source: https://material.io/design/color/the-color-system.html
@ -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",
@ -360,31 +360,31 @@
if (data.hasOwnProperty(color)) { if (data.hasOwnProperty(color)) {
// Buttons // Buttons
colorButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>'; colorButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
// CSS Styles // CSS Styles
colors.styles += 'button[data-color="'+ color +'"] {' colors.styles += 'button[data-color="'+ color +'"] {'
+ 'background-color: '+ data[color]['600'] +'; ' + 'background-color: '+ data[color]['600'] +'; '
+ '}' + '}'
+ '[data-theme="light"] button[data-color="'+ color +'"]:hover, ' + '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
+ '[data-theme="light"] button[data-color="'+ color +'"]:active, ' + '[data-theme="light"] button[data-color="'+ color +'"]:active, '
+ '[data-theme="light"] button[data-color="'+ color +'"]:focus {' + '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
+ 'background-color: '+ data[color]['700'] +'; ' + 'background-color: '+ data[color]['700'] +'; '
+ '}' + '}'
+ '[data-theme="dark"] button[data-color="'+ color +'"]:hover, ' + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
+ '[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');
} }

4
docs/js/src/grid.js
View file

@ -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'

4
docs/scss/components/_nav.scss
View file

@ -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")) {

24
docs/scss/components/_theme-switcher.scss
View file

@ -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);
} }
} }

16
docs/scss/content/_code.scss
View file

@ -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);
} }
} }

6
docs/scss/content/_typography.scss
View file

@ -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] {

4
docs/scss/layout/_aside.scss
View file

@ -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")) {

24
docs/scss/layout/_documentation.scss
View file

@ -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;
}
} }
} }

35
docs/scss/layout/_main.scss
View file

@ -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;

1
docs/scss/themes/_docs.scss → docs/scss/themes/docs.scss
View file

@ -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
View 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");
}

2
package.json
View file

@ -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",

102
scss/_variables.scss
View file

@ -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;

15
scss/components/_accordion.scss
View file

@ -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 {

72
scss/components/_card-sectioning.scss
View file

@ -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);
} }
} }
} }

31
scss/components/_card.scss
View file

@ -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));
} }
} }

40
scss/components/_nav.scss
View file

@ -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;
}
// Disable underline for a.contrast in nav @else {
@if $enable-classes { text-decoration: none;
&.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
View 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;
}
}

140
scss/components/_tooltip.scss
View file

@ -2,57 +2,97 @@
* 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) {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
&::before, &::before,
&::after { &::after {
display: block; display: block;
z-index: 99; z-index: 99;
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
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;
content: attr(data-tooltip); content: attr(data-tooltip);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
// Caret // Caret
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
border-top: .3rem solid; border-top: .3rem solid;
border-right: .3rem solid transparent; border-right: .3rem solid transparent;
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--contrast); color: var(--contrast);
content: ''; content: '';
}
&:focus, }
&:hover {
&::before, &:focus,
&::after { &:hover {
opacity: 1; &::before,
} &::after {
} 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);
}
}
}

59
scss/content/_button-styles.scss
View file

@ -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);
}
}
} }
} }

25
scss/content/_button.scss
View file

@ -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
scss/content/_code.scss
View file

@ -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

110
scss/content/_form-alt-input-types.scss
View file

@ -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;

35
scss/content/_form-checkbox-radio.scss
View file

@ -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));
} }
} }
} }

67
scss/content/_form.scss
View file

@ -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);
} }
} }

7
scss/content/_miscs.scss
View file

@ -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 {

10
scss/content/_table.scss
View file

@ -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"] {
background-color: var(--table-stripping); tbody tr:nth-child(odd) {
background-color: var(--table-stripping);
}
} }

73
scss/content/_typography.scss
View file

@ -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);
} }
} }

4
scss/layout/_container.scss
View file

@ -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 {

20
scss/layout/_document.scss
View file

@ -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);
} }
} }
} }

4
scss/layout/_grid.scss
View file

@ -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;

2
scss/layout/_scroller.scss
View file

@ -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);
} }
} }

14
scss/layout/_section.scss
View file

@ -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);
} }
} }
} }

24
scss/layout/_sectioning.scss
View file

@ -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;
} }
} }

5
scss/pico.scss
View file

@ -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

5
scss/pico.slim.scss
View file

@ -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

2
scss/themes/_default.scss → scss/themes/default.scss
View file

@ -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";

6
scss/themes/default/_colors.scss
View file

@ -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)};

198
scss/themes/default/_dark.scss
View file

@ -1,70 +1,83 @@
// 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"]) {
// Document // Document
--background: #{darken($grey-900, 6%)}; --background: #{darken($grey-900, 6%)};
// Typography // Typography
--text: #{$grey-300}; --text: #{$grey-300};
--h1: #{$grey-50}; --h1: #{$grey-50};
--h2: #{$grey-100}; --h2: #{$grey-100};
--h3: #{$grey-200}; --h3: #{$grey-200};
--h4: #{$grey-300}; --h4: #{$grey-300};
--h5: #{$grey-400}; --h5: #{$grey-400};
--h6: #{$grey-500}; --h6: #{$grey-500};
// Primary Call-to-Action and links // Primary Call-to-Action and links
--primary: #{$primary-600}; --primary: #{$primary-600};
--primary-hover: #{$primary-500}; --primary-border: var(--primary);
--primary-focus: #{rgba($primary-600, .25)}; --primary-hover: #{$primary-500};
--primary-inverse: #{$white}; --primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// // Secondary Call-to-Action, links and kbd // // Secondary Call-to-Action, links and kbd
--secondary: #{$grey-600}; --secondary: #{$grey-600};
--secondary-hover: #{$grey-500}; --secondary-border: var(--secondary);
--secondary-focus: #{rgba($grey-600, .25)}; --secondary-hover: #{$grey-500};
--secondary-inverse: #{$white}; --secondary-hover-border: var(--secondary-hover);
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips // Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100}; --contrast: #{$grey-100};
--contrast-hover: #{$white}; --contrast-border: var(--contrast);
--contrast-focus: #{rgba($grey-600, .25)}; --contrast-hover: #{$white};
--contrast-border: #{rgba($amber-200, .33)}; // Links underline for --contrast-hover-border: var(--contrast-hover);
--contrast-border-h: #{rgba($amber-200, .5)}; // Links hover underline --contrast-focus: #{rgba($grey-600, .25)};
--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
--card-background: #{darken($grey-900, 2%)}; --card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)}; --card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)}; --card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// Code // Code
--code-background: #{darken($grey-900, 4%)}; --code-background: #{darken($grey-900, 4%)};
--code-inlined: #{rgba($grey-700, .25)}; --code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{$grey-500}; --code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 30%, 50%)}; --code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)}; --code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)}; --code-color-4: #{hsl(40, 10%, 50%)};
--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)};
} }
} }
@ -75,64 +88,77 @@
[data-theme="dark"] { [data-theme="dark"] {
// Document // Document
--background: #{darken($grey-900, 6%)}; --background: #{darken($grey-900, 6%)};
// Typography // Typography
--text: #{$grey-300}; --text: #{$grey-300};
--h1: #{$grey-50}; --h1: #{$grey-50};
--h2: #{$grey-100}; --h2: #{$grey-100};
--h3: #{$grey-200}; --h3: #{$grey-200};
--h4: #{$grey-300}; --h4: #{$grey-300};
--h5: #{$grey-400}; --h5: #{$grey-400};
--h6: #{$grey-500}; --h6: #{$grey-500};
// Primary Call-to-Action and links // Primary Call-to-Action and links
--primary: #{$primary-600}; --primary: #{$primary-600};
--primary-hover: #{$primary-500}; --primary-border: var(--primary);
--primary-focus: #{rgba($primary-600, .25)}; --primary-hover: #{$primary-500};
--primary-inverse: #{$white}; --primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd // // Secondary Call-to-Action, links and kbd
--secondary: #{$grey-600}; --secondary: #{$grey-600};
--secondary-hover: #{$grey-500}; --secondary-border: var(--secondary);
--secondary-focus: #{rgba($grey-600, .25)}; --secondary-hover: #{$grey-500};
--secondary-inverse: #{$white}; --secondary-hover-border: var(--secondary-hover);
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips // Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100}; --contrast: #{$grey-100};
--contrast-hover: #{$white}; --contrast-border: var(--contrast);
--contrast-focus: #{rgba($grey-600, .25)}; --contrast-hover: #{$white};
--contrast-border: #{rgba($amber-200, .33)}; // For links --contrast-hover-border: var(--contrast-hover);
--contrast-inverse: #{darken($grey-900, 6%)}; --contrast-focus: #{rgba($grey-600, .25)};
--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
--card-background: #{darken($grey-900, 2%)}; --card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)}; --card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)}; --card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// Code // Code
--code-background: #{darken($grey-900, 4%)}; --code-background: #{darken($grey-900, 4%)};
--code-inlined: #{rgba($grey-700, .25)}; --code-inlined: #{rgba($grey-700, .25)};
--code-color-1: #{$grey-500}; --code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 30%, 50%)}; --code-color-2: #{hsl(330, 30%, 50%)};
--code-color-3: #{hsl(185, 30%, 50%)}; --code-color-3: #{hsl(185, 30%, 50%)};
--code-color-4: #{hsl(40, 10%, 50%)}; --code-color-4: #{hsl(40, 10%, 50%)};
--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
View 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");
}

99
scss/themes/default/_light.scss
View file

@ -1,68 +1,81 @@
// 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"]) {
// Document // Document
--background: #{$white}; --background: #{$white};
// Typography // Typography
--text: #{$grey-700}; --text: #{$grey-700};
--h1: #{$grey-900}; --h1: #{$grey-900};
--h2: #{$grey-800}; --h2: #{$grey-800};
--h3: #{$grey-700}; --h3: #{$grey-700};
--h4: #{$grey-600}; --h4: #{$grey-600};
--h5: #{$grey-500}; --h5: #{$grey-500};
--h6: #{$grey-400}; --h6: #{$grey-400};
// Primary Call-to-Action and links // Primary Call-to-Action and links
--primary: #{$primary-600}; --primary: #{$primary-600};
--primary-hover: #{$primary-700}; --primary-border: var(--primary);
--primary-focus: #{rgba($primary-600, .125)}; --primary-hover: #{$primary-700};
--primary-inverse: #{$white}; --primary-hover-border: var(--primary-hover);
--primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white};
// Secondary Call-to-Action, links and kbd // Secondary Call-to-Action, links and kbd
--secondary: #{$grey-500}; --secondary: #{$grey-500};
--secondary-hover: #{$grey-700}; --secondary-border: var(--secondary);
--secondary-focus: #{rgba($grey-500, .125)}; --secondary-hover: #{$grey-700};
--secondary-inverse: #{$white}; --secondary-hover-border: var(--secondary-hover);
--secondary-focus: #{rgba($grey-500, .125)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips // Contrast Call-to-Action and Tooltips
--contrast: #{$grey-800}; --contrast: #{$grey-800};
--contrast-hover: #{mix($grey-900, $black)}; --contrast-border: var(--contrast);
--contrast-focus: #{rgba($grey-500, .125)}; --contrast-hover: #{mix($grey-900, $black)};
--contrast-border: #{rgba($amber-200, .5)}; // Links underline --contrast-hover-border: var(--contrast-hover);
--contrast-border-h: #{rgba($amber-200, 1)}; // Links hover underline --contrast-focus: #{rgba($grey-500, .125)};
--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};
--muted-border: #{$grey-50}; --muted-border: #{$grey-50};
// Card // Card
--card-background: #{$white}; --card-background: #{$white};
--card-sections: #{lighten($grey-50, 2%)}; --card-sections: #{lighten($grey-50, 2%)};
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)}; --card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
// Code // Code
--code-background: #{lighten($grey-50, 2%)}; --code-background: #{lighten($grey-50, 2%)};
--code-inlined: #{$grey-50}; --code-inlined: #{$grey-50};
--code-color-1: #{$grey-500}; --code-color-1: #{$grey-500};
--code-color-2: #{hsl(330, 40%, 50%)}; --code-color-2: #{hsl(330, 40%, 50%)};
--code-color-3: #{hsl(185, 40%, 40%)}; --code-color-3: #{hsl(185, 40%, 40%)};
--code-color-4: #{hsl(40, 20%, 50%)}; --code-color-4: #{hsl(40, 20%, 50%)};
--code-color-5: #{mix($grey-300, $grey-400)}; --code-color-5: #{mix($grey-300, $grey-400)};
// 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
View 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;
}