mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 10:46:14 -04:00
Lucas Larroche
GitHub
commit
7f47491e2a
71 changed files with 12143 additions and 2885 deletions
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
>= 0.5%
|
||||
last 2 major versions
|
||||
not dead
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -1,4 +1,5 @@
|
|||
node_modules/
|
||||
*.DS_Store
|
||||
.prettierrc.js
|
||||
TODO.md
|
||||
prepros.config
|
||||
test.html
|
||||
tests/
|
||||
|
|
|
|||
12
README.md
12
README.md
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<p align="center">
|
||||
<strong>Minimal CSS Framework for semantic HTML</strong><br>
|
||||
Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
|
||||
Elegant styles for all native HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
|
||||
<a href="https://picocss.com/#examples">Examples</a> ·
|
||||
<a href="https://picocss.com/docs/">Documentation</a>
|
||||
</p>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
|
||||
|
||||
**Class-light and semantic**
|
||||
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
|
||||
Pico uses simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
|
||||
|
||||
**Great styles with just one CSS file**
|
||||
No dependencies, package manager, external files, or JavaScript.
|
||||
|
|
@ -141,6 +141,7 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
|
|||
- [Themes](https://picocss.com/docs/#themes)
|
||||
- [Customization](https://picocss.com/docs/#customization)
|
||||
- [Class-less version](https://picocss.com/docs/#classless)
|
||||
- [RTL](https://picocss.com/docs/#rtl)
|
||||
|
||||
**Layout**
|
||||
- [Containers](https://picocss.com/docs/#containers)
|
||||
|
|
@ -166,16 +167,17 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
|
|||
## Contributing
|
||||
|
||||
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
|
||||
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss).
|
||||
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.
|
||||
- Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build:css`.
|
||||
|
||||
## Copyright and license
|
||||
|
||||
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
|
||||
|
||||
**Relevant third party tools and resources we depend on:**
|
||||
**Relevant third-party tools and resources we depend on:**
|
||||
|
||||
Website and docs:
|
||||
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL 2.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
|
||||
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
|
||||
- [Most Visible](https://github.com/andyexeter/most-visible): JavaScript module which returns the most visible element (Licensed [MIT](https://github.com/andyexeter/most-visible/blob/master/LICENSE))
|
||||
- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
4
css/pico.classless.min.css
vendored
4
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
1126
css/pico.css
1126
css/pico.css
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
4
css/pico.fluid.classless.min.css
vendored
4
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
css/pico.min.css
vendored
4
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
4
css/pico.slim.min.css
vendored
4
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2,11 +2,13 @@
|
|||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--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: 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";
|
||||
--line-height: 1.5;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
--border-radius: .25rem;
|
||||
--border-radius: 0.25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
--spacing: 1rem;
|
||||
|
|
@ -15,29 +17,25 @@
|
|||
--block-spacing-horizontal: var(--spacing);
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--transition: .2s ease-in-out;
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
:root {
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
:root {
|
||||
--font-size: 20px;
|
||||
|
|
@ -46,36 +44,33 @@
|
|||
|
||||
@media (min-width: 576px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
|
|
@ -85,19 +80,16 @@
|
|||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
|
|
@ -107,7 +99,6 @@
|
|||
a {
|
||||
--text-decoration: none;
|
||||
}
|
||||
|
||||
a.secondary, a.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
|
@ -150,12 +141,12 @@ h5 {
|
|||
--typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
[type=checkbox],
|
||||
[type=radio] {
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
[type=checkbox][role=switch] {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -172,20 +163,22 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
--font-family: "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";
|
||||
--font-family: "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";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
[data-theme=light],
|
||||
:root:not([data-theme=dark]) {
|
||||
color-scheme: light;
|
||||
--background-color: #FFF;
|
||||
--background-color: #fff;
|
||||
--color: #415462;
|
||||
--h1-color: #1b2832;
|
||||
--h2-color: #23333e;
|
||||
--h2-color: #24333e;
|
||||
--h3-color: #2c3d49;
|
||||
--h4-color: #374956;
|
||||
--h5-color: #415462;
|
||||
|
|
@ -195,19 +188,19 @@ kbd {
|
|||
--primary: #1095c1;
|
||||
--primary-hover: #08769b;
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--primary-inverse: #fff;
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #415462;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.125);
|
||||
--secondary-inverse: #FFF;
|
||||
--secondary-inverse: #fff;
|
||||
--contrast: #1b2832;
|
||||
--contrast-hover: #000;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.125);
|
||||
--contrast-inverse: #FFF;
|
||||
--contrast-inverse: #fff;
|
||||
--mark-background-color: #fff2ca;
|
||||
--mark-color: #543a25;
|
||||
--ins-color: #388E3C;
|
||||
--del-color: #C62828;
|
||||
--mark-color: #543a26;
|
||||
--ins-color: #388e3c;
|
||||
--del-color: #c62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
|
@ -221,11 +214,11 @@ kbd {
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #d5dce2;
|
||||
--form-element-disabled-border-color: #a2afb9;
|
||||
--form-element-disabled-opacity: .5;
|
||||
--form-element-invalid-border-color: #C62828;
|
||||
--form-element-invalid-active-border-color: #B71C1C;
|
||||
--form-element-valid-border-color: #388E3C;
|
||||
--form-element-valid-active-border-color: #2E7D32;
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #c62828;
|
||||
--form-element-invalid-active-border-color: #b71c1c;
|
||||
--form-element-valid-border-color: #388e3c;
|
||||
--form-element-valid-active-border-color: #2e7d32;
|
||||
--switch-background-color: #bbc6ce;
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
|
|
@ -236,7 +229,7 @@ kbd {
|
|||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color:#f6f8f9;
|
||||
--table-row-stripped-background-color: #f6f8f9;
|
||||
--code-background-color: #edf0f3;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
|
|
@ -250,11 +243,13 @@ kbd {
|
|||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-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);
|
||||
--card-sectionning-background-color: #fafbfc;
|
||||
--card-box-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);
|
||||
--card-sectionning-background-color: #fbfbfc;
|
||||
--progress-background-color: #d5dce2;
|
||||
--progress-color: var(--primary);
|
||||
--loading-spinner-opacity: .5;
|
||||
--loading-spinner-opacity: 0.5;
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
|
@ -268,34 +263,34 @@ kbd {
|
|||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
:root:not([data-theme=light]) {
|
||||
color-scheme: dark;
|
||||
--background-color: #11191f;
|
||||
--color: #bbc6ce;
|
||||
--h1-color: #edf0f3;
|
||||
--h2-color: #e1e6ea;
|
||||
--h2-color: #e1e6eb;
|
||||
--h3-color: #d5dce2;
|
||||
--h4-color: #c8d1d8;
|
||||
--h5-color: #bbc6ce;
|
||||
--h6-color: #aebbc3;
|
||||
--h6-color: #afbbc4;
|
||||
--muted-color: #73828c;
|
||||
--muted-border-color: #1f2d38;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary-inverse: #fff;
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--secondary-inverse: #fff;
|
||||
--contrast: #edf0f3;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover: #fff;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||
--contrast-inverse: #000;
|
||||
--mark-background-color: #d0c284;
|
||||
--mark-background-color: #d1c284;
|
||||
--mark-color: #11191f;
|
||||
--ins-color: #388E3C;
|
||||
--del-color: #C62828;
|
||||
--ins-color: #388e3c;
|
||||
--del-color: #c62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
|
@ -309,15 +304,15 @@ kbd {
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-disabled-opacity: .5;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
--form-element-invalid-active-border-color: #C62828;
|
||||
--form-element-valid-border-color: #2E7D32;
|
||||
--form-element-valid-active-border-color: #388E3C;
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #b71c1c;
|
||||
--form-element-invalid-active-border-color: #c62828;
|
||||
--form-element-valid-border-color: #2e7d32;
|
||||
--form-element-valid-active-border-color: #388e3c;
|
||||
--switch-background-color: #374956;
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--range-border-color: #23333e;
|
||||
--range-border-color: #24333e;
|
||||
--range-active-border-color: #2c3d49;
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
|
|
@ -325,7 +320,7 @@ kbd {
|
|||
--range-thumb-active-color: var(--primary);
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||
--code-background-color: #17232c;
|
||||
--code-background-color: #18232c;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
|
|
@ -337,13 +332,15 @@ kbd {
|
|||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e25;
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: #11191f;
|
||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||
--card-sectionning-background-color: #17232c;
|
||||
--progress-background-color: #23333e;
|
||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
|
||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||
--card-sectionning-background-color: #18232c;
|
||||
--progress-background-color: #24333e;
|
||||
--progress-color: var(--primary);
|
||||
--loading-spinner-opacity: .5;
|
||||
--loading-spinner-opacity: 0.5;
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
|
@ -356,35 +353,34 @@ kbd {
|
|||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
[data-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--background-color: #11191f;
|
||||
--color: #bbc6ce;
|
||||
--h1-color: #edf0f3;
|
||||
--h2-color: #e1e6ea;
|
||||
--h2-color: #e1e6eb;
|
||||
--h3-color: #d5dce2;
|
||||
--h4-color: #c8d1d8;
|
||||
--h5-color: #bbc6ce;
|
||||
--h6-color: #aebbc3;
|
||||
--h6-color: #afbbc4;
|
||||
--muted-color: #73828c;
|
||||
--muted-border-color: #1f2d38;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--primary-inverse: #fff;
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--secondary-inverse: #fff;
|
||||
--contrast: #edf0f3;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover: #fff;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||
--contrast-inverse: #000;
|
||||
--mark-background-color: #d0c284;
|
||||
--mark-background-color: #d1c284;
|
||||
--mark-color: #11191f;
|
||||
--ins-color: #388E3C;
|
||||
--del-color: #C62828;
|
||||
--ins-color: #388e3c;
|
||||
--del-color: #c62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
|
@ -398,15 +394,15 @@ kbd {
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-disabled-opacity: .5;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
--form-element-invalid-active-border-color: #C62828;
|
||||
--form-element-valid-border-color: #2E7D32;
|
||||
--form-element-valid-active-border-color: #388E3C;
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #b71c1c;
|
||||
--form-element-invalid-active-border-color: #c62828;
|
||||
--form-element-valid-border-color: #2e7d32;
|
||||
--form-element-valid-active-border-color: #388e3c;
|
||||
--switch-background-color: #374956;
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--range-border-color: #23333e;
|
||||
--range-border-color: #24333e;
|
||||
--range-active-border-color: #2c3d49;
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
|
|
@ -414,7 +410,7 @@ kbd {
|
|||
--range-thumb-active-color: var(--primary);
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
||||
--code-background-color: #17232c;
|
||||
--code-background-color: #18232c;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
|
|
@ -426,13 +422,15 @@ kbd {
|
|||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e25;
|
||||
--card-background-color: #141e26;
|
||||
--card-border-color: #11191f;
|
||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||
--card-sectionning-background-color: #17232c;
|
||||
--progress-background-color: #23333e;
|
||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
|
||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||
--card-sectionning-background-color: #18232c;
|
||||
--progress-background-color: #24333e;
|
||||
--progress-color: var(--primary);
|
||||
--loading-spinner-opacity: .5;
|
||||
--loading-spinner-opacity: 0.5;
|
||||
--tooltip-background-color: var(--contrast);
|
||||
--tooltip-color: var(--contrast-inverse);
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
|
|
|
|||
2
css/themes/default.min.css
vendored
2
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -10,31 +10,33 @@
|
|||
--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"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--invalid-color: #C62828;
|
||||
--valid-color: #388E3C;
|
||||
[data-theme=light],
|
||||
:root:not([data-theme=dark]) {
|
||||
--invalid-color: #c62828;
|
||||
--valid-color: #388e3c;
|
||||
--nav-background-color: rgba(255, 255, 255, 0.7);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #FFF;
|
||||
--nav-logo-color: #fff;
|
||||
--article-code-background-color: #f9fafb;
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
:root:not([data-theme=light]) {
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background-color: rgba(16, 24, 30, 0.8);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0d1419;
|
||||
--nav-logo-color: #0e1419;
|
||||
--article-code-background-color: var(--code-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
[data-theme=dark] {
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background: rgba(16, 24, 30, 0.8);
|
||||
--nav-background-color: rgba(16, 24, 30, 0.8);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0d1419;
|
||||
--nav-logo-color: #0e1419;
|
||||
--article-code-background-color: var(--code-background-color);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -50,7 +52,6 @@ html {
|
|||
body > main {
|
||||
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body > main {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
|
|
@ -59,62 +60,56 @@ body > main {
|
|||
grid-template-columns: 200px auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body > main {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
body > main > aside,
|
||||
body > main div[role="document"] {
|
||||
body > main div[role=document] {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
div[role="document"] > section::before {
|
||||
div[role=document] > section::before {
|
||||
display: block;
|
||||
height: calc(2rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-2rem - 3.5rem + .5rem);
|
||||
content: '';
|
||||
height: calc(2rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-2rem - 3.5rem + 0.5rem);
|
||||
content: "";
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(2.5rem + 3.5rem - .5rem);
|
||||
height: calc(-2.5rem - 3.5rem + .5rem);
|
||||
div[role=document] > section::before {
|
||||
height: calc(2.5rem + 3.5rem - 0.5rem);
|
||||
height: calc(-2.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(3rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-3rem - 3.5rem + .5rem);
|
||||
div[role=document] > section::before {
|
||||
height: calc(3rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(3.5rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-3.5rem - 3.5rem + .5rem);
|
||||
div[role=document] > section::before {
|
||||
height: calc(3.5rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(4rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-4rem - 3.5rem + .5rem);
|
||||
div[role=document] > section::before {
|
||||
height: calc(4rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-4rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: var(--icon-external);
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
content: '';
|
||||
background-size: 0.66rem auto;
|
||||
content: "";
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -128,11 +123,9 @@ main > aside nav {
|
|||
width: 100%;
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
|
||||
main > aside nav h1 {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav {
|
||||
position: fixed;
|
||||
|
|
@ -146,47 +139,39 @@ main > aside nav h1 {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
main > aside li, main > aside summary {
|
||||
main > aside li,
|
||||
main > aside summary {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
main > aside li a {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
main > aside li a svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
main > aside a.secondary:focus {
|
||||
background-color: transparent;
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
main > aside a.active,
|
||||
main > aside a.active:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
main > aside details {
|
||||
padding-bottom: .25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
main > aside details summary {
|
||||
color: var(--h1-color);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
main > aside details summary::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main > aside details[open] > summary:not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
|
@ -205,7 +190,6 @@ main > aside details[open] > summary:not(:focus) {
|
|||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
#customization figure {
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
|
|
@ -214,13 +198,11 @@ main > aside details[open] > summary:not(:focus) {
|
|||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
#customization figure ~ article {
|
||||
margin-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
#customization figure button {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
|
@ -228,57 +210,48 @@ main > aside details[open] > summary:not(:focus) {
|
|||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#customization figure button:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#customization figure button.picked {
|
||||
background-image: var(--icon-check);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
background-size: 0.66rem auto;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#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: var(--icon-check-dark);
|
||||
}
|
||||
|
||||
#customization h4 {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
#customization pre[data-theme="generated"] {
|
||||
#customization pre[data-theme=generated] {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
#grids {
|
||||
--grid-spacing-vertical: 1rem;
|
||||
}
|
||||
|
||||
#grids button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
#grids button {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#grids button svg {
|
||||
stroke: var(--secondary);
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 1rem;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
#grids .grid > * {
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -286,11 +259,9 @@ main > aside details[open] > summary:not(:focus) {
|
|||
font-size: 87.5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#grids details {
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
#grids details svg {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
@ -320,53 +291,60 @@ a[role=button] {
|
|||
/**
|
||||
* Docs: Code
|
||||
*/
|
||||
article > footer.code {
|
||||
background: var(--article-code-background-color);
|
||||
}
|
||||
|
||||
article pre,
|
||||
article pre code {
|
||||
background: transparent;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
section > pre {
|
||||
background: var(--article-code-background-color);
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
[data-theme="invalid"],
|
||||
[data-theme="valid"] {
|
||||
[data-theme=invalid],
|
||||
[data-theme=valid] {
|
||||
position: relative;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
[data-theme="invalid"]:before,
|
||||
[data-theme="valid"]:before {
|
||||
[data-theme=invalid]:before,
|
||||
[data-theme=valid]:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .375rem .75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0;
|
||||
color: var(--primary-inverse);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
[data-theme="invalid"]:before,
|
||||
[data-theme="valid"]:before {
|
||||
[data-theme=invalid]:before,
|
||||
[data-theme=valid]:before {
|
||||
top: var(--spacing);
|
||||
right: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="invalid"] code,
|
||||
[data-theme="valid"] code {
|
||||
padding: calc(var(--spacing) * 1.625) 0;
|
||||
[data-theme=invalid] code,
|
||||
[data-theme=valid] code {
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
|
||||
}
|
||||
|
||||
[data-theme="invalid"]:before {
|
||||
[data-theme=invalid]:before {
|
||||
background: var(--invalid-color);
|
||||
content: 'Not so great';
|
||||
content: "Not so great";
|
||||
}
|
||||
|
||||
[data-theme="valid"]:before {
|
||||
[data-theme=valid]:before {
|
||||
background: var(--valid-color);
|
||||
content: 'Great';
|
||||
content: "Great";
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -383,15 +361,12 @@ body > nav {
|
|||
background-color: var(--nav-background-color);
|
||||
box-shadow: 0px 1px 0 var(--nav-border-color);
|
||||
}
|
||||
|
||||
body > nav a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body > nav svg {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
body > nav ul:first-of-type li:first-of-type a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
|
|
@ -400,17 +375,14 @@ body > nav ul:first-of-type li:first-of-type a {
|
|||
background: var(--h1-color);
|
||||
color: var(--nav-logo-color);
|
||||
}
|
||||
|
||||
body > nav ul:first-of-type li:first-of-type a svg {
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: var(--spacing);
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||
display: inline;
|
||||
|
|
@ -426,13 +398,12 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
bottom: var(--spacing);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: .75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.switcher::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
|
|
@ -441,39 +412,33 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
border-radius: 50%;
|
||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||
vertical-align: bottom;
|
||||
content: '';
|
||||
content: "";
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.switcher i {
|
||||
display: inline-block;
|
||||
max-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.switcher:hover, .switcher:focus {
|
||||
max-width: 100%;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.switcher:hover::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.switcher:hover i {
|
||||
max-width: 100%;
|
||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||
transition: max-width var(--transition), padding var(--transition);
|
||||
}
|
||||
|
||||
.switcher:focus {
|
||||
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.switcher {
|
||||
right: var(--spacing);
|
||||
|
|
|
|||
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
100
docs/index.html
100
docs/index.html
|
|
@ -52,6 +52,7 @@
|
|||
<li><a href="#themes" class="secondary">Themes</a></li>
|
||||
<li><a href="#customization" class="secondary">Customization</a></li>
|
||||
<li><a href="#classless" class="secondary">Class-less version</a></li>
|
||||
<li><a href="#rtl" class="secondary">RTL</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details open>
|
||||
|
|
@ -153,11 +154,13 @@
|
|||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
||||
…
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<article data-theme="dark" aria-label="Forced dark theme example">
|
||||
<h4>Dark theme</h4>
|
||||
|
|
@ -166,11 +169,13 @@
|
|||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
||||
…
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Themes -->
|
||||
|
||||
|
|
@ -178,7 +183,7 @@
|
|||
<section id="customization">
|
||||
<hgroup>
|
||||
<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 edit the CSS variables.</h3>
|
||||
</hgroup>
|
||||
<p>Example: <strong>pick a color!</strong></p>
|
||||
|
||||
|
|
@ -197,6 +202,7 @@
|
|||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em>// Simplified example</em>
|
||||
<b>:root</b> {
|
||||
|
|
@ -204,6 +210,7 @@
|
|||
}
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>There are 2 ways to customize your version of Pico.css:</p>
|
||||
<h4>Overriding CSS variables</h4>
|
||||
|
|
@ -250,7 +257,7 @@
|
|||
|
||||
<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/themes/default.css</a></p>
|
||||
<h4>Importing Pico SASS library</h4>
|
||||
<p>It is recommended to customize Pico by importing SASS source files into your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
|
||||
<p>We recommend customizing Pico by importing SASS source files into 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>
|
||||
|
||||
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||
|
|
@ -276,7 +283,7 @@
|
|||
<em>…</em>
|
||||
</code></pre>
|
||||
|
||||
<p>This allows you 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>
|
||||
<p>Compiling a custom SASS version allows you 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>
|
||||
</section><!-- ./ Docs: Customization -->
|
||||
|
||||
<!-- Docs: Classless -->
|
||||
|
|
@ -304,6 +311,22 @@
|
|||
|
||||
</section><!-- ./ Docs: Classless -->
|
||||
|
||||
<!-- Docs: RTL -->
|
||||
<section id="rtl">
|
||||
<hgroup>
|
||||
<h2>RTL</h2>
|
||||
<h3>Support for right-to-left text in Pico.</h3>
|
||||
</hgroup>
|
||||
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b><</html></code> element.</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
<<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>>
|
||||
<em>...</em>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
<p>The RTL feature is still experimental and will probably evolve.</p>
|
||||
</section><!-- ./ Docs: RTL -->
|
||||
|
||||
<!-- Docs: Container -->
|
||||
<section id="containers">
|
||||
<hgroup>
|
||||
|
|
@ -318,7 +341,7 @@
|
|||
<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>
|
||||
</<b>body</b>></code></pre>
|
||||
|
||||
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
|
||||
<p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
|
|
@ -368,6 +391,7 @@
|
|||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>div</b> <i>class</i>=<u>"grid"</u>>
|
||||
<<b>div</b>>1</<b>div</b>>
|
||||
|
|
@ -376,6 +400,7 @@
|
|||
<<b>div</b>>4</<b>div</b>>
|
||||
</<b>div</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<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>
|
||||
|
|
@ -388,11 +413,11 @@
|
|||
</svg>
|
||||
More about grids
|
||||
</summary>
|
||||
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
|
||||
<p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
|
||||
<p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
|
||||
<p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
|
||||
</details>
|
||||
</section><!-- ./ Docs: Grid -->
|
||||
|
||||
|
|
@ -472,7 +497,7 @@
|
|||
<section id="typography">
|
||||
<hgroup>
|
||||
<h2>Typography</h2>
|
||||
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.</h3>
|
||||
<h3>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h3>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
|
|
@ -562,6 +587,7 @@
|
|||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
|
|
@ -570,6 +596,7 @@
|
|||
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
||||
<article aria-label="Hgroup example">
|
||||
|
|
@ -577,12 +604,14 @@
|
|||
<h2>Heading 2</h2>
|
||||
<h3>Subtitle for heading 2</h3>
|
||||
</hgroup>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>hgroup</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
<<b>hgroup</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Inline text elements:</p>
|
||||
<article aria-label="Inline text examples">
|
||||
|
|
@ -610,11 +639,13 @@
|
|||
<a href="#" onclick="event.preventDefault()">Primary</a><br>
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
|
||||
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Blockquote:</p>
|
||||
<article aria-label="Blockquote example">
|
||||
|
|
@ -624,6 +655,7 @@
|
|||
<cite>- Phasellus eget lacinia</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>blockquote</b>>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||||
|
|
@ -632,6 +664,7 @@
|
|||
</<b>footer</b>>
|
||||
</<b>blockquote</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Typography -->
|
||||
|
||||
|
|
@ -644,39 +677,47 @@
|
|||
<article aria-label="Button example">
|
||||
<button aria-label="Button">Button</button>
|
||||
<input type="submit">
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>button</b>>Button</<b>button</b>>
|
||||
<<b>input</b> <i>type</i>=<u>"submit"</u>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><<b>a</b> <i>role</i>=<u>"button"></u></code> if you need an inline element.</p>
|
||||
<article aria-label="Inline buttons examples">
|
||||
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<article aria-label="Buttons styles examples">
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>And a classic <code>.outline</code> variant.</p>
|
||||
<article aria-label="Outline style examples">
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>>Primary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>>Secondary</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>>Contrast</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Button -->
|
||||
|
||||
|
|
@ -684,10 +725,10 @@
|
|||
<section id="forms">
|
||||
<hgroup>
|
||||
<h2>Forms</h2>
|
||||
<h3>All form elements are in pure semantic HTML and fully responsive, allowing forms to scale gracefully across devices and viewports.</h3>
|
||||
<h3>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h3>
|
||||
</hgroup>
|
||||
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
|
||||
<p>All natives form elements are fully customizable and themable with CSS variables.</p>
|
||||
<p>All natives form elements are fully customizable and themeable with CSS variables.</p>
|
||||
<article aria-label="Form example">
|
||||
<form>
|
||||
<div class="grid">
|
||||
|
|
@ -705,6 +746,7 @@
|
|||
<small>We'll never share your email with anyone else.</small>
|
||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>form</b>>
|
||||
|
||||
|
|
@ -734,6 +776,7 @@
|
|||
|
||||
</<b>form</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Disabled and validation states:</p>
|
||||
<article aria-label="Validation states examples">
|
||||
|
|
@ -743,14 +786,16 @@
|
|||
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
|
||||
<input type="text" value="Readonly" aria-label="Readonly" readonly>
|
||||
</form>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>fieldset</b>></code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
|
||||
<p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
|
||||
<p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
|
||||
<article aria-label="Select, radios, checkboxes, switch examples">
|
||||
<label for="fruit">Fruit</label>
|
||||
|
|
@ -789,6 +834,7 @@
|
|||
Publish on my profile
|
||||
</label>
|
||||
</fieldset>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Select --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
||||
|
|
@ -830,19 +876,22 @@
|
|||
</<b>label</b>>
|
||||
</<b>fieldset</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>You can change a checkbox to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<article aria-label="Indeterminate checkbox example">
|
||||
<label for="indeterminate-checkbox">
|
||||
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
|
||||
Select all
|
||||
</label>
|
||||
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>script</b>>
|
||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||
</<b>script</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Others input types:</p>
|
||||
<article aria-label="File browser, range slider, date, time, color examples">
|
||||
|
|
@ -861,6 +910,7 @@
|
|||
<label for="color">Color
|
||||
<input type="color" id="color" name="color" value="#0eaaaa">
|
||||
</label>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- File browser --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
||||
|
|
@ -887,6 +937,7 @@
|
|||
<<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
|
||||
</<b>label</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Form -->
|
||||
|
||||
|
|
@ -1024,6 +1075,7 @@
|
|||
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
|
||||
</ul>
|
||||
</details>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>details</b>>
|
||||
<<b>summary</b>>Collapsible elements 1</<b>summary</b>>
|
||||
|
|
@ -1038,6 +1090,7 @@
|
|||
</<b>ul</b>>
|
||||
</<b>details</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Accordions -->
|
||||
|
||||
|
|
@ -1083,6 +1136,7 @@
|
|||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
|
|
@ -1095,6 +1149,7 @@
|
|||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>ul</b>></code> are automatically distributed horizontally.</p>
|
||||
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
||||
|
|
@ -1125,6 +1180,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
|
|
@ -1138,6 +1194,7 @@
|
|||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>Inside <code><<b>aside</b>></code>, navs are stacked vertically.</p>
|
||||
<article aria-label="Vertical nav example">
|
||||
|
|
@ -1150,6 +1207,7 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>aside</b>>
|
||||
<<b>nav</b>>
|
||||
|
|
@ -1161,6 +1219,7 @@
|
|||
</<b>nav</b>>
|
||||
</<b>aside</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Nav -->
|
||||
|
||||
|
|
@ -1172,19 +1231,23 @@
|
|||
</hgroup>
|
||||
<article aria-label="Progress bar example">
|
||||
<progress value="25" max="100"></progress>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>></<b>progress</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<p>You can change a progress bar to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||
<article aria-label="Indeterminate progress bar example">
|
||||
<progress id="indeterminate-progress"></progress>
|
||||
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>script</b>>
|
||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||
</<b>script</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Progress -->
|
||||
|
||||
|
|
@ -1197,10 +1260,12 @@
|
|||
<article aria-label="Loading buttons example">
|
||||
<button aria-busy="true">Please wait…</button>
|
||||
<button aria-busy="true" class="secondary"></button>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>button</b> <i>aria-busy</i>=<u>"true"</u>>Please wait…</<b>button</b>>
|
||||
<<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>></<b>button</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p>It can be applied to any block:</p>
|
||||
<article aria-busy="true"></article>
|
||||
|
|
@ -1208,8 +1273,9 @@
|
|||
<p>Or any text element:</p>
|
||||
<article aria-label="Loading paragraph example">
|
||||
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
|
||||
<footer class="code">
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>>Generating link, please wait…</<b>a</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Loading -->
|
||||
|
||||
|
|
@ -1223,11 +1289,13 @@
|
|||
<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
|
||||
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
|
||||
<p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>p</b>>Tooltip on a <<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>>link</<b>a</b>></<b>p</b>>
|
||||
<<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>
|
||||
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section><!-- ./ Docs: Tooltips -->
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,12 @@
|
|||
*/
|
||||
|
||||
// Imports
|
||||
import * as mostVisible from './src/most-visible.min.js';
|
||||
import { aside } from './src/aside.js';
|
||||
import { themeSwitcher } from './src/theme-switcher.js';
|
||||
import { materialDesignColors } from './src/material-design-colors.js';
|
||||
import { colorPicker } from './src/color-picker.js';
|
||||
import { grid } from './src/grid.js';
|
||||
import { scrollspy } from './src/scrollspy.js';
|
||||
import aside from './src/aside.js';
|
||||
import themeSwitcher from './src/theme-switcher.js';
|
||||
import materialDesignColors from './src/material-design-colors.js';
|
||||
import colorPicker from './src/color-picker.js';
|
||||
import grid from './src/grid.js';
|
||||
import scrollspy from './src/scrollspy.js';
|
||||
|
||||
// Aside initial state
|
||||
aside.init();
|
||||
|
|
@ -33,4 +32,4 @@ colorPicker.init();
|
|||
grid.init();
|
||||
|
||||
// Scrollspy
|
||||
scrollspy.init(mostVisible);
|
||||
scrollspy.init();
|
||||
|
|
|
|||
2
docs/js/pico.docs.min.js
vendored
2
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
|
||||
export const aside = {
|
||||
|
||||
// Config
|
||||
minWidth: '992px',
|
||||
targets: {
|
||||
|
|
@ -14,17 +13,18 @@ export const aside = {
|
|||
details: 'aside details',
|
||||
},
|
||||
|
||||
|
||||
// Init
|
||||
init() {
|
||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
||||
let nav = document.querySelector(this.targets.nav);
|
||||
let details = document.querySelectorAll(this.targets.details);
|
||||
if (nav.clientHeight < nav.scrollHeight) {
|
||||
details.forEach(function(detail) {
|
||||
detail.removeAttribute("open");
|
||||
details.forEach(function (detail) {
|
||||
detail.removeAttribute('open');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default aside;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
|
||||
export const colorPicker = {
|
||||
|
||||
// Config
|
||||
colors: null,
|
||||
buttonsTarget: '#customization article[data-theme="generated"]',
|
||||
|
|
@ -24,16 +23,19 @@ export const colorPicker = {
|
|||
|
||||
// Generate Buttons
|
||||
generateButtons() {
|
||||
|
||||
// Init
|
||||
let innerButtons = '';
|
||||
let innerStyles = '';
|
||||
|
||||
|
||||
// Loop colors
|
||||
for (const color in this.colors) {
|
||||
// Buttons
|
||||
innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
|
||||
innerButtons +=
|
||||
'<button data-color="' +
|
||||
color +
|
||||
'" aria-label="Activate ' +
|
||||
color +
|
||||
' theme"></button>';
|
||||
|
||||
// Styles
|
||||
innerStyles += `
|
||||
|
|
@ -52,7 +54,6 @@ export const colorPicker = {
|
|||
}`;
|
||||
}
|
||||
|
||||
|
||||
// Insert buttons
|
||||
let containerButtons = document.createElement('FIGURE');
|
||||
containerButtons.innerHTML = innerButtons;
|
||||
|
|
@ -60,13 +61,19 @@ export const colorPicker = {
|
|||
|
||||
// Buttons listeners
|
||||
this.buttons = document.querySelectorAll(this.selectorButton);
|
||||
this.buttons.forEach(function(button) {
|
||||
button.addEventListener('click', function(event) {
|
||||
this.buttons.forEach(
|
||||
function (button) {
|
||||
button.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
let color = event.target.getAttribute('data-color');
|
||||
this.setActiveButton(color);
|
||||
this.generateTheme(color);
|
||||
}.bind(this), false);
|
||||
}.bind(this));
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// Insert CSS Styles
|
||||
let containerStyles = document.createElement('STYLE');
|
||||
|
|
@ -76,21 +83,22 @@ export const colorPicker = {
|
|||
document.querySelector('head').appendChild(containerStyles);
|
||||
},
|
||||
|
||||
|
||||
// Set active button
|
||||
setActiveButton(color) {
|
||||
|
||||
// Remove all active states
|
||||
this.buttons.forEach(function(button) {
|
||||
this.buttons.forEach(
|
||||
function (button) {
|
||||
button.removeAttribute('class');
|
||||
}.bind(this));
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// Set active state
|
||||
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
|
||||
let buttonPicked = document.querySelector(
|
||||
this.selectorButton + '[data-color="' + color + '"]'
|
||||
);
|
||||
buttonPicked.setAttribute('class', 'picked');
|
||||
},
|
||||
|
||||
|
||||
// Set active button
|
||||
generateTheme(color) {
|
||||
let name = color;
|
||||
|
|
@ -102,17 +110,23 @@ export const colorPicker = {
|
|||
'.c500': data[500],
|
||||
'.c600': data[600],
|
||||
'.c700': data[700],
|
||||
'.c600-outline-light': this.hexToRgbA(data[600], .125),
|
||||
'.c600-outline-dark': this.hexToRgbA(data[600], .25),
|
||||
'.c600-outline-light': this.hexToRgbA(data[600], 0.125),
|
||||
'.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
|
||||
'.inverse': data['inverse'],
|
||||
}
|
||||
};
|
||||
|
||||
Object.keys(swaps).forEach(function(swap) {
|
||||
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
|
||||
targets.forEach(function(target) {
|
||||
Object.keys(swaps).forEach(
|
||||
function (swap) {
|
||||
let targets = document.querySelectorAll(
|
||||
this.selectorSection + ' ' + swap
|
||||
);
|
||||
targets.forEach(
|
||||
function (target) {
|
||||
target.innerHTML = swaps[swap];
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
}.bind(this)
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// 2. Update CSS Styles
|
||||
const innerStyles = `
|
||||
|
|
@ -120,7 +134,7 @@ export const colorPicker = {
|
|||
--h4-color: ${data[700]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[700]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], .125)};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.125)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
|
|
@ -128,7 +142,7 @@ export const colorPicker = {
|
|||
--h4-color: ${data[400]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], .25)};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
}
|
||||
|
|
@ -136,7 +150,7 @@ export const colorPicker = {
|
|||
--h4-color: ${data[500]};
|
||||
--primary: ${data[600]};
|
||||
--primary-hover: ${data[500]};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], .25)};
|
||||
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||
--primary-inverse: ${data['inverse']};
|
||||
}
|
||||
[data-theme="generated"] {
|
||||
|
|
@ -146,16 +160,15 @@ export const colorPicker = {
|
|||
--switch-checked-background-color: var(--primary);
|
||||
}`;
|
||||
|
||||
document.querySelector('style[title="color-picker"]').innerHTML = this.generatedStyles + this.minifyCSS(innerStyles);
|
||||
document.querySelector('style[title="color-picker"]').innerHTML =
|
||||
this.generatedStyles + this.minifyCSS(innerStyles);
|
||||
},
|
||||
|
||||
|
||||
// Minify CSS
|
||||
minifyCSS(css) {
|
||||
return css.replace(/^ +/gm, '')
|
||||
return css.replace(/^ +/gm, '');
|
||||
},
|
||||
|
||||
|
||||
// Hexadecimal to Rgba
|
||||
hexToRgbA(hex, alpha) {
|
||||
let c;
|
||||
|
|
@ -165,8 +178,16 @@ export const colorPicker = {
|
|||
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||
}
|
||||
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');
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default colorPicker;
|
||||
|
|
|
|||
|
|
@ -6,34 +6,30 @@
|
|||
*/
|
||||
|
||||
export const grid = {
|
||||
|
||||
// Config
|
||||
buttons: {
|
||||
text: {
|
||||
add: 'Add column',
|
||||
remove: 'Remove column'
|
||||
remove: 'Remove column',
|
||||
},
|
||||
target: '#grids article'
|
||||
target: '#grids article',
|
||||
},
|
||||
grid: {
|
||||
current: 4,
|
||||
min: 1,
|
||||
max: 12,
|
||||
gridTarget: '#grids .grid',
|
||||
codeTarget: '#grids pre code'
|
||||
codeTarget: '#grids pre code',
|
||||
},
|
||||
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.addButtons();
|
||||
this.generateGrid()
|
||||
this.generateGrid();
|
||||
},
|
||||
|
||||
|
||||
// Add buttons
|
||||
addButtons() {
|
||||
|
||||
// Insert buttons
|
||||
let buttons = document.createElement('P');
|
||||
buttons.innerHTML = `
|
||||
|
|
@ -54,20 +50,26 @@ export const grid = {
|
|||
document.querySelector(this.buttons.target).before(buttons);
|
||||
|
||||
// Add button listener
|
||||
document.querySelector('#grids button.add').addEventListener('click', function() {
|
||||
document.querySelector('#grids button.add').addEventListener(
|
||||
'click',
|
||||
function () {
|
||||
this.addColumn();
|
||||
}.bind(this), false);
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
|
||||
// Remove button listener
|
||||
document.querySelector('#grids button.remove').addEventListener('click', function() {
|
||||
document.querySelector('#grids button.remove').addEventListener(
|
||||
'click',
|
||||
function () {
|
||||
this.removeColumn();
|
||||
}.bind(this), false);
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
// Generate grid
|
||||
generateGrid() {
|
||||
|
||||
// Config
|
||||
let htmlInner = '';
|
||||
let codeInner = '<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';
|
||||
|
|
@ -84,7 +86,6 @@ export const grid = {
|
|||
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
|
||||
},
|
||||
|
||||
|
||||
// Add column
|
||||
addColumn() {
|
||||
if (this.grid.current < this.grid.max) {
|
||||
|
|
@ -93,12 +94,13 @@ export const grid = {
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
// Remove column
|
||||
removeColumn() {
|
||||
if (this.grid.current > this.grid.min) {
|
||||
this.grid.current--;
|
||||
this.generateGrid();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default grid;
|
||||
|
|
|
|||
|
|
@ -1,301 +1,303 @@
|
|||
// Source: https://material.io/design/color/the-color-system.html
|
||||
export const materialDesignColors = {
|
||||
red: {
|
||||
50: "#ffebee",
|
||||
100: "#ffcdd2",
|
||||
200: "#ef9a9a",
|
||||
300: "#e57373",
|
||||
400: "#ef5350",
|
||||
500: "#f44336",
|
||||
600: "#e53935",
|
||||
700: "#d32f2f",
|
||||
800: "#c62828",
|
||||
900: "#b71c1c",
|
||||
a100: "#ff8a80",
|
||||
a200: "#ff5252",
|
||||
a400: "#ff1744",
|
||||
a700: "#d50000",
|
||||
inverse: "#FFF"
|
||||
50: '#ffebee',
|
||||
100: '#ffcdd2',
|
||||
200: '#ef9a9a',
|
||||
300: '#e57373',
|
||||
400: '#ef5350',
|
||||
500: '#f44336',
|
||||
600: '#e53935',
|
||||
700: '#d32f2f',
|
||||
800: '#c62828',
|
||||
900: '#b71c1c',
|
||||
a100: '#ff8a80',
|
||||
a200: '#ff5252',
|
||||
a400: '#ff1744',
|
||||
a700: '#d50000',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
pink: {
|
||||
50: "#fce4ec",
|
||||
100: "#f8bbd0",
|
||||
200: "#f48fb1",
|
||||
300: "#f06292",
|
||||
400: "#ec407a",
|
||||
500: "#e91e63",
|
||||
600: "#d81b60",
|
||||
700: "#c2185b",
|
||||
800: "#ad1457",
|
||||
900: "#880e4f",
|
||||
a100: "#ff80ab",
|
||||
a200: "#ff4081",
|
||||
a400: "#f50057",
|
||||
a700: "#c51162",
|
||||
inverse: "#FFF"
|
||||
50: '#fce4ec',
|
||||
100: '#f8bbd0',
|
||||
200: '#f48fb1',
|
||||
300: '#f06292',
|
||||
400: '#ec407a',
|
||||
500: '#e91e63',
|
||||
600: '#d81b60',
|
||||
700: '#c2185b',
|
||||
800: '#ad1457',
|
||||
900: '#880e4f',
|
||||
a100: '#ff80ab',
|
||||
a200: '#ff4081',
|
||||
a400: '#f50057',
|
||||
a700: '#c51162',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
purple: {
|
||||
50: "#f3e5f5",
|
||||
100: "#e1bee7",
|
||||
200: "#ce93d8",
|
||||
300: "#ba68c8",
|
||||
400: "#ab47bc",
|
||||
500: "#9c27b0",
|
||||
600: "#8e24aa",
|
||||
700: "#7b1fa2",
|
||||
800: "#6a1b9a",
|
||||
900: "#4a148c",
|
||||
a100: "#ea80fc",
|
||||
a200: "#e040fb",
|
||||
a400: "#d500f9",
|
||||
a700: "#aa00ff",
|
||||
inverse: "#FFF"
|
||||
50: '#f3e5f5',
|
||||
100: '#e1bee7',
|
||||
200: '#ce93d8',
|
||||
300: '#ba68c8',
|
||||
400: '#ab47bc',
|
||||
500: '#9c27b0',
|
||||
600: '#8e24aa',
|
||||
700: '#7b1fa2',
|
||||
800: '#6a1b9a',
|
||||
900: '#4a148c',
|
||||
a100: '#ea80fc',
|
||||
a200: '#e040fb',
|
||||
a400: '#d500f9',
|
||||
a700: '#aa00ff',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
"deep-purple": {
|
||||
50: "#ede7f6",
|
||||
100: "#d1c4e9",
|
||||
200: "#b39ddb",
|
||||
300: "#9575cd",
|
||||
400: "#7e57c2",
|
||||
500: "#673ab7",
|
||||
600: "#5e35b1",
|
||||
700: "#512da8",
|
||||
800: "#4527a0",
|
||||
900: "#311b92",
|
||||
a100: "#b388ff",
|
||||
a200: "#7c4dff",
|
||||
a400: "#651fff",
|
||||
a700: "#6200ea",
|
||||
inverse: "#FFF"
|
||||
'deep-purple': {
|
||||
50: '#ede7f6',
|
||||
100: '#d1c4e9',
|
||||
200: '#b39ddb',
|
||||
300: '#9575cd',
|
||||
400: '#7e57c2',
|
||||
500: '#673ab7',
|
||||
600: '#5e35b1',
|
||||
700: '#512da8',
|
||||
800: '#4527a0',
|
||||
900: '#311b92',
|
||||
a100: '#b388ff',
|
||||
a200: '#7c4dff',
|
||||
a400: '#651fff',
|
||||
a700: '#6200ea',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
indigo: {
|
||||
50: "#e8eaf6",
|
||||
100: "#c5cae9",
|
||||
200: "#9fa8da",
|
||||
300: "#7986cb",
|
||||
400: "#5c6bc0",
|
||||
500: "#3f51b5",
|
||||
600: "#3949ab",
|
||||
700: "#303f9f",
|
||||
800: "#283593",
|
||||
900: "#1a237e",
|
||||
a100: "#8c9eff",
|
||||
a200: "#536dfe",
|
||||
a400: "#3d5afe",
|
||||
a700: "#304ffe",
|
||||
inverse: "#FFF"
|
||||
50: '#e8eaf6',
|
||||
100: '#c5cae9',
|
||||
200: '#9fa8da',
|
||||
300: '#7986cb',
|
||||
400: '#5c6bc0',
|
||||
500: '#3f51b5',
|
||||
600: '#3949ab',
|
||||
700: '#303f9f',
|
||||
800: '#283593',
|
||||
900: '#1a237e',
|
||||
a100: '#8c9eff',
|
||||
a200: '#536dfe',
|
||||
a400: '#3d5afe',
|
||||
a700: '#304ffe',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
blue: {
|
||||
50: "#e3f2fd",
|
||||
100: "#bbdefb",
|
||||
200: "#90caf9",
|
||||
300: "#64b5f6",
|
||||
400: "#42a5f5",
|
||||
500: "#2196f3",
|
||||
600: "#1e88e5",
|
||||
700: "#1976d2",
|
||||
800: "#1565c0",
|
||||
900: "#0d47a1",
|
||||
a100: "#82b1ff",
|
||||
a200: "#448aff",
|
||||
a400: "#2979ff",
|
||||
a700: "#2962ff",
|
||||
inverse: "#FFF"
|
||||
50: '#e3f2fd',
|
||||
100: '#bbdefb',
|
||||
200: '#90caf9',
|
||||
300: '#64b5f6',
|
||||
400: '#42a5f5',
|
||||
500: '#2196f3',
|
||||
600: '#1e88e5',
|
||||
700: '#1976d2',
|
||||
800: '#1565c0',
|
||||
900: '#0d47a1',
|
||||
a100: '#82b1ff',
|
||||
a200: '#448aff',
|
||||
a400: '#2979ff',
|
||||
a700: '#2962ff',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
"light-blue": {
|
||||
50: "#e1f5fe",
|
||||
100: "#b3e5fc",
|
||||
200: "#81d4fa",
|
||||
300: "#4fc3f7",
|
||||
400: "#29b6f6",
|
||||
500: "#03a9f4",
|
||||
600: "#039be5",
|
||||
700: "#0288d1",
|
||||
800: "#0277bd",
|
||||
900: "#01579b",
|
||||
a100: "#80d8ff",
|
||||
a200: "#40c4ff",
|
||||
a400: "#00b0ff",
|
||||
a700: "#0091ea",
|
||||
inverse: "#FFF"
|
||||
'light-blue': {
|
||||
50: '#e1f5fe',
|
||||
100: '#b3e5fc',
|
||||
200: '#81d4fa',
|
||||
300: '#4fc3f7',
|
||||
400: '#29b6f6',
|
||||
500: '#03a9f4',
|
||||
600: '#039be5',
|
||||
700: '#0288d1',
|
||||
800: '#0277bd',
|
||||
900: '#01579b',
|
||||
a100: '#80d8ff',
|
||||
a200: '#40c4ff',
|
||||
a400: '#00b0ff',
|
||||
a700: '#0091ea',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
cyan: {
|
||||
50: "#e0f7fa",
|
||||
100: "#b2ebf2",
|
||||
200: "#80deea",
|
||||
300: "#4dd0e1",
|
||||
400: "#26c6da",
|
||||
500: "#00bcd4",
|
||||
600: "#00acc1",
|
||||
700: "#0097a7",
|
||||
800: "#00838f",
|
||||
900: "#006064",
|
||||
a100: "#84ffff",
|
||||
a200: "#18ffff",
|
||||
a400: "#00e5ff",
|
||||
a700: "#00b8d4",
|
||||
inverse: "#FFF"
|
||||
50: '#e0f7fa',
|
||||
100: '#b2ebf2',
|
||||
200: '#80deea',
|
||||
300: '#4dd0e1',
|
||||
400: '#26c6da',
|
||||
500: '#00bcd4',
|
||||
600: '#00acc1',
|
||||
700: '#0097a7',
|
||||
800: '#00838f',
|
||||
900: '#006064',
|
||||
a100: '#84ffff',
|
||||
a200: '#18ffff',
|
||||
a400: '#00e5ff',
|
||||
a700: '#00b8d4',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
teal: {
|
||||
50: "#e0f2f1",
|
||||
100: "#b2dfdb",
|
||||
200: "#80cbc4",
|
||||
300: "#4db6ac",
|
||||
400: "#26a69a",
|
||||
500: "#009688",
|
||||
600: "#00897b",
|
||||
700: "#00796b",
|
||||
800: "#00695c",
|
||||
900: "#004d40",
|
||||
a100: "#a7ffeb",
|
||||
a200: "#64ffda",
|
||||
a400: "#1de9b6",
|
||||
a700: "#00bfa5",
|
||||
inverse: "#FFF"
|
||||
50: '#e0f2f1',
|
||||
100: '#b2dfdb',
|
||||
200: '#80cbc4',
|
||||
300: '#4db6ac',
|
||||
400: '#26a69a',
|
||||
500: '#009688',
|
||||
600: '#00897b',
|
||||
700: '#00796b',
|
||||
800: '#00695c',
|
||||
900: '#004d40',
|
||||
a100: '#a7ffeb',
|
||||
a200: '#64ffda',
|
||||
a400: '#1de9b6',
|
||||
a700: '#00bfa5',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
green: {
|
||||
50: "#e8f5e9",
|
||||
100: "#c8e6c9",
|
||||
200: "#a5d6a7",
|
||||
300: "#81c784",
|
||||
400: "#66bb6a",
|
||||
500: "#4caf50",
|
||||
600: "#43a047",
|
||||
700: "#388e3c",
|
||||
800: "#2e7d32",
|
||||
900: "#1b5e20",
|
||||
a100: "#b9f6ca",
|
||||
a200: "#69f0ae",
|
||||
a400: "#00e676",
|
||||
a700: "#00c853",
|
||||
inverse: "#FFF"
|
||||
50: '#e8f5e9',
|
||||
100: '#c8e6c9',
|
||||
200: '#a5d6a7',
|
||||
300: '#81c784',
|
||||
400: '#66bb6a',
|
||||
500: '#4caf50',
|
||||
600: '#43a047',
|
||||
700: '#388e3c',
|
||||
800: '#2e7d32',
|
||||
900: '#1b5e20',
|
||||
a100: '#b9f6ca',
|
||||
a200: '#69f0ae',
|
||||
a400: '#00e676',
|
||||
a700: '#00c853',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
"light-green": {
|
||||
50: "#f1f8e9",
|
||||
100: "#dcedc8",
|
||||
200: "#c5e1a5",
|
||||
300: "#aed581",
|
||||
400: "#9ccc65",
|
||||
500: "#8bc34a",
|
||||
600: "#7cb342",
|
||||
700: "#689f38",
|
||||
800: "#558b2f",
|
||||
900: "#33691e",
|
||||
a100: "#ccff90",
|
||||
a200: "#b2ff59",
|
||||
a400: "#76ff03",
|
||||
a700: "#64dd17",
|
||||
inverse: "#FFF"
|
||||
'light-green': {
|
||||
50: '#f1f8e9',
|
||||
100: '#dcedc8',
|
||||
200: '#c5e1a5',
|
||||
300: '#aed581',
|
||||
400: '#9ccc65',
|
||||
500: '#8bc34a',
|
||||
600: '#7cb342',
|
||||
700: '#689f38',
|
||||
800: '#558b2f',
|
||||
900: '#33691e',
|
||||
a100: '#ccff90',
|
||||
a200: '#b2ff59',
|
||||
a400: '#76ff03',
|
||||
a700: '#64dd17',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
lime: {
|
||||
50: "#f9fbe7",
|
||||
100: "#f0f4c3",
|
||||
200: "#e6ee9c",
|
||||
300: "#dce775",
|
||||
400: "#d4e157",
|
||||
500: "#cddc39",
|
||||
600: "#c0ca33",
|
||||
700: "#afb42b",
|
||||
800: "#9e9d24",
|
||||
900: "#827717",
|
||||
a100: "#f4ff81",
|
||||
a200: "#eeff41",
|
||||
a400: "#c6ff00",
|
||||
a700: "#aeea00",
|
||||
inverse: "rgba(0, 0, 0, 0.75)"
|
||||
50: '#f9fbe7',
|
||||
100: '#f0f4c3',
|
||||
200: '#e6ee9c',
|
||||
300: '#dce775',
|
||||
400: '#d4e157',
|
||||
500: '#cddc39',
|
||||
600: '#c0ca33',
|
||||
700: '#afb42b',
|
||||
800: '#9e9d24',
|
||||
900: '#827717',
|
||||
a100: '#f4ff81',
|
||||
a200: '#eeff41',
|
||||
a400: '#c6ff00',
|
||||
a700: '#aeea00',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
yellow: {
|
||||
50: "#fffde7",
|
||||
100: "#fff9c4",
|
||||
200: "#fff59d",
|
||||
300: "#fff176",
|
||||
400: "#ffee58",
|
||||
500: "#ffeb3b",
|
||||
600: "#fdd835",
|
||||
700: "#fbc02d",
|
||||
800: "#f9a825",
|
||||
900: "#f57f17",
|
||||
a100: "#ffff8d",
|
||||
a200: "#ffff00",
|
||||
a400: "#ffea00",
|
||||
a700: "#ffd600",
|
||||
inverse: "rgba(0, 0, 0, 0.75)"
|
||||
50: '#fffde7',
|
||||
100: '#fff9c4',
|
||||
200: '#fff59d',
|
||||
300: '#fff176',
|
||||
400: '#ffee58',
|
||||
500: '#ffeb3b',
|
||||
600: '#fdd835',
|
||||
700: '#fbc02d',
|
||||
800: '#f9a825',
|
||||
900: '#f57f17',
|
||||
a100: '#ffff8d',
|
||||
a200: '#ffff00',
|
||||
a400: '#ffea00',
|
||||
a700: '#ffd600',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
amber: {
|
||||
50: "#fff8e1",
|
||||
100: "#ffecb3",
|
||||
200: "#ffe082",
|
||||
300: "#ffd54f",
|
||||
400: "#ffca28",
|
||||
500: "#ffc107",
|
||||
600: "#ffb300",
|
||||
700: "#ffa000",
|
||||
800: "#ff8f00",
|
||||
900: "#ff6f00",
|
||||
a100: "#ffe57f",
|
||||
a200: "#ffd740",
|
||||
a400: "#ffc400",
|
||||
a700: "#ffab00",
|
||||
inverse: "rgba(0, 0, 0, 0.75)"
|
||||
50: '#fff8e1',
|
||||
100: '#ffecb3',
|
||||
200: '#ffe082',
|
||||
300: '#ffd54f',
|
||||
400: '#ffca28',
|
||||
500: '#ffc107',
|
||||
600: '#ffb300',
|
||||
700: '#ffa000',
|
||||
800: '#ff8f00',
|
||||
900: '#ff6f00',
|
||||
a100: '#ffe57f',
|
||||
a200: '#ffd740',
|
||||
a400: '#ffc400',
|
||||
a700: '#ffab00',
|
||||
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||
},
|
||||
orange: {
|
||||
50: "#fff3e0",
|
||||
100: "#ffe0b2",
|
||||
200: "#ffcc80",
|
||||
300: "#ffb74d",
|
||||
400: "#ffa726",
|
||||
500: "#ff9800",
|
||||
600: "#fb8c00",
|
||||
700: "#f57c00",
|
||||
800: "#ef6c00",
|
||||
900: "#e65100",
|
||||
a100: "#ffd180",
|
||||
a200: "#ffab40",
|
||||
a400: "#ff9100",
|
||||
a700: "#ff6d00",
|
||||
inverse: "#FFF"
|
||||
50: '#fff3e0',
|
||||
100: '#ffe0b2',
|
||||
200: '#ffcc80',
|
||||
300: '#ffb74d',
|
||||
400: '#ffa726',
|
||||
500: '#ff9800',
|
||||
600: '#fb8c00',
|
||||
700: '#f57c00',
|
||||
800: '#ef6c00',
|
||||
900: '#e65100',
|
||||
a100: '#ffd180',
|
||||
a200: '#ffab40',
|
||||
a400: '#ff9100',
|
||||
a700: '#ff6d00',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
"deep-orange": {
|
||||
50: "#fbe9e7",
|
||||
100: "#ffccbc",
|
||||
200: "#ffab91",
|
||||
300: "#ff8a65",
|
||||
400: "#ff7043",
|
||||
500: "#ff5722",
|
||||
600: "#f4511e",
|
||||
700: "#e64a19",
|
||||
800: "#d84315",
|
||||
900: "#bf360c",
|
||||
a100: "#ff9e80",
|
||||
a200: "#ff6e40",
|
||||
a400: "#ff3d00",
|
||||
a700: "#dd2c00",
|
||||
inverse: "#FFF"
|
||||
'deep-orange': {
|
||||
50: '#fbe9e7',
|
||||
100: '#ffccbc',
|
||||
200: '#ffab91',
|
||||
300: '#ff8a65',
|
||||
400: '#ff7043',
|
||||
500: '#ff5722',
|
||||
600: '#f4511e',
|
||||
700: '#e64a19',
|
||||
800: '#d84315',
|
||||
900: '#bf360c',
|
||||
a100: '#ff9e80',
|
||||
a200: '#ff6e40',
|
||||
a400: '#ff3d00',
|
||||
a700: '#dd2c00',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
grey: {
|
||||
50: "#fafafa",
|
||||
100: "#f5f5f5",
|
||||
200: "#eeeeee",
|
||||
300: "#e0e0e0",
|
||||
400: "#bdbdbd",
|
||||
500: "#9e9e9e",
|
||||
600: "#757575",
|
||||
700: "#616161",
|
||||
800: "#424242",
|
||||
900: "#212121",
|
||||
inverse: "#FFF"
|
||||
50: '#fafafa',
|
||||
100: '#f5f5f5',
|
||||
200: '#eeeeee',
|
||||
300: '#e0e0e0',
|
||||
400: '#bdbdbd',
|
||||
500: '#9e9e9e',
|
||||
600: '#757575',
|
||||
700: '#616161',
|
||||
800: '#424242',
|
||||
900: '#212121',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
'blue-grey': {
|
||||
50: '#eceff1',
|
||||
100: '#cfd8dc',
|
||||
200: '#b0bec5',
|
||||
300: '#90a4ae',
|
||||
400: '#78909c',
|
||||
500: '#607d8b',
|
||||
600: '#546e7a',
|
||||
700: '#455a64',
|
||||
800: '#37474f',
|
||||
900: '#263238',
|
||||
inverse: '#FFF',
|
||||
},
|
||||
"blue-grey": {
|
||||
50: "#eceff1",
|
||||
100: "#cfd8dc",
|
||||
200: "#b0bec5",
|
||||
300: "#90a4ae",
|
||||
400: "#78909c",
|
||||
500: "#607d8b",
|
||||
600: "#546e7a",
|
||||
700: "#455a64",
|
||||
800: "#37474f",
|
||||
900: "#263238",
|
||||
inverse: "#FFF"
|
||||
}
|
||||
};
|
||||
|
||||
export default materialDesignColors;
|
||||
|
|
|
|||
151
docs/js/src/most-visible.js
Normal file
151
docs/js/src/most-visible.js
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
/**
|
||||
* Most Visible v1.5.0
|
||||
*
|
||||
* @author Andy Palmer <andy@andypalmer.me>
|
||||
* @license MIT
|
||||
*/
|
||||
(function (root, factory) {
|
||||
// Universal Module Definition
|
||||
|
||||
/* jshint strict:false */
|
||||
|
||||
/* global define: false, module: false */
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define([], function () {
|
||||
return factory(root);
|
||||
});
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
module.exports = factory(root);
|
||||
} else {
|
||||
root.mostVisible = factory(root);
|
||||
}
|
||||
})(typeof self !== 'undefined' ? self : this, function (window) {
|
||||
/* jshint unused: vars */
|
||||
'use strict';
|
||||
/**
|
||||
* MostVisible constructor
|
||||
*
|
||||
* @param {NodeList|string} elements
|
||||
* @param {{}} options
|
||||
* @constructor
|
||||
*/
|
||||
|
||||
function MostVisible(elements, options) {
|
||||
if (!(this instanceof MostVisible)) {
|
||||
return new MostVisible(elements, options).getMostVisible();
|
||||
}
|
||||
|
||||
if (typeof elements === 'string') {
|
||||
elements = document.querySelectorAll(elements);
|
||||
}
|
||||
|
||||
this.elements = elements;
|
||||
this.options = extend({}, MostVisible.defaults, options);
|
||||
}
|
||||
/**
|
||||
* MostVisible default options
|
||||
*
|
||||
* @namespace
|
||||
* @property {{}} defaults Default options hash.
|
||||
* @property {boolean} defaults.percentage Whether to calculate visibility as a percentage of height.
|
||||
* @property {number} defaults.offset An offset to take into account when calculating visibility.
|
||||
*/
|
||||
|
||||
MostVisible.defaults = {
|
||||
percentage: false,
|
||||
offset: 0,
|
||||
};
|
||||
MostVisible.prototype = {
|
||||
/**
|
||||
* Returns the most visible element from the instance's NodeList.
|
||||
*
|
||||
* @returns {HTMLElement} Most visible element.
|
||||
*/
|
||||
getMostVisible: function () {
|
||||
var _this = this;
|
||||
|
||||
var viewportHeight = document.documentElement.clientHeight;
|
||||
return Array.prototype.reduce.call(
|
||||
this.elements,
|
||||
function (carry, element) {
|
||||
var value = _this.getVisibleHeight(element, viewportHeight);
|
||||
|
||||
return value > carry[0] ? [value, element] : carry;
|
||||
},
|
||||
[0, null]
|
||||
)[1];
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the visible height of an element.
|
||||
*
|
||||
* @param {HTMLElement} element Element to check the visibility of.
|
||||
* @param {number} viewportHeight
|
||||
* @returns {number} Visible height of the element in pixels or a percentage of the element's total height.
|
||||
*/
|
||||
getVisibleHeight: function (element, viewportHeight) {
|
||||
var rect = element.getBoundingClientRect(),
|
||||
rectTopOffset = rect.top - this.options.offset,
|
||||
rectBottomOffset = rect.bottom - this.options.offset,
|
||||
height = rect.bottom - rect.top,
|
||||
visible = {
|
||||
top: rectTopOffset >= 0 && rectTopOffset < viewportHeight,
|
||||
bottom: rectBottomOffset > 0 && rectBottomOffset < viewportHeight,
|
||||
};
|
||||
var visiblePx = 0;
|
||||
|
||||
if (visible.top && visible.bottom) {
|
||||
// Whole element is visible
|
||||
visiblePx = height;
|
||||
} else if (visible.top) {
|
||||
visiblePx = viewportHeight - rect.top;
|
||||
} else if (visible.bottom) {
|
||||
visiblePx = rectBottomOffset;
|
||||
} else if (height > viewportHeight && rectTopOffset < 0) {
|
||||
var absTop = Math.abs(rectTopOffset);
|
||||
|
||||
if (absTop < height) {
|
||||
// Part of the element is visible
|
||||
visiblePx = height - absTop;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.options.percentage) {
|
||||
return (visiblePx / height) * 100;
|
||||
}
|
||||
|
||||
return visiblePx;
|
||||
},
|
||||
};
|
||||
|
||||
MostVisible.makeJQueryPlugin = function ($) {
|
||||
if (!$) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.fn.mostVisible = function (options) {
|
||||
var instance = new MostVisible(this.get(), options);
|
||||
return this.filter(instance.getMostVisible());
|
||||
};
|
||||
}; // Try adding the jQuery plugin to window.jQuery
|
||||
|
||||
MostVisible.makeJQueryPlugin(window.jQuery);
|
||||
/**
|
||||
* Extends obj by adding the properties of all other objects passed to the function.
|
||||
*
|
||||
* @param {...{}} obj
|
||||
* @returns {{}} The extended object.
|
||||
*/
|
||||
|
||||
function extend(obj) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
for (var key in arguments[i]) {
|
||||
obj[key] = arguments[i][key];
|
||||
}
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
return MostVisible;
|
||||
});
|
||||
7
docs/js/src/most-visible.min.js
vendored
7
docs/js/src/most-visible.min.js
vendored
|
|
@ -1,7 +0,0 @@
|
|||
/**
|
||||
* Most Visible v1.5.0
|
||||
*
|
||||
* @author Andy Palmer <andy@andypalmer.me>
|
||||
* @license MIT
|
||||
*/
|
||||
!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(e):e.mostVisible=t(e)}("undefined"!=typeof self?self:this,function(e){"use strict";function i(e,t){if(!(this instanceof i))return new i(e,t).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;t<arguments.length;t++)for(var i in arguments[t])e[i]=arguments[t][i];return e}({},i.defaults,t)}return i.defaults={percentage:!1,offset:0},i.prototype={getMostVisible:function(){var n=this,o=document.documentElement.clientHeight;return Array.prototype.reduce.call(this.elements,function(e,t){var i=n.getVisibleHeight(t,o);return i>e[0]?[i,t]:e},[0,null])[1]},getVisibleHeight:function(e,t){var i=e.getBoundingClientRect(),n=i.top-this.options.offset,o=i.bottom-this.options.offset,s=i.bottom-i.top,r=0<=n&&n<t,f=0<o&&o<t,u=0;if(r&&f)u=s;else if(r)u=t-i.top;else if(f)u=o;else if(t<s&&n<0){var l=Math.abs(n);l<s&&(u=s-l)}return this.options.percentage?u/s*100:u}},i.makeJQueryPlugin=function(e){e&&(e.fn.mostVisible=function(e){var t=new i(this.get(),e);return this.filter(t.getMostVisible())})},i.makeJQueryPlugin(e.jQuery),i});
|
||||
|
|
@ -8,10 +8,14 @@
|
|||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
import * as MostVisible from './most-visible.js';
|
||||
|
||||
export const scrollspy = {
|
||||
mostVisible() {
|
||||
new MostVisible();
|
||||
},
|
||||
|
||||
// Config
|
||||
mostVisible: null,
|
||||
minWidth: '992px',
|
||||
interval: 75,
|
||||
targets: {
|
||||
|
|
@ -20,48 +24,56 @@ export const scrollspy = {
|
|||
active: 'active',
|
||||
},
|
||||
|
||||
|
||||
// Init
|
||||
init(mostVisible) {
|
||||
if (this.mostVisible == null) {
|
||||
this.mostVisible = mostVisible;
|
||||
}
|
||||
init() {
|
||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
||||
this.setActiveNav();
|
||||
this.scrollStop();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Set active section in nav
|
||||
setActiveNav() {
|
||||
|
||||
// Get active section
|
||||
let currentSection = this.mostVisible(this.targets.sections).getAttribute('id');
|
||||
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
|
||||
|
||||
// Remove all active states
|
||||
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
|
||||
links.forEach(function(link) {
|
||||
let links = document.querySelectorAll(
|
||||
this.targets.nav + ' a.' + this.targets.active
|
||||
);
|
||||
links.forEach(
|
||||
function (link) {
|
||||
link.classList.remove(this.targets.active);
|
||||
}.bind(this));
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
// Set active state
|
||||
let activeLink = document.querySelector(this.targets.nav + ' a[href="#' + currentSection + '"]');
|
||||
let activeLink = document.querySelector(
|
||||
this.targets.nav + ' a[href="#' + currentSection + '"]'
|
||||
);
|
||||
activeLink.classList.add(this.targets.active);
|
||||
|
||||
// Open details parent
|
||||
activeLink.closest('details').setAttribute('open', '');
|
||||
},
|
||||
|
||||
|
||||
// Scroll stop
|
||||
scrollStop() {
|
||||
let isScrolling;
|
||||
window.addEventListener('scroll', function(event) {
|
||||
window.addEventListener(
|
||||
'scroll',
|
||||
function (event) {
|
||||
window.clearTimeout(isScrolling);
|
||||
isScrolling = setTimeout(function() {
|
||||
isScrolling = setTimeout(
|
||||
function () {
|
||||
this.setActiveNav();
|
||||
}.bind(this), this.interval);
|
||||
}.bind(this), false);
|
||||
}
|
||||
}
|
||||
}.bind(this),
|
||||
this.interval
|
||||
);
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default scrollspy;
|
||||
|
|
|
|||
|
|
@ -6,69 +6,63 @@
|
|||
*/
|
||||
|
||||
export const themeSwitcher = {
|
||||
|
||||
// Config
|
||||
_scheme: 'auto',
|
||||
change: {
|
||||
light: '<i>Turn on dark mode</i>',
|
||||
dark: '<i>Turn off dark mode</i>'
|
||||
dark: '<i>Turn off dark mode</i>',
|
||||
},
|
||||
buttonsTarget: '.theme-switcher',
|
||||
|
||||
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.scheme = this._scheme;
|
||||
this.initSwitchers();
|
||||
},
|
||||
|
||||
|
||||
// Prefered color scheme
|
||||
get preferedColorScheme() {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return 'dark';
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return 'light';
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Init switchers
|
||||
initSwitchers() {
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
buttons.forEach(function(button) {
|
||||
button.addEventListener('click', function(event) {
|
||||
buttons.forEach(
|
||||
function (button) {
|
||||
button.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
if (this.scheme == 'dark') {
|
||||
this.scheme = 'light';
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.scheme = 'dark';
|
||||
}
|
||||
}.bind(this), false);
|
||||
}.bind(this));
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
// Add new button
|
||||
addButton(config) {
|
||||
|
||||
// Insert Switcher
|
||||
let button = document.createElement(config.tag);
|
||||
button.className = config.class;
|
||||
document.querySelector(config.target).appendChild(button);
|
||||
},
|
||||
|
||||
|
||||
// Set scheme
|
||||
set scheme(scheme) {
|
||||
|
||||
if (scheme == 'auto') {
|
||||
if (this.preferedColorScheme == 'dark') {
|
||||
this._scheme = 'dark';
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this._scheme = 'light';
|
||||
}
|
||||
}
|
||||
|
|
@ -82,31 +76,31 @@ export const themeSwitcher = {
|
|||
this.applyScheme();
|
||||
},
|
||||
|
||||
|
||||
// Get scheme
|
||||
get scheme() {
|
||||
return this._scheme;
|
||||
},
|
||||
|
||||
|
||||
// Apply scheme
|
||||
applyScheme() {
|
||||
|
||||
// Root attribute
|
||||
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
||||
|
||||
// Buttons text
|
||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||
let text;
|
||||
buttons.forEach(function(button) {
|
||||
buttons.forEach(
|
||||
function (button) {
|
||||
if (this.scheme == 'dark') {
|
||||
text = this.change.dark;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
text = this.change.light;
|
||||
}
|
||||
button.innerHTML = text;
|
||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||
}.bind(this));
|
||||
}
|
||||
}
|
||||
}.bind(this)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default themeSwitcher;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ body > nav {
|
|||
|
||||
// Band & Title
|
||||
ul:first-of-type li {
|
||||
|
||||
// Brand
|
||||
&:first-of-type {
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
bottom: var(--spacing);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: .75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
line-height: 1;
|
||||
|
|
@ -20,9 +20,14 @@
|
|||
height: 1rem;
|
||||
border: 0.15rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
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;
|
||||
content: '';
|
||||
content: "";
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +36,7 @@
|
|||
max-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -39,10 +44,8 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
max-width: 100%;
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -54,8 +57,7 @@
|
|||
i {
|
||||
max-width: 100%;
|
||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||
transition: max-width var(--transition),
|
||||
padding var(--transition);
|
||||
transition: max-width var(--transition), padding var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,23 @@
|
|||
* Docs: Code
|
||||
*/
|
||||
|
||||
// Custom spacings for <pre> (Horizontally aligned with <article> content)
|
||||
// Code block inside article
|
||||
article > footer.code {
|
||||
background: var(--article-code-background-color);
|
||||
}
|
||||
article pre,
|
||||
article pre code {
|
||||
background: transparent;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Code block outside article
|
||||
// Horizontally aligned with <article> content
|
||||
section > pre {
|
||||
background: var(--article-code-background-color);
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5)
|
||||
var(--block-spacing-horizontal);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +34,7 @@ section > pre {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: .375rem .75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0;
|
||||
color: var(--primary-inverse);
|
||||
font-size: 14px;
|
||||
|
|
@ -36,7 +48,8 @@ section > pre {
|
|||
|
||||
// Spacing for Valid & Invalid badge
|
||||
code {
|
||||
padding: calc(var(--spacing) * 1.625) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
|
||||
var(--block-spacing-horizontal);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,13 +57,13 @@ section > pre {
|
|||
[data-theme="invalid"] {
|
||||
&:before {
|
||||
background: var(--invalid-color);
|
||||
content: 'Not so great';
|
||||
content: "Not so great";
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="valid"] {
|
||||
&:before {
|
||||
background: var(--valid-color);
|
||||
content: 'Great';
|
||||
content: "Great";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ section > hgroup {
|
|||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
a[role="button"] {
|
||||
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
[role=document] {
|
||||
[role="document"] {
|
||||
section > h1,
|
||||
section > h2,
|
||||
section > h3 {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
*/
|
||||
|
||||
main > aside {
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
|
|
@ -26,7 +25,8 @@ main > aside {
|
|||
}
|
||||
}
|
||||
|
||||
li, summary {
|
||||
li,
|
||||
summary {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 16px;
|
||||
|
|
@ -51,7 +51,7 @@ main > aside {
|
|||
}
|
||||
|
||||
details {
|
||||
padding-bottom: .25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: none;
|
||||
|
||||
summary {
|
||||
|
|
@ -66,7 +66,7 @@ main > aside {
|
|||
}
|
||||
|
||||
&[open] {
|
||||
>summary:not(:focus) {
|
||||
> summary:not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@
|
|||
*/
|
||||
|
||||
html {
|
||||
scroll-behavior:smooth;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
|
||||
// Docs: Customization
|
||||
#customization {
|
||||
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
|
|
@ -36,7 +35,7 @@
|
|||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
padding-top: 100%;
|
||||
border:none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -47,8 +46,8 @@
|
|||
background-image: var(--icon-check);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
|
||||
background-size: 0.66rem auto;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&[data-color="lime"],
|
||||
&[data-color="yellow"],
|
||||
|
|
@ -69,10 +68,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Docs: Grids
|
||||
#grids {
|
||||
|
||||
--grid-spacing-vertical: 1rem;
|
||||
|
||||
button {
|
||||
|
|
@ -83,12 +80,12 @@
|
|||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: var(--secondary);
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 1rem;
|
||||
background: currentColor;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ $navHeight: 3.5rem;
|
|||
|
||||
// Main grid
|
||||
body > main {
|
||||
|
||||
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
|
|
@ -33,51 +32,51 @@ body > main {
|
|||
|
||||
// Anchors hacks for internal links
|
||||
div[role="document"] > section::before {
|
||||
|
||||
display: block;
|
||||
height: calc(2rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-2rem - #{$navHeight} + .5rem);
|
||||
content: '';
|
||||
height: calc(2rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
|
||||
content: "";
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
height: calc(2.5rem + #{$navHeight} - .5rem);
|
||||
height: calc(-2.5rem - #{$navHeight} + .5rem);
|
||||
height: calc(2.5rem + #{$navHeight} - 0.5rem);
|
||||
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
height: calc(3rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-3rem - #{$navHeight} + .5rem);
|
||||
height: calc(3rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
height: calc(3.5rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
|
||||
height: calc(3.5rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
height: calc(4rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-4rem - #{$navHeight} + .5rem);
|
||||
height: calc(4rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// External links
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
|
||||
{
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: var(--icon-external);
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
content: '';
|
||||
background-size: 0.66rem auto;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Embedded SVG
|
||||
|
|
|
|||
25
docs/scss/themes/_docs.scss
Normal file
25
docs/scss/themes/_docs.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* Theme: Additions for docs
|
||||
*/
|
||||
|
||||
@import "../../../scss/themes/default/colors";
|
||||
@import "docs/icons";
|
||||
|
||||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
@import "docs/light";
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@import "docs/dark";
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
@include dark;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
@include dark;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* Theme: Additions for docs
|
||||
*/
|
||||
|
||||
@import "../../../scss/themes/default/colors";
|
||||
@import "docs/icons";
|
||||
@import "docs/light";
|
||||
@import "docs/dark";
|
||||
|
|
@ -1,23 +1,9 @@
|
|||
// Dark theme (Auto) [Additions for docs]
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--invalid-color: #{rgba($red-900, .5)};
|
||||
--valid-color: #{rgba($green-800, .5)};
|
||||
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
--nav-logo-color: #{mix($black, $grey-900)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Dark theme (Forced) [Additions for docs]
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
--invalid-color: #{rgba($red-900, .5)};
|
||||
--valid-color: #{rgba($green-800, .5)};
|
||||
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
// Dark theme [Additions for docs]
|
||||
@mixin dark {
|
||||
--invalid-color: #{rgba($red-900, 0.5)};
|
||||
--valid-color: #{rgba($green-800, 0.5)};
|
||||
--nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
|
||||
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||
--nav-logo-color: #{mix($black, $grey-900)};
|
||||
--article-code-background-color: var(--code-background-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
:root:not([data-theme="dark"]) {
|
||||
--invalid-color: #{$red-800};
|
||||
--valid-color: #{$green-700};
|
||||
--nav-background-color: #{rgba($white, .7)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
--nav-background-color: #{rgba($white, 0.7)};
|
||||
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||
--nav-logo-color: #{$white};
|
||||
--article-code-background-color: #{mix($grey-50, $white, 33%)};
|
||||
}
|
||||
|
|
|
|||
8716
package-lock.json
generated
Normal file
8716
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
30
package.json
30
package.json
|
|
@ -25,5 +25,35 @@
|
|||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/picocss/pico/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/",
|
||||
"css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/",
|
||||
"css:prefix": "postcss css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css --use autoprefixer --no-map --replace",
|
||||
"css:minify": "cleancss -O1 --batch --batch-suffix '.min' css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
|
||||
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife",
|
||||
"js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
|
||||
"js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
|
||||
"build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
|
||||
"build:js": "npm-run-all js:bundle js:babel js:minify",
|
||||
"build": "npm-run-all build:css build:js",
|
||||
"watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
|
||||
"watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'",
|
||||
"watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'",
|
||||
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.15.4",
|
||||
"@babel/core": "^7.15.5",
|
||||
"@babel/preset-env": "^7.15.6",
|
||||
"autoprefixer": "^10.3.4",
|
||||
"clean-css-cli": "^5.3.3",
|
||||
"nodemon": "^2.0.12",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"rollup": "^2.56.3",
|
||||
"sass": "^1.39.0",
|
||||
"uglify-js": "^3.14.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ $enable-transitions: true !default;
|
|||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
|
||||
// Responsive
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -51,12 +50,12 @@ $breakpoints: (
|
|||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xl: 1200px,
|
||||
) !default;
|
||||
|
||||
// Viewports
|
||||
$viewports: (
|
||||
// 'null' disable the viewport on a breakpoint
|
||||
// 'null' disable the viewport on a breakpoint
|
||||
sm: 510px,
|
||||
md: 700px,
|
||||
lg: 920px,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) / 2);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
summary {
|
||||
|
|
@ -35,7 +35,7 @@ details {
|
|||
|
||||
// Marker
|
||||
&::after {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
float: right;
|
||||
|
|
@ -44,7 +44,7 @@ details {
|
|||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
content: '';
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: transform var(--transition);
|
||||
|
|
@ -57,7 +57,7 @@ details {
|
|||
}
|
||||
|
||||
~ * {
|
||||
margin-top: calc(var(--spacing) / 2);
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
|
|
@ -67,9 +67,8 @@ details {
|
|||
|
||||
// Open
|
||||
&[open] {
|
||||
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
|
|
@ -81,3 +80,13 @@ details {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
details {
|
||||
summary {
|
||||
&::after {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@ article {
|
|||
box-shadow: var(--card-box-shadow);
|
||||
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
> footer {
|
||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
padding: calc(var(--block-spacing-vertical) * 0.66)
|
||||
var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
}
|
||||
|
||||
|
|
@ -25,8 +25,7 @@ article {
|
|||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||
}
|
||||
|
||||
> footer,
|
||||
> pre {
|
||||
> footer {
|
||||
margin-top: var(--block-spacing-vertical);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||
border-top: var(--border-width) solid var(--card-border-color);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ nav {
|
|||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
|
|
@ -41,7 +41,7 @@ nav {
|
|||
a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -55,7 +55,6 @@ nav {
|
|||
|
||||
// Vertical Nav
|
||||
aside {
|
||||
|
||||
nav,
|
||||
ol,
|
||||
ul,
|
||||
|
|
@ -64,11 +63,11 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
|
||||
a {
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* 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
|
||||
|
|
@ -15,12 +14,10 @@ progress {
|
|||
vertical-align: baseline; // 2
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
progress {
|
||||
|
||||
// Reset the default appearance
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
|
@ -29,8 +26,8 @@ progress {
|
|||
// Styles
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing) / 2);
|
||||
height: 0.5rem;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
|
|
@ -55,7 +52,13 @@ progress {
|
|||
// Indeterminate state
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
&:indeterminate {
|
||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
|
||||
background: var(--progress-background-color)
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--progress-color) 30%,
|
||||
var(--progress-background-color) 30%
|
||||
)
|
||||
top left / 150% 150% no-repeat;
|
||||
animation: progressIndeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Button
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -35,7 +34,6 @@ button::-moz-focus-inner,
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -59,7 +57,8 @@ a[role="button"] {
|
|||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
|
|
@ -73,10 +72,8 @@ a[role="button"] {
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +86,8 @@ a[role="button"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +106,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +118,6 @@ input[type="reset"] {
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
|
|
@ -135,7 +133,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +152,8 @@ input[type="reset"] {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
||||
0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -200,9 +200,8 @@ input[type="submit"],
|
|||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
&[disabled] {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,20 +2,19 @@
|
|||
* Code
|
||||
*/
|
||||
|
||||
|
||||
// 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. Correct the inheritance and scaling of font size in all browsers
|
||||
// 2. Correct the odd `em` font sizing in all browsers
|
||||
// 2. Correct the font sizing in all browsers
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--font-family); // 1
|
||||
font-size: .875rem; // 2
|
||||
font-size: 0.875em; // 2
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
|
|
@ -24,7 +23,6 @@ pre {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -35,26 +33,24 @@ kbd {
|
|||
color: var(--code-color);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: initial;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: var(--spacing);
|
||||
overflow-x: auto;
|
||||
background: var(--code-background-color);
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
font-size: 14px;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
|
@ -62,7 +58,6 @@ pre {
|
|||
|
||||
// Code Syntax
|
||||
code {
|
||||
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-tag-color);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Embedded content
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
|
|||
|
|
@ -5,63 +5,82 @@
|
|||
|
||||
// Color
|
||||
[type="color"] {
|
||||
|
||||
// Wrapper
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
@mixin color-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
@include color-wrapper;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
@include color-wrapper;
|
||||
}
|
||||
|
||||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
@mixin color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
border-radius: calc(var(--border-radius) * 0.5);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
@include color-swatch;
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
@include color-swatch;
|
||||
}
|
||||
}
|
||||
|
||||
// Date & Time
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
:not(:dir(rtl)) {
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
||||
&::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time
|
||||
[type="time"] {
|
||||
// Time
|
||||
[type="time"] {
|
||||
background-image: var(--icon-time);
|
||||
}
|
||||
}
|
||||
|
||||
// File
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
@mixin file-selector-button {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
|
||||
margin-left: 0;
|
||||
margin-inline-end: calc(var(--spacing) / 2);
|
||||
margin-inline-start: 0;
|
||||
padding: calc(var(--form-element-spacing-vertical) * 0.5)
|
||||
calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
|
|
@ -75,32 +94,36 @@
|
|||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--color);
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&::file-selector-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
@include file-selector-button;
|
||||
}
|
||||
|
||||
&::-ms-browse {
|
||||
@include file-selector-button;
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
[type="range"] {
|
||||
// Config
|
||||
$height-track: .25rem;
|
||||
$height-track: 0.25rem;
|
||||
$height-thumb: 1.25rem;
|
||||
$border-thumb: 2px;
|
||||
|
||||
|
|
@ -108,105 +131,61 @@
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $height-thumb;
|
||||
background: transparent;
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
@mixin slider-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height:$height-track;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: var(--border-radius);
|
||||
@include slider-track;
|
||||
}
|
||||
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
@mixin slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
margin-top: #{(-($height-thumb * 0.5) + ($height-track * 0.5))};
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
@include slider-thumb;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -238,7 +217,9 @@
|
|||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
padding-left: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.75rem
|
||||
) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left 1.125rem;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -8,11 +8,13 @@
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-top: -.125em;
|
||||
margin-right: .375em;
|
||||
margin-top: -0.125em;
|
||||
margin-right: 0.375em;
|
||||
margin-left: 0;
|
||||
margin-inline-end: 0.375em;
|
||||
margin-inline-start: 0;
|
||||
border-width: var(--border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
|
@ -29,12 +31,12 @@
|
|||
background-image: var(--icon-checkbox);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75em auto;
|
||||
background-size: 0.75em auto;
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375em;
|
||||
margin-right: 0.375em;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -48,7 +50,7 @@
|
|||
background-image: var(--icon-minus);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75em auto;
|
||||
background-size: 0.75em auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,9 +60,9 @@
|
|||
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus{
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary-inverse);
|
||||
border-width: .35em;
|
||||
border-width: 0.35em;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,7 +76,7 @@
|
|||
// Config
|
||||
$switch-height: 1.25em;
|
||||
$switch-width: 2.25em;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
$switch-transition: 0.1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
|
|
@ -100,7 +102,7 @@
|
|||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color);
|
||||
content: '';
|
||||
content: "";
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: margin $switch-transition;
|
||||
|
|
@ -112,7 +114,9 @@
|
|||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(#{$switch-width / 2} - var(--border-width));
|
||||
margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Form elements
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -106,15 +105,13 @@ textarea {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
|
@ -131,15 +128,13 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
vertical-align: middle;
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
|
||||
// Blocks, 100%
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -147,10 +142,9 @@ textarea {
|
|||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
padding: var(--form-element-spacing-vertical)
|
||||
var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -171,10 +165,8 @@ textarea {
|
|||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
transition: background-color var(--transition),
|
||||
border-color var(--transition), color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
|
@ -223,10 +215,23 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
@if $enable-important {
|
||||
padding-right: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(
|
||||
var(--form-element-spacing-horizontal) + 1.5rem
|
||||
) !important;
|
||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||
} @else {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
}
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
|
@ -238,9 +243,10 @@ textarea {
|
|||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(
|
||||
--form-element-valid-active-border-color
|
||||
) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -253,15 +259,26 @@ textarea {
|
|||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
--border-color: var(
|
||||
--form-element-invalid-active-border-color
|
||||
) !important;
|
||||
} @else {
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
&[aria-invalid] {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
input::placeholder,
|
||||
input::-webkit-input-placeholder,
|
||||
|
|
@ -281,7 +298,6 @@ textarea {
|
|||
|
||||
// Select
|
||||
select {
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
border: 0;
|
||||
|
|
@ -290,13 +306,24 @@ select {
|
|||
|
||||
&:not([multiple]):not([size]) {
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-left: var(--form-element-spacing-horizontal);
|
||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right .75rem;
|
||||
background-position: center right 0.75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
select {
|
||||
&:not([multiple]):not([size]) {
|
||||
background-position: center left 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper
|
||||
input,
|
||||
select,
|
||||
|
|
@ -315,6 +342,6 @@ label {
|
|||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin-top: calc(var(--spacing) / 4);
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Miscs
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -21,7 +20,11 @@ hr {
|
|||
// Add the correct display in IE 10+
|
||||
[hidden],
|
||||
template {
|
||||
@if $enable-important {
|
||||
display: none !important;
|
||||
} @else {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Add the correct styles in Edge 18-, IE, and Safari
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Table
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -19,7 +18,6 @@ table {
|
|||
text-indent: 0; // 3
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -32,6 +30,7 @@ td {
|
|||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
// Rows
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
* Typography
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -18,7 +17,7 @@ strong {
|
|||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: .75em;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
|
@ -46,7 +45,6 @@ ul ul {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -63,7 +61,8 @@ ul {
|
|||
margin-top: 0;
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
|
@ -78,11 +77,8 @@ a {
|
|||
text-decoration: var(--text-decoration);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
text-decoration var(--transition),
|
||||
box-shadow var(--transition);
|
||||
transition: background-color var(--transition), color var(--transition),
|
||||
text-decoration var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -97,7 +93,6 @@ a {
|
|||
}
|
||||
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
|
@ -214,10 +209,13 @@ small {
|
|||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
padding-right: 0;
|
||||
padding-left: var(--spacing);
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: var(--spacing);
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 4);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -227,7 +225,7 @@ ul li {
|
|||
|
||||
// Highlighted text
|
||||
mark {
|
||||
padding: .125rem .25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
|
|
@ -238,10 +236,13 @@ blockquote {
|
|||
display: block;
|
||||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
border-left: .25rem solid var(--blockquote-border-color);
|
||||
border-right: none;
|
||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||
border-inline-end: none;
|
||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--typography-spacing-vertical) / 2);
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||
color: var(--blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@if ($enable-class-container and $enable-classes) {
|
||||
|
||||
/**
|
||||
/**
|
||||
* Container
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +13,6 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* Content-box & Responsive typography
|
||||
*/
|
||||
|
||||
|
||||
// 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
|
||||
|
|
@ -32,8 +31,8 @@
|
|||
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
|
||||
-moz-tab-size: 4; // 5
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
|
||||
tab-size: 4; // 5
|
||||
-ms-text-size-adjust: 100%; // 6
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@if $enable-classes {
|
||||
|
||||
/**
|
||||
/**
|
||||
* Grid
|
||||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
// Wrapper to make any content responsive across all viewports
|
||||
figure {
|
||||
display: block;
|
||||
margin:0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* Container and responsive spacings for header, main, footer
|
||||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
|
|
@ -14,7 +13,6 @@ main {
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -35,7 +33,6 @@ body {
|
|||
|
||||
// Centered viewport
|
||||
@if $enable-viewport {
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ $enable-semantic-container: true;
|
|||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ $enable-viewport: false;
|
|||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* Pico.css v1.3.3 (https://picocss.com)
|
||||
* Pico.css v1.4.0 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
/*!
|
||||
* Pico.css v1.3.3 (https://picocss.com)
|
||||
* Pico.css v1.4.0 (https://picocss.com)
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
* You can export only the modules you need
|
||||
*/
|
||||
|
||||
|
||||
// Config
|
||||
// --------------------
|
||||
|
||||
|
|
@ -19,7 +18,6 @@ $enable-transitions: false;
|
|||
// Enable overriding with !important
|
||||
$enable-important: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
|
|
@ -42,20 +40,8 @@ $enable-important: false;
|
|||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
||||
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
// @import "content/code"; // pre, code, ...
|
||||
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas
|
||||
|
||||
// Components
|
||||
// @import "components/accordion"; // details, summary
|
||||
// @import "components/card"; // article
|
||||
// @import "components/nav"; // nav
|
||||
// @import "components/progress"; // progress
|
||||
|
||||
// Utilities
|
||||
// @import "utilities/loading"; // aria-busy=true
|
||||
// @import "utilities/tooltip"; // data-tooltip
|
||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
|
|||
|
|
@ -26,40 +26,40 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
|
|||
|
||||
// Black & White
|
||||
$black: #000 !default;
|
||||
$white: #FFF !default;
|
||||
$white: #fff !default;
|
||||
|
||||
// Amber
|
||||
$amber-50: #FFF8E1 !default;
|
||||
$amber-100: #FFECB3 !default;
|
||||
$amber-200: #FFE082 !default;
|
||||
$amber-300: #FFD54F !default;
|
||||
$amber-400: #FFCA28 !default;
|
||||
$amber-500: #FFC107 !default;
|
||||
$amber-600: #FFB300 !default;
|
||||
$amber-700: #FFA000 !default;
|
||||
$amber-800: #FF8F00 !default;
|
||||
$amber-900: #FF6F00 !default;
|
||||
$amber-50: #fff8e1 !default;
|
||||
$amber-100: #ffecb3 !default;
|
||||
$amber-200: #ffe082 !default;
|
||||
$amber-300: #ffd54f !default;
|
||||
$amber-400: #ffca28 !default;
|
||||
$amber-500: #ffc107 !default;
|
||||
$amber-600: #ffb300 !default;
|
||||
$amber-700: #ffa000 !default;
|
||||
$amber-800: #ff8f00 !default;
|
||||
$amber-900: #ff6f00 !default;
|
||||
|
||||
// Green
|
||||
$green-50: #E8F5E9 !default;
|
||||
$green-100: #C8E6C9 !default;
|
||||
$green-200: #A5D6A7 !default;
|
||||
$green-300: #81C784 !default;
|
||||
$green-400: #66BB6A !default;
|
||||
$green-500: #4CAF50 !default;
|
||||
$green-600: #43A047 !default;
|
||||
$green-700: #388E3C !default;
|
||||
$green-800: #2E7D32 !default;
|
||||
$green-900: #1B5E20 !default;
|
||||
$green-50: #e8f5e9 !default;
|
||||
$green-100: #c8e6c9 !default;
|
||||
$green-200: #a5d6a7 !default;
|
||||
$green-300: #81c784 !default;
|
||||
$green-400: #66bb6a !default;
|
||||
$green-500: #4caf50 !default;
|
||||
$green-600: #43a047 !default;
|
||||
$green-700: #388e3c !default;
|
||||
$green-800: #2e7d32 !default;
|
||||
$green-900: #1b5e20 !default;
|
||||
|
||||
// Red
|
||||
$red-50: #FFEBEE !default;
|
||||
$red-100: #FFCDD2 !default;
|
||||
$red-200: #EF9A9A !default;
|
||||
$red-300: #E57373 !default;
|
||||
$red-400: #EF5350 !default;
|
||||
$red-500: #F44336 !default;
|
||||
$red-600: #E53935 !default;
|
||||
$red-700: #D32F2F !default;
|
||||
$red-800: #C62828 !default;
|
||||
$red-900: #B71C1C !default;
|
||||
$red-50: #ffebee !default;
|
||||
$red-100: #ffcdd2 !default;
|
||||
$red-200: #ef9a9a !default;
|
||||
$red-300: #e57373 !default;
|
||||
$red-400: #ef5350 !default;
|
||||
$red-500: #f44336 !default;
|
||||
$red-600: #e53935 !default;
|
||||
$red-700: #d32f2f !default;
|
||||
$red-800: #c62828 !default;
|
||||
$red-900: #b71c1c !default;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Default: Dark theme
|
||||
@mixin dark {
|
||||
|
||||
// Document
|
||||
color-scheme: dark;
|
||||
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
|
@ -21,19 +20,19 @@
|
|||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-focus: #{rgba($primary-600, 0.25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-500, .25)};
|
||||
--secondary-focus: #{rgba($grey-500, 0.25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-50};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-500, .25)};
|
||||
--contrast-focus: #{rgba($grey-500, 0.25)};
|
||||
--contrast-inverse: #{$black};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
|
|
@ -64,7 +63,7 @@
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-800};
|
||||
--form-element-disabled-border-color: #{$grey-700};
|
||||
--form-element-disabled-opacity: .5;
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-900};
|
||||
--form-element-invalid-active-border-color: #{$red-800};
|
||||
--form-element-valid-border-color: #{$green-800};
|
||||
|
|
@ -85,7 +84,7 @@
|
|||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, .05)};
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
|
@ -106,7 +105,9 @@
|
|||
// Card (<article>)
|
||||
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||
--card-border-color: #{mix($black, $grey-900, 37.5%)};
|
||||
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
|
||||
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
|
||||
0 0.125rem 2rem #{rgba($black, 0.12)},
|
||||
0 0 0 0.0625rem #{rgba($black, 0.036)};
|
||||
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Progress
|
||||
|
|
@ -114,7 +115,7 @@
|
|||
--progress-color: var(--primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: .5;
|
||||
--loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// Default: Light theme
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
||||
// Document
|
||||
color-scheme: light;
|
||||
--background-color: #{$white};
|
||||
|
|
@ -22,19 +21,19 @@
|
|||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-focus: #{rgba($primary-600, 0.125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-600, .125)};
|
||||
--secondary-focus: #{rgba($grey-600, 0.125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-900};
|
||||
--contrast-hover: #{$black};
|
||||
--contrast-focus: #{rgba($grey-600, .125)};
|
||||
--contrast-focus: #{rgba($grey-600, 0.125)};
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
|
|
@ -65,7 +64,7 @@
|
|||
--form-element-focus-color: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-100};
|
||||
--form-element-disabled-border-color: #{$grey-300};
|
||||
--form-element-disabled-opacity: .5;
|
||||
--form-element-disabled-opacity: 0.5;
|
||||
--form-element-invalid-border-color: #{$red-800};
|
||||
--form-element-invalid-active-border-color: #{$red-900};
|
||||
--form-element-valid-border-color: #{$green-700};
|
||||
|
|
@ -86,7 +85,7 @@
|
|||
|
||||
// Table
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color:#{mix($grey-50, $white)};
|
||||
--table-row-stripped-background-color: #{mix($grey-50, $white)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{$grey-50};
|
||||
|
|
@ -106,7 +105,9 @@
|
|||
// Card (<article>)
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-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-box-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-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||
|
||||
// Progress
|
||||
|
|
@ -114,7 +115,7 @@
|
|||
--progress-color: var(--primary);
|
||||
|
||||
// Loading ([aria-busy=true])
|
||||
--loading-spinner-opacity: .5;
|
||||
--loading-spinner-opacity: 0.5;
|
||||
|
||||
// Tooltip ([data-tooltip])
|
||||
--tooltip-background-color: var(--contrast);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
// Commons Styles
|
||||
:root {
|
||||
|
||||
// Typography
|
||||
--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: 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";
|
||||
--line-height: 1.5;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
|
||||
// Responsive typography
|
||||
@if $enable-responsive-typography {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--font-size: 17px;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
// Borders
|
||||
--border-radius: .25rem;
|
||||
--border-radius: 0.25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
|
||||
|
|
@ -55,22 +55,20 @@
|
|||
--grid-spacing-horizontal: var(--spacing);
|
||||
|
||||
// Spacings for form elements and button
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-vertical: 0.75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Transitions
|
||||
--transition: .2s ease-in-out;
|
||||
--transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
// Responsives spacings
|
||||
@if $enable-responsive-spacings {
|
||||
|
||||
// Sectionning
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
|
|
@ -98,7 +96,6 @@
|
|||
|
||||
// Card (<article>)
|
||||
article {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
|
|
@ -203,7 +200,9 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
--font-family: "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";
|
||||
--font-family: "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";
|
||||
}
|
||||
|
||||
kbd {
|
||||
|
|
|
|||
|
|
@ -44,3 +44,11 @@ textarea,
|
|||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
[dir="rtl"] {
|
||||
direction: rtl;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,10 @@
|
|||
|
||||
&:not(:empty) {
|
||||
&::before {
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
margin-left: 0;
|
||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue