mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 18:56:15 -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
|
*.DS_Store
|
||||||
|
.prettierrc.js
|
||||||
TODO.md
|
TODO.md
|
||||||
prepros.config
|
tests/
|
||||||
test.html
|
|
||||||
|
|
|
||||||
12
README.md
12
README.md
|
|
@ -8,7 +8,7 @@
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<strong>Minimal CSS Framework for semantic HTML</strong><br>
|
<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/#examples">Examples</a> ·
|
||||||
<a href="https://picocss.com/docs/">Documentation</a>
|
<a href="https://picocss.com/docs/">Documentation</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
|
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
|
||||||
|
|
||||||
**Class-light and semantic**
|
**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**
|
**Great styles with just one CSS file**
|
||||||
No dependencies, package manager, external files, or JavaScript.
|
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)
|
- [Themes](https://picocss.com/docs/#themes)
|
||||||
- [Customization](https://picocss.com/docs/#customization)
|
- [Customization](https://picocss.com/docs/#customization)
|
||||||
- [Class-less version](https://picocss.com/docs/#classless)
|
- [Class-less version](https://picocss.com/docs/#classless)
|
||||||
|
- [RTL](https://picocss.com/docs/#rtl)
|
||||||
|
|
||||||
**Layout**
|
**Layout**
|
||||||
- [Containers](https://picocss.com/docs/#containers)
|
- [Containers](https://picocss.com/docs/#containers)
|
||||||
|
|
@ -166,16 +167,17 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
|
- [`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
|
## Copyright and license
|
||||||
|
|
||||||
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
|
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
|
||||||
|
|
||||||
**Relevant third party tools and resources we depend on:**
|
**Relevant third-party tools and resources we depend on:**
|
||||||
|
|
||||||
Website and docs:
|
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))
|
- [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))
|
- [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
1086
css/pico.css
1086
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
|
* Theme: default
|
||||||
*/
|
*/
|
||||||
:root {
|
: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;
|
--line-height: 1.5;
|
||||||
--font-weight: 400;
|
--font-weight: 400;
|
||||||
--font-size: 16px;
|
--font-size: 16px;
|
||||||
--border-radius: .25rem;
|
--border-radius: 0.25rem;
|
||||||
--border-width: 1px;
|
--border-width: 1px;
|
||||||
--outline-width: 3px;
|
--outline-width: 3px;
|
||||||
--spacing: 1rem;
|
--spacing: 1rem;
|
||||||
|
|
@ -15,29 +17,25 @@
|
||||||
--block-spacing-horizontal: var(--spacing);
|
--block-spacing-horizontal: var(--spacing);
|
||||||
--grid-spacing-vertical: 0;
|
--grid-spacing-vertical: 0;
|
||||||
--grid-spacing-horizontal: var(--spacing);
|
--grid-spacing-horizontal: var(--spacing);
|
||||||
--form-element-spacing-vertical: .75rem;
|
--form-element-spacing-vertical: 0.75rem;
|
||||||
--form-element-spacing-horizontal: 1rem;
|
--form-element-spacing-horizontal: 1rem;
|
||||||
--transition: .2s ease-in-out;
|
--transition: 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 17px;
|
--font-size: 17px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 18px;
|
--font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 19px;
|
--font-size: 19px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
:root {
|
:root {
|
||||||
--font-size: 20px;
|
--font-size: 20px;
|
||||||
|
|
@ -52,7 +50,6 @@
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
|
|
@ -61,7 +58,6 @@
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
|
|
@ -70,7 +66,6 @@
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
|
|
@ -85,19 +80,16 @@
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
article {
|
article {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
article {
|
article {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
article {
|
article {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||||
|
|
@ -107,7 +99,6 @@
|
||||||
a {
|
a {
|
||||||
--text-decoration: none;
|
--text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.secondary, a.contrast {
|
a.secondary, a.contrast {
|
||||||
--text-decoration: underline;
|
--text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -150,12 +141,12 @@ h5 {
|
||||||
--typography-spacing-vertical: 1.6875rem;
|
--typography-spacing-vertical: 1.6875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type=checkbox],
|
||||||
[type="radio"] {
|
[type=radio] {
|
||||||
--border-width: 2px;
|
--border-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"][role="switch"] {
|
[type=checkbox][role=switch] {
|
||||||
--border-width: 3px;
|
--border-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -172,20 +163,22 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
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 {
|
kbd {
|
||||||
--font-weight: bolder;
|
--font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme=light],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme=dark]) {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--background-color: #FFF;
|
--background-color: #fff;
|
||||||
--color: #415462;
|
--color: #415462;
|
||||||
--h1-color: #1b2832;
|
--h1-color: #1b2832;
|
||||||
--h2-color: #23333e;
|
--h2-color: #24333e;
|
||||||
--h3-color: #2c3d49;
|
--h3-color: #2c3d49;
|
||||||
--h4-color: #374956;
|
--h4-color: #374956;
|
||||||
--h5-color: #415462;
|
--h5-color: #415462;
|
||||||
|
|
@ -195,19 +188,19 @@ kbd {
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
--primary-hover: #08769b;
|
--primary-hover: #08769b;
|
||||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||||
--primary-inverse: #FFF;
|
--primary-inverse: #fff;
|
||||||
--secondary: #596b78;
|
--secondary: #596b78;
|
||||||
--secondary-hover: #415462;
|
--secondary-hover: #415462;
|
||||||
--secondary-focus: rgba(89, 107, 120, 0.125);
|
--secondary-focus: rgba(89, 107, 120, 0.125);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #fff;
|
||||||
--contrast: #1b2832;
|
--contrast: #1b2832;
|
||||||
--contrast-hover: #000;
|
--contrast-hover: #000;
|
||||||
--contrast-focus: rgba(89, 107, 120, 0.125);
|
--contrast-focus: rgba(89, 107, 120, 0.125);
|
||||||
--contrast-inverse: #FFF;
|
--contrast-inverse: #fff;
|
||||||
--mark-background-color: #fff2ca;
|
--mark-background-color: #fff2ca;
|
||||||
--mark-color: #543a25;
|
--mark-color: #543a26;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388e3c;
|
||||||
--del-color: #C62828;
|
--del-color: #c62828;
|
||||||
--blockquote-border-color: var(--muted-border-color);
|
--blockquote-border-color: var(--muted-border-color);
|
||||||
--blockquote-footer-color: var(--muted-color);
|
--blockquote-footer-color: var(--muted-color);
|
||||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
--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-focus-color: var(--primary-focus);
|
||||||
--form-element-disabled-background-color: #d5dce2;
|
--form-element-disabled-background-color: #d5dce2;
|
||||||
--form-element-disabled-border-color: #a2afb9;
|
--form-element-disabled-border-color: #a2afb9;
|
||||||
--form-element-disabled-opacity: .5;
|
--form-element-disabled-opacity: 0.5;
|
||||||
--form-element-invalid-border-color: #C62828;
|
--form-element-invalid-border-color: #c62828;
|
||||||
--form-element-invalid-active-border-color: #B71C1C;
|
--form-element-invalid-active-border-color: #b71c1c;
|
||||||
--form-element-valid-border-color: #388E3C;
|
--form-element-valid-border-color: #388e3c;
|
||||||
--form-element-valid-active-border-color: #2E7D32;
|
--form-element-valid-active-border-color: #2e7d32;
|
||||||
--switch-background-color: #bbc6ce;
|
--switch-background-color: #bbc6ce;
|
||||||
--switch-color: var(--primary-inverse);
|
--switch-color: var(--primary-inverse);
|
||||||
--switch-checked-background-color: var(--primary);
|
--switch-checked-background-color: var(--primary);
|
||||||
|
|
@ -250,11 +243,13 @@ kbd {
|
||||||
--accordion-open-summary-color: var(--muted-color);
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
--card-background-color: var(--background-color);
|
--card-background-color: var(--background-color);
|
||||||
--card-border-color: var(--muted-border-color);
|
--card-border-color: var(--muted-border-color);
|
||||||
--card-box-shadow: 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-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
|
||||||
--card-sectionning-background-color: #fafbfc;
|
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-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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");
|
--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) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
:root:not([data-theme="light"]) {
|
:root:not([data-theme=light]) {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--background-color: #11191f;
|
--background-color: #11191f;
|
||||||
--color: #bbc6ce;
|
--color: #bbc6ce;
|
||||||
--h1-color: #edf0f3;
|
--h1-color: #edf0f3;
|
||||||
--h2-color: #e1e6ea;
|
--h2-color: #e1e6eb;
|
||||||
--h3-color: #d5dce2;
|
--h3-color: #d5dce2;
|
||||||
--h4-color: #c8d1d8;
|
--h4-color: #c8d1d8;
|
||||||
--h5-color: #bbc6ce;
|
--h5-color: #bbc6ce;
|
||||||
--h6-color: #aebbc3;
|
--h6-color: #afbbc4;
|
||||||
--muted-color: #73828c;
|
--muted-color: #73828c;
|
||||||
--muted-border-color: #1f2d38;
|
--muted-border-color: #1f2d38;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
--primary-hover: #1ab3e6;
|
--primary-hover: #1ab3e6;
|
||||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
--primary-inverse: #FFF;
|
--primary-inverse: #fff;
|
||||||
--secondary: #596b78;
|
--secondary: #596b78;
|
||||||
--secondary-hover: #73828c;
|
--secondary-hover: #73828c;
|
||||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #fff;
|
||||||
--contrast: #edf0f3;
|
--contrast: #edf0f3;
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #fff;
|
||||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
--contrast-inverse: #000;
|
--contrast-inverse: #000;
|
||||||
--mark-background-color: #d0c284;
|
--mark-background-color: #d1c284;
|
||||||
--mark-color: #11191f;
|
--mark-color: #11191f;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388e3c;
|
||||||
--del-color: #C62828;
|
--del-color: #c62828;
|
||||||
--blockquote-border-color: var(--muted-border-color);
|
--blockquote-border-color: var(--muted-border-color);
|
||||||
--blockquote-footer-color: var(--muted-color);
|
--blockquote-footer-color: var(--muted-color);
|
||||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
--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-focus-color: var(--primary-focus);
|
||||||
--form-element-disabled-background-color: #2c3d49;
|
--form-element-disabled-background-color: #2c3d49;
|
||||||
--form-element-disabled-border-color: #415462;
|
--form-element-disabled-border-color: #415462;
|
||||||
--form-element-disabled-opacity: .5;
|
--form-element-disabled-opacity: 0.5;
|
||||||
--form-element-invalid-border-color: #B71C1C;
|
--form-element-invalid-border-color: #b71c1c;
|
||||||
--form-element-invalid-active-border-color: #C62828;
|
--form-element-invalid-active-border-color: #c62828;
|
||||||
--form-element-valid-border-color: #2E7D32;
|
--form-element-valid-border-color: #2e7d32;
|
||||||
--form-element-valid-active-border-color: #388E3C;
|
--form-element-valid-active-border-color: #388e3c;
|
||||||
--switch-background-color: #374956;
|
--switch-background-color: #374956;
|
||||||
--switch-color: var(--primary-inverse);
|
--switch-color: var(--primary-inverse);
|
||||||
--switch-checked-background-color: var(--primary);
|
--switch-checked-background-color: var(--primary);
|
||||||
--range-border-color: #23333e;
|
--range-border-color: #24333e;
|
||||||
--range-active-border-color: #2c3d49;
|
--range-active-border-color: #2c3d49;
|
||||||
--range-thumb-border-color: var(--background-color);
|
--range-thumb-border-color: var(--background-color);
|
||||||
--range-thumb-color: var(--secondary);
|
--range-thumb-color: var(--secondary);
|
||||||
|
|
@ -325,7 +320,7 @@ kbd {
|
||||||
--range-thumb-active-color: var(--primary);
|
--range-thumb-active-color: var(--primary);
|
||||||
--table-border-color: var(--muted-border-color);
|
--table-border-color: var(--muted-border-color);
|
||||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
--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-color: var(--muted-color);
|
||||||
--code-kbd-background-color: var(--contrast);
|
--code-kbd-background-color: var(--contrast);
|
||||||
--code-kbd-color: var(--contrast-inverse);
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
|
@ -337,13 +332,15 @@ kbd {
|
||||||
--accordion-active-summary-color: var(--primary);
|
--accordion-active-summary-color: var(--primary);
|
||||||
--accordion-close-summary-color: var(--color);
|
--accordion-close-summary-color: var(--color);
|
||||||
--accordion-open-summary-color: var(--muted-color);
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
--card-background-color: #141e25;
|
--card-background-color: #141e26;
|
||||||
--card-border-color: #11191f;
|
--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-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
|
||||||
--card-sectionning-background-color: #17232c;
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
--progress-background-color: #23333e;
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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");
|
--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");
|
--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;
|
color-scheme: dark;
|
||||||
--background-color: #11191f;
|
--background-color: #11191f;
|
||||||
--color: #bbc6ce;
|
--color: #bbc6ce;
|
||||||
--h1-color: #edf0f3;
|
--h1-color: #edf0f3;
|
||||||
--h2-color: #e1e6ea;
|
--h2-color: #e1e6eb;
|
||||||
--h3-color: #d5dce2;
|
--h3-color: #d5dce2;
|
||||||
--h4-color: #c8d1d8;
|
--h4-color: #c8d1d8;
|
||||||
--h5-color: #bbc6ce;
|
--h5-color: #bbc6ce;
|
||||||
--h6-color: #aebbc3;
|
--h6-color: #afbbc4;
|
||||||
--muted-color: #73828c;
|
--muted-color: #73828c;
|
||||||
--muted-border-color: #1f2d38;
|
--muted-border-color: #1f2d38;
|
||||||
--primary: #1095c1;
|
--primary: #1095c1;
|
||||||
--primary-hover: #1ab3e6;
|
--primary-hover: #1ab3e6;
|
||||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||||
--primary-inverse: #FFF;
|
--primary-inverse: #fff;
|
||||||
--secondary: #596b78;
|
--secondary: #596b78;
|
||||||
--secondary-hover: #73828c;
|
--secondary-hover: #73828c;
|
||||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||||
--secondary-inverse: #FFF;
|
--secondary-inverse: #fff;
|
||||||
--contrast: #edf0f3;
|
--contrast: #edf0f3;
|
||||||
--contrast-hover: #FFF;
|
--contrast-hover: #fff;
|
||||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||||
--contrast-inverse: #000;
|
--contrast-inverse: #000;
|
||||||
--mark-background-color: #d0c284;
|
--mark-background-color: #d1c284;
|
||||||
--mark-color: #11191f;
|
--mark-color: #11191f;
|
||||||
--ins-color: #388E3C;
|
--ins-color: #388e3c;
|
||||||
--del-color: #C62828;
|
--del-color: #c62828;
|
||||||
--blockquote-border-color: var(--muted-border-color);
|
--blockquote-border-color: var(--muted-border-color);
|
||||||
--blockquote-footer-color: var(--muted-color);
|
--blockquote-footer-color: var(--muted-color);
|
||||||
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
--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-focus-color: var(--primary-focus);
|
||||||
--form-element-disabled-background-color: #2c3d49;
|
--form-element-disabled-background-color: #2c3d49;
|
||||||
--form-element-disabled-border-color: #415462;
|
--form-element-disabled-border-color: #415462;
|
||||||
--form-element-disabled-opacity: .5;
|
--form-element-disabled-opacity: 0.5;
|
||||||
--form-element-invalid-border-color: #B71C1C;
|
--form-element-invalid-border-color: #b71c1c;
|
||||||
--form-element-invalid-active-border-color: #C62828;
|
--form-element-invalid-active-border-color: #c62828;
|
||||||
--form-element-valid-border-color: #2E7D32;
|
--form-element-valid-border-color: #2e7d32;
|
||||||
--form-element-valid-active-border-color: #388E3C;
|
--form-element-valid-active-border-color: #388e3c;
|
||||||
--switch-background-color: #374956;
|
--switch-background-color: #374956;
|
||||||
--switch-color: var(--primary-inverse);
|
--switch-color: var(--primary-inverse);
|
||||||
--switch-checked-background-color: var(--primary);
|
--switch-checked-background-color: var(--primary);
|
||||||
--range-border-color: #23333e;
|
--range-border-color: #24333e;
|
||||||
--range-active-border-color: #2c3d49;
|
--range-active-border-color: #2c3d49;
|
||||||
--range-thumb-border-color: var(--background-color);
|
--range-thumb-border-color: var(--background-color);
|
||||||
--range-thumb-color: var(--secondary);
|
--range-thumb-color: var(--secondary);
|
||||||
|
|
@ -414,7 +410,7 @@ kbd {
|
||||||
--range-thumb-active-color: var(--primary);
|
--range-thumb-active-color: var(--primary);
|
||||||
--table-border-color: var(--muted-border-color);
|
--table-border-color: var(--muted-border-color);
|
||||||
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
|
--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-color: var(--muted-color);
|
||||||
--code-kbd-background-color: var(--contrast);
|
--code-kbd-background-color: var(--contrast);
|
||||||
--code-kbd-color: var(--contrast-inverse);
|
--code-kbd-color: var(--contrast-inverse);
|
||||||
|
|
@ -426,13 +422,15 @@ kbd {
|
||||||
--accordion-active-summary-color: var(--primary);
|
--accordion-active-summary-color: var(--primary);
|
||||||
--accordion-close-summary-color: var(--color);
|
--accordion-close-summary-color: var(--color);
|
||||||
--accordion-open-summary-color: var(--muted-color);
|
--accordion-open-summary-color: var(--muted-color);
|
||||||
--card-background-color: #141e25;
|
--card-background-color: #141e26;
|
||||||
--card-border-color: #11191f;
|
--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-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
|
||||||
--card-sectionning-background-color: #17232c;
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
--progress-background-color: #23333e;
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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");
|
--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");
|
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"],
|
[data-theme=light],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme=dark]) {
|
||||||
--invalid-color: #C62828;
|
--invalid-color: #c62828;
|
||||||
--valid-color: #388E3C;
|
--valid-color: #388e3c;
|
||||||
--nav-background-color: rgba(255, 255, 255, 0.7);
|
--nav-background-color: rgba(255, 255, 255, 0.7);
|
||||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
--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) {
|
@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);
|
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||||
--valid-color: rgba(46, 125, 50, 0.5);
|
--valid-color: rgba(46, 125, 50, 0.5);
|
||||||
--nav-background-color: 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-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);
|
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||||
--valid-color: rgba(46, 125, 50, 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-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 {
|
body > main {
|
||||||
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > main {
|
body > main {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||||
|
|
@ -59,62 +60,56 @@ body > main {
|
||||||
grid-template-columns: 200px auto;
|
grid-template-columns: 200px auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
body > main {
|
body > main {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body > main > aside,
|
body > main > aside,
|
||||||
body > main div[role="document"] {
|
body > main div[role=document] {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
display: block;
|
display: block;
|
||||||
height: calc(2rem + 3.5rem - .5rem);
|
height: calc(2rem + 3.5rem - 0.5rem);
|
||||||
margin-top: calc(-2rem - 3.5rem + .5rem);
|
margin-top: calc(-2rem - 3.5rem + 0.5rem);
|
||||||
content: '';
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(2.5rem + 3.5rem - .5rem);
|
height: calc(2.5rem + 3.5rem - 0.5rem);
|
||||||
height: calc(-2.5rem - 3.5rem + .5rem);
|
height: calc(-2.5rem - 3.5rem + 0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(3rem + 3.5rem - .5rem);
|
height: calc(3rem + 3.5rem - 0.5rem);
|
||||||
margin-top: calc(-3rem - 3.5rem + .5rem);
|
margin-top: calc(-3rem - 3.5rem + 0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(3.5rem + 3.5rem - .5rem);
|
height: calc(3.5rem + 3.5rem - 0.5rem);
|
||||||
margin-top: calc(-3.5rem - 3.5rem + .5rem);
|
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) {
|
@media (min-width: 1200px) {
|
||||||
div[role="document"] > section::before {
|
div[role=document] > section::before {
|
||||||
height: calc(4rem + 3.5rem - .5rem);
|
height: calc(4rem + 3.5rem - 0.5rem);
|
||||||
margin-top: calc(-4rem - 3.5rem + .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;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-image: var(--icon-external);
|
background-image: var(--icon-external);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: 0.66rem auto;
|
||||||
content: '';
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
@ -128,11 +123,9 @@ main > aside nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--block-spacing-vertical);
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside nav h1 {
|
main > aside nav h1 {
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
main > aside nav {
|
main > aside nav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -146,47 +139,39 @@ main > aside nav h1 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
main > aside li,
|
||||||
main > aside li, main > aside summary {
|
main > aside summary {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside li a {
|
main > aside li a {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside li a svg {
|
main > aside li a svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside a.secondary:focus {
|
main > aside a.secondary:focus {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--primary-hover);
|
color: var(--primary-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside a.active,
|
main > aside a.active,
|
||||||
main > aside a.active:hover {
|
main > aside a.active:hover {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details {
|
main > aside details {
|
||||||
padding-bottom: .25rem;
|
padding-bottom: 0.25rem;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details summary {
|
main > aside details summary {
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details summary::after {
|
main > aside details summary::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > aside details[open] > summary:not(:focus) {
|
main > aside details[open] > summary:not(:focus) {
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
}
|
}
|
||||||
|
|
@ -205,7 +190,6 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
#customization figure {
|
#customization figure {
|
||||||
grid-template-columns: repeat(18, 1fr);
|
grid-template-columns: repeat(18, 1fr);
|
||||||
|
|
@ -214,13 +198,11 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
border-top-left-radius: var(--border-radius);
|
border-top-left-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure ~ article {
|
#customization figure ~ article {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button {
|
#customization figure button {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -228,57 +210,48 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button:focus {
|
#customization figure button:focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure button.picked {
|
#customization figure button.picked {
|
||||||
background-image: var(--icon-check);
|
background-image: var(--icon-check);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: 0.66rem auto;
|
||||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
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);
|
background-image: var(--icon-check-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization h4 {
|
#customization h4 {
|
||||||
transition: color var(--transition);
|
transition: color var(--transition);
|
||||||
}
|
}
|
||||||
|
#customization pre[data-theme=generated] {
|
||||||
#customization pre[data-theme="generated"] {
|
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids {
|
#grids {
|
||||||
--grid-spacing-vertical: 1rem;
|
--grid-spacing-vertical: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids button {
|
#grids button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
#grids button {
|
#grids button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids button svg {
|
#grids button svg {
|
||||||
stroke: var(--secondary);
|
stroke: var(--secondary);
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
border: 2px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids .grid > * {
|
#grids .grid > * {
|
||||||
padding: calc(var(--spacing) / 2) 0;
|
padding: calc(var(--spacing) / 2) 0;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -286,11 +259,9 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
font-size: 87.5%;
|
font-size: 87.5%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids details {
|
#grids details {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids details svg {
|
#grids details svg {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
@ -320,53 +291,60 @@ a[role=button] {
|
||||||
/**
|
/**
|
||||||
* Docs: Code
|
* Docs: Code
|
||||||
*/
|
*/
|
||||||
|
article > footer.code {
|
||||||
|
background: var(--article-code-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
article pre,
|
||||||
|
article pre code {
|
||||||
|
background: transparent;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
section > pre {
|
section > pre {
|
||||||
|
background: var(--article-code-background-color);
|
||||||
margin: var(--block-spacing-vertical) 0;
|
margin: var(--block-spacing-vertical) 0;
|
||||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
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);
|
box-shadow: var(--card-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="invalid"],
|
[data-theme=invalid],
|
||||||
[data-theme="valid"] {
|
[data-theme=valid] {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
[data-theme=invalid]:before,
|
||||||
[data-theme="invalid"]:before,
|
[data-theme=valid]:before {
|
||||||
[data-theme="valid"]:before {
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: .375rem .75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: var(--primary-inverse);
|
color: var(--primary-inverse);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
[data-theme="invalid"]:before,
|
[data-theme=invalid]:before,
|
||||||
[data-theme="valid"]:before {
|
[data-theme=valid]:before {
|
||||||
top: var(--spacing);
|
top: var(--spacing);
|
||||||
right: var(--spacing);
|
right: var(--spacing);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
[data-theme=invalid] code,
|
||||||
[data-theme="invalid"] code,
|
[data-theme=valid] code {
|
||||||
[data-theme="valid"] code {
|
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
|
||||||
padding: calc(var(--spacing) * 1.625) 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="invalid"]:before {
|
[data-theme=invalid]:before {
|
||||||
background: var(--invalid-color);
|
background: var(--invalid-color);
|
||||||
content: 'Not so great';
|
content: "Not so great";
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="valid"]:before {
|
[data-theme=valid]:before {
|
||||||
background: var(--valid-color);
|
background: var(--valid-color);
|
||||||
content: 'Great';
|
content: "Great";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -383,15 +361,12 @@ body > nav {
|
||||||
background-color: var(--nav-background-color);
|
background-color: var(--nav-background-color);
|
||||||
box-shadow: 0px 1px 0 var(--nav-border-color);
|
box-shadow: 0px 1px 0 var(--nav-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav a {
|
body > nav a {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav svg {
|
body > nav svg {
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav ul:first-of-type li:first-of-type a {
|
body > nav ul:first-of-type li:first-of-type a {
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
|
|
@ -400,17 +375,14 @@ body > nav ul:first-of-type li:first-of-type a {
|
||||||
background: var(--h1-color);
|
background: var(--h1-color);
|
||||||
color: var(--nav-logo-color);
|
color: var(--nav-logo-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav ul:first-of-type li:first-of-type a svg {
|
body > nav ul:first-of-type li:first-of-type a svg {
|
||||||
height: 3.5rem;
|
height: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
display: none;
|
display: none;
|
||||||
margin-left: var(--spacing);
|
margin-left: var(--spacing);
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
@ -426,13 +398,12 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
bottom: var(--spacing);
|
bottom: var(--spacing);
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: .75rem;
|
padding: 0.75rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher::after {
|
.switcher::after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
|
|
@ -441,39 +412,33 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
border-radius: 50%;
|
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;
|
vertical-align: bottom;
|
||||||
content: '';
|
content: "";
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher i {
|
.switcher i {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: .875rem;
|
font-size: 0.875rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover, .switcher:focus {
|
.switcher:hover, .switcher:focus {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover::after {
|
.switcher:hover::after {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:hover i {
|
.switcher:hover i {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher:focus {
|
.switcher:focus {
|
||||||
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.switcher {
|
.switcher {
|
||||||
right: var(--spacing);
|
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="#themes" class="secondary">Themes</a></li>
|
||||||
<li><a href="#customization" class="secondary">Customization</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="#classless" class="secondary">Class-less version</a></li>
|
||||||
|
<li><a href="#rtl" class="secondary">RTL</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
<details open>
|
<details open>
|
||||||
|
|
@ -153,11 +154,13 @@
|
||||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
</form>
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
||||||
…
|
…
|
||||||
</<b>article</b>></code></pre>
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<article data-theme="dark" aria-label="Forced dark theme example">
|
<article data-theme="dark" aria-label="Forced dark theme example">
|
||||||
<h4>Dark theme</h4>
|
<h4>Dark theme</h4>
|
||||||
|
|
@ -166,11 +169,13 @@
|
||||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
</form>
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
||||||
…
|
…
|
||||||
</<b>article</b>></code></pre>
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Themes -->
|
</section><!-- ./ Themes -->
|
||||||
|
|
||||||
|
|
@ -178,7 +183,7 @@
|
||||||
<section id="customization">
|
<section id="customization">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h2>Customization</h2>
|
<h2>Customization</h2>
|
||||||
<h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
|
<h3>You can customize themes with SCSS or, you can edit the CSS variables.</h3>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<p>Example: <strong>pick a color!</strong></p>
|
<p>Example: <strong>pick a color!</strong></p>
|
||||||
|
|
||||||
|
|
@ -197,6 +202,7 @@
|
||||||
</label>
|
</label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><em>// Simplified example</em>
|
<pre><code><em>// Simplified example</em>
|
||||||
<b>:root</b> {
|
<b>:root</b> {
|
||||||
|
|
@ -204,6 +210,7 @@
|
||||||
}
|
}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>There are 2 ways to customize your version of Pico.css:</p>
|
<p>There are 2 ways to customize your version of Pico.css:</p>
|
||||||
<h4>Overriding CSS variables</h4>
|
<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>
|
<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>
|
<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>
|
<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>
|
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||||
|
|
@ -276,7 +283,7 @@
|
||||||
<em>…</em>
|
<em>…</em>
|
||||||
</code></pre>
|
</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 -->
|
</section><!-- ./ Docs: Customization -->
|
||||||
|
|
||||||
<!-- Docs: Classless -->
|
<!-- Docs: Classless -->
|
||||||
|
|
@ -304,6 +311,22 @@
|
||||||
|
|
||||||
</section><!-- ./ Docs: Classless -->
|
</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 -->
|
<!-- Docs: Container -->
|
||||||
<section id="containers">
|
<section id="containers">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
|
|
@ -318,7 +341,7 @@
|
||||||
<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>
|
<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>
|
||||||
</<b>body</b>></code></pre>
|
</<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>
|
<figure>
|
||||||
<table role="grid">
|
<table role="grid">
|
||||||
<thead>
|
<thead>
|
||||||
|
|
@ -368,6 +391,7 @@
|
||||||
<div>3</div>
|
<div>3</div>
|
||||||
<div>4</div>
|
<div>4</div>
|
||||||
</div>
|
</div>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>div</b> <i>class</i>=<u>"grid"</u>>
|
<pre><code><<b>div</b> <i>class</i>=<u>"grid"</u>>
|
||||||
<<b>div</b>>1</<b>div</b>>
|
<<b>div</b>>1</<b>div</b>>
|
||||||
|
|
@ -376,6 +400,7 @@
|
||||||
<<b>div</b>>4</<b>div</b>>
|
<<b>div</b>>4</<b>div</b>>
|
||||||
</<b>div</b>></code></pre>
|
</<b>div</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
|
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
|
||||||
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
|
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
|
||||||
|
|
@ -388,11 +413,11 @@
|
||||||
</svg>
|
</svg>
|
||||||
More about grids
|
More about grids
|
||||||
</summary>
|
</summary>
|
||||||
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
|
<p>As Pico focuses 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>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 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 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 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>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>
|
<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
|
||||||
</details>
|
</details>
|
||||||
</section><!-- ./ Docs: Grid -->
|
</section><!-- ./ Docs: Grid -->
|
||||||
|
|
||||||
|
|
@ -472,7 +497,7 @@
|
||||||
<section id="typography">
|
<section id="typography">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h2>Typography</h2>
|
<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>
|
</hgroup>
|
||||||
<figure>
|
<figure>
|
||||||
<table role="grid">
|
<table role="grid">
|
||||||
|
|
@ -562,6 +587,7 @@
|
||||||
<h4>Heading 4</h4>
|
<h4>Heading 4</h4>
|
||||||
<h5>Heading 5</h5>
|
<h5>Heading 5</h5>
|
||||||
<h6>Heading 6</h6>
|
<h6>Heading 6</h6>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
|
|
@ -570,6 +596,7 @@
|
||||||
<<b>h5</b>>Heading 5</<b>h5</b>>
|
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||||
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
||||||
<article aria-label="Hgroup example">
|
<article aria-label="Hgroup example">
|
||||||
|
|
@ -577,12 +604,14 @@
|
||||||
<h2>Heading 2</h2>
|
<h2>Heading 2</h2>
|
||||||
<h3>Subtitle for heading 2</h3>
|
<h3>Subtitle for heading 2</h3>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>hgroup</b>>
|
<pre><code><<b>hgroup</b>>
|
||||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||||
<<b>hgroup</b>></code></pre>
|
<<b>hgroup</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Inline text elements:</p>
|
<p>Inline text elements:</p>
|
||||||
<article aria-label="Inline text examples">
|
<article aria-label="Inline text examples">
|
||||||
|
|
@ -610,11 +639,13 @@
|
||||||
<a href="#" onclick="event.preventDefault()">Primary</a><br>
|
<a href="#" onclick="event.preventDefault()">Primary</a><br>
|
||||||
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
|
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
|
||||||
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</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>>
|
<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>"secondary"</u>>Secondary</<b>a</b>>
|
||||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Blockquote:</p>
|
<p>Blockquote:</p>
|
||||||
<article aria-label="Blockquote example">
|
<article aria-label="Blockquote example">
|
||||||
|
|
@ -624,6 +655,7 @@
|
||||||
<cite>- Phasellus eget lacinia</cite>
|
<cite>- Phasellus eget lacinia</cite>
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>blockquote</b>>
|
<pre><code><<b>blockquote</b>>
|
||||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
"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>footer</b>>
|
||||||
</<b>blockquote</b>></code></pre>
|
</<b>blockquote</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Typography -->
|
</section><!-- ./ Docs: Typography -->
|
||||||
|
|
||||||
|
|
@ -644,39 +677,47 @@
|
||||||
<article aria-label="Button example">
|
<article aria-label="Button example">
|
||||||
<button aria-label="Button">Button</button>
|
<button aria-label="Button">Button</button>
|
||||||
<input type="submit">
|
<input type="submit">
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>button</b>>Button</<b>button</b>>
|
<pre><code><<b>button</b>>Button</<b>button</b>>
|
||||||
<<b>input</b> <i>type</i>=<u>"submit"</u>></code></pre>
|
<<b>input</b> <i>type</i>=<u>"submit"</u>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</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>
|
<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">
|
<article aria-label="Inline buttons examples">
|
||||||
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||||
<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>>
|
<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>
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||||
<article aria-label="Buttons styles examples">
|
<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="secondary">Secondary</a>
|
||||||
<a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</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>>
|
<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>
|
<<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>
|
</article>
|
||||||
<p>And a classic <code>.outline</code> variant.</p>
|
<p>And a classic <code>.outline</code> variant.</p>
|
||||||
<article aria-label="Outline style examples">
|
<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="outline">Primary</a>
|
||||||
<a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</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>
|
<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>>
|
<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>"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>
|
<<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>
|
</article>
|
||||||
</section><!-- ./ Docs: Button -->
|
</section><!-- ./ Docs: Button -->
|
||||||
|
|
||||||
|
|
@ -684,10 +725,10 @@
|
||||||
<section id="forms">
|
<section id="forms">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h2>Forms</h2>
|
<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>
|
</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>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">
|
<article aria-label="Form example">
|
||||||
<form>
|
<form>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
|
|
@ -705,6 +746,7 @@
|
||||||
<small>We'll never share your email with anyone else.</small>
|
<small>We'll never share your email with anyone else.</small>
|
||||||
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>form</b>>
|
<pre><code><<b>form</b>>
|
||||||
|
|
||||||
|
|
@ -734,6 +776,7 @@
|
||||||
|
|
||||||
</<b>form</b>></code></pre>
|
</<b>form</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Disabled and validation states:</p>
|
<p>Disabled and validation states:</p>
|
||||||
<article aria-label="Validation states examples">
|
<article aria-label="Validation states examples">
|
||||||
|
|
@ -743,14 +786,16 @@
|
||||||
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
|
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
|
||||||
<input type="text" value="Readonly" aria-label="Readonly" readonly>
|
<input type="text" value="Readonly" aria-label="Readonly" readonly>
|
||||||
</form>
|
</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>>
|
<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>"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>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>
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</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>
|
<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">
|
<article aria-label="Select, radios, checkboxes, switch examples">
|
||||||
<label for="fruit">Fruit</label>
|
<label for="fruit">Fruit</label>
|
||||||
|
|
@ -789,6 +834,7 @@
|
||||||
Publish on my profile
|
Publish on my profile
|
||||||
</label>
|
</label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><em><!-- Select --></em>
|
<pre><code><em><!-- Select --></em>
|
||||||
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
||||||
|
|
@ -830,19 +876,22 @@
|
||||||
</<b>label</b>>
|
</<b>label</b>>
|
||||||
</<b>fieldset</b>></code></pre>
|
</<b>fieldset</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</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">
|
<article aria-label="Indeterminate checkbox example">
|
||||||
<label for="indeterminate-checkbox">
|
<label for="indeterminate-checkbox">
|
||||||
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
|
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
|
||||||
Select all
|
Select all
|
||||||
</label>
|
</label>
|
||||||
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
|
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>script</b>>
|
<pre><code><<b>script</b>>
|
||||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||||
</<b>script</b>></code></pre>
|
</<b>script</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Others input types:</p>
|
<p>Others input types:</p>
|
||||||
<article aria-label="File browser, range slider, date, time, color examples">
|
<article aria-label="File browser, range slider, date, time, color examples">
|
||||||
|
|
@ -861,6 +910,7 @@
|
||||||
<label for="color">Color
|
<label for="color">Color
|
||||||
<input type="color" id="color" name="color" value="#0eaaaa">
|
<input type="color" id="color" name="color" value="#0eaaaa">
|
||||||
</label>
|
</label>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><em><!-- File browser --></em>
|
<pre><code><em><!-- File browser --></em>
|
||||||
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
<<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>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>
|
</<b>label</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Form -->
|
</section><!-- ./ Docs: Form -->
|
||||||
|
|
||||||
|
|
@ -1024,6 +1075,7 @@
|
||||||
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
|
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>details</b>>
|
<pre><code><<b>details</b>>
|
||||||
<<b>summary</b>>Collapsible elements 1</<b>summary</b>>
|
<<b>summary</b>>Collapsible elements 1</<b>summary</b>>
|
||||||
|
|
@ -1038,6 +1090,7 @@
|
||||||
</<b>ul</b>>
|
</<b>ul</b>>
|
||||||
</<b>details</b>></code></pre>
|
</<b>details</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Accordions -->
|
</section><!-- ./ Docs: Accordions -->
|
||||||
|
|
||||||
|
|
@ -1083,6 +1136,7 @@
|
||||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>nav</b>>
|
<pre><code><<b>nav</b>>
|
||||||
<<b>ul</b>>
|
<<b>ul</b>>
|
||||||
|
|
@ -1095,6 +1149,7 @@
|
||||||
</<b>ul</b>>
|
</<b>ul</b>>
|
||||||
</<b>nav</b>></code></pre>
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p><code><<b>ul</b>></code> are automatically distributed horizontally.</p>
|
<p><code><<b>ul</b>></code> are automatically distributed horizontally.</p>
|
||||||
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
||||||
|
|
@ -1125,6 +1180,7 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>nav</b>>
|
<pre><code><<b>nav</b>>
|
||||||
<<b>ul</b>>
|
<<b>ul</b>>
|
||||||
|
|
@ -1138,6 +1194,7 @@
|
||||||
</<b>ul</b>>
|
</<b>ul</b>>
|
||||||
</<b>nav</b>></code></pre>
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>Inside <code><<b>aside</b>></code>, navs are stacked vertically.</p>
|
<p>Inside <code><<b>aside</b>></code>, navs are stacked vertically.</p>
|
||||||
<article aria-label="Vertical nav example">
|
<article aria-label="Vertical nav example">
|
||||||
|
|
@ -1150,6 +1207,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>aside</b>>
|
<pre><code><<b>aside</b>>
|
||||||
<<b>nav</b>>
|
<<b>nav</b>>
|
||||||
|
|
@ -1161,6 +1219,7 @@
|
||||||
</<b>nav</b>>
|
</<b>nav</b>>
|
||||||
</<b>aside</b>></code></pre>
|
</<b>aside</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Nav -->
|
</section><!-- ./ Docs: Nav -->
|
||||||
|
|
||||||
|
|
@ -1172,19 +1231,23 @@
|
||||||
</hgroup>
|
</hgroup>
|
||||||
<article aria-label="Progress bar example">
|
<article aria-label="Progress bar example">
|
||||||
<progress value="25" max="100"></progress>
|
<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>
|
<pre><code><<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>></<b>progress</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</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">
|
<article aria-label="Indeterminate progress bar example">
|
||||||
<progress id="indeterminate-progress"></progress>
|
<progress id="indeterminate-progress"></progress>
|
||||||
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
|
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
<pre><code><<b>script</b>>
|
<pre><code><<b>script</b>>
|
||||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
|
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||||
</<b>script</b>></code></pre>
|
</<b>script</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</section><!-- ./ Docs: Progress -->
|
</section><!-- ./ Docs: Progress -->
|
||||||
|
|
||||||
|
|
@ -1197,10 +1260,12 @@
|
||||||
<article aria-label="Loading buttons example">
|
<article aria-label="Loading buttons example">
|
||||||
<button aria-busy="true">Please wait…</button>
|
<button aria-busy="true">Please wait…</button>
|
||||||
<button aria-busy="true" class="secondary"></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>>
|
<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>
|
<<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>></<b>button</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
<p>It can be applied to any block:</p>
|
<p>It can be applied to any block:</p>
|
||||||
<article aria-busy="true"></article>
|
<article aria-busy="true"></article>
|
||||||
|
|
@ -1208,8 +1273,9 @@
|
||||||
<p>Or any text element:</p>
|
<p>Or any text element:</p>
|
||||||
<article aria-label="Loading paragraph example">
|
<article aria-label="Loading paragraph example">
|
||||||
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
|
<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>
|
<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>
|
</article>
|
||||||
</section><!-- ./ Docs: Loading -->
|
</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 a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
|
||||||
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></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>
|
<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>>
|
<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>>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>
|
<<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>
|
</article>
|
||||||
</section><!-- ./ Docs: Tooltips -->
|
</section><!-- ./ Docs: Tooltips -->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,12 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Imports
|
// Imports
|
||||||
import * as mostVisible from './src/most-visible.min.js';
|
import aside from './src/aside.js';
|
||||||
import { aside } from './src/aside.js';
|
import themeSwitcher from './src/theme-switcher.js';
|
||||||
import { themeSwitcher } from './src/theme-switcher.js';
|
import materialDesignColors from './src/material-design-colors.js';
|
||||||
import { materialDesignColors } from './src/material-design-colors.js';
|
import colorPicker from './src/color-picker.js';
|
||||||
import { colorPicker } from './src/color-picker.js';
|
import grid from './src/grid.js';
|
||||||
import { grid } from './src/grid.js';
|
import scrollspy from './src/scrollspy.js';
|
||||||
import { scrollspy } from './src/scrollspy.js';
|
|
||||||
|
|
||||||
// Aside initial state
|
// Aside initial state
|
||||||
aside.init();
|
aside.init();
|
||||||
|
|
@ -33,4 +32,4 @@ colorPicker.init();
|
||||||
grid.init();
|
grid.init();
|
||||||
|
|
||||||
// Scrollspy
|
// 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 = {
|
export const aside = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
minWidth: '992px',
|
minWidth: '992px',
|
||||||
targets: {
|
targets: {
|
||||||
|
|
@ -14,7 +13,6 @@ export const aside = {
|
||||||
details: 'aside details',
|
details: 'aside details',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
init() {
|
init() {
|
||||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
||||||
|
|
@ -22,9 +20,11 @@ export const aside = {
|
||||||
let details = document.querySelectorAll(this.targets.details);
|
let details = document.querySelectorAll(this.targets.details);
|
||||||
if (nav.clientHeight < nav.scrollHeight) {
|
if (nav.clientHeight < nav.scrollHeight) {
|
||||||
details.forEach(function (detail) {
|
details.forEach(function (detail) {
|
||||||
detail.removeAttribute("open");
|
detail.removeAttribute('open');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default aside;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const colorPicker = {
|
export const colorPicker = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
colors: null,
|
colors: null,
|
||||||
buttonsTarget: '#customization article[data-theme="generated"]',
|
buttonsTarget: '#customization article[data-theme="generated"]',
|
||||||
|
|
@ -24,16 +23,19 @@ export const colorPicker = {
|
||||||
|
|
||||||
// Generate Buttons
|
// Generate Buttons
|
||||||
generateButtons() {
|
generateButtons() {
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
let innerButtons = '';
|
let innerButtons = '';
|
||||||
let innerStyles = '';
|
let innerStyles = '';
|
||||||
|
|
||||||
|
|
||||||
// Loop colors
|
// Loop colors
|
||||||
for (const color in this.colors) {
|
for (const color in this.colors) {
|
||||||
// Buttons
|
// Buttons
|
||||||
innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
|
innerButtons +=
|
||||||
|
'<button data-color="' +
|
||||||
|
color +
|
||||||
|
'" aria-label="Activate ' +
|
||||||
|
color +
|
||||||
|
' theme"></button>';
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
innerStyles += `
|
innerStyles += `
|
||||||
|
|
@ -52,7 +54,6 @@ export const colorPicker = {
|
||||||
}`;
|
}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Insert buttons
|
// Insert buttons
|
||||||
let containerButtons = document.createElement('FIGURE');
|
let containerButtons = document.createElement('FIGURE');
|
||||||
containerButtons.innerHTML = innerButtons;
|
containerButtons.innerHTML = innerButtons;
|
||||||
|
|
@ -60,13 +61,19 @@ export const colorPicker = {
|
||||||
|
|
||||||
// Buttons listeners
|
// Buttons listeners
|
||||||
this.buttons = document.querySelectorAll(this.selectorButton);
|
this.buttons = document.querySelectorAll(this.selectorButton);
|
||||||
this.buttons.forEach(function(button) {
|
this.buttons.forEach(
|
||||||
button.addEventListener('click', function(event) {
|
function (button) {
|
||||||
|
button.addEventListener(
|
||||||
|
'click',
|
||||||
|
function (event) {
|
||||||
let color = event.target.getAttribute('data-color');
|
let color = event.target.getAttribute('data-color');
|
||||||
this.setActiveButton(color);
|
this.setActiveButton(color);
|
||||||
this.generateTheme(color);
|
this.generateTheme(color);
|
||||||
}.bind(this), false);
|
}.bind(this),
|
||||||
}.bind(this));
|
false
|
||||||
|
);
|
||||||
|
}.bind(this)
|
||||||
|
);
|
||||||
|
|
||||||
// Insert CSS Styles
|
// Insert CSS Styles
|
||||||
let containerStyles = document.createElement('STYLE');
|
let containerStyles = document.createElement('STYLE');
|
||||||
|
|
@ -76,21 +83,22 @@ export const colorPicker = {
|
||||||
document.querySelector('head').appendChild(containerStyles);
|
document.querySelector('head').appendChild(containerStyles);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Set active button
|
// Set active button
|
||||||
setActiveButton(color) {
|
setActiveButton(color) {
|
||||||
|
|
||||||
// Remove all active states
|
// Remove all active states
|
||||||
this.buttons.forEach(function(button) {
|
this.buttons.forEach(
|
||||||
|
function (button) {
|
||||||
button.removeAttribute('class');
|
button.removeAttribute('class');
|
||||||
}.bind(this));
|
}.bind(this)
|
||||||
|
);
|
||||||
|
|
||||||
// Set active state
|
// 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');
|
buttonPicked.setAttribute('class', 'picked');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Set active button
|
// Set active button
|
||||||
generateTheme(color) {
|
generateTheme(color) {
|
||||||
let name = color;
|
let name = color;
|
||||||
|
|
@ -102,17 +110,23 @@ export const colorPicker = {
|
||||||
'.c500': data[500],
|
'.c500': data[500],
|
||||||
'.c600': data[600],
|
'.c600': data[600],
|
||||||
'.c700': data[700],
|
'.c700': data[700],
|
||||||
'.c600-outline-light': this.hexToRgbA(data[600], .125),
|
'.c600-outline-light': this.hexToRgbA(data[600], 0.125),
|
||||||
'.c600-outline-dark': this.hexToRgbA(data[600], .25),
|
'.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
|
||||||
'.inverse': data['inverse'],
|
'.inverse': data['inverse'],
|
||||||
}
|
};
|
||||||
|
|
||||||
Object.keys(swaps).forEach(function(swap) {
|
Object.keys(swaps).forEach(
|
||||||
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
|
function (swap) {
|
||||||
targets.forEach(function(target) {
|
let targets = document.querySelectorAll(
|
||||||
|
this.selectorSection + ' ' + swap
|
||||||
|
);
|
||||||
|
targets.forEach(
|
||||||
|
function (target) {
|
||||||
target.innerHTML = swaps[swap];
|
target.innerHTML = swaps[swap];
|
||||||
}.bind(this));
|
}.bind(this)
|
||||||
}.bind(this));
|
);
|
||||||
|
}.bind(this)
|
||||||
|
);
|
||||||
|
|
||||||
// 2. Update CSS Styles
|
// 2. Update CSS Styles
|
||||||
const innerStyles = `
|
const innerStyles = `
|
||||||
|
|
@ -120,7 +134,7 @@ export const colorPicker = {
|
||||||
--h4-color: ${data[700]};
|
--h4-color: ${data[700]};
|
||||||
--primary: ${data[600]};
|
--primary: ${data[600]};
|
||||||
--primary-hover: ${data[700]};
|
--primary-hover: ${data[700]};
|
||||||
--primary-focus: ${this.hexToRgbA(data[600], .125)};
|
--primary-focus: ${this.hexToRgbA(data[600], 0.125)};
|
||||||
--primary-inverse: ${data['inverse']};
|
--primary-inverse: ${data['inverse']};
|
||||||
}
|
}
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
|
@ -128,7 +142,7 @@ export const colorPicker = {
|
||||||
--h4-color: ${data[400]};
|
--h4-color: ${data[400]};
|
||||||
--primary: ${data[600]};
|
--primary: ${data[600]};
|
||||||
--primary-hover: ${data[500]};
|
--primary-hover: ${data[500]};
|
||||||
--primary-focus: ${this.hexToRgbA(data[600], .25)};
|
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||||
--primary-inverse: ${data['inverse']};
|
--primary-inverse: ${data['inverse']};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -136,7 +150,7 @@ export const colorPicker = {
|
||||||
--h4-color: ${data[500]};
|
--h4-color: ${data[500]};
|
||||||
--primary: ${data[600]};
|
--primary: ${data[600]};
|
||||||
--primary-hover: ${data[500]};
|
--primary-hover: ${data[500]};
|
||||||
--primary-focus: ${this.hexToRgbA(data[600], .25)};
|
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
|
||||||
--primary-inverse: ${data['inverse']};
|
--primary-inverse: ${data['inverse']};
|
||||||
}
|
}
|
||||||
[data-theme="generated"] {
|
[data-theme="generated"] {
|
||||||
|
|
@ -146,16 +160,15 @@ export const colorPicker = {
|
||||||
--switch-checked-background-color: var(--primary);
|
--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
|
// Minify CSS
|
||||||
minifyCSS(css) {
|
minifyCSS(css) {
|
||||||
return css.replace(/^ +/gm, '')
|
return css.replace(/^ +/gm, '');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Hexadecimal to Rgba
|
// Hexadecimal to Rgba
|
||||||
hexToRgbA(hex, alpha) {
|
hexToRgbA(hex, alpha) {
|
||||||
let c;
|
let c;
|
||||||
|
|
@ -165,8 +178,16 @@ export const colorPicker = {
|
||||||
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||||
}
|
}
|
||||||
c = '0x' + c.join('');
|
c = '0x' + c.join('');
|
||||||
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + ', ' + alpha + ')';
|
return (
|
||||||
|
'rgba(' +
|
||||||
|
[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
|
||||||
|
', ' +
|
||||||
|
alpha +
|
||||||
|
')'
|
||||||
|
);
|
||||||
}
|
}
|
||||||
throw new Error('Bad Hex');
|
throw new Error('Bad Hex');
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default colorPicker;
|
||||||
|
|
|
||||||
|
|
@ -6,34 +6,30 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const grid = {
|
export const grid = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
buttons: {
|
buttons: {
|
||||||
text: {
|
text: {
|
||||||
add: 'Add column',
|
add: 'Add column',
|
||||||
remove: 'Remove column'
|
remove: 'Remove column',
|
||||||
},
|
},
|
||||||
target: '#grids article'
|
target: '#grids article',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
current: 4,
|
current: 4,
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 12,
|
max: 12,
|
||||||
gridTarget: '#grids .grid',
|
gridTarget: '#grids .grid',
|
||||||
codeTarget: '#grids pre code'
|
codeTarget: '#grids pre code',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
init() {
|
init() {
|
||||||
this.addButtons();
|
this.addButtons();
|
||||||
this.generateGrid()
|
this.generateGrid();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Add buttons
|
// Add buttons
|
||||||
addButtons() {
|
addButtons() {
|
||||||
|
|
||||||
// Insert buttons
|
// Insert buttons
|
||||||
let buttons = document.createElement('P');
|
let buttons = document.createElement('P');
|
||||||
buttons.innerHTML = `
|
buttons.innerHTML = `
|
||||||
|
|
@ -54,20 +50,26 @@ export const grid = {
|
||||||
document.querySelector(this.buttons.target).before(buttons);
|
document.querySelector(this.buttons.target).before(buttons);
|
||||||
|
|
||||||
// Add button listener
|
// Add button listener
|
||||||
document.querySelector('#grids button.add').addEventListener('click', function() {
|
document.querySelector('#grids button.add').addEventListener(
|
||||||
|
'click',
|
||||||
|
function () {
|
||||||
this.addColumn();
|
this.addColumn();
|
||||||
}.bind(this), false);
|
}.bind(this),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
// Remove button listener
|
// Remove button listener
|
||||||
document.querySelector('#grids button.remove').addEventListener('click', function() {
|
document.querySelector('#grids button.remove').addEventListener(
|
||||||
|
'click',
|
||||||
|
function () {
|
||||||
this.removeColumn();
|
this.removeColumn();
|
||||||
}.bind(this), false);
|
}.bind(this),
|
||||||
|
false
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Generate grid
|
// Generate grid
|
||||||
generateGrid() {
|
generateGrid() {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
let htmlInner = '';
|
let htmlInner = '';
|
||||||
let codeInner = '<<b>div</b> <i>class</i>=<u>"grid"</u>>\n';
|
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;
|
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Add column
|
// Add column
|
||||||
addColumn() {
|
addColumn() {
|
||||||
if (this.grid.current < this.grid.max) {
|
if (this.grid.current < this.grid.max) {
|
||||||
|
|
@ -93,12 +94,13 @@ export const grid = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Remove column
|
// Remove column
|
||||||
removeColumn() {
|
removeColumn() {
|
||||||
if (this.grid.current > this.grid.min) {
|
if (this.grid.current > this.grid.min) {
|
||||||
this.grid.current--;
|
this.grid.current--;
|
||||||
this.generateGrid();
|
this.generateGrid();
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default grid;
|
||||||
|
|
|
||||||
|
|
@ -1,301 +1,303 @@
|
||||||
// Source: https://material.io/design/color/the-color-system.html
|
// Source: https://material.io/design/color/the-color-system.html
|
||||||
export const materialDesignColors = {
|
export const materialDesignColors = {
|
||||||
red: {
|
red: {
|
||||||
50: "#ffebee",
|
50: '#ffebee',
|
||||||
100: "#ffcdd2",
|
100: '#ffcdd2',
|
||||||
200: "#ef9a9a",
|
200: '#ef9a9a',
|
||||||
300: "#e57373",
|
300: '#e57373',
|
||||||
400: "#ef5350",
|
400: '#ef5350',
|
||||||
500: "#f44336",
|
500: '#f44336',
|
||||||
600: "#e53935",
|
600: '#e53935',
|
||||||
700: "#d32f2f",
|
700: '#d32f2f',
|
||||||
800: "#c62828",
|
800: '#c62828',
|
||||||
900: "#b71c1c",
|
900: '#b71c1c',
|
||||||
a100: "#ff8a80",
|
a100: '#ff8a80',
|
||||||
a200: "#ff5252",
|
a200: '#ff5252',
|
||||||
a400: "#ff1744",
|
a400: '#ff1744',
|
||||||
a700: "#d50000",
|
a700: '#d50000',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
pink: {
|
pink: {
|
||||||
50: "#fce4ec",
|
50: '#fce4ec',
|
||||||
100: "#f8bbd0",
|
100: '#f8bbd0',
|
||||||
200: "#f48fb1",
|
200: '#f48fb1',
|
||||||
300: "#f06292",
|
300: '#f06292',
|
||||||
400: "#ec407a",
|
400: '#ec407a',
|
||||||
500: "#e91e63",
|
500: '#e91e63',
|
||||||
600: "#d81b60",
|
600: '#d81b60',
|
||||||
700: "#c2185b",
|
700: '#c2185b',
|
||||||
800: "#ad1457",
|
800: '#ad1457',
|
||||||
900: "#880e4f",
|
900: '#880e4f',
|
||||||
a100: "#ff80ab",
|
a100: '#ff80ab',
|
||||||
a200: "#ff4081",
|
a200: '#ff4081',
|
||||||
a400: "#f50057",
|
a400: '#f50057',
|
||||||
a700: "#c51162",
|
a700: '#c51162',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
purple: {
|
purple: {
|
||||||
50: "#f3e5f5",
|
50: '#f3e5f5',
|
||||||
100: "#e1bee7",
|
100: '#e1bee7',
|
||||||
200: "#ce93d8",
|
200: '#ce93d8',
|
||||||
300: "#ba68c8",
|
300: '#ba68c8',
|
||||||
400: "#ab47bc",
|
400: '#ab47bc',
|
||||||
500: "#9c27b0",
|
500: '#9c27b0',
|
||||||
600: "#8e24aa",
|
600: '#8e24aa',
|
||||||
700: "#7b1fa2",
|
700: '#7b1fa2',
|
||||||
800: "#6a1b9a",
|
800: '#6a1b9a',
|
||||||
900: "#4a148c",
|
900: '#4a148c',
|
||||||
a100: "#ea80fc",
|
a100: '#ea80fc',
|
||||||
a200: "#e040fb",
|
a200: '#e040fb',
|
||||||
a400: "#d500f9",
|
a400: '#d500f9',
|
||||||
a700: "#aa00ff",
|
a700: '#aa00ff',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
"deep-purple": {
|
'deep-purple': {
|
||||||
50: "#ede7f6",
|
50: '#ede7f6',
|
||||||
100: "#d1c4e9",
|
100: '#d1c4e9',
|
||||||
200: "#b39ddb",
|
200: '#b39ddb',
|
||||||
300: "#9575cd",
|
300: '#9575cd',
|
||||||
400: "#7e57c2",
|
400: '#7e57c2',
|
||||||
500: "#673ab7",
|
500: '#673ab7',
|
||||||
600: "#5e35b1",
|
600: '#5e35b1',
|
||||||
700: "#512da8",
|
700: '#512da8',
|
||||||
800: "#4527a0",
|
800: '#4527a0',
|
||||||
900: "#311b92",
|
900: '#311b92',
|
||||||
a100: "#b388ff",
|
a100: '#b388ff',
|
||||||
a200: "#7c4dff",
|
a200: '#7c4dff',
|
||||||
a400: "#651fff",
|
a400: '#651fff',
|
||||||
a700: "#6200ea",
|
a700: '#6200ea',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
indigo: {
|
indigo: {
|
||||||
50: "#e8eaf6",
|
50: '#e8eaf6',
|
||||||
100: "#c5cae9",
|
100: '#c5cae9',
|
||||||
200: "#9fa8da",
|
200: '#9fa8da',
|
||||||
300: "#7986cb",
|
300: '#7986cb',
|
||||||
400: "#5c6bc0",
|
400: '#5c6bc0',
|
||||||
500: "#3f51b5",
|
500: '#3f51b5',
|
||||||
600: "#3949ab",
|
600: '#3949ab',
|
||||||
700: "#303f9f",
|
700: '#303f9f',
|
||||||
800: "#283593",
|
800: '#283593',
|
||||||
900: "#1a237e",
|
900: '#1a237e',
|
||||||
a100: "#8c9eff",
|
a100: '#8c9eff',
|
||||||
a200: "#536dfe",
|
a200: '#536dfe',
|
||||||
a400: "#3d5afe",
|
a400: '#3d5afe',
|
||||||
a700: "#304ffe",
|
a700: '#304ffe',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
blue: {
|
blue: {
|
||||||
50: "#e3f2fd",
|
50: '#e3f2fd',
|
||||||
100: "#bbdefb",
|
100: '#bbdefb',
|
||||||
200: "#90caf9",
|
200: '#90caf9',
|
||||||
300: "#64b5f6",
|
300: '#64b5f6',
|
||||||
400: "#42a5f5",
|
400: '#42a5f5',
|
||||||
500: "#2196f3",
|
500: '#2196f3',
|
||||||
600: "#1e88e5",
|
600: '#1e88e5',
|
||||||
700: "#1976d2",
|
700: '#1976d2',
|
||||||
800: "#1565c0",
|
800: '#1565c0',
|
||||||
900: "#0d47a1",
|
900: '#0d47a1',
|
||||||
a100: "#82b1ff",
|
a100: '#82b1ff',
|
||||||
a200: "#448aff",
|
a200: '#448aff',
|
||||||
a400: "#2979ff",
|
a400: '#2979ff',
|
||||||
a700: "#2962ff",
|
a700: '#2962ff',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
"light-blue": {
|
'light-blue': {
|
||||||
50: "#e1f5fe",
|
50: '#e1f5fe',
|
||||||
100: "#b3e5fc",
|
100: '#b3e5fc',
|
||||||
200: "#81d4fa",
|
200: '#81d4fa',
|
||||||
300: "#4fc3f7",
|
300: '#4fc3f7',
|
||||||
400: "#29b6f6",
|
400: '#29b6f6',
|
||||||
500: "#03a9f4",
|
500: '#03a9f4',
|
||||||
600: "#039be5",
|
600: '#039be5',
|
||||||
700: "#0288d1",
|
700: '#0288d1',
|
||||||
800: "#0277bd",
|
800: '#0277bd',
|
||||||
900: "#01579b",
|
900: '#01579b',
|
||||||
a100: "#80d8ff",
|
a100: '#80d8ff',
|
||||||
a200: "#40c4ff",
|
a200: '#40c4ff',
|
||||||
a400: "#00b0ff",
|
a400: '#00b0ff',
|
||||||
a700: "#0091ea",
|
a700: '#0091ea',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
cyan: {
|
cyan: {
|
||||||
50: "#e0f7fa",
|
50: '#e0f7fa',
|
||||||
100: "#b2ebf2",
|
100: '#b2ebf2',
|
||||||
200: "#80deea",
|
200: '#80deea',
|
||||||
300: "#4dd0e1",
|
300: '#4dd0e1',
|
||||||
400: "#26c6da",
|
400: '#26c6da',
|
||||||
500: "#00bcd4",
|
500: '#00bcd4',
|
||||||
600: "#00acc1",
|
600: '#00acc1',
|
||||||
700: "#0097a7",
|
700: '#0097a7',
|
||||||
800: "#00838f",
|
800: '#00838f',
|
||||||
900: "#006064",
|
900: '#006064',
|
||||||
a100: "#84ffff",
|
a100: '#84ffff',
|
||||||
a200: "#18ffff",
|
a200: '#18ffff',
|
||||||
a400: "#00e5ff",
|
a400: '#00e5ff',
|
||||||
a700: "#00b8d4",
|
a700: '#00b8d4',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
teal: {
|
teal: {
|
||||||
50: "#e0f2f1",
|
50: '#e0f2f1',
|
||||||
100: "#b2dfdb",
|
100: '#b2dfdb',
|
||||||
200: "#80cbc4",
|
200: '#80cbc4',
|
||||||
300: "#4db6ac",
|
300: '#4db6ac',
|
||||||
400: "#26a69a",
|
400: '#26a69a',
|
||||||
500: "#009688",
|
500: '#009688',
|
||||||
600: "#00897b",
|
600: '#00897b',
|
||||||
700: "#00796b",
|
700: '#00796b',
|
||||||
800: "#00695c",
|
800: '#00695c',
|
||||||
900: "#004d40",
|
900: '#004d40',
|
||||||
a100: "#a7ffeb",
|
a100: '#a7ffeb',
|
||||||
a200: "#64ffda",
|
a200: '#64ffda',
|
||||||
a400: "#1de9b6",
|
a400: '#1de9b6',
|
||||||
a700: "#00bfa5",
|
a700: '#00bfa5',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
green: {
|
green: {
|
||||||
50: "#e8f5e9",
|
50: '#e8f5e9',
|
||||||
100: "#c8e6c9",
|
100: '#c8e6c9',
|
||||||
200: "#a5d6a7",
|
200: '#a5d6a7',
|
||||||
300: "#81c784",
|
300: '#81c784',
|
||||||
400: "#66bb6a",
|
400: '#66bb6a',
|
||||||
500: "#4caf50",
|
500: '#4caf50',
|
||||||
600: "#43a047",
|
600: '#43a047',
|
||||||
700: "#388e3c",
|
700: '#388e3c',
|
||||||
800: "#2e7d32",
|
800: '#2e7d32',
|
||||||
900: "#1b5e20",
|
900: '#1b5e20',
|
||||||
a100: "#b9f6ca",
|
a100: '#b9f6ca',
|
||||||
a200: "#69f0ae",
|
a200: '#69f0ae',
|
||||||
a400: "#00e676",
|
a400: '#00e676',
|
||||||
a700: "#00c853",
|
a700: '#00c853',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
"light-green": {
|
'light-green': {
|
||||||
50: "#f1f8e9",
|
50: '#f1f8e9',
|
||||||
100: "#dcedc8",
|
100: '#dcedc8',
|
||||||
200: "#c5e1a5",
|
200: '#c5e1a5',
|
||||||
300: "#aed581",
|
300: '#aed581',
|
||||||
400: "#9ccc65",
|
400: '#9ccc65',
|
||||||
500: "#8bc34a",
|
500: '#8bc34a',
|
||||||
600: "#7cb342",
|
600: '#7cb342',
|
||||||
700: "#689f38",
|
700: '#689f38',
|
||||||
800: "#558b2f",
|
800: '#558b2f',
|
||||||
900: "#33691e",
|
900: '#33691e',
|
||||||
a100: "#ccff90",
|
a100: '#ccff90',
|
||||||
a200: "#b2ff59",
|
a200: '#b2ff59',
|
||||||
a400: "#76ff03",
|
a400: '#76ff03',
|
||||||
a700: "#64dd17",
|
a700: '#64dd17',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
lime: {
|
lime: {
|
||||||
50: "#f9fbe7",
|
50: '#f9fbe7',
|
||||||
100: "#f0f4c3",
|
100: '#f0f4c3',
|
||||||
200: "#e6ee9c",
|
200: '#e6ee9c',
|
||||||
300: "#dce775",
|
300: '#dce775',
|
||||||
400: "#d4e157",
|
400: '#d4e157',
|
||||||
500: "#cddc39",
|
500: '#cddc39',
|
||||||
600: "#c0ca33",
|
600: '#c0ca33',
|
||||||
700: "#afb42b",
|
700: '#afb42b',
|
||||||
800: "#9e9d24",
|
800: '#9e9d24',
|
||||||
900: "#827717",
|
900: '#827717',
|
||||||
a100: "#f4ff81",
|
a100: '#f4ff81',
|
||||||
a200: "#eeff41",
|
a200: '#eeff41',
|
||||||
a400: "#c6ff00",
|
a400: '#c6ff00',
|
||||||
a700: "#aeea00",
|
a700: '#aeea00',
|
||||||
inverse: "rgba(0, 0, 0, 0.75)"
|
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||||
},
|
},
|
||||||
yellow: {
|
yellow: {
|
||||||
50: "#fffde7",
|
50: '#fffde7',
|
||||||
100: "#fff9c4",
|
100: '#fff9c4',
|
||||||
200: "#fff59d",
|
200: '#fff59d',
|
||||||
300: "#fff176",
|
300: '#fff176',
|
||||||
400: "#ffee58",
|
400: '#ffee58',
|
||||||
500: "#ffeb3b",
|
500: '#ffeb3b',
|
||||||
600: "#fdd835",
|
600: '#fdd835',
|
||||||
700: "#fbc02d",
|
700: '#fbc02d',
|
||||||
800: "#f9a825",
|
800: '#f9a825',
|
||||||
900: "#f57f17",
|
900: '#f57f17',
|
||||||
a100: "#ffff8d",
|
a100: '#ffff8d',
|
||||||
a200: "#ffff00",
|
a200: '#ffff00',
|
||||||
a400: "#ffea00",
|
a400: '#ffea00',
|
||||||
a700: "#ffd600",
|
a700: '#ffd600',
|
||||||
inverse: "rgba(0, 0, 0, 0.75)"
|
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||||
},
|
},
|
||||||
amber: {
|
amber: {
|
||||||
50: "#fff8e1",
|
50: '#fff8e1',
|
||||||
100: "#ffecb3",
|
100: '#ffecb3',
|
||||||
200: "#ffe082",
|
200: '#ffe082',
|
||||||
300: "#ffd54f",
|
300: '#ffd54f',
|
||||||
400: "#ffca28",
|
400: '#ffca28',
|
||||||
500: "#ffc107",
|
500: '#ffc107',
|
||||||
600: "#ffb300",
|
600: '#ffb300',
|
||||||
700: "#ffa000",
|
700: '#ffa000',
|
||||||
800: "#ff8f00",
|
800: '#ff8f00',
|
||||||
900: "#ff6f00",
|
900: '#ff6f00',
|
||||||
a100: "#ffe57f",
|
a100: '#ffe57f',
|
||||||
a200: "#ffd740",
|
a200: '#ffd740',
|
||||||
a400: "#ffc400",
|
a400: '#ffc400',
|
||||||
a700: "#ffab00",
|
a700: '#ffab00',
|
||||||
inverse: "rgba(0, 0, 0, 0.75)"
|
inverse: 'rgba(0, 0, 0, 0.75)',
|
||||||
},
|
},
|
||||||
orange: {
|
orange: {
|
||||||
50: "#fff3e0",
|
50: '#fff3e0',
|
||||||
100: "#ffe0b2",
|
100: '#ffe0b2',
|
||||||
200: "#ffcc80",
|
200: '#ffcc80',
|
||||||
300: "#ffb74d",
|
300: '#ffb74d',
|
||||||
400: "#ffa726",
|
400: '#ffa726',
|
||||||
500: "#ff9800",
|
500: '#ff9800',
|
||||||
600: "#fb8c00",
|
600: '#fb8c00',
|
||||||
700: "#f57c00",
|
700: '#f57c00',
|
||||||
800: "#ef6c00",
|
800: '#ef6c00',
|
||||||
900: "#e65100",
|
900: '#e65100',
|
||||||
a100: "#ffd180",
|
a100: '#ffd180',
|
||||||
a200: "#ffab40",
|
a200: '#ffab40',
|
||||||
a400: "#ff9100",
|
a400: '#ff9100',
|
||||||
a700: "#ff6d00",
|
a700: '#ff6d00',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
"deep-orange": {
|
'deep-orange': {
|
||||||
50: "#fbe9e7",
|
50: '#fbe9e7',
|
||||||
100: "#ffccbc",
|
100: '#ffccbc',
|
||||||
200: "#ffab91",
|
200: '#ffab91',
|
||||||
300: "#ff8a65",
|
300: '#ff8a65',
|
||||||
400: "#ff7043",
|
400: '#ff7043',
|
||||||
500: "#ff5722",
|
500: '#ff5722',
|
||||||
600: "#f4511e",
|
600: '#f4511e',
|
||||||
700: "#e64a19",
|
700: '#e64a19',
|
||||||
800: "#d84315",
|
800: '#d84315',
|
||||||
900: "#bf360c",
|
900: '#bf360c',
|
||||||
a100: "#ff9e80",
|
a100: '#ff9e80',
|
||||||
a200: "#ff6e40",
|
a200: '#ff6e40',
|
||||||
a400: "#ff3d00",
|
a400: '#ff3d00',
|
||||||
a700: "#dd2c00",
|
a700: '#dd2c00',
|
||||||
inverse: "#FFF"
|
inverse: '#FFF',
|
||||||
},
|
},
|
||||||
grey: {
|
grey: {
|
||||||
50: "#fafafa",
|
50: '#fafafa',
|
||||||
100: "#f5f5f5",
|
100: '#f5f5f5',
|
||||||
200: "#eeeeee",
|
200: '#eeeeee',
|
||||||
300: "#e0e0e0",
|
300: '#e0e0e0',
|
||||||
400: "#bdbdbd",
|
400: '#bdbdbd',
|
||||||
500: "#9e9e9e",
|
500: '#9e9e9e',
|
||||||
600: "#757575",
|
600: '#757575',
|
||||||
700: "#616161",
|
700: '#616161',
|
||||||
800: "#424242",
|
800: '#424242',
|
||||||
900: "#212121",
|
900: '#212121',
|
||||||
inverse: "#FFF"
|
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
|
* Copyright 2019-2021 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import * as MostVisible from './most-visible.js';
|
||||||
|
|
||||||
export const scrollspy = {
|
export const scrollspy = {
|
||||||
|
mostVisible() {
|
||||||
|
new MostVisible();
|
||||||
|
},
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
mostVisible: null,
|
|
||||||
minWidth: '992px',
|
minWidth: '992px',
|
||||||
interval: 75,
|
interval: 75,
|
||||||
targets: {
|
targets: {
|
||||||
|
|
@ -20,48 +24,56 @@ export const scrollspy = {
|
||||||
active: 'active',
|
active: 'active',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
init(mostVisible) {
|
init() {
|
||||||
if (this.mostVisible == null) {
|
|
||||||
this.mostVisible = mostVisible;
|
|
||||||
}
|
|
||||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
||||||
this.setActiveNav();
|
this.setActiveNav();
|
||||||
this.scrollStop();
|
this.scrollStop();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Set active section in nav
|
// Set active section in nav
|
||||||
setActiveNav() {
|
setActiveNav() {
|
||||||
|
|
||||||
// Get active section
|
// Get active section
|
||||||
let currentSection = this.mostVisible(this.targets.sections).getAttribute('id');
|
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
|
||||||
|
|
||||||
// Remove all active states
|
// Remove all active states
|
||||||
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
|
let links = document.querySelectorAll(
|
||||||
links.forEach(function(link) {
|
this.targets.nav + ' a.' + this.targets.active
|
||||||
|
);
|
||||||
|
links.forEach(
|
||||||
|
function (link) {
|
||||||
link.classList.remove(this.targets.active);
|
link.classList.remove(this.targets.active);
|
||||||
}.bind(this));
|
}.bind(this)
|
||||||
|
);
|
||||||
|
|
||||||
// Set active state
|
// 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);
|
activeLink.classList.add(this.targets.active);
|
||||||
|
|
||||||
// Open details parent
|
// Open details parent
|
||||||
activeLink.closest('details').setAttribute('open', '');
|
activeLink.closest('details').setAttribute('open', '');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Scroll stop
|
// Scroll stop
|
||||||
scrollStop() {
|
scrollStop() {
|
||||||
let isScrolling;
|
let isScrolling;
|
||||||
window.addEventListener('scroll', function(event) {
|
window.addEventListener(
|
||||||
|
'scroll',
|
||||||
|
function (event) {
|
||||||
window.clearTimeout(isScrolling);
|
window.clearTimeout(isScrolling);
|
||||||
isScrolling = setTimeout(function() {
|
isScrolling = setTimeout(
|
||||||
|
function () {
|
||||||
this.setActiveNav();
|
this.setActiveNav();
|
||||||
}.bind(this), this.interval);
|
}.bind(this),
|
||||||
}.bind(this), false);
|
this.interval
|
||||||
}
|
);
|
||||||
}
|
}.bind(this),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default scrollspy;
|
||||||
|
|
|
||||||
|
|
@ -6,69 +6,63 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const themeSwitcher = {
|
export const themeSwitcher = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
_scheme: 'auto',
|
_scheme: 'auto',
|
||||||
change: {
|
change: {
|
||||||
light: '<i>Turn on dark mode</i>',
|
light: '<i>Turn on dark mode</i>',
|
||||||
dark: '<i>Turn off dark mode</i>'
|
dark: '<i>Turn off dark mode</i>',
|
||||||
},
|
},
|
||||||
buttonsTarget: '.theme-switcher',
|
buttonsTarget: '.theme-switcher',
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
init() {
|
init() {
|
||||||
this.scheme = this._scheme;
|
this.scheme = this._scheme;
|
||||||
this.initSwitchers();
|
this.initSwitchers();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Prefered color scheme
|
// Prefered color scheme
|
||||||
get preferedColorScheme() {
|
get preferedColorScheme() {
|
||||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
return 'dark';
|
return 'dark';
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
return 'light';
|
return 'light';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Init switchers
|
// Init switchers
|
||||||
initSwitchers() {
|
initSwitchers() {
|
||||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||||
buttons.forEach(function(button) {
|
buttons.forEach(
|
||||||
button.addEventListener('click', function(event) {
|
function (button) {
|
||||||
|
button.addEventListener(
|
||||||
|
'click',
|
||||||
|
function (event) {
|
||||||
if (this.scheme == 'dark') {
|
if (this.scheme == 'dark') {
|
||||||
this.scheme = 'light';
|
this.scheme = 'light';
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
this.scheme = 'dark';
|
this.scheme = 'dark';
|
||||||
}
|
}
|
||||||
}.bind(this), false);
|
}.bind(this),
|
||||||
}.bind(this));
|
false
|
||||||
|
);
|
||||||
|
}.bind(this)
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Add new button
|
// Add new button
|
||||||
addButton(config) {
|
addButton(config) {
|
||||||
|
|
||||||
// Insert Switcher
|
// Insert Switcher
|
||||||
let button = document.createElement(config.tag);
|
let button = document.createElement(config.tag);
|
||||||
button.className = config.class;
|
button.className = config.class;
|
||||||
document.querySelector(config.target).appendChild(button);
|
document.querySelector(config.target).appendChild(button);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Set scheme
|
// Set scheme
|
||||||
set scheme(scheme) {
|
set scheme(scheme) {
|
||||||
|
|
||||||
if (scheme == 'auto') {
|
if (scheme == 'auto') {
|
||||||
if (this.preferedColorScheme == 'dark') {
|
if (this.preferedColorScheme == 'dark') {
|
||||||
this._scheme = 'dark';
|
this._scheme = 'dark';
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
this._scheme = 'light';
|
this._scheme = 'light';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -82,31 +76,31 @@ export const themeSwitcher = {
|
||||||
this.applyScheme();
|
this.applyScheme();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Get scheme
|
// Get scheme
|
||||||
get scheme() {
|
get scheme() {
|
||||||
return this._scheme;
|
return this._scheme;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
// Apply scheme
|
// Apply scheme
|
||||||
applyScheme() {
|
applyScheme() {
|
||||||
|
|
||||||
// Root attribute
|
// Root attribute
|
||||||
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
||||||
|
|
||||||
// Buttons text
|
// Buttons text
|
||||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||||
let text;
|
let text;
|
||||||
buttons.forEach(function(button) {
|
buttons.forEach(
|
||||||
|
function (button) {
|
||||||
if (this.scheme == 'dark') {
|
if (this.scheme == 'dark') {
|
||||||
text = this.change.dark;
|
text = this.change.dark;
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
text = this.change.light;
|
text = this.change.light;
|
||||||
}
|
}
|
||||||
button.innerHTML = text;
|
button.innerHTML = text;
|
||||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||||
}.bind(this));
|
}.bind(this)
|
||||||
}
|
);
|
||||||
}
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default themeSwitcher;
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,6 @@ body > nav {
|
||||||
|
|
||||||
// Band & Title
|
// Band & Title
|
||||||
ul:first-of-type li {
|
ul:first-of-type li {
|
||||||
|
|
||||||
// Brand
|
// Brand
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
a {
|
a {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
bottom: var(--spacing);
|
bottom: var(--spacing);
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: .75rem;
|
padding: 0.75rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
@ -20,9 +20,14 @@
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
border: 0.15rem solid currentColor;
|
border: 0.15rem solid currentColor;
|
||||||
border-radius: 50%;
|
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;
|
vertical-align: bottom;
|
||||||
content: '';
|
content: "";
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -31,7 +36,7 @@
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: .875rem;
|
font-size: 0.875rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
@ -39,10 +44,8 @@
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
transition:
|
transition: background-color var(--transition),
|
||||||
background-color var(--transition),
|
border-color var(--transition), color var(--transition),
|
||||||
border-color var(--transition),
|
|
||||||
color var(--transition),
|
|
||||||
box-shadow var(--transition);
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -54,8 +57,7 @@
|
||||||
i {
|
i {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||||
transition: max-width var(--transition),
|
transition: max-width var(--transition), padding var(--transition);
|
||||||
padding var(--transition);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,23 @@
|
||||||
* Docs: Code
|
* 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 {
|
section > pre {
|
||||||
|
background: var(--article-code-background-color);
|
||||||
margin: var(--block-spacing-vertical) 0;
|
margin: var(--block-spacing-vertical) 0;
|
||||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
padding: calc(var(--block-spacing-vertical) / 1.5)
|
||||||
background-color: var(--card-sectionning-background-color);
|
var(--block-spacing-horizontal);
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -22,7 +34,7 @@ section > pre {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: .375rem .75rem;
|
padding: 0.375rem 0.75rem;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: var(--primary-inverse);
|
color: var(--primary-inverse);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -36,7 +48,8 @@ section > pre {
|
||||||
|
|
||||||
// Spacing for Valid & Invalid badge
|
// Spacing for Valid & Invalid badge
|
||||||
code {
|
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"] {
|
[data-theme="invalid"] {
|
||||||
&:before {
|
&:before {
|
||||||
background: var(--invalid-color);
|
background: var(--invalid-color);
|
||||||
content: 'Not so great';
|
content: "Not so great";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="valid"] {
|
[data-theme="valid"] {
|
||||||
&:before {
|
&:before {
|
||||||
background: var(--valid-color);
|
background: var(--valid-color);
|
||||||
content: 'Great';
|
content: "Great";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,12 @@ section > hgroup {
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
a[role=button] {
|
a[role="button"] {
|
||||||
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
}
|
}
|
||||||
|
|
||||||
[role=document] {
|
[role="document"] {
|
||||||
section > h1,
|
section > h1,
|
||||||
section > h2,
|
section > h2,
|
||||||
section > h3 {
|
section > h3 {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
main > aside {
|
main > aside {
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--block-spacing-vertical);
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
|
|
@ -26,7 +25,8 @@ main > aside {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li, summary {
|
li,
|
||||||
|
summary {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -51,7 +51,7 @@ main > aside {
|
||||||
}
|
}
|
||||||
|
|
||||||
details {
|
details {
|
||||||
padding-bottom: .25rem;
|
padding-bottom: 0.25rem;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@
|
||||||
|
|
||||||
// Docs: Customization
|
// Docs: Customization
|
||||||
#customization {
|
#customization {
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(9, 1fr);
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
|
@ -47,7 +46,7 @@
|
||||||
background-image: var(--icon-check);
|
background-image: var(--icon-check);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: 0.66rem auto;
|
||||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
&[data-color="lime"],
|
&[data-color="lime"],
|
||||||
|
|
@ -69,10 +68,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Docs: Grids
|
// Docs: Grids
|
||||||
#grids {
|
#grids {
|
||||||
|
|
||||||
--grid-spacing-vertical: 1rem;
|
--grid-spacing-vertical: 1rem;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -83,12 +80,12 @@
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
stroke: var(--secondary);
|
stroke: var(--secondary);
|
||||||
margin-right: .5rem;
|
margin-right: 0.5rem;
|
||||||
border: 2px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@ $navHeight: 3.5rem;
|
||||||
|
|
||||||
// Main grid
|
// Main grid
|
||||||
body > main {
|
body > main {
|
||||||
|
|
||||||
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
|
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") {
|
@if map-get($breakpoints, "lg") {
|
||||||
|
|
@ -33,51 +32,51 @@ body > main {
|
||||||
|
|
||||||
// Anchors hacks for internal links
|
// Anchors hacks for internal links
|
||||||
div[role="document"] > section::before {
|
div[role="document"] > section::before {
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
height: calc(2rem + #{$navHeight} - .5rem);
|
height: calc(2rem + #{$navHeight} - 0.5rem);
|
||||||
margin-top: calc(-2rem - #{$navHeight} + .5rem);
|
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
|
||||||
content: '';
|
content: "";
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") {
|
@if map-get($breakpoints, "sm") {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
height: calc(2.5rem + #{$navHeight} - .5rem);
|
height: calc(2.5rem + #{$navHeight} - 0.5rem);
|
||||||
height: calc(-2.5rem - #{$navHeight} + .5rem);
|
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") {
|
@if map-get($breakpoints, "md") {
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
height: calc(3rem + #{$navHeight} - .5rem);
|
height: calc(3rem + #{$navHeight} - 0.5rem);
|
||||||
margin-top: calc(-3rem - #{$navHeight} + .5rem);
|
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") {
|
@if map-get($breakpoints, "lg") {
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
height: calc(3.5rem + #{$navHeight} - .5rem);
|
height: calc(3.5rem + #{$navHeight} - 0.5rem);
|
||||||
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
|
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") {
|
@if map-get($breakpoints, "xl") {
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
height: calc(4rem + #{$navHeight} - .5rem);
|
height: calc(4rem + #{$navHeight} - 0.5rem);
|
||||||
margin-top: calc(-4rem - #{$navHeight} + .5rem);
|
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// External links
|
// 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;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-image: var(--icon-external);
|
background-image: var(--icon-external);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .66rem auto;
|
background-size: 0.66rem auto;
|
||||||
content: '';
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Embedded SVG
|
// 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]
|
// Dark theme [Additions for docs]
|
||||||
// Automatically enabled if user has Dark mode enabled
|
@mixin dark {
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
--invalid-color: #{rgba($red-900, 0.5)};
|
||||||
:root:not([data-theme="light"]) {
|
--valid-color: #{rgba($green-800, 0.5)};
|
||||||
--invalid-color: #{rgba($red-900, .5)};
|
--nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
|
||||||
--valid-color: #{rgba($green-800, .5)};
|
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||||
--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)};
|
|
||||||
--nav-logo-color: #{mix($black, $grey-900)};
|
--nav-logo-color: #{mix($black, $grey-900)};
|
||||||
|
--article-code-background-color: var(--code-background-color);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,8 @@
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
--invalid-color: #{$red-800};
|
--invalid-color: #{$red-800};
|
||||||
--valid-color: #{$green-700};
|
--valid-color: #{$green-700};
|
||||||
--nav-background-color: #{rgba($white, .7)};
|
--nav-background-color: #{rgba($white, 0.7)};
|
||||||
--nav-border-color: #{rgba($grey-500, .2)};
|
--nav-border-color: #{rgba($grey-500, 0.2)};
|
||||||
--nav-logo-color: #{$white};
|
--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": {
|
"bugs": {
|
||||||
"url": "https://github.com/picocss/pico/issues"
|
"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 overriding with !important
|
||||||
$enable-important: true !default;
|
$enable-important: true !default;
|
||||||
|
|
||||||
|
|
||||||
// Responsive
|
// Responsive
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -51,7 +50,7 @@ $breakpoints: (
|
||||||
sm: 576px,
|
sm: 576px,
|
||||||
md: 768px,
|
md: 768px,
|
||||||
lg: 992px,
|
lg: 992px,
|
||||||
xl: 1200px
|
xl: 1200px,
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
// Viewports
|
// Viewports
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--spacing);
|
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);
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
|
|
@ -35,7 +35,7 @@ details {
|
||||||
|
|
||||||
// Marker
|
// Marker
|
||||||
&::after {
|
&::after {
|
||||||
display: inline-block;
|
display: block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
float: right;
|
float: right;
|
||||||
|
|
@ -44,7 +44,7 @@ details {
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
content: '';
|
content: "";
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: transform var(--transition);
|
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;
|
margin-top: 0;
|
||||||
|
|
@ -67,9 +67,8 @@ details {
|
||||||
|
|
||||||
// Open
|
// Open
|
||||||
&[open] {
|
&[open] {
|
||||||
|
|
||||||
> summary {
|
> summary {
|
||||||
margin-bottom: calc(var(--spacing) / 4);
|
margin-bottom: calc(var(--spacing) * 0.25);
|
||||||
|
|
||||||
&:not(:focus) {
|
&:not(:focus) {
|
||||||
color: var(--accordion-open-summary-color);
|
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);
|
box-shadow: var(--card-box-shadow);
|
||||||
|
|
||||||
> header,
|
> header,
|
||||||
> footer,
|
> footer {
|
||||||
> pre {
|
|
||||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||||
margin-left: 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);
|
background-color: var(--card-sectionning-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -25,8 +25,7 @@ article {
|
||||||
border-bottom: var(--border-width) solid var(--card-border-color);
|
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
> footer,
|
> footer {
|
||||||
> pre {
|
|
||||||
margin-top: var(--block-spacing-vertical);
|
margin-top: var(--block-spacing-vertical);
|
||||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||||
border-top: var(--border-width) solid var(--card-border-color);
|
border-top: var(--border-width) solid var(--card-border-color);
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ nav {
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
padding: var(--spacing) calc(var(--spacing) * 0.5);
|
||||||
|
|
||||||
// HACK: Input & Button inside Nav
|
// HACK: Input & Button inside Nav
|
||||||
> *,
|
> *,
|
||||||
|
|
@ -41,7 +41,7 @@ nav {
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
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);
|
border-radius: var(--border-radius);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
|
@ -55,7 +55,6 @@ nav {
|
||||||
|
|
||||||
// Vertical Nav
|
// Vertical Nav
|
||||||
aside {
|
aside {
|
||||||
|
|
||||||
nav,
|
nav,
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
|
|
@ -64,11 +63,11 @@ aside {
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding: calc(var(--spacing) / 2);
|
padding: calc(var(--spacing) * 0.5);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
margin: calc(var(--spacing) * -0.5);
|
margin: calc(var(--spacing) * -0.5);
|
||||||
padding: calc(var(--spacing) / 2);
|
padding: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
* Progress
|
* Progress
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
@ -15,12 +14,10 @@ progress {
|
||||||
vertical-align: baseline; // 2
|
vertical-align: baseline; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
progress {
|
progress {
|
||||||
|
|
||||||
// Reset the default appearance
|
// Reset the default appearance
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
|
|
@ -29,8 +26,8 @@ progress {
|
||||||
// Styles
|
// Styles
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: .5rem;
|
height: 0.5rem;
|
||||||
margin-bottom: calc(var(--spacing) / 2);
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
// Remove Firefox and Opera border
|
// Remove Firefox and Opera border
|
||||||
|
|
@ -55,7 +52,13 @@ progress {
|
||||||
// Indeterminate state
|
// Indeterminate state
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
&:indeterminate {
|
&: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;
|
animation: progressIndeterminate 1s linear infinite;
|
||||||
|
|
||||||
&[value]::-webkit-progress-value {
|
&[value]::-webkit-progress-value {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
* Button
|
* Button
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.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;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -59,7 +57,8 @@ a[role="button"] {
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
--color: var(--primary-inverse);
|
--color: var(--primary-inverse);
|
||||||
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
|
--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: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -73,10 +72,8 @@ a[role="button"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition: background-color var(--transition),
|
||||||
background-color var(--transition),
|
border-color var(--transition), color var(--transition),
|
||||||
border-color var(--transition),
|
|
||||||
color var(--transition),
|
|
||||||
box-shadow var(--transition);
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -89,7 +86,8 @@ a[role="button"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&: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 {
|
&: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="button"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
|
|
||||||
// Secondary
|
// Secondary
|
||||||
&.secondary {
|
&.secondary {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
|
|
@ -135,7 +133,8 @@ input[type="reset"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&: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 {
|
&: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="button"],
|
||||||
input[type="reset"],
|
input[type="reset"],
|
||||||
a[role="button"] {
|
a[role="button"] {
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,19 @@
|
||||||
* Code
|
* Code
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.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
|
// 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,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: var(--font-family); // 1
|
font-family: var(--font-family); // 1
|
||||||
font-size: .875rem; // 2
|
font-size: 0.875em; // 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent overflow of the container in all browsers (opinionated)
|
// Prevent overflow of the container in all browsers (opinionated)
|
||||||
|
|
@ -24,7 +23,6 @@ pre {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -35,26 +33,24 @@ kbd {
|
||||||
color: var(--code-color);
|
color: var(--code-color);
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .375rem .5rem;
|
padding: 0.375rem 0.5rem;
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
padding: var(--spacing);
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
background: var(--code-background-color);
|
|
||||||
|
|
||||||
> code {
|
> code {
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
display: block;
|
||||||
|
padding: var(--spacing);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
|
|
@ -62,7 +58,6 @@ pre {
|
||||||
|
|
||||||
// Code Syntax
|
// Code Syntax
|
||||||
code {
|
code {
|
||||||
|
|
||||||
// Tags
|
// Tags
|
||||||
b {
|
b {
|
||||||
color: var(--code-tag-color);
|
color: var(--code-tag-color);
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
* Embedded content
|
* Embedded content
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
|
||||||
|
|
@ -5,36 +5,43 @@
|
||||||
|
|
||||||
// Color
|
// Color
|
||||||
[type="color"] {
|
[type="color"] {
|
||||||
|
|
||||||
// Wrapper
|
// Wrapper
|
||||||
&::-webkit-color-swatch-wrapper {
|
@mixin color-wrapper {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&::-webkit-color-swatch-wrapper {
|
||||||
|
@include color-wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
padding: 0;
|
@include color-wrapper;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Swatch
|
// Swatch
|
||||||
&::-webkit-color-swatch {
|
@mixin color-swatch {
|
||||||
border: none;
|
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 {
|
&::-moz-color-swatch {
|
||||||
border: none;
|
@include color-swatch;
|
||||||
border-radius: calc(var(--border-radius) / 2);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Date & Time
|
// Date & Time
|
||||||
|
:not(:dir(rtl)) {
|
||||||
[type="date"],
|
[type="date"],
|
||||||
[type="datetime-local"],
|
[type="datetime-local"],
|
||||||
[type="month"],
|
[type="month"],
|
||||||
[type="time"],
|
[type="time"],
|
||||||
[type="week"] {
|
[type="week"] {
|
||||||
background-image: var(--icon-date);
|
background-image: var(--icon-date);
|
||||||
background-position: center right .75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
|
||||||
|
|
@ -47,21 +54,33 @@
|
||||||
[type="time"] {
|
[type="time"] {
|
||||||
background-image: var(--icon-time);
|
background-image: var(--icon-time);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// File
|
// File
|
||||||
[type="file"] {
|
[type="file"] {
|
||||||
--color: var(--muted-color);
|
--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: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
||||||
&::-webkit-file-upload-button {
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin file-selector-button {
|
||||||
--background-color: var(--secondary);
|
--background-color: var(--secondary);
|
||||||
--border-color: var(--secondary);
|
--border-color: var(--secondary);
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
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: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -75,32 +94,36 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition: background-color var(--transition),
|
||||||
background-color var(--transition),
|
border-color var(--transition), color var(--transition),
|
||||||
border-color var(--transition),
|
|
||||||
color var(--transition),
|
|
||||||
box-shadow var(--transition);
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
--color: var(--color);
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
&::-webkit-file-upload-button {
|
|
||||||
--background-color: var(--secondary-hover);
|
--background-color: var(--secondary-hover);
|
||||||
--border-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
|
// Range
|
||||||
[type="range"] {
|
[type="range"] {
|
||||||
// Config
|
// Config
|
||||||
$height-track: .25rem;
|
$height-track: 0.25rem;
|
||||||
$height-thumb: 1.25rem;
|
$height-thumb: 1.25rem;
|
||||||
$border-thumb: 2px;
|
$border-thumb: 2px;
|
||||||
|
|
||||||
|
|
@ -108,105 +131,61 @@
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
display: block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $height-thumb;
|
height: $height-thumb;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
||||||
// Slider Track
|
// Slider Track
|
||||||
&::-webkit-slider-runnable-track {
|
@mixin slider-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $height-track;
|
height: $height-track;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background-color: var(--range-border-color);
|
background-color: var(--range-border-color);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition: background-color var(--transition),
|
||||||
background-color var(--transition),
|
|
||||||
box-shadow var(--transition);
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
@include slider-track;
|
||||||
|
}
|
||||||
|
|
||||||
&::-moz-range-track {
|
&::-moz-range-track {
|
||||||
width: 100%;
|
@include slider-track;
|
||||||
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-track {
|
&::-ms-track {
|
||||||
width: 100%;
|
@include slider-track;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Slider Thumb
|
// Slider Thumb
|
||||||
&::-webkit-slider-thumb {
|
@mixin slider-thumb {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
width: $height-thumb;
|
width: $height-thumb;
|
||||||
height: $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: $border-thumb solid var(--range-thumb-border-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--range-thumb-color);
|
background-color: var(--range-thumb-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition: background-color var(--transition),
|
||||||
background-color var(--transition),
|
|
||||||
transform var(--transition);
|
transform var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
@include slider-thumb;
|
||||||
|
}
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
&::-moz-range-thumb {
|
||||||
-webkit-appearance: none;
|
@include slider-thumb;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-ms-thumb {
|
&::-ms-thumb {
|
||||||
-webkit-appearance: none;
|
@include slider-thumb;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -238,7 +217,9 @@
|
||||||
border-radius: 5rem;
|
border-radius: 5rem;
|
||||||
|
|
||||||
@if $enable-important {
|
@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-image: var(--icon-search);
|
||||||
background-position: center left 1.125rem;
|
background-position: center left 1.125rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,13 @@
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
display: inline-block;
|
|
||||||
width: 1.25em;
|
width: 1.25em;
|
||||||
height: 1.25em;
|
height: 1.25em;
|
||||||
margin-top: -.125em;
|
margin-top: -0.125em;
|
||||||
margin-right: .375em;
|
margin-right: 0.375em;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-inline-end: 0.375em;
|
||||||
|
margin-inline-start: 0;
|
||||||
border-width: var(--border-width);
|
border-width: var(--border-width);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -29,12 +31,12 @@
|
||||||
background-image: var(--icon-checkbox);
|
background-image: var(--icon-checkbox);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .75em auto;
|
background-size: 0.75em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ label {
|
& ~ label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: .375em;
|
margin-right: 0.375em;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -48,7 +50,7 @@
|
||||||
background-image: var(--icon-minus);
|
background-image: var(--icon-minus);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: .75em auto;
|
background-size: 0.75em auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -60,7 +62,7 @@
|
||||||
&:checked:active,
|
&:checked:active,
|
||||||
&:checked:focus {
|
&:checked:focus {
|
||||||
--background-color: var(--primary-inverse);
|
--background-color: var(--primary-inverse);
|
||||||
border-width: .35em;
|
border-width: 0.35em;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -74,7 +76,7 @@
|
||||||
// Config
|
// Config
|
||||||
$switch-height: 1.25em;
|
$switch-height: 1.25em;
|
||||||
$switch-width: 2.25em;
|
$switch-width: 2.25em;
|
||||||
$switch-transition: .1s ease-in-out;
|
$switch-transition: 0.1s ease-in-out;
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
width: $switch-width;
|
width: $switch-width;
|
||||||
|
|
@ -100,7 +102,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--color);
|
background-color: var(--color);
|
||||||
content: '';
|
content: "";
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition: margin $switch-transition;
|
transition: margin $switch-transition;
|
||||||
|
|
@ -112,7 +114,9 @@
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
margin-right: 0;
|
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
|
* Form elements
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
@ -106,15 +105,13 @@ textarea {
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
// Force height for alternatives input types
|
// Force height for alternatives input types
|
||||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||||
height: calc(
|
height: calc(
|
||||||
(1rem * var(--line-height)) +
|
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
|
||||||
(var(--form-element-spacing-vertical) * 2) +
|
|
||||||
(var(--border-width) * 2)
|
(var(--border-width) * 2)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -131,15 +128,13 @@ fieldset {
|
||||||
label,
|
label,
|
||||||
fieldset legend {
|
fieldset legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--spacing) / 4);
|
margin-bottom: calc(var(--spacing) * 0.25);
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blocks, 100%
|
// Blocks, 100%
|
||||||
input:not([type="checkbox"]):not([type="radio"]),
|
input:not([type="checkbox"]):not([type="radio"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
display: block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -147,10 +142,9 @@ textarea {
|
||||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
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;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -171,10 +165,8 @@ textarea {
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition: background-color var(--transition),
|
||||||
background-color var(--transition),
|
border-color var(--transition), color var(--transition),
|
||||||
border-color var(--transition),
|
|
||||||
color var(--transition),
|
|
||||||
box-shadow var(--transition);
|
box-shadow var(--transition);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -223,10 +215,23 @@ textarea {
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
|
|
||||||
&[aria-invalid] {
|
&[aria-invalid] {
|
||||||
padding-right: 2rem;
|
@if $enable-important {
|
||||||
background-position: center right .75rem;
|
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-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
}
|
}
|
||||||
|
|
@ -238,9 +243,10 @@ textarea {
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
--border-color: var(
|
||||||
}
|
--form-element-valid-active-border-color
|
||||||
@else {
|
) !important;
|
||||||
|
} @else {
|
||||||
--border-color: var(--form-element-valid-active-border-color);
|
--border-color: var(--form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -253,15 +259,26 @@ textarea {
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
@if $enable-important {
|
@if $enable-important {
|
||||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
--border-color: var(
|
||||||
}
|
--form-element-invalid-active-border-color
|
||||||
@else {
|
) !important;
|
||||||
|
} @else {
|
||||||
--border-color: var(--form-element-invalid-active-border-color);
|
--border-color: var(--form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
&[aria-invalid] {
|
||||||
|
background-position: center left 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Placeholder
|
// Placeholder
|
||||||
input::placeholder,
|
input::placeholder,
|
||||||
input::-webkit-input-placeholder,
|
input::-webkit-input-placeholder,
|
||||||
|
|
@ -281,7 +298,6 @@ textarea {
|
||||||
|
|
||||||
// Select
|
// Select
|
||||||
select {
|
select {
|
||||||
|
|
||||||
// Unstyle the caret on `<select>`s in IE10+.
|
// Unstyle the caret on `<select>`s in IE10+.
|
||||||
&::-ms-expand {
|
&::-ms-expand {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -290,13 +306,24 @@ select {
|
||||||
|
|
||||||
&:not([multiple]):not([size]) {
|
&:not([multiple]):not([size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
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-image: var(--icon-chevron);
|
||||||
background-position: center right .75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
select {
|
||||||
|
&:not([multiple]):not([size]) {
|
||||||
|
background-position: center left 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Helper
|
// Helper
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
|
|
@ -315,6 +342,6 @@ label {
|
||||||
& > input,
|
& > input,
|
||||||
& > select,
|
& > select,
|
||||||
& > textarea {
|
& > textarea {
|
||||||
margin-top: calc(var(--spacing) / 4);
|
margin-top: calc(var(--spacing) * 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
* Miscs
|
* Miscs
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
@ -21,8 +20,12 @@ hr {
|
||||||
// Add the correct display in IE 10+
|
// Add the correct display in IE 10+
|
||||||
[hidden],
|
[hidden],
|
||||||
template {
|
template {
|
||||||
|
@if $enable-important {
|
||||||
|
display: none !important;
|
||||||
|
} @else {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Add the correct styles in Edge 18-, IE, and Safari
|
// Add the correct styles in Edge 18-, IE, and Safari
|
||||||
dialog {
|
dialog {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
* Table
|
* Table
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
@ -19,7 +18,6 @@ table {
|
||||||
text-indent: 0; // 3
|
text-indent: 0; // 3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -32,6 +30,7 @@ td {
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rows
|
// Rows
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
* Typography
|
* Typography
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
@ -18,7 +17,7 @@ strong {
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: .75em;
|
font-size: 0.75em;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
@ -46,7 +45,6 @@ ul ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -63,7 +61,8 @@ ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
font-size: var(--font-size);
|
||||||
|
font-weight: var(--font-weight);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -78,11 +77,8 @@ a {
|
||||||
text-decoration: var(--text-decoration);
|
text-decoration: var(--text-decoration);
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
transition:
|
transition: background-color var(--transition), color var(--transition),
|
||||||
background-color var(--transition),
|
text-decoration var(--transition), box-shadow var(--transition);
|
||||||
color var(--transition),
|
|
||||||
text-decoration var(--transition),
|
|
||||||
box-shadow var(--transition);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -97,7 +93,6 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
|
|
||||||
// Secondary
|
// Secondary
|
||||||
&.secondary {
|
&.secondary {
|
||||||
--color: var(--secondary);
|
--color: var(--secondary);
|
||||||
|
|
@ -214,10 +209,13 @@ small {
|
||||||
// Lists
|
// Lists
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
|
padding-inline-end: 0;
|
||||||
|
padding-inline-start: var(--spacing);
|
||||||
|
|
||||||
li {
|
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
|
// Highlighted text
|
||||||
mark {
|
mark {
|
||||||
padding: .125rem .25rem;
|
padding: 0.125rem 0.25rem;
|
||||||
background-color: var(--mark-background-color);
|
background-color: var(--mark-background-color);
|
||||||
color: var(--mark-color);
|
color: var(--mark-color);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -238,10 +236,13 @@ blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
margin: var(--typography-spacing-vertical) 0;
|
margin: var(--typography-spacing-vertical) 0;
|
||||||
padding: var(--spacing);
|
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 {
|
footer {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) / 2);
|
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||||
color: var(--blockquote-footer-color);
|
color: var(--blockquote-footer-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@if ($enable-class-container and $enable-classes) {
|
@if ($enable-class-container and $enable-classes) {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Container
|
* Container
|
||||||
*/
|
*/
|
||||||
|
|
@ -14,7 +13,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") {
|
@if map-get($breakpoints, "sm") {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
max-width: map-get($viewports, "sm");
|
max-width: map-get($viewports, "sm");
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
* Content-box & Responsive typography
|
* Content-box & Responsive typography
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
@ -33,7 +32,7 @@
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%; // 2
|
-webkit-text-size-adjust: 100%; // 2
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
|
||||||
-moz-tab-size: 4; // 5
|
tab-size: 4; // 5
|
||||||
-ms-text-size-adjust: 100%; // 6
|
-ms-text-size-adjust: 100%; // 6
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@if $enable-classes {
|
@if $enable-classes {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Grid
|
* Grid
|
||||||
* Minimal grid system with auto-layout columns
|
* Minimal grid system with auto-layout columns
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ figure {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
padding: calc(var(--spacing) / 2) 0;
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
* Container and responsive spacings for header, main, footer
|
* Container and responsive spacings for header, main, footer
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Reboot based on :
|
// Reboot based on :
|
||||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||||
|
|
@ -14,7 +13,6 @@ main {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Pico
|
// Pico
|
||||||
// ––––––––––––––––––––
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
|
@ -35,7 +33,6 @@ body {
|
||||||
|
|
||||||
// Centered viewport
|
// Centered viewport
|
||||||
@if $enable-viewport {
|
@if $enable-viewport {
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
max-width: map-get($viewports, "sm");
|
max-width: map-get($viewports, "sm");
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@ $enable-semantic-container: true;
|
||||||
// Enable .classes
|
// Enable .classes
|
||||||
$enable-classes: false;
|
$enable-classes: false;
|
||||||
|
|
||||||
|
|
||||||
// Pico Lib
|
// Pico Lib
|
||||||
// --------------------
|
// --------------------
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@ $enable-viewport: false;
|
||||||
// Enable .classes
|
// Enable .classes
|
||||||
$enable-classes: false;
|
$enable-classes: false;
|
||||||
|
|
||||||
|
|
||||||
// Pico Lib
|
// 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
|
* 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
|
* Copyright 2019-2021 - Licensed under MIT
|
||||||
*
|
*
|
||||||
* Slim version example
|
* Slim version example
|
||||||
* You can export only the modules you need
|
* You can export only the modules you need
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
// --------------------
|
// --------------------
|
||||||
|
|
||||||
|
|
@ -19,7 +18,6 @@ $enable-transitions: false;
|
||||||
// Enable overriding with !important
|
// Enable overriding with !important
|
||||||
$enable-important: false;
|
$enable-important: false;
|
||||||
|
|
||||||
|
|
||||||
// Pico Lib
|
// Pico Lib
|
||||||
// --------------------
|
// --------------------
|
||||||
|
|
||||||
|
|
@ -42,20 +40,8 @@ $enable-important: false;
|
||||||
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
|
||||||
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
@import "content/button"; // button, a[role=button], type=button, type=submit ...
|
||||||
@import "content/form"; // input, select, textarea, label, fieldset, legend
|
@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/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
|
// Utilities
|
||||||
// @import "utilities/loading"; // aria-busy=true
|
|
||||||
// @import "utilities/tooltip"; // data-tooltip
|
|
||||||
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
@import "utilities/accessibility"; // -ms-touch-action, aria-*
|
||||||
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
@import "utilities/reduce-motion"; // prefers-reduced-motion
|
||||||
|
|
|
||||||
|
|
@ -26,40 +26,40 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
|
||||||
|
|
||||||
// Black & White
|
// Black & White
|
||||||
$black: #000 !default;
|
$black: #000 !default;
|
||||||
$white: #FFF !default;
|
$white: #fff !default;
|
||||||
|
|
||||||
// Amber
|
// Amber
|
||||||
$amber-50: #FFF8E1 !default;
|
$amber-50: #fff8e1 !default;
|
||||||
$amber-100: #FFECB3 !default;
|
$amber-100: #ffecb3 !default;
|
||||||
$amber-200: #FFE082 !default;
|
$amber-200: #ffe082 !default;
|
||||||
$amber-300: #FFD54F !default;
|
$amber-300: #ffd54f !default;
|
||||||
$amber-400: #FFCA28 !default;
|
$amber-400: #ffca28 !default;
|
||||||
$amber-500: #FFC107 !default;
|
$amber-500: #ffc107 !default;
|
||||||
$amber-600: #FFB300 !default;
|
$amber-600: #ffb300 !default;
|
||||||
$amber-700: #FFA000 !default;
|
$amber-700: #ffa000 !default;
|
||||||
$amber-800: #FF8F00 !default;
|
$amber-800: #ff8f00 !default;
|
||||||
$amber-900: #FF6F00 !default;
|
$amber-900: #ff6f00 !default;
|
||||||
|
|
||||||
// Green
|
// Green
|
||||||
$green-50: #E8F5E9 !default;
|
$green-50: #e8f5e9 !default;
|
||||||
$green-100: #C8E6C9 !default;
|
$green-100: #c8e6c9 !default;
|
||||||
$green-200: #A5D6A7 !default;
|
$green-200: #a5d6a7 !default;
|
||||||
$green-300: #81C784 !default;
|
$green-300: #81c784 !default;
|
||||||
$green-400: #66BB6A !default;
|
$green-400: #66bb6a !default;
|
||||||
$green-500: #4CAF50 !default;
|
$green-500: #4caf50 !default;
|
||||||
$green-600: #43A047 !default;
|
$green-600: #43a047 !default;
|
||||||
$green-700: #388E3C !default;
|
$green-700: #388e3c !default;
|
||||||
$green-800: #2E7D32 !default;
|
$green-800: #2e7d32 !default;
|
||||||
$green-900: #1B5E20 !default;
|
$green-900: #1b5e20 !default;
|
||||||
|
|
||||||
// Red
|
// Red
|
||||||
$red-50: #FFEBEE !default;
|
$red-50: #ffebee !default;
|
||||||
$red-100: #FFCDD2 !default;
|
$red-100: #ffcdd2 !default;
|
||||||
$red-200: #EF9A9A !default;
|
$red-200: #ef9a9a !default;
|
||||||
$red-300: #E57373 !default;
|
$red-300: #e57373 !default;
|
||||||
$red-400: #EF5350 !default;
|
$red-400: #ef5350 !default;
|
||||||
$red-500: #F44336 !default;
|
$red-500: #f44336 !default;
|
||||||
$red-600: #E53935 !default;
|
$red-600: #e53935 !default;
|
||||||
$red-700: #D32F2F !default;
|
$red-700: #d32f2f !default;
|
||||||
$red-800: #C62828 !default;
|
$red-800: #c62828 !default;
|
||||||
$red-900: #B71C1C !default;
|
$red-900: #b71c1c !default;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
// Default: Dark theme
|
// Default: Dark theme
|
||||||
@mixin dark {
|
@mixin dark {
|
||||||
|
|
||||||
// Document
|
// Document
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--background-color: #{mix($black, $grey-900, 37.5%)};
|
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||||
|
|
@ -21,19 +20,19 @@
|
||||||
// Primary colors
|
// Primary colors
|
||||||
--primary: #{$primary-600};
|
--primary: #{$primary-600};
|
||||||
--primary-hover: #{$primary-500};
|
--primary-hover: #{$primary-500};
|
||||||
--primary-focus: #{rgba($primary-600, .25)};
|
--primary-focus: #{rgba($primary-600, 0.25)};
|
||||||
--primary-inverse: #{$white};
|
--primary-inverse: #{$white};
|
||||||
|
|
||||||
// Secondary colors
|
// Secondary colors
|
||||||
--secondary: #{$grey-600};
|
--secondary: #{$grey-600};
|
||||||
--secondary-hover: #{$grey-500};
|
--secondary-hover: #{$grey-500};
|
||||||
--secondary-focus: #{rgba($grey-500, .25)};
|
--secondary-focus: #{rgba($grey-500, 0.25)};
|
||||||
--secondary-inverse: #{$white};
|
--secondary-inverse: #{$white};
|
||||||
|
|
||||||
// Contrast colors
|
// Contrast colors
|
||||||
--contrast: #{$grey-50};
|
--contrast: #{$grey-50};
|
||||||
--contrast-hover: #{$white};
|
--contrast-hover: #{$white};
|
||||||
--contrast-focus: #{rgba($grey-500, .25)};
|
--contrast-focus: #{rgba($grey-500, 0.25)};
|
||||||
--contrast-inverse: #{$black};
|
--contrast-inverse: #{$black};
|
||||||
|
|
||||||
// Highlighted text (<mark>)
|
// Highlighted text (<mark>)
|
||||||
|
|
@ -64,7 +63,7 @@
|
||||||
--form-element-focus-color: var(--primary-focus);
|
--form-element-focus-color: var(--primary-focus);
|
||||||
--form-element-disabled-background-color: #{$grey-800};
|
--form-element-disabled-background-color: #{$grey-800};
|
||||||
--form-element-disabled-border-color: #{$grey-700};
|
--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-border-color: #{$red-900};
|
||||||
--form-element-invalid-active-border-color: #{$red-800};
|
--form-element-invalid-active-border-color: #{$red-800};
|
||||||
--form-element-valid-border-color: #{$green-800};
|
--form-element-valid-border-color: #{$green-800};
|
||||||
|
|
@ -85,7 +84,7 @@
|
||||||
|
|
||||||
// Table
|
// Table
|
||||||
--table-border-color: var(--muted-border-color);
|
--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
|
||||||
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||||
|
|
@ -106,7 +105,9 @@
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
--card-background-color: #{mix($black, $grey-900, 25%)};
|
--card-background-color: #{mix($black, $grey-900, 25%)};
|
||||||
--card-border-color: #{mix($black, $grey-900, 37.5%)};
|
--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%)};
|
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||||
|
|
||||||
// Progress
|
// Progress
|
||||||
|
|
@ -114,7 +115,7 @@
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
||||||
// Loading ([aria-busy=true])
|
// Loading ([aria-busy=true])
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: 0.5;
|
||||||
|
|
||||||
// Tooltip ([data-tooltip])
|
// Tooltip ([data-tooltip])
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
// Default: Light theme
|
// Default: Light theme
|
||||||
[data-theme="light"],
|
[data-theme="light"],
|
||||||
:root:not([data-theme="dark"]) {
|
:root:not([data-theme="dark"]) {
|
||||||
|
|
||||||
// Document
|
// Document
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--background-color: #{$white};
|
--background-color: #{$white};
|
||||||
|
|
@ -22,19 +21,19 @@
|
||||||
// Primary colors
|
// Primary colors
|
||||||
--primary: #{$primary-600};
|
--primary: #{$primary-600};
|
||||||
--primary-hover: #{$primary-700};
|
--primary-hover: #{$primary-700};
|
||||||
--primary-focus: #{rgba($primary-600, .125)};
|
--primary-focus: #{rgba($primary-600, 0.125)};
|
||||||
--primary-inverse: #{$white};
|
--primary-inverse: #{$white};
|
||||||
|
|
||||||
// Secondary colors
|
// Secondary colors
|
||||||
--secondary: #{$grey-600};
|
--secondary: #{$grey-600};
|
||||||
--secondary-hover: #{$grey-700};
|
--secondary-hover: #{$grey-700};
|
||||||
--secondary-focus: #{rgba($grey-600, .125)};
|
--secondary-focus: #{rgba($grey-600, 0.125)};
|
||||||
--secondary-inverse: #{$white};
|
--secondary-inverse: #{$white};
|
||||||
|
|
||||||
// Contrast colors
|
// Contrast colors
|
||||||
--contrast: #{$grey-900};
|
--contrast: #{$grey-900};
|
||||||
--contrast-hover: #{$black};
|
--contrast-hover: #{$black};
|
||||||
--contrast-focus: #{rgba($grey-600, .125)};
|
--contrast-focus: #{rgba($grey-600, 0.125)};
|
||||||
--contrast-inverse: #{$white};
|
--contrast-inverse: #{$white};
|
||||||
|
|
||||||
// Highlighted text (<mark>)
|
// Highlighted text (<mark>)
|
||||||
|
|
@ -65,7 +64,7 @@
|
||||||
--form-element-focus-color: var(--primary-focus);
|
--form-element-focus-color: var(--primary-focus);
|
||||||
--form-element-disabled-background-color: #{$grey-100};
|
--form-element-disabled-background-color: #{$grey-100};
|
||||||
--form-element-disabled-border-color: #{$grey-300};
|
--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-border-color: #{$red-800};
|
||||||
--form-element-invalid-active-border-color: #{$red-900};
|
--form-element-invalid-active-border-color: #{$red-900};
|
||||||
--form-element-valid-border-color: #{$green-700};
|
--form-element-valid-border-color: #{$green-700};
|
||||||
|
|
@ -106,7 +105,9 @@
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
--card-background-color: var(--background-color);
|
--card-background-color: var(--background-color);
|
||||||
--card-border-color: var(--muted-border-color);
|
--card-border-color: var(--muted-border-color);
|
||||||
--card-box-shadow: 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%)};
|
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
|
||||||
|
|
||||||
// Progress
|
// Progress
|
||||||
|
|
@ -114,7 +115,7 @@
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
|
|
||||||
// Loading ([aria-busy=true])
|
// Loading ([aria-busy=true])
|
||||||
--loading-spinner-opacity: .5;
|
--loading-spinner-opacity: 0.5;
|
||||||
|
|
||||||
// Tooltip ([data-tooltip])
|
// Tooltip ([data-tooltip])
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
// Commons Styles
|
// Commons Styles
|
||||||
:root {
|
:root {
|
||||||
|
|
||||||
// Typography
|
// 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;
|
--line-height: 1.5;
|
||||||
--font-weight: 400;
|
--font-weight: 400;
|
||||||
--font-size: 16px;
|
--font-size: 16px;
|
||||||
|
|
||||||
// Responsive typography
|
// Responsive typography
|
||||||
@if $enable-responsive-typography {
|
@if $enable-responsive-typography {
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") {
|
@if map-get($breakpoints, "sm") {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
--font-size: 17px;
|
--font-size: 17px;
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Borders
|
// Borders
|
||||||
--border-radius: .25rem;
|
--border-radius: 0.25rem;
|
||||||
--border-width: 1px;
|
--border-width: 1px;
|
||||||
--outline-width: 3px;
|
--outline-width: 3px;
|
||||||
|
|
||||||
|
|
@ -55,22 +55,20 @@
|
||||||
--grid-spacing-horizontal: var(--spacing);
|
--grid-spacing-horizontal: var(--spacing);
|
||||||
|
|
||||||
// Spacings for form elements and button
|
// Spacings for form elements and button
|
||||||
--form-element-spacing-vertical: .75rem;
|
--form-element-spacing-vertical: 0.75rem;
|
||||||
--form-element-spacing-horizontal: 1rem;
|
--form-element-spacing-horizontal: 1rem;
|
||||||
|
|
||||||
// Transitions
|
// Transitions
|
||||||
--transition: .2s ease-in-out;
|
--transition: 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Responsives spacings
|
// Responsives spacings
|
||||||
@if $enable-responsive-spacings {
|
@if $enable-responsive-spacings {
|
||||||
|
|
||||||
// Sectionning
|
// Sectionning
|
||||||
body > header,
|
body > header,
|
||||||
body > main,
|
body > main,
|
||||||
body > footer,
|
body > footer,
|
||||||
section {
|
section {
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") {
|
@if map-get($breakpoints, "sm") {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
|
|
@ -98,7 +96,6 @@
|
||||||
|
|
||||||
// Card (<article>)
|
// Card (<article>)
|
||||||
article {
|
article {
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") {
|
@if map-get($breakpoints, "sm") {
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
|
|
@ -203,7 +200,9 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
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 {
|
kbd {
|
||||||
|
|
|
||||||
|
|
@ -44,3 +44,11 @@ textarea,
|
||||||
[tabindex] {
|
[tabindex] {
|
||||||
-ms-touch-action: manipulation;
|
-ms-touch-action: manipulation;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pico
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
[dir="rtl"] {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,10 @@
|
||||||
|
|
||||||
&:not(:empty) {
|
&:not(:empty) {
|
||||||
&::before {
|
&::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