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

Prettify code

Browse source
This commit is contained in:
Lucas Larroche 2021-10-24 12:33:20 +07:00
parent 868e5d20cb
commit 5f6e3c1abd
59 changed files with 1079 additions and 1027 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,4 +1,5 @@
node_modules/
*.DS_Store
.prettierrc.js
TODO.md
tests/

122
css/pico.classless.css
View file

@ -6,11 +6,13 @@
* Theme: default
*/
:root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
@ -19,9 +21,9 @@
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
:root {
@ -165,7 +167,9 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
@ -175,7 +179,7 @@ kbd {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #24333e;
@ -188,19 +192,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--contrast-inverse: #fff;
--mark-background-color: #fff2ca;
--mark-color: #543a26;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -214,11 +218,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
--form-element-valid-active-border-color: #2E7D32;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #b71c1c;
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #2e7d32;
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -229,7 +233,7 @@ kbd {
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
@ -243,11 +247,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -276,19 +282,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -302,11 +308,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -332,11 +338,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -364,19 +372,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -390,11 +398,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -420,11 +428,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -922,7 +932,8 @@ input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
input[type=reset] {
@ -936,7 +947,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--border-color: var(--secondary-hover);
}
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button[disabled],
@ -1055,8 +1067,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle;
}
@ -1111,10 +1123,10 @@ textarea[disabled] {
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
background-position: center right 0.75rem;
@ -1132,7 +1144,9 @@ select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(--form-element-valid-active-border-color) !important;
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
input[aria-invalid=true],
select[aria-invalid=true],
@ -1145,7 +1159,9 @@ select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(--form-element-invalid-active-border-color) !important;
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
[dir=rtl] input[aria-invalid],
@ -1559,7 +1575,7 @@ label > input, label > select, label > textarea {
[type=search] {
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-repeat: no-repeat;

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

File diff suppressed because one or more lines are too long

138
css/pico.css
View file

@ -6,11 +6,13 @@
* Theme: default
*/
:root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
@ -19,9 +21,9 @@
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
:root {
@ -165,7 +167,9 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
@ -175,7 +179,7 @@ kbd {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #24333e;
@ -188,19 +192,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--contrast-inverse: #fff;
--mark-background-color: #fff2ca;
--mark-color: #543a26;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -214,11 +218,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
--form-element-valid-active-border-color: #2E7D32;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #b71c1c;
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #2e7d32;
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -229,7 +233,7 @@ kbd {
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
@ -243,11 +247,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -276,19 +282,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -302,11 +308,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -332,11 +338,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -364,19 +372,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -390,11 +398,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -420,11 +428,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -492,8 +502,8 @@ body > footer {
}
/**
* Container
*/
* Container
*/
.container,
.container-fluid {
width: 100%;
@ -535,9 +545,9 @@ section {
}
/**
* Grid
* Minimal grid system with auto-layout columns
*/
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical);
@ -965,7 +975,8 @@ input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
input[type=reset] {
@ -979,7 +990,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--border-color: var(--secondary-hover);
}
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.secondary,
@ -1013,7 +1025,8 @@ input[type=submit].secondary:focus,
input[type=button].secondary:focus,
input[type=reset].secondary:focus,
a[role=button].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);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.contrast,
input[type=submit].contrast,
@ -1045,7 +1058,8 @@ input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
a[role=button].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);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
button.outline,
input[type=submit].outline,
@ -1232,8 +1246,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle;
}
@ -1288,10 +1302,10 @@ textarea[disabled] {
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
background-position: center right 0.75rem;
@ -1309,7 +1323,9 @@ select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(--form-element-valid-active-border-color) !important;
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
input[aria-invalid=true],
select[aria-invalid=true],
@ -1322,7 +1338,9 @@ select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(--form-element-invalid-active-border-color) !important;
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
[dir=rtl] input[aria-invalid],
@ -1736,7 +1754,7 @@ label > input, label > select, label > textarea {
[type=search] {
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-repeat: no-repeat;

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

@ -6,11 +6,13 @@
* Theme: default
*/
:root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
@ -19,9 +21,9 @@
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
:root {
@ -165,7 +167,9 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
@ -175,7 +179,7 @@ kbd {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #24333e;
@ -188,19 +192,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--contrast-inverse: #fff;
--mark-background-color: #fff2ca;
--mark-color: #543a26;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -214,11 +218,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
--form-element-valid-active-border-color: #2E7D32;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #b71c1c;
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #2e7d32;
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -229,7 +233,7 @@ kbd {
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
@ -243,11 +247,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -276,19 +282,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -302,11 +308,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -332,11 +338,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -364,19 +372,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -390,11 +398,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -420,11 +428,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -892,7 +902,8 @@ input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
input[type=reset] {
@ -906,7 +917,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--border-color: var(--secondary-hover);
}
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button[disabled],
@ -1025,8 +1037,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle;
}
@ -1081,10 +1093,10 @@ textarea[disabled] {
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-right: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-left: var(--form-element-spacing-horizontal);
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
-webkit-padding-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
padding-inline-end: calc( var(--form-element-spacing-horizontal) + 1.5rem ) !important;
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
background-position: center right 0.75rem;
@ -1102,7 +1114,9 @@ select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(--form-element-valid-active-border-color) !important;
--border-color: var(
--form-element-valid-active-border-color
) !important;
}
input[aria-invalid=true],
select[aria-invalid=true],
@ -1115,7 +1129,9 @@ select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(--form-element-invalid-active-border-color) !important;
--border-color: var(
--form-element-invalid-active-border-color
) !important;
}
[dir=rtl] input[aria-invalid],
@ -1529,7 +1545,7 @@ label > input, label > select, label > textarea {
[type=search] {
border-radius: 5rem;
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-left: calc( var(--form-element-spacing-horizontal) + 1.75rem ) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-repeat: no-repeat;

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

122
css/pico.slim.css
View file

@ -9,11 +9,13 @@
* Theme: default
*/
:root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
@ -22,9 +24,9 @@
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
:root {
@ -114,7 +116,9 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
@ -124,7 +128,7 @@ kbd {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #24333e;
@ -137,19 +141,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--contrast-inverse: #fff;
--mark-background-color: #fff2ca;
--mark-color: #543a26;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -163,11 +167,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
--form-element-valid-active-border-color: #2E7D32;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #b71c1c;
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #2e7d32;
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -178,7 +182,7 @@ kbd {
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
@ -192,11 +196,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -225,19 +231,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -251,11 +257,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -281,11 +287,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -313,19 +321,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -339,11 +347,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -369,11 +377,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -441,8 +451,8 @@ body > footer {
}
/**
* Container
*/
* Container
*/
.container,
.container-fluid {
width: 100%;
@ -484,9 +494,9 @@ section {
}
/**
* Grid
* Minimal grid system with auto-layout columns
*/
* Grid
* Minimal grid system with auto-layout columns
*/
.grid {
grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical);
@ -910,7 +920,8 @@ input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
input[type=reset] {
@ -924,7 +935,8 @@ input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--border-color: var(--secondary-hover);
}
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.secondary,
@ -958,7 +970,8 @@ input[type=submit].secondary:focus,
input[type=button].secondary:focus,
input[type=reset].secondary:focus,
a[role=button].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);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
button.contrast,
input[type=submit].contrast,
@ -990,7 +1003,8 @@ input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
a[role=button].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);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
button.outline,
input[type=submit].outline,
@ -1177,8 +1191,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
vertical-align: middle;
}

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

96
css/themes/default.css
View file

@ -2,11 +2,13 @@
* Theme: default
*/
:root {
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
--spacing: 1rem;
@ -15,9 +17,9 @@
--block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
@media (min-width: 576px) {
:root {
@ -161,7 +163,9 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {
@ -171,7 +175,7 @@ kbd {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--background-color: #fff;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #24333e;
@ -184,19 +188,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #08769b;
--primary-focus: rgba(16, 149, 193, 0.125);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #415462;
--secondary-focus: rgba(89, 107, 120, 0.125);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #1b2832;
--contrast-hover: #000;
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--contrast-inverse: #fff;
--mark-background-color: #fff2ca;
--mark-color: #543a26;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -210,11 +214,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
--form-element-valid-active-border-color: #2E7D32;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #c62828;
--form-element-invalid-active-border-color: #b71c1c;
--form-element-valid-border-color: #388e3c;
--form-element-valid-active-border-color: #2e7d32;
--switch-background-color: #bbc6ce;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -225,7 +229,7 @@ kbd {
--range-thumb-hover-color: var(--secondary-hover);
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#f6f8f9;
--table-row-stripped-background-color: #f6f8f9;
--code-background-color: #edf0f3;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
@ -239,11 +243,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04),
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -272,19 +278,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -298,11 +304,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -328,11 +334,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -360,19 +368,19 @@ kbd {
--primary: #1095c1;
--primary-hover: #1ab3e6;
--primary-focus: rgba(16, 149, 193, 0.25);
--primary-inverse: #FFF;
--primary-inverse: #fff;
--secondary: #596b78;
--secondary-hover: #73828c;
--secondary-focus: rgba(115, 130, 140, 0.25);
--secondary-inverse: #FFF;
--secondary-inverse: #fff;
--contrast: #edf0f3;
--contrast-hover: #FFF;
--contrast-hover: #fff;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
--ins-color: #388e3c;
--del-color: #c62828;
--blockquote-border-color: var(--muted-border-color);
--blockquote-footer-color: var(--muted-color);
--button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
@ -386,11 +394,11 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
--form-element-valid-active-border-color: #388E3C;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #b71c1c;
--form-element-invalid-active-border-color: #c62828;
--form-element-valid-border-color: #2e7d32;
--form-element-valid-active-border-color: #388e3c;
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
@ -416,11 +424,13 @@ kbd {
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06),
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

29
docs/css/pico.docs.css
View file

@ -12,11 +12,11 @@
[data-theme=light],
:root:not([data-theme=dark]) {
--invalid-color: #C62828;
--valid-color: #388E3C;
--invalid-color: #c62828;
--valid-color: #388e3c;
--nav-background-color: rgba(255, 255, 255, 0.7);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #FFF;
--nav-logo-color: #fff;
--article-code-background-color: #f9fafb;
}
@ -72,32 +72,32 @@ body > main div[role=document] {
div[role=document] > section::before {
display: block;
height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-2rem - 3.5rem + .5rem);
height: calc(2rem + 3.5rem - 0.5rem);
margin-top: calc(-2rem - 3.5rem + 0.5rem);
content: "";
}
@media (min-width: 576px) {
div[role=document] > section::before {
height: calc(2.5rem + 3.5rem - .5rem);
height: calc(-2.5rem - 3.5rem + .5rem);
height: calc(2.5rem + 3.5rem - 0.5rem);
height: calc(-2.5rem - 3.5rem + 0.5rem);
}
}
@media (min-width: 768px) {
div[role=document] > section::before {
height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-3rem - 3.5rem + .5rem);
height: calc(3rem + 3.5rem - 0.5rem);
margin-top: calc(-3rem - 3.5rem + 0.5rem);
}
}
@media (min-width: 992px) {
div[role=document] > section::before {
height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-3.5rem - 3.5rem + .5rem);
height: calc(3.5rem + 3.5rem - 0.5rem);
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
}
}
@media (min-width: 1200px) {
div[role=document] > section::before {
height: calc(4rem + 3.5rem - .5rem);
margin-top: calc(-4rem - 3.5rem + .5rem);
height: calc(4rem + 3.5rem - 0.5rem);
margin-top: calc(-4rem - 3.5rem + 0.5rem);
}
}
@ -139,7 +139,8 @@ main > aside nav h1 {
display: none;
}
}
main > aside li, main > aside summary {
main > aside li,
main > aside summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

12
docs/js/src/aside.js
View file

@ -6,7 +6,6 @@
*/
export const aside = {
// Config
minWidth: '992px',
targets: {
@ -14,19 +13,18 @@ export const aside = {
details: 'aside details',
},
// Init
init() {
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
let nav = document.querySelector(this.targets.nav);
let details = document.querySelectorAll(this.targets.details);
if (nav.clientHeight < nav.scrollHeight) {
details.forEach(function(detail) {
detail.removeAttribute("open");
details.forEach(function (detail) {
detail.removeAttribute('open');
});
}
}
}
}
},
};
export default aside;
export default aside;

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

@ -6,7 +6,6 @@
*/
export const colorPicker = {
// Config
colors: null,
buttonsTarget: '#customization article[data-theme="generated"]',
@ -24,16 +23,19 @@ export const colorPicker = {
// Generate Buttons
generateButtons() {
// Init
let innerButtons = '';
let innerStyles = '';
// Loop colors
for (const color in this.colors) {
// Buttons
innerButtons += '<button data-color="' + color + '" aria-label="Activate ' + color + ' theme"></button>';
innerButtons +=
'<button data-color="' +
color +
'" aria-label="Activate ' +
color +
' theme"></button>';
// Styles
innerStyles += `
@ -52,7 +54,6 @@ export const colorPicker = {
}`;
}
// Insert buttons
let containerButtons = document.createElement('FIGURE');
containerButtons.innerHTML = innerButtons;
@ -60,13 +61,19 @@ export const colorPicker = {
// Buttons listeners
this.buttons = document.querySelectorAll(this.selectorButton);
this.buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
let color = event.target.getAttribute('data-color');
this.setActiveButton(color);
this.generateTheme(color);
}.bind(this), false);
}.bind(this));
this.buttons.forEach(
function (button) {
button.addEventListener(
'click',
function (event) {
let color = event.target.getAttribute('data-color');
this.setActiveButton(color);
this.generateTheme(color);
}.bind(this),
false
);
}.bind(this)
);
// Insert CSS Styles
let containerStyles = document.createElement('STYLE');
@ -76,21 +83,22 @@ export const colorPicker = {
document.querySelector('head').appendChild(containerStyles);
},
// Set active button
setActiveButton(color) {
// Remove all active states
this.buttons.forEach(function(button) {
button.removeAttribute('class');
}.bind(this));
this.buttons.forEach(
function (button) {
button.removeAttribute('class');
}.bind(this)
);
// Set active state
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
let buttonPicked = document.querySelector(
this.selectorButton + '[data-color="' + color + '"]'
);
buttonPicked.setAttribute('class', 'picked');
},
// Set active button
generateTheme(color) {
let name = color;
@ -102,17 +110,23 @@ export const colorPicker = {
'.c500': data[500],
'.c600': data[600],
'.c700': data[700],
'.c600-outline-light': this.hexToRgbA(data[600], .125),
'.c600-outline-dark': this.hexToRgbA(data[600], .25),
'.c600-outline-light': this.hexToRgbA(data[600], 0.125),
'.c600-outline-dark': this.hexToRgbA(data[600], 0.25),
'.inverse': data['inverse'],
}
};
Object.keys(swaps).forEach(function(swap) {
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
targets.forEach(function(target) {
target.innerHTML = swaps[swap];
}.bind(this));
}.bind(this));
Object.keys(swaps).forEach(
function (swap) {
let targets = document.querySelectorAll(
this.selectorSection + ' ' + swap
);
targets.forEach(
function (target) {
target.innerHTML = swaps[swap];
}.bind(this)
);
}.bind(this)
);
// 2. Update CSS Styles
const innerStyles = `
@ -120,7 +134,7 @@ export const colorPicker = {
--h4-color: ${data[700]};
--primary: ${data[600]};
--primary-hover: ${data[700]};
--primary-focus: ${this.hexToRgbA(data[600], .125)};
--primary-focus: ${this.hexToRgbA(data[600], 0.125)};
--primary-inverse: ${data['inverse']};
}
@media only screen and (prefers-color-scheme: dark) {
@ -128,7 +142,7 @@ export const colorPicker = {
--h4-color: ${data[400]};
--primary: ${data[600]};
--primary-hover: ${data[500]};
--primary-focus: ${this.hexToRgbA(data[600], .25)};
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
--primary-inverse: ${data['inverse']};
}
}
@ -136,7 +150,7 @@ export const colorPicker = {
--h4-color: ${data[500]};
--primary: ${data[600]};
--primary-hover: ${data[500]};
--primary-focus: ${this.hexToRgbA(data[600], .25)};
--primary-focus: ${this.hexToRgbA(data[600], 0.25)};
--primary-inverse: ${data['inverse']};
}
[data-theme="generated"] {
@ -146,16 +160,15 @@ export const colorPicker = {
--switch-checked-background-color: var(--primary);
}`;
document.querySelector('style[title="color-picker"]').innerHTML = this.generatedStyles + this.minifyCSS(innerStyles);
document.querySelector('style[title="color-picker"]').innerHTML =
this.generatedStyles + this.minifyCSS(innerStyles);
},
// Minify CSS
minifyCSS(css) {
return css.replace(/^ +/gm, '')
return css.replace(/^ +/gm, '');
},
// Hexadecimal to Rgba
hexToRgbA(hex, alpha) {
let c;
@ -165,10 +178,16 @@ export const colorPicker = {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = '0x' + c.join('');
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') + ', ' + alpha + ')';
return (
'rgba(' +
[(c >> 16) & 255, (c >> 8) & 255, c & 255].join(', ') +
', ' +
alpha +
')'
);
}
throw new Error('Bad Hex');
}
}
},
};
export default colorPicker;
export default colorPicker;

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

@ -6,34 +6,30 @@
*/
export const grid = {
// Config
buttons: {
text: {
add: 'Add column',
remove: 'Remove column'
remove: 'Remove column',
},
target: '#grids article'
target: '#grids article',
},
grid: {
current: 4,
min: 1,
max: 12,
gridTarget: '#grids .grid',
codeTarget: '#grids pre code'
codeTarget: '#grids pre code',
},
// Init
init() {
this.addButtons();
this.generateGrid()
this.generateGrid();
},
// Add buttons
addButtons() {
// Insert buttons
let buttons = document.createElement('P');
buttons.innerHTML = `
@ -54,20 +50,26 @@ export const grid = {
document.querySelector(this.buttons.target).before(buttons);
// Add button listener
document.querySelector('#grids button.add').addEventListener('click', function() {
this.addColumn();
}.bind(this), false);
document.querySelector('#grids button.add').addEventListener(
'click',
function () {
this.addColumn();
}.bind(this),
false
);
// Remove button listener
document.querySelector('#grids button.remove').addEventListener('click', function() {
this.removeColumn();
}.bind(this), false);
document.querySelector('#grids button.remove').addEventListener(
'click',
function () {
this.removeColumn();
}.bind(this),
false
);
},
// Generate grid
generateGrid() {
// Config
let htmlInner = '';
let codeInner = '&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;\n';
@ -84,7 +86,6 @@ export const grid = {
document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
},
// Add column
addColumn() {
if (this.grid.current < this.grid.max) {
@ -93,14 +94,13 @@ export const grid = {
}
},
// Remove column
removeColumn() {
if (this.grid.current > this.grid.min) {
this.grid.current--;
this.generateGrid();
}
}
},
};
export default grid;
export default grid;

538
docs/js/src/material-design-colors.js
View file

@ -1,303 +1,303 @@
// Source: https://material.io/design/color/the-color-system.html
export const materialDesignColors = {
red: {
50: "#ffebee",
100: "#ffcdd2",
200: "#ef9a9a",
300: "#e57373",
400: "#ef5350",
500: "#f44336",
600: "#e53935",
700: "#d32f2f",
800: "#c62828",
900: "#b71c1c",
a100: "#ff8a80",
a200: "#ff5252",
a400: "#ff1744",
a700: "#d50000",
inverse: "#FFF"
50: '#ffebee',
100: '#ffcdd2',
200: '#ef9a9a',
300: '#e57373',
400: '#ef5350',
500: '#f44336',
600: '#e53935',
700: '#d32f2f',
800: '#c62828',
900: '#b71c1c',
a100: '#ff8a80',
a200: '#ff5252',
a400: '#ff1744',
a700: '#d50000',
inverse: '#FFF',
},
pink: {
50: "#fce4ec",
100: "#f8bbd0",
200: "#f48fb1",
300: "#f06292",
400: "#ec407a",
500: "#e91e63",
600: "#d81b60",
700: "#c2185b",
800: "#ad1457",
900: "#880e4f",
a100: "#ff80ab",
a200: "#ff4081",
a400: "#f50057",
a700: "#c51162",
inverse: "#FFF"
50: '#fce4ec',
100: '#f8bbd0',
200: '#f48fb1',
300: '#f06292',
400: '#ec407a',
500: '#e91e63',
600: '#d81b60',
700: '#c2185b',
800: '#ad1457',
900: '#880e4f',
a100: '#ff80ab',
a200: '#ff4081',
a400: '#f50057',
a700: '#c51162',
inverse: '#FFF',
},
purple: {
50: "#f3e5f5",
100: "#e1bee7",
200: "#ce93d8",
300: "#ba68c8",
400: "#ab47bc",
500: "#9c27b0",
600: "#8e24aa",
700: "#7b1fa2",
800: "#6a1b9a",
900: "#4a148c",
a100: "#ea80fc",
a200: "#e040fb",
a400: "#d500f9",
a700: "#aa00ff",
inverse: "#FFF"
50: '#f3e5f5',
100: '#e1bee7',
200: '#ce93d8',
300: '#ba68c8',
400: '#ab47bc',
500: '#9c27b0',
600: '#8e24aa',
700: '#7b1fa2',
800: '#6a1b9a',
900: '#4a148c',
a100: '#ea80fc',
a200: '#e040fb',
a400: '#d500f9',
a700: '#aa00ff',
inverse: '#FFF',
},
"deep-purple": {
50: "#ede7f6",
100: "#d1c4e9",
200: "#b39ddb",
300: "#9575cd",
400: "#7e57c2",
500: "#673ab7",
600: "#5e35b1",
700: "#512da8",
800: "#4527a0",
900: "#311b92",
a100: "#b388ff",
a200: "#7c4dff",
a400: "#651fff",
a700: "#6200ea",
inverse: "#FFF"
'deep-purple': {
50: '#ede7f6',
100: '#d1c4e9',
200: '#b39ddb',
300: '#9575cd',
400: '#7e57c2',
500: '#673ab7',
600: '#5e35b1',
700: '#512da8',
800: '#4527a0',
900: '#311b92',
a100: '#b388ff',
a200: '#7c4dff',
a400: '#651fff',
a700: '#6200ea',
inverse: '#FFF',
},
indigo: {
50: "#e8eaf6",
100: "#c5cae9",
200: "#9fa8da",
300: "#7986cb",
400: "#5c6bc0",
500: "#3f51b5",
600: "#3949ab",
700: "#303f9f",
800: "#283593",
900: "#1a237e",
a100: "#8c9eff",
a200: "#536dfe",
a400: "#3d5afe",
a700: "#304ffe",
inverse: "#FFF"
50: '#e8eaf6',
100: '#c5cae9',
200: '#9fa8da',
300: '#7986cb',
400: '#5c6bc0',
500: '#3f51b5',
600: '#3949ab',
700: '#303f9f',
800: '#283593',
900: '#1a237e',
a100: '#8c9eff',
a200: '#536dfe',
a400: '#3d5afe',
a700: '#304ffe',
inverse: '#FFF',
},
blue: {
50: "#e3f2fd",
100: "#bbdefb",
200: "#90caf9",
300: "#64b5f6",
400: "#42a5f5",
500: "#2196f3",
600: "#1e88e5",
700: "#1976d2",
800: "#1565c0",
900: "#0d47a1",
a100: "#82b1ff",
a200: "#448aff",
a400: "#2979ff",
a700: "#2962ff",
inverse: "#FFF"
50: '#e3f2fd',
100: '#bbdefb',
200: '#90caf9',
300: '#64b5f6',
400: '#42a5f5',
500: '#2196f3',
600: '#1e88e5',
700: '#1976d2',
800: '#1565c0',
900: '#0d47a1',
a100: '#82b1ff',
a200: '#448aff',
a400: '#2979ff',
a700: '#2962ff',
inverse: '#FFF',
},
"light-blue": {
50: "#e1f5fe",
100: "#b3e5fc",
200: "#81d4fa",
300: "#4fc3f7",
400: "#29b6f6",
500: "#03a9f4",
600: "#039be5",
700: "#0288d1",
800: "#0277bd",
900: "#01579b",
a100: "#80d8ff",
a200: "#40c4ff",
a400: "#00b0ff",
a700: "#0091ea",
inverse: "#FFF"
'light-blue': {
50: '#e1f5fe',
100: '#b3e5fc',
200: '#81d4fa',
300: '#4fc3f7',
400: '#29b6f6',
500: '#03a9f4',
600: '#039be5',
700: '#0288d1',
800: '#0277bd',
900: '#01579b',
a100: '#80d8ff',
a200: '#40c4ff',
a400: '#00b0ff',
a700: '#0091ea',
inverse: '#FFF',
},
cyan: {
50: "#e0f7fa",
100: "#b2ebf2",
200: "#80deea",
300: "#4dd0e1",
400: "#26c6da",
500: "#00bcd4",
600: "#00acc1",
700: "#0097a7",
800: "#00838f",
900: "#006064",
a100: "#84ffff",
a200: "#18ffff",
a400: "#00e5ff",
a700: "#00b8d4",
inverse: "#FFF"
50: '#e0f7fa',
100: '#b2ebf2',
200: '#80deea',
300: '#4dd0e1',
400: '#26c6da',
500: '#00bcd4',
600: '#00acc1',
700: '#0097a7',
800: '#00838f',
900: '#006064',
a100: '#84ffff',
a200: '#18ffff',
a400: '#00e5ff',
a700: '#00b8d4',
inverse: '#FFF',
},
teal: {
50: "#e0f2f1",
100: "#b2dfdb",
200: "#80cbc4",
300: "#4db6ac",
400: "#26a69a",
500: "#009688",
600: "#00897b",
700: "#00796b",
800: "#00695c",
900: "#004d40",
a100: "#a7ffeb",
a200: "#64ffda",
a400: "#1de9b6",
a700: "#00bfa5",
inverse: "#FFF"
50: '#e0f2f1',
100: '#b2dfdb',
200: '#80cbc4',
300: '#4db6ac',
400: '#26a69a',
500: '#009688',
600: '#00897b',
700: '#00796b',
800: '#00695c',
900: '#004d40',
a100: '#a7ffeb',
a200: '#64ffda',
a400: '#1de9b6',
a700: '#00bfa5',
inverse: '#FFF',
},
green: {
50: "#e8f5e9",
100: "#c8e6c9",
200: "#a5d6a7",
300: "#81c784",
400: "#66bb6a",
500: "#4caf50",
600: "#43a047",
700: "#388e3c",
800: "#2e7d32",
900: "#1b5e20",
a100: "#b9f6ca",
a200: "#69f0ae",
a400: "#00e676",
a700: "#00c853",
inverse: "#FFF"
50: '#e8f5e9',
100: '#c8e6c9',
200: '#a5d6a7',
300: '#81c784',
400: '#66bb6a',
500: '#4caf50',
600: '#43a047',
700: '#388e3c',
800: '#2e7d32',
900: '#1b5e20',
a100: '#b9f6ca',
a200: '#69f0ae',
a400: '#00e676',
a700: '#00c853',
inverse: '#FFF',
},
"light-green": {
50: "#f1f8e9",
100: "#dcedc8",
200: "#c5e1a5",
300: "#aed581",
400: "#9ccc65",
500: "#8bc34a",
600: "#7cb342",
700: "#689f38",
800: "#558b2f",
900: "#33691e",
a100: "#ccff90",
a200: "#b2ff59",
a400: "#76ff03",
a700: "#64dd17",
inverse: "#FFF"
'light-green': {
50: '#f1f8e9',
100: '#dcedc8',
200: '#c5e1a5',
300: '#aed581',
400: '#9ccc65',
500: '#8bc34a',
600: '#7cb342',
700: '#689f38',
800: '#558b2f',
900: '#33691e',
a100: '#ccff90',
a200: '#b2ff59',
a400: '#76ff03',
a700: '#64dd17',
inverse: '#FFF',
},
lime: {
50: "#f9fbe7",
100: "#f0f4c3",
200: "#e6ee9c",
300: "#dce775",
400: "#d4e157",
500: "#cddc39",
600: "#c0ca33",
700: "#afb42b",
800: "#9e9d24",
900: "#827717",
a100: "#f4ff81",
a200: "#eeff41",
a400: "#c6ff00",
a700: "#aeea00",
inverse: "rgba(0, 0, 0, 0.75)"
50: '#f9fbe7',
100: '#f0f4c3',
200: '#e6ee9c',
300: '#dce775',
400: '#d4e157',
500: '#cddc39',
600: '#c0ca33',
700: '#afb42b',
800: '#9e9d24',
900: '#827717',
a100: '#f4ff81',
a200: '#eeff41',
a400: '#c6ff00',
a700: '#aeea00',
inverse: 'rgba(0, 0, 0, 0.75)',
},
yellow: {
50: "#fffde7",
100: "#fff9c4",
200: "#fff59d",
300: "#fff176",
400: "#ffee58",
500: "#ffeb3b",
600: "#fdd835",
700: "#fbc02d",
800: "#f9a825",
900: "#f57f17",
a100: "#ffff8d",
a200: "#ffff00",
a400: "#ffea00",
a700: "#ffd600",
inverse: "rgba(0, 0, 0, 0.75)"
50: '#fffde7',
100: '#fff9c4',
200: '#fff59d',
300: '#fff176',
400: '#ffee58',
500: '#ffeb3b',
600: '#fdd835',
700: '#fbc02d',
800: '#f9a825',
900: '#f57f17',
a100: '#ffff8d',
a200: '#ffff00',
a400: '#ffea00',
a700: '#ffd600',
inverse: 'rgba(0, 0, 0, 0.75)',
},
amber: {
50: "#fff8e1",
100: "#ffecb3",
200: "#ffe082",
300: "#ffd54f",
400: "#ffca28",
500: "#ffc107",
600: "#ffb300",
700: "#ffa000",
800: "#ff8f00",
900: "#ff6f00",
a100: "#ffe57f",
a200: "#ffd740",
a400: "#ffc400",
a700: "#ffab00",
inverse: "rgba(0, 0, 0, 0.75)"
50: '#fff8e1',
100: '#ffecb3',
200: '#ffe082',
300: '#ffd54f',
400: '#ffca28',
500: '#ffc107',
600: '#ffb300',
700: '#ffa000',
800: '#ff8f00',
900: '#ff6f00',
a100: '#ffe57f',
a200: '#ffd740',
a400: '#ffc400',
a700: '#ffab00',
inverse: 'rgba(0, 0, 0, 0.75)',
},
orange: {
50: "#fff3e0",
100: "#ffe0b2",
200: "#ffcc80",
300: "#ffb74d",
400: "#ffa726",
500: "#ff9800",
600: "#fb8c00",
700: "#f57c00",
800: "#ef6c00",
900: "#e65100",
a100: "#ffd180",
a200: "#ffab40",
a400: "#ff9100",
a700: "#ff6d00",
inverse: "#FFF"
50: '#fff3e0',
100: '#ffe0b2',
200: '#ffcc80',
300: '#ffb74d',
400: '#ffa726',
500: '#ff9800',
600: '#fb8c00',
700: '#f57c00',
800: '#ef6c00',
900: '#e65100',
a100: '#ffd180',
a200: '#ffab40',
a400: '#ff9100',
a700: '#ff6d00',
inverse: '#FFF',
},
"deep-orange": {
50: "#fbe9e7",
100: "#ffccbc",
200: "#ffab91",
300: "#ff8a65",
400: "#ff7043",
500: "#ff5722",
600: "#f4511e",
700: "#e64a19",
800: "#d84315",
900: "#bf360c",
a100: "#ff9e80",
a200: "#ff6e40",
a400: "#ff3d00",
a700: "#dd2c00",
inverse: "#FFF"
'deep-orange': {
50: '#fbe9e7',
100: '#ffccbc',
200: '#ffab91',
300: '#ff8a65',
400: '#ff7043',
500: '#ff5722',
600: '#f4511e',
700: '#e64a19',
800: '#d84315',
900: '#bf360c',
a100: '#ff9e80',
a200: '#ff6e40',
a400: '#ff3d00',
a700: '#dd2c00',
inverse: '#FFF',
},
grey: {
50: "#fafafa",
100: "#f5f5f5",
200: "#eeeeee",
300: "#e0e0e0",
400: "#bdbdbd",
500: "#9e9e9e",
600: "#757575",
700: "#616161",
800: "#424242",
900: "#212121",
inverse: "#FFF"
50: '#fafafa',
100: '#f5f5f5',
200: '#eeeeee',
300: '#e0e0e0',
400: '#bdbdbd',
500: '#9e9e9e',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
inverse: '#FFF',
},
'blue-grey': {
50: '#eceff1',
100: '#cfd8dc',
200: '#b0bec5',
300: '#90a4ae',
400: '#78909c',
500: '#607d8b',
600: '#546e7a',
700: '#455a64',
800: '#37474f',
900: '#263238',
inverse: '#FFF',
},
"blue-grey": {
50: "#eceff1",
100: "#cfd8dc",
200: "#b0bec5",
300: "#90a4ae",
400: "#78909c",
500: "#607d8b",
600: "#546e7a",
700: "#455a64",
800: "#37474f",
900: "#263238",
inverse: "#FFF"
}
};
export default materialDesignColors;
export default materialDesignColors;

34
docs/js/src/most-visible.js
View file

@ -51,10 +51,9 @@
* @property {number} defaults.offset An offset to take into account when calculating visibility.
*/
MostVisible.defaults = {
percentage: false,
offset: 0
offset: 0,
};
MostVisible.prototype = {
/**
@ -66,11 +65,15 @@
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 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];
return value > carry[0] ? [value, element] : carry;
},
[0, null]
)[1];
},
/**
@ -82,13 +85,13 @@
*/
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
};
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) {
@ -108,11 +111,11 @@
}
if (this.options.percentage) {
return visiblePx / height * 100;
return (visiblePx / height) * 100;
}
return visiblePx;
}
},
};
MostVisible.makeJQueryPlugin = function ($) {
@ -126,7 +129,6 @@
};
}; // 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.

48
docs/js/src/scrollspy.js
View file

@ -11,9 +11,8 @@
import * as MostVisible from './most-visible.js';
export const scrollspy = {
mostVisible() {
new MostVisible()
new MostVisible();
},
// Config
@ -25,7 +24,6 @@ export const scrollspy = {
active: 'active',
},
// Init
init() {
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
@ -34,38 +32,48 @@ export const scrollspy = {
}
},
// Set active section in nav
setActiveNav() {
// Get active section
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
// Remove all active states
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);
links.forEach(function(link) {
link.classList.remove(this.targets.active);
}.bind(this));
let links = document.querySelectorAll(
this.targets.nav + ' a.' + this.targets.active
);
links.forEach(
function (link) {
link.classList.remove(this.targets.active);
}.bind(this)
);
// Set active state
let activeLink = document.querySelector(this.targets.nav + ' a[href="#' + currentSection + '"]');
let activeLink = document.querySelector(
this.targets.nav + ' a[href="#' + currentSection + '"]'
);
activeLink.classList.add(this.targets.active);
// Open details parent
activeLink.closest('details').setAttribute('open', '');
},
// Scroll stop
scrollStop() {
let isScrolling;
window.addEventListener('scroll', function(event) {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
this.setActiveNav();
}.bind(this), this.interval);
}.bind(this), false);
}
}
window.addEventListener(
'scroll',
function (event) {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(
function () {
this.setActiveNav();
}.bind(this),
this.interval
);
}.bind(this),
false
);
},
};
export default scrollspy;
export default scrollspy;

72
docs/js/src/theme-switcher.js
View file

@ -6,69 +6,63 @@
*/
export const themeSwitcher = {
// Config
_scheme: 'auto',
change: {
light: '<i>Turn on dark mode</i>',
dark: '<i>Turn off dark mode</i>'
dark: '<i>Turn off dark mode</i>',
},
buttonsTarget: '.theme-switcher',
// Init
init() {
this.scheme = this._scheme;
this.initSwitchers();
},
// Prefered color scheme
get preferedColorScheme() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
else {
} else {
return 'light';
}
},
// Init switchers
initSwitchers() {
const buttons = document.querySelectorAll(this.buttonsTarget);
buttons.forEach(function(button) {
button.addEventListener('click', function(event) {
if (this.scheme == 'dark') {
this.scheme = 'light';
}
else {
this.scheme = 'dark';
}
}.bind(this), false);
}.bind(this));
buttons.forEach(
function (button) {
button.addEventListener(
'click',
function (event) {
if (this.scheme == 'dark') {
this.scheme = 'light';
} else {
this.scheme = 'dark';
}
}.bind(this),
false
);
}.bind(this)
);
},
// Add new button
addButton(config) {
// Insert Switcher
let button = document.createElement(config.tag);
button.className = config.class;
document.querySelector(config.target).appendChild(button);
},
// Set scheme
set scheme(scheme) {
if (scheme == 'auto') {
if (this.preferedColorScheme == 'dark') {
this._scheme = 'dark';
}
else {
} else {
this._scheme = 'light';
}
}
@ -82,33 +76,31 @@ export const themeSwitcher = {
this.applyScheme();
},
// Get scheme
get scheme() {
return this._scheme;
},
// Apply scheme
applyScheme() {
// Root attribute
document.querySelector('html').setAttribute('data-theme', this.scheme);
// Buttons text
const buttons = document.querySelectorAll(this.buttonsTarget);
let text;
buttons.forEach(function(button) {
if (this.scheme == 'dark') {
text = this.change.dark;
}
else {
text = this.change.light;
}
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this));
}
}
buttons.forEach(
function (button) {
if (this.scheme == 'dark') {
text = this.change.dark;
} else {
text = this.change.light;
}
button.innerHTML = text;
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
}.bind(this)
);
},
};
export default themeSwitcher;
export default themeSwitcher;

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

@ -23,7 +23,6 @@ body > nav {
// Band & Title
ul:first-of-type li {
// Brand
&:first-of-type {
a {

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

@ -8,7 +8,7 @@
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
padding: 0.75rem;
border-radius: 2rem;
box-shadow: var(--card-box-shadow);
line-height: 1;
@ -20,9 +20,14 @@
height: 1rem;
border: 0.15rem solid currentColor;
border-radius: 50%;
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
background: linear-gradient(
to right,
currentColor 0%,
currentColor 50%,
transparent 50%
);
vertical-align: bottom;
content: '';
content: "";
transition: transform var(--transition);
}
@ -31,7 +36,7 @@
max-width: 0;
padding: 0;
overflow: hidden;
font-size: .875rem;
font-size: 0.875rem;
font-style: normal;
white-space: nowrap;
}
@ -39,10 +44,8 @@
&:hover,
&:focus {
max-width: 100%;
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
@ -54,8 +57,7 @@
i {
max-width: 100%;
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition),
padding var(--transition);
transition: max-width var(--transition), padding var(--transition);
}
}

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

@ -17,7 +17,8 @@ article pre code {
section > pre {
background: var(--article-code-background-color);
margin: var(--block-spacing-vertical) 0;
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
padding: calc(var(--block-spacing-vertical) / 1.5)
var(--block-spacing-horizontal);
box-shadow: var(--card-box-shadow);
}
@ -33,7 +34,7 @@ section > pre {
position: absolute;
top: 0;
right: 0;
padding: .375rem .75rem;
padding: 0.375rem 0.75rem;
border-radius: 0;
color: var(--primary-inverse);
font-size: 14px;
@ -47,7 +48,8 @@ section > pre {
// Spacing for Valid & Invalid badge
code {
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal);
padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
var(--block-spacing-horizontal);
}
}
@ -55,13 +57,13 @@ section > pre {
[data-theme="invalid"] {
&:before {
background: var(--invalid-color);
content: 'Not so great';
content: "Not so great";
}
}
[data-theme="valid"] {
&:before {
background: var(--valid-color);
content: 'Great';
content: "Great";
}
}

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

@ -6,12 +6,12 @@ section > hgroup {
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
}
a[role=button] {
a[role="button"] {
margin-right: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: var(--typography-spacing-vertical);
}
[role=document] {
[role="document"] {
section > h1,
section > h2,
section > h3 {

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

@ -3,7 +3,6 @@
*/
main > aside {
nav {
width: 100%;
margin-bottom: var(--block-spacing-vertical);
@ -26,7 +25,8 @@ main > aside {
}
}
li, summary {
li,
summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
@ -51,7 +51,7 @@ main > aside {
}
details {
padding-bottom: .25rem;
padding-bottom: 0.25rem;
border-bottom: none;
summary {
@ -66,7 +66,7 @@ main > aside {
}
&[open] {
>summary:not(:focus) {
> summary:not(:focus) {
color: var(--h1-color);
}
}

2
docs/scss/layout/_document.scss
View file

@ -3,5 +3,5 @@
*/
html {
scroll-behavior:smooth;
scroll-behavior: smooth;
}

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

@ -11,7 +11,6 @@
// Docs: Customization
#customization {
figure {
display: grid;
grid-template-columns: repeat(9, 1fr);
@ -32,12 +31,12 @@
border-top-left-radius: 0;
}
button {
margin-bottom: 0;
padding: 0;
padding-top: 100%;
border:none;
border-radius: 0;
button {
margin-bottom: 0;
padding: 0;
padding-top: 100%;
border: none;
border-radius: 0;
&:focus {
box-shadow: none;
@ -47,8 +46,8 @@
background-image: var(--icon-check);
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
background-size: 0.66rem auto;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
}
&[data-color="lime"],
&[data-color="yellow"],
@ -69,10 +68,8 @@
}
}
// Docs: Grids
#grids {
--grid-spacing-vertical: 1rem;
button {
@ -83,12 +80,12 @@
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
width: auto;
margin-right: .5rem;
margin-right: 0.5rem;
}
svg {
stroke: var(--secondary);
margin-right: .5rem;
margin-right: 0.5rem;
border: 2px solid currentColor;
border-radius: 1rem;
background: currentColor;

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

@ -7,7 +7,6 @@ $navHeight: 3.5rem;
// Main grid
body > main {
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
@if map-get($breakpoints, "lg") {
@ -33,51 +32,51 @@ body > main {
// Anchors hacks for internal links
div[role="document"] > section::before {
display: block;
height: calc(2rem + #{$navHeight} - .5rem);
margin-top: calc(-2rem - #{$navHeight} + .5rem);
content: '';
height: calc(2rem + #{$navHeight} - 0.5rem);
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
content: "";
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
height: calc(2.5rem + #{$navHeight} - .5rem);
height: calc(-2.5rem - #{$navHeight} + .5rem);
height: calc(2.5rem + #{$navHeight} - 0.5rem);
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
height: calc(3rem + #{$navHeight} - .5rem);
margin-top: calc(-3rem - #{$navHeight} + .5rem);
height: calc(3rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
height: calc(3.5rem + #{$navHeight} - .5rem);
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
height: calc(3.5rem + #{$navHeight} - 0.5rem);
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
height: calc(4rem + #{$navHeight} - .5rem);
margin-top: calc(-4rem - #{$navHeight} + .5rem);
height: calc(4rem + #{$navHeight} - 0.5rem);
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
}
}
}
// External links
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
{
display: inline-block;
width: 1rem;
height: 1rem;
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
background-size: 0.66rem auto;
content: "";
}
// Embedded SVG

3
docs/scss/themes/_docs.scss
View file

@ -9,7 +9,6 @@
// Can be forced with data-theme="light"
@import "docs/light";
// Dark theme (Auto)
// Automatically enabled if user has Dark mode enabled
@import "docs/dark";
@ -23,4 +22,4 @@
// Enabled if forced with data-theme="dark"
[data-theme="dark"] {
@include dark;
}
}

10
docs/scss/themes/docs/_dark.scss
View file

@ -1,9 +1,9 @@
// Dark theme [Additions for docs]
@mixin dark {
--invalid-color: #{rgba($red-900, .5)};
--valid-color: #{rgba($green-800, .5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
--nav-border-color: #{rgba($grey-500, .2)};
--invalid-color: #{rgba($red-900, 0.5)};
--valid-color: #{rgba($green-800, 0.5)};
--nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
--nav-border-color: #{rgba($grey-500, 0.2)};
--nav-logo-color: #{mix($black, $grey-900)};
--article-code-background-color: var(--code-background-color);
}
}

4
docs/scss/themes/docs/_icons.scss
View file

@ -1,7 +1,7 @@
// Icons
// Source: https://feathericons.com/
:root {
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

4
docs/scss/themes/docs/_light.scss
View file

@ -4,8 +4,8 @@
:root:not([data-theme="dark"]) {
--invalid-color: #{$red-800};
--valid-color: #{$green-700};
--nav-background-color: #{rgba($white, .7)};
--nav-border-color: #{rgba($grey-500, .2)};
--nav-background-color: #{rgba($white, 0.7)};
--nav-border-color: #{rgba($grey-500, 0.2)};
--nav-logo-color: #{$white};
--article-code-background-color: #{mix($grey-50, $white, 33%)};
}

5
scss/_variables.scss
View file

@ -29,7 +29,6 @@ $enable-transitions: true !default;
// Enable overriding with !important
$enable-important: true !default;
// Responsive
// ––––––––––––––––––––
@ -51,12 +50,12 @@ $breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xl: 1200px,
) !default;
// Viewports
$viewports: (
// 'null' disable the viewport on a breakpoint
// 'null' disable the viewport on a breakpoint
sm: 510px,
md: 700px,
lg: 920px,

7
scss/components/_accordion.scss
View file

@ -44,7 +44,7 @@ details {
background-position: center;
background-repeat: no-repeat;
background-size: 1rem auto;
content: '';
content: "";
@if $enable-transitions {
transition: transform var(--transition);
@ -67,7 +67,6 @@ details {
// Open
&[open] {
> summary {
margin-bottom: calc(var(--spacing) * 0.25);
@ -77,13 +76,13 @@ details {
&::after {
transform: rotate(0);
}
}
}
}
}
[dir="rtl"] {
details{
details {
summary {
&::after {
float: left;

3
scss/components/_card.scss
View file

@ -16,7 +16,8 @@ article {
> footer {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
padding: calc(var(--block-spacing-vertical) * 0.66)
var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
}

1
scss/components/_nav.scss
View file

@ -55,7 +55,6 @@ nav {
// Vertical Nav
aside {
nav,
ol,
ul,

21
scss/components/_progress.scss
View file

@ -2,7 +2,6 @@
* Progress
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -11,25 +10,23 @@
// 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
progress {
display: inline-block; // 1
vertical-align: baseline; // 2
display: inline-block; // 1
vertical-align: baseline; // 2
}
// Pico
// ––––––––––––––––––––
progress {
// Reset the default appearance
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
// Styles
display: inline-block;
width: 100%;
height: .5rem;
height: 0.5rem;
margin-bottom: calc(var(--spacing) * 0.5);
overflow: hidden;
@ -55,7 +52,13 @@ progress {
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&:indeterminate {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
background: var(--progress-background-color)
linear-gradient(
to right,
var(--progress-color) 30%,
var(--progress-background-color) 30%
)
top left / 150% 150% no-repeat;
animation: progressIndeterminate 1s linear infinite;
&[value]::-webkit-progress-value {

27
scss/content/_button.scss
View file

@ -2,7 +2,6 @@
* Button
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -35,7 +34,6 @@ button::-moz-focus-inner,
border-style: none;
}
// Pico
// ––––––––––––––––––––
@ -59,7 +57,8 @@ a[role="button"] {
--border-color: var(--primary);
--color: var(--primary-inverse);
--box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
@ -73,10 +72,8 @@ a[role="button"] {
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
@ -89,7 +86,8 @@ a[role="button"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--primary-focus);
}
}
@ -108,7 +106,8 @@ input[type="reset"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
@ -119,7 +118,6 @@ input[type="reset"] {
input[type="button"],
input[type="reset"],
a[role="button"] {
// Secondary
&.secondary {
--background-color: var(--secondary);
@ -135,7 +133,8 @@ input[type="reset"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--secondary-focus);
}
}
@ -153,7 +152,8 @@ input[type="reset"] {
}
&:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
0 0 0 var(--outline-width) var(--contrast-focus);
}
}
@ -200,9 +200,8 @@ input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
&[disabled] {
opacity: .5;
opacity: 0.5;
pointer-events: none;
}
}

7
scss/content/_code.scss
View file

@ -2,7 +2,6 @@
* Code
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -15,7 +14,7 @@ code,
kbd,
samp {
font-family: var(--font-family); // 1
font-size: .875em; // 2
font-size: 0.875em; // 2
}
// Prevent overflow of the container in all browsers (opinionated)
@ -24,7 +23,6 @@ pre {
overflow: auto;
}
// Pico
// ––––––––––––––––––––
@ -41,7 +39,7 @@ kbd {
code,
kbd {
display: inline-block;
padding: .375rem .5rem;
padding: 0.375rem 0.5rem;
}
pre {
@ -60,7 +58,6 @@ pre {
// Code Syntax
code {
// Tags
b {
color: var(--code-tag-color);

1
scss/content/_embedded.scss
View file

@ -2,7 +2,6 @@
* Embedded content
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css

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

@ -5,7 +5,6 @@
// Color
[type="color"] {
// Wrapper
@mixin color-wrapper {
padding: 0;
@ -24,7 +23,7 @@
border: none;
border-radius: calc(var(--border-radius) * 0.5);
}
&::-webkit-color-swatch {
@include color-swatch;
}
@ -42,15 +41,15 @@
[type="time"],
[type="week"] {
background-image: var(--icon-date);
background-position: center right .75rem;
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
&::-webkit-calendar-picker-indicator {
opacity: 0;
}
}
// Time
[type="time"] {
background-image: var(--icon-time);
@ -64,7 +63,7 @@
border: none;
border-radius: 0;
background: none;
&:hover,
&:active,
&:focus {
@ -80,7 +79,8 @@
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);
padding: calc(var(--form-element-spacing-vertical) * 0.5)
calc(var(--form-element-spacing-horizontal) * 0.5);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius);
outline: none;
@ -92,31 +92,29 @@
line-height: var(--line-height);
text-align: center;
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
&:hover,
&:active,
&:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
}
&::file-selector-button {
@include file-selector-button;
}
&::-webkit-file-upload-button {
@include file-selector-button;
}
&::-ms-browse {
@include file-selector-button;
}
@ -125,14 +123,14 @@
// Range
[type="range"] {
// Config
$height-track: .25rem;
$height-track: 0.25rem;
$height-thumb: 1.25rem;
$border-thumb: 2px;
// Styles
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: $height-thumb;
background: transparent;
@ -145,8 +143,7 @@
background-color: var(--range-border-color);
@if $enable-transitions {
transition:
background-color var(--transition),
transition: background-color var(--transition),
box-shadow var(--transition);
}
}
@ -175,8 +172,7 @@
cursor: pointer;
@if $enable-transitions {
transition:
background-color var(--transition),
transition: background-color var(--transition),
transform var(--transition);
}
}
@ -221,7 +217,9 @@
border-radius: 5rem;
@if $enable-important {
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
padding-left: calc(
var(--form-element-spacing-horizontal) + 1.75rem
) !important;
background-image: var(--icon-search);
background-position: center left 1.125rem;
background-repeat: no-repeat;

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

@ -6,14 +6,14 @@
[type="checkbox"],
[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25em;
height: 1.25em;
margin-top: -.125em;
margin-right: .375em;
margin-top: -0.125em;
margin-right: 0.375em;
margin-left: 0;
margin-inline-end: .375em;
margin-inline-end: 0.375em;
margin-inline-start: 0;
border-width: var(--border-width);
vertical-align: middle;
@ -31,12 +31,12 @@
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: .75em auto;
background-size: 0.75em auto;
}
& ~ label {
display: inline-block;
margin-right: .375em;
margin-right: 0.375em;
margin-bottom: 0;
cursor: pointer;
}
@ -50,7 +50,7 @@
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: .75em auto;
background-size: 0.75em auto;
}
}
@ -60,9 +60,9 @@
&:checked,
&:checked:active,
&:checked:focus{
&:checked:focus {
--background-color: var(--primary-inverse);
border-width: .35em;
border-width: 0.35em;
background-image: none;
}
}
@ -74,9 +74,9 @@
--color: var(--switch-color);
// Config
$switch-height: 1.25em;
$switch-width: 2.25em;
$switch-transition: .1s ease-in-out;
$switch-height: 1.25em;
$switch-width: 2.25em;
$switch-transition: 0.1s ease-in-out;
// Styles
width: $switch-width;
@ -102,7 +102,7 @@
height: 100%;
border-radius: 50%;
background-color: var(--color);
content: '';
content: "";
@if $enable-transitions {
transition: margin $switch-transition;

57
scss/content/_form.scss
View file

@ -2,7 +2,6 @@
* Form elements
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -106,16 +105,14 @@ textarea {
border-width: 0;
}
// Pico
// ––––––––––––––––––––
// Force height for alternatives input types
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
height: calc(
(1rem * var(--line-height)) +
(var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2)
(1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +
(var(--border-width) * 2)
);
}
@ -145,10 +142,9 @@ textarea {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
appearance: none;
padding: var(--form-element-spacing-vertical)
var(--form-element-spacing-horizontal);
vertical-align: middle;
}
@ -169,10 +165,8 @@ textarea {
font-weight: var(--font-weight);
@if $enable-transitions {
transition:
background-color var(--transition),
border-color var(--transition),
color var(--transition),
transition: background-color var(--transition),
border-color var(--transition), color var(--transition),
box-shadow var(--transition);
}
}
@ -221,21 +215,23 @@ textarea {
input,
select,
textarea {
&[aria-invalid] {
@if $enable-important {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-right: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-left: var(--form-element-spacing-horizontal);
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
padding-inline-end: calc(
var(--form-element-spacing-horizontal) + 1.5rem
) !important;
padding-inline-start: var(--form-element-spacing-horizontal) !important;
}
@else {
} @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 .75rem;
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
@ -247,9 +243,10 @@ textarea {
&:active,
&:focus {
@if $enable-important {
--border-color: var(--form-element-valid-active-border-color) !important;
}
@else {
--border-color: var(
--form-element-valid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-valid-active-border-color);
}
}
@ -262,9 +259,10 @@ textarea {
&:active,
&:focus {
@if $enable-important {
--border-color: var(--form-element-invalid-active-border-color) !important;
}
@else {
--border-color: var(
--form-element-invalid-active-border-color
) !important;
} @else {
--border-color: var(--form-element-invalid-active-border-color);
}
}
@ -276,7 +274,7 @@ textarea {
select,
textarea {
&[aria-invalid] {
background-position: center left .75rem;
background-position: center left 0.75rem;
}
}
}
@ -300,7 +298,6 @@ textarea {
// Select
select {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
@ -313,16 +310,16 @@ select {
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
padding-inline-start: var(--form-element-spacing-horizontal);
background-image: var(--icon-chevron);
background-position: center right .75rem;
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
}
[dir="rtl"] {
select {
select {
&:not([multiple]):not([size]) {
background-position: center left .75rem;
background-position: center left 0.75rem;
}
}
}

4
scss/content/_miscs.scss
View file

@ -2,7 +2,6 @@
* Miscs
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -23,8 +22,7 @@ hr {
template {
@if $enable-important {
display: none !important;
}
@else {
} @else {
display: none;
}
}

2
scss/content/_table.scss
View file

@ -2,7 +2,6 @@
* Table
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -19,7 +18,6 @@ table {
text-indent: 0; // 3
}
// Pico
// ––––––––––––––––––––

18
scss/content/_typography.scss
View file

@ -2,7 +2,6 @@
* Typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -18,7 +17,7 @@ strong {
sub,
sup {
position: relative;
font-size: .75em;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
@ -46,7 +45,6 @@ ul ul {
margin: 0;
}
// Pico
// ––––––––––––––––––––
@ -79,11 +77,8 @@ a {
text-decoration: var(--text-decoration);
@if $enable-transitions {
transition:
background-color var(--transition),
color var(--transition),
text-decoration var(--transition),
box-shadow var(--transition);
transition: background-color var(--transition), color var(--transition),
text-decoration var(--transition), box-shadow var(--transition);
}
&:hover,
@ -98,7 +93,6 @@ a {
}
@if $enable-classes {
// Secondary
&.secondary {
--color: var(--secondary);
@ -231,7 +225,7 @@ ul li {
// Highlighted text
mark {
padding: .125rem .25rem;
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
@ -243,9 +237,9 @@ blockquote {
margin: var(--typography-spacing-vertical) 0;
padding: var(--spacing);
border-right: none;
border-left: .25rem solid var(--blockquote-border-color);
border-left: 0.25rem solid var(--blockquote-border-color);
border-inline-end: none;
border-inline-start: .25rem solid var(--blockquote-border-color);
border-inline-start: 0.25rem solid var(--blockquote-border-color);
footer {
margin-top: calc(var(--typography-spacing-vertical) * 0.5);

4
scss/layout/_container.scss
View file

@ -1,6 +1,5 @@
@if ($enable-class-container and $enable-classes) {
/**
/**
* Container
*/
@ -14,7 +13,6 @@
}
.container {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");

3
scss/layout/_document.scss
View file

@ -3,7 +3,6 @@
* Content-box & Responsive typography
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -32,7 +31,7 @@
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
html {
-webkit-text-size-adjust: 100%; // 2
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 3
tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6
background-color: var(--background-color);

3
scss/layout/_grid.scss
View file

@ -1,6 +1,5 @@
@if $enable-classes {
/**
/**
* Grid
* Minimal grid system with auto-layout columns
*/

2
scss/layout/_scroller.scss
View file

@ -5,7 +5,7 @@
// Wrapper to make any content responsive across all viewports
figure {
display: block;
margin:0;
margin: 0;
padding: 0;
overflow-x: auto;

3
scss/layout/_sectioning.scss
View file

@ -3,7 +3,6 @@
* Container and responsive spacings for header, main, footer
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
@ -14,7 +13,6 @@ main {
display: block;
}
// Pico
// ––––––––––––––––––––
@ -35,7 +33,6 @@ body {
// Centered viewport
@if $enable-viewport {
@if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");

1
scss/pico.classless.scss
View file

@ -7,7 +7,6 @@ $enable-semantic-container: true;
// Enable .classes
$enable-classes: false;
// Pico Lib
// --------------------

1
scss/pico.fluid.classless.scss
View file

@ -10,7 +10,6 @@ $enable-viewport: false;
// Enable .classes
$enable-classes: false;
// Pico Lib
// --------------------

46
scss/pico.scss
View file

@ -10,32 +10,32 @@
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/progress"; // progress
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/progress"; // progress
// Utilities
@import "utilities/loading"; // aria-busy=true
@import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion
@import "utilities/loading"; // aria-busy=true
@import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

40
scss/pico.slim.scss
View file

@ -6,7 +6,6 @@
* You can export only the modules you need
*/
// Config
// --------------------
@ -19,7 +18,6 @@ $enable-transitions: false;
// Enable overriding with !important
$enable-important: false;
// Pico Lib
// --------------------
@ -30,32 +28,20 @@ $enable-important: false;
@import "themes/default";
// Layout
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
@import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid
@import "layout/section"; // section
@import "layout/grid"; // .grid
@import "layout/scroller"; // figure
// Content
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
// @import "content/code"; // pre, code, ...
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
// @import "components/accordion"; // details, summary
// @import "components/card"; // article
// @import "components/nav"; // nav
// @import "components/progress"; // progress
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend
@import "content/table"; // table, tr, td, ...
// Utilities
// @import "utilities/loading"; // aria-busy=true
// @import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

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

@ -1,6 +1,6 @@
// Navy-Grey
$grey-hue: 205 !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-50: hsl($grey-hue, 20%, 94%) !default;
$grey-100: hsl($grey-hue, 18%, 86%) !default;
$grey-200: hsl($grey-hue, 16%, 77%) !default;
$grey-300: hsl($grey-hue, 14%, 68%) !default;
@ -13,53 +13,53 @@ $grey-900: hsl($grey-hue, 30%, 15%) !default;
// Light Blue
$primary-hue: 195 !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
$primary-300: hsl($primary-hue, 84%, 68%) !default;
$primary-400: hsl($primary-hue, 82%, 59%) !default;
$primary-500: hsl($primary-hue, 80%, 50%) !default;
$primary-600: hsl($primary-hue, 85%, 41%) !default;
$primary-700: hsl($primary-hue, 90%, 32%) !default;
$primary-800: hsl($primary-hue, 95%, 23%) !default;
$primary-50: hsl($primary-hue, 90%, 94%) !default;
$primary-100: hsl($primary-hue, 88%, 86%) !default;
$primary-200: hsl($primary-hue, 86%, 77%) !default;
$primary-300: hsl($primary-hue, 84%, 68%) !default;
$primary-400: hsl($primary-hue, 82%, 59%) !default;
$primary-500: hsl($primary-hue, 80%, 50%) !default;
$primary-600: hsl($primary-hue, 85%, 41%) !default;
$primary-700: hsl($primary-hue, 90%, 32%) !default;
$primary-800: hsl($primary-hue, 95%, 23%) !default;
$primary-900: hsl($primary-hue, 100%, 15%) !default;
// Black & White
$black: #000 !default;
$white: #FFF !default;
$white: #fff !default;
// Amber
$amber-50: #FFF8E1 !default;
$amber-100: #FFECB3 !default;
$amber-200: #FFE082 !default;
$amber-300: #FFD54F !default;
$amber-400: #FFCA28 !default;
$amber-500: #FFC107 !default;
$amber-600: #FFB300 !default;
$amber-700: #FFA000 !default;
$amber-800: #FF8F00 !default;
$amber-900: #FF6F00 !default;
$amber-50: #fff8e1 !default;
$amber-100: #ffecb3 !default;
$amber-200: #ffe082 !default;
$amber-300: #ffd54f !default;
$amber-400: #ffca28 !default;
$amber-500: #ffc107 !default;
$amber-600: #ffb300 !default;
$amber-700: #ffa000 !default;
$amber-800: #ff8f00 !default;
$amber-900: #ff6f00 !default;
// Green
$green-50: #E8F5E9 !default;
$green-100: #C8E6C9 !default;
$green-200: #A5D6A7 !default;
$green-300: #81C784 !default;
$green-400: #66BB6A !default;
$green-500: #4CAF50 !default;
$green-600: #43A047 !default;
$green-700: #388E3C !default;
$green-800: #2E7D32 !default;
$green-900: #1B5E20 !default;
$green-50: #e8f5e9 !default;
$green-100: #c8e6c9 !default;
$green-200: #a5d6a7 !default;
$green-300: #81c784 !default;
$green-400: #66bb6a !default;
$green-500: #4caf50 !default;
$green-600: #43a047 !default;
$green-700: #388e3c !default;
$green-800: #2e7d32 !default;
$green-900: #1b5e20 !default;
// Red
$red-50: #FFEBEE !default;
$red-100: #FFCDD2 !default;
$red-200: #EF9A9A !default;
$red-300: #E57373 !default;
$red-400: #EF5350 !default;
$red-500: #F44336 !default;
$red-600: #E53935 !default;
$red-700: #D32F2F !default;
$red-800: #C62828 !default;
$red-900: #B71C1C !default;
$red-50: #ffebee !default;
$red-100: #ffcdd2 !default;
$red-200: #ef9a9a !default;
$red-300: #e57373 !default;
$red-400: #ef5350 !default;
$red-500: #f44336 !default;
$red-600: #e53935 !default;
$red-700: #d32f2f !default;
$red-800: #c62828 !default;
$red-900: #b71c1c !default;

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

@ -1,6 +1,5 @@
// Default: Dark theme
@mixin dark {
// Document
color-scheme: dark;
--background-color: #{mix($black, $grey-900, 37.5%)};
@ -21,19 +20,19 @@
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)};
--primary-focus: #{rgba($primary-600, 0.25)};
--primary-inverse: #{$white};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-500, .25)};
--secondary-focus: #{rgba($grey-500, 0.25)};
--secondary-inverse: #{$white};
// Contrast colors
--contrast: #{$grey-50};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-500, .25)};
--contrast-focus: #{rgba($grey-500, 0.25)};
--contrast-inverse: #{$black};
// Highlighted text (<mark>)
@ -64,7 +63,7 @@
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700};
--form-element-disabled-opacity: .5;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800};
--form-element-valid-border-color: #{$green-800};
@ -85,7 +84,7 @@
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: #{rgba($grey-500, .05)};
--table-row-stripped-background-color: #{rgba($grey-500, 0.05)};
// Code
--code-background-color: #{mix($black, $grey-900, 12.5%)};
@ -94,7 +93,7 @@
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #{hsl(330, 30%, 50%)};
--code-property-color: #{hsl(185, 30%, 50%)};
--code-value-color: #{hsl(40, 10%, 50%)};
--code-value-color: #{hsl(40, 10%, 50%)};
--code-comment-color: #{mix($grey-700, $grey-600)};
// Accordion (<details>)
@ -106,7 +105,9 @@
// Card (<article>)
--card-background-color: #{mix($black, $grey-900, 25%)};
--card-border-color: #{mix($black, $grey-900, 37.5%)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)},
0 0.125rem 2rem #{rgba($black, 0.12)},
0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Progress
@ -114,19 +115,19 @@
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-300, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-800, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .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-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-800, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-900, .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");
}

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

@ -1,7 +1,6 @@
// Default: Light theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
// Document
color-scheme: light;
--background-color: #{$white};
@ -22,19 +21,19 @@
// Primary colors
--primary: #{$primary-600};
--primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, .125)};
--primary-focus: #{rgba($primary-600, 0.125)};
--primary-inverse: #{$white};
// Secondary colors
--secondary: #{$grey-600};
--secondary-hover: #{$grey-700};
--secondary-focus: #{rgba($grey-600, .125)};
--secondary-focus: #{rgba($grey-600, 0.125)};
--secondary-inverse: #{$white};
// Contrast colors
--contrast: #{$grey-900};
--contrast-hover: #{$black};
--contrast-focus: #{rgba($grey-600, .125)};
--contrast-focus: #{rgba($grey-600, 0.125)};
--contrast-inverse: #{$white};
// Highlighted text (<mark>)
@ -65,7 +64,7 @@
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300};
--form-element-disabled-opacity: .5;
--form-element-disabled-opacity: 0.5;
--form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-900};
--form-element-valid-border-color: #{$green-700};
@ -86,7 +85,7 @@
// Table
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color:#{mix($grey-50, $white)};
--table-row-stripped-background-color: #{mix($grey-50, $white)};
// Code
--code-background-color: #{$grey-50};
@ -95,7 +94,7 @@
--code-kbd-color: var(--contrast-inverse);
--code-tag-color: #{hsl(330, 40%, 50%)};
--code-property-color: #{hsl(185, 40%, 40%)};
--code-value-color: #{hsl(40, 20%, 50%)};
--code-value-color: #{hsl(40, 20%, 50%)};
--code-comment-color: #{$grey-300};
// Accordion (<details>)
@ -106,7 +105,9 @@
// Card (<article>)
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-box-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)},
0 0.125rem 2rem #{rgba($grey-900, 0.08)},
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Progress
@ -114,19 +115,19 @@
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
--loading-spinner-opacity: 0.5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
// Icons
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .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-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-700, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .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-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-700, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-800, .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");
}

19
scss/themes/default/_styles.scss
View file

@ -1,15 +1,15 @@
// Commons Styles
:root {
// Typography
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
"Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
--line-height: 1.5;
--font-weight: 400;
--font-size: 16px;
// Responsive typography
@if $enable-responsive-typography {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--font-size: 17px;
@ -36,7 +36,7 @@
}
// Borders
--border-radius: .25rem;
--border-radius: 0.25rem;
--border-width: 1px;
--outline-width: 3px;
@ -55,22 +55,20 @@
--grid-spacing-horizontal: var(--spacing);
// Spacings for form elements and button
--form-element-spacing-vertical: .75rem;
--form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem;
// Transitions
--transition: .2s ease-in-out;
--transition: 0.2s ease-in-out;
}
// Responsives spacings
@if $enable-responsive-spacings {
// Sectionning
body > header,
body > main,
body > footer,
section {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
@ -98,7 +96,6 @@
// Card (<article>)
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
@ -203,7 +200,9 @@ pre,
code,
kbd,
samp {
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
"Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
kbd {