mirror of
https://github.com/picocss/pico.git
synced 2025-04-20 08:45:06 -04:00
CSS Vars refactoring
This commit is contained in:
Lucas Larroche
parent
14460576bf
commit
d12af72cab
64 changed files with 4878 additions and 4948 deletions
|
|
@ -1,6 +1,6 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2019-2020 Pico
|
||||
Copyright (c) 2019-2021 Pico
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
4
css/pico.classless.min.css
vendored
4
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
1850
css/pico.css
1850
css/pico.css
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
4
css/pico.fluid.classless.min.css
vendored
4
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
4
css/pico.min.css
vendored
4
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
1163
css/pico.slim.css
1163
css/pico.slim.css
File diff suppressed because it is too large
Load diff
4
css/pico.slim.min.css
vendored
4
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2,228 +2,433 @@
|
|||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--titles-font: var(--text-font);
|
||||
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--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;
|
||||
--text-weight: 400;
|
||||
--titles-weight: 700;
|
||||
--form-element-weight: var(--text-weight);
|
||||
--buttons-weight: var(--text-weight);
|
||||
--code-weight: var(--text-weight);
|
||||
--base-font-xs: 16px;
|
||||
--base-font-sm: 17px;
|
||||
--base-font-md: 18px;
|
||||
--base-font-lg: 19px;
|
||||
--base-font-xl: 20px;
|
||||
--h1-size: 2rem;
|
||||
--h2-size: 1.75rem;
|
||||
--h3-size: 1.5rem;
|
||||
--h4-size: 1.25rem;
|
||||
--h5-size: 1.125rem;
|
||||
--h6-size: 1rem;
|
||||
--block-round: .25rem;
|
||||
--form-element-border-width: 1px;
|
||||
--form-element-outline-width: 3px;
|
||||
--checkbox-radio-border-width: 2px;
|
||||
--switch-border-width: 3px;
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
--border-radius: .25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
--spacing: 1rem;
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--button-round: var(--block-round);
|
||||
--button-border-width: var(--form-element-border-width);
|
||||
--button-outline-width: var(--form-element-outline-width);
|
||||
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||
--spacing-gutter: 1rem;
|
||||
--spacing-block: 2rem;
|
||||
--spacing-factor-xs: 1;
|
||||
--spacing-factor-sm: 1.25;
|
||||
--spacing-factor-md: 1.5;
|
||||
--spacing-factor-lg: 1.75;
|
||||
--spacing-factor-xl: 2;
|
||||
--spacing-typography: 1.5rem;
|
||||
--spacing-form-element: .25rem;
|
||||
--transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
:root {
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
@media (min-width: 576px) {
|
||||
:root {
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
:root {
|
||||
--font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
:root {
|
||||
--font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body > header,
|
||||
body > main,
|
||||
body > footer,
|
||||
section {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
article {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
--text-decoration: none;
|
||||
}
|
||||
|
||||
a.secondary, a.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
--font-size: 0.875rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 2.625rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 1.874rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
table thead th,
|
||||
table thead td {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
table :not(thead) td {
|
||||
--font-size: 0.875rem;
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--background: #FFF;
|
||||
--text: #415462;
|
||||
--h1: #1b2832;
|
||||
--h2: #2c3d49;
|
||||
--h3: #415462;
|
||||
--h4: #596b78;
|
||||
--h5: #73828c;
|
||||
--h6: #8a99a3;
|
||||
color-scheme: light;
|
||||
--background-color: #FFF;
|
||||
--color: #415462;
|
||||
--h1-color: #1b2832;
|
||||
--h2-color: #23333e;
|
||||
--h3-color: #2c3d49;
|
||||
--h4-color: #374956;
|
||||
--h5-color: #415462;
|
||||
--h6-color: #4d606d;
|
||||
--muted-color: #73828c;
|
||||
--muted-border-color: #edf0f3;
|
||||
--primary: #1095c1;
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #08769b;
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #73828c;
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #415462;
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||
--secondary-focus: rgba(89, 107, 120, 0.125);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #2c3d49;
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast-hover: #0d1419;
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: rgba(115, 130, 140, 0.125);
|
||||
--contrast: #1b2832;
|
||||
--contrast-hover: #000;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.125);
|
||||
--contrast-inverse: #FFF;
|
||||
--input-background: #FFF;
|
||||
--input-border: #c8d1d8;
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--valid: #288a6a;
|
||||
--invalid: #b94646;
|
||||
--mark: rgba(255, 223, 128, 0.33);
|
||||
--mark-text: #2c3d49;
|
||||
--muted-text: #7e8d98;
|
||||
--muted-background: #edf0f3;
|
||||
--muted-border: #edf0f3;
|
||||
--card-background: #FFF;
|
||||
--card-sections: #f3f5f7;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||
--code-background: #f3f5f7;
|
||||
--code-inlined: #edf0f3;
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #b34d80;
|
||||
--code-color-3: #3d888f;
|
||||
--code-color-4: #998866;
|
||||
--code-color-5: #96a4ae;
|
||||
--table-border: rgba(237, 240, 243, 0.75);
|
||||
--table-stripping: rgba(115, 130, 140, 0.075);
|
||||
--mark-background-color: #fff2ca;
|
||||
--mark-color: #543a25;
|
||||
--ins-color: #388E3C;
|
||||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #a2afb9;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #d5dce2;
|
||||
--form-element-disabled-border-color: #a2afb9;
|
||||
--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);
|
||||
--range-border-color: #d5dce2;
|
||||
--range-active-border-color: #bbc6ce;
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--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;
|
||||
--code-background-color: #edf0f3;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #b34d80;
|
||||
--code-property-color: #3d888f;
|
||||
--code-value-color: #998866;
|
||||
--code-comment-color: #a2afb9;
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: var(--background-color);
|
||||
--card-border-color: var(--muted-border-color);
|
||||
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||
--card-sectionning-background-color: #fafbfc;
|
||||
--progress-background-color: #d5dce2;
|
||||
--progress-color: var(--primary);
|
||||
--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");
|
||||
--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(65, 84, 98, 0.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(65, 84, 98, 0.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(65, 84, 98, 0.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(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
color-scheme: dark;
|
||||
--background-color: #11191f;
|
||||
--color: #bbc6ce;
|
||||
--h1-color: #edf0f3;
|
||||
--h2-color: #e1e6ea;
|
||||
--h3-color: #d5dce2;
|
||||
--h4-color: #c8d1d8;
|
||||
--h5-color: #bbc6ce;
|
||||
--h6-color: #aebbc3;
|
||||
--muted-color: #73828c;
|
||||
--muted-border-color: #1f2d38;
|
||||
--primary: #1095c1;
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast: #edf0f3;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.1875);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #23333e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: rgba(115, 130, 140, 0.075);
|
||||
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||
--contrast-inverse: #000;
|
||||
--mark-background-color: #d0c284;
|
||||
--mark-color: #11191f;
|
||||
--ins-color: #388E3C;
|
||||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
--form-element-invalid-active-border-color: #C62828;
|
||||
--form-element-valid-border-color: #2E7D32;
|
||||
--form-element-valid-active-border-color: #388E3C;
|
||||
--switch-background-color: #374956;
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--range-border-color: #23333e;
|
||||
--range-active-border-color: #2c3d49;
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--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: rgba(115, 130, 140, 0.05);
|
||||
--code-background-color: #17232c;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #a65980;
|
||||
--code-property-color: #599fa6;
|
||||
--code-value-color: #8c8473;
|
||||
--code-comment-color: #4d606d;
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e25;
|
||||
--card-border-color: #11191f;
|
||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||
--card-sectionning-background-color: #17232c;
|
||||
--progress-background-color: #23333e;
|
||||
--progress-color: var(--primary);
|
||||
--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");
|
||||
--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(162, 175, 185, 0.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(162, 175, 185, 0.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(162, 175, 185, 0.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(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
[data-theme="dark"] :root:not([data-theme="light"]) {
|
||||
color-scheme: dark;
|
||||
--background-color: #11191f;
|
||||
--color: #bbc6ce;
|
||||
--h1-color: #edf0f3;
|
||||
--h2-color: #e1e6ea;
|
||||
--h3-color: #d5dce2;
|
||||
--h4-color: #c8d1d8;
|
||||
--h5-color: #bbc6ce;
|
||||
--h6-color: #aebbc3;
|
||||
--muted-color: #73828c;
|
||||
--muted-border-color: #1f2d38;
|
||||
--primary: #1095c1;
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-focus: rgba(115, 130, 140, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast: #edf0f3;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.1875);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #23333e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: rgba(115, 130, 140, 0.075);
|
||||
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||
--contrast-focus: rgba(115, 130, 140, 0.25);
|
||||
--contrast-inverse: #000;
|
||||
--mark-background-color: #d0c284;
|
||||
--mark-color: #11191f;
|
||||
--ins-color: #388E3C;
|
||||
--del-color: #C62828;
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
--form-element-background-color: #11191f;
|
||||
--form-element-border-color: #374956;
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #2c3d49;
|
||||
--form-element-disabled-border-color: #415462;
|
||||
--form-element-invalid-border-color: #B71C1C;
|
||||
--form-element-invalid-active-border-color: #C62828;
|
||||
--form-element-valid-border-color: #2E7D32;
|
||||
--form-element-valid-active-border-color: #388E3C;
|
||||
--switch-background-color: #374956;
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
--range-border-color: #23333e;
|
||||
--range-active-border-color: #2c3d49;
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--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: rgba(115, 130, 140, 0.05);
|
||||
--code-background-color: #17232c;
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--code-kbd-color: var(--contrast-inverse);
|
||||
--code-tag-color: #a65980;
|
||||
--code-property-color: #599fa6;
|
||||
--code-value-color: #8c8473;
|
||||
--code-comment-color: #4d606d;
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
--card-background-color: #141e25;
|
||||
--card-border-color: #11191f;
|
||||
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||
--card-sectionning-background-color: #17232c;
|
||||
--progress-background-color: #23333e;
|
||||
--progress-color: var(--primary);
|
||||
--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");
|
||||
--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(162, 175, 185, 0.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(162, 175, 185, 0.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(162, 175, 185, 0.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(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
|
|||
2
css/themes/default.min.css
vendored
2
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -12,20 +12,29 @@
|
|||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--nav-background: rgba(255, 255, 255, 0.7);
|
||||
--nav-border: rgba(115, 130, 140, 0.2);
|
||||
--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;
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--nav-background: rgba(16, 24, 30, 0.8);
|
||||
--nav-border: rgba(115, 130, 140, 0.2);
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background-color: rgba(16, 24, 30, 0.8);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0d1419;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background: rgba(16, 24, 30, 0.8);
|
||||
--nav-border: rgba(115, 130, 140, 0.2);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0d1419;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -39,72 +48,61 @@ html {
|
|||
* Docs: Main (Grid)
|
||||
*/
|
||||
body > main {
|
||||
padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > main {
|
||||
padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body > main {
|
||||
padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
|
||||
}
|
||||
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body > main {
|
||||
grid-column-gap: calc(var(--spacing-gutter) * 4);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body > main {
|
||||
padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
body > main > * {
|
||||
body > main > aside,
|
||||
body > main div[role="document"] {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
div[role="document"] > section::before {
|
||||
display: block;
|
||||
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem);
|
||||
height: calc(2rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-2rem - 3.5rem + .5rem);
|
||||
content: '';
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem);
|
||||
height: calc(2.5rem + 3.5rem - .5rem);
|
||||
height: calc(-2.5rem - 3.5rem + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(1rem * var(--spacing-factor-md) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem);
|
||||
height: calc(3rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-3rem - 3.5rem + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem);
|
||||
height: calc(3.5rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-3.5rem - 3.5rem + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
div[role="document"] > section::before {
|
||||
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem);
|
||||
height: calc(4rem + 3.5rem - .5rem);
|
||||
margin-top: calc(-4rem - 3.5rem + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,11 +117,6 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
|
|||
content: '';
|
||||
}
|
||||
|
||||
form.grid > input:not([type=checkbox]):not([type=radio]),
|
||||
form.grid > button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1rem;
|
||||
}
|
||||
|
|
@ -133,11 +126,11 @@ svg {
|
|||
*/
|
||||
main > aside nav {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-block);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
|
||||
main > aside nav h1 {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
|
@ -184,7 +177,7 @@ main > aside details {
|
|||
}
|
||||
|
||||
main > aside details summary {
|
||||
color: var(--h3);
|
||||
color: var(--h3-color);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -195,7 +188,7 @@ main > aside details summary::after {
|
|||
}
|
||||
|
||||
main > aside details[open] summary {
|
||||
color: var(--h3);
|
||||
color: var(--h3-color);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -217,8 +210,8 @@ main > aside details[open] summary {
|
|||
#customization figure {
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
border-top-right-radius: var(--block-round);
|
||||
border-top-left-radius: var(--block-round);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -260,10 +253,14 @@ main > aside details[open] summary {
|
|||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
#grids {
|
||||
--grid-spacing-vertical: 1rem;
|
||||
}
|
||||
|
||||
#grids button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -283,13 +280,15 @@ main > aside details[open] summary {
|
|||
}
|
||||
|
||||
#grids .grid > * {
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
background: var(--code-background);
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
background: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
text-align: center;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
#grids details {
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
#grids details svg {
|
||||
|
|
@ -304,12 +303,12 @@ main > aside details[open] summary {
|
|||
* Docs: Typography
|
||||
*/
|
||||
section > hgroup {
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
margin-right: calc(var(--spacing-typography) / 4);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
[role=document] section > h1,
|
||||
|
|
@ -321,28 +320,15 @@ a[role=button] {
|
|||
/**
|
||||
* Docs: Code
|
||||
*/
|
||||
@media (min-width: 576px) {
|
||||
pre {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
code {
|
||||
--font-weight: 400;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
pre {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
pre {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
pre {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
section > pre {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
[data-theme="invalid"],
|
||||
|
|
@ -367,8 +353,8 @@ a[role=button] {
|
|||
@media (min-width: 992px) {
|
||||
[data-theme="invalid"]:before,
|
||||
[data-theme="valid"]:before {
|
||||
top: var(--spacing-gutter);
|
||||
right: var(--spacing-gutter);
|
||||
top: var(--spacing);
|
||||
right: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -378,12 +364,12 @@ a[role=button] {
|
|||
}
|
||||
|
||||
[data-theme="invalid"]:before {
|
||||
background: var(--invalid);
|
||||
background: var(--invalid-color);
|
||||
content: 'Not so great';
|
||||
}
|
||||
|
||||
[data-theme="valid"]:before {
|
||||
background: var(--valid);
|
||||
background: var(--valid-color);
|
||||
content: 'Great';
|
||||
}
|
||||
|
||||
|
|
@ -398,8 +384,8 @@ body > nav {
|
|||
right: 0;
|
||||
left: 0;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: var(--nav-background);
|
||||
box-shadow: 0px 1px 0 var(--nav-border);
|
||||
background-color: var(--nav-background-color);
|
||||
box-shadow: 0px 1px 0 var(--nav-border-color);
|
||||
}
|
||||
|
||||
body > nav a {
|
||||
|
|
@ -413,10 +399,10 @@ body > nav svg {
|
|||
body > nav ul:first-of-type li:first-of-type a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin-left: calc(var(--spacing-gutter) * -1);
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
padding: 0;
|
||||
background: var(--h1);
|
||||
color: var(--background);
|
||||
background: var(--h1-color);
|
||||
color: var(--nav-logo-color);
|
||||
}
|
||||
|
||||
body > nav ul:first-of-type li:first-of-type a svg {
|
||||
|
|
@ -425,8 +411,8 @@ body > nav ul:first-of-type li:first-of-type a svg {
|
|||
|
||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: var(--spacing-gutter);
|
||||
color: var(--h1);
|
||||
margin-left: var(--spacing);
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
|
@ -440,13 +426,13 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
*/
|
||||
.switcher {
|
||||
position: fixed;
|
||||
right: calc(var(--spacing-gutter) / 2);
|
||||
bottom: var(--spacing-gutter);
|
||||
right: calc(var(--spacing) / 2);
|
||||
bottom: var(--spacing);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: .75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-shadow);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -484,16 +470,16 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
|
||||
.switcher:hover i {
|
||||
max-width: 100%;
|
||||
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
|
||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||
transition: max-width var(--transition), padding var(--transition);
|
||||
}
|
||||
|
||||
.switcher:focus {
|
||||
box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.switcher {
|
||||
right: var(--spacing-gutter);
|
||||
right: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
35
docs/css/themes/docs.css
Normal file
35
docs/css/themes/docs.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* Theme: Additions for docs
|
||||
*/
|
||||
:root {
|
||||
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--invalid-color: #C62828;
|
||||
--valid-color: #388E3C;
|
||||
--nav-background-color: rgba(255, 255, 255, 0.7);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #FFF;
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background-color: rgba(16, 24, 30, 0.8);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0d1419;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--invalid-color: rgba(183, 28, 28, 0.5);
|
||||
--valid-color: rgba(46, 125, 50, 0.5);
|
||||
--nav-background: rgba(16, 24, 30, 0.8);
|
||||
--nav-border-color: rgba(115, 130, 140, 0.2);
|
||||
--nav-logo-color: #0d1419;
|
||||
}
|
||||
164
docs/index.html
164
docs/index.html
|
|
@ -191,36 +191,17 @@
|
|||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</article>
|
||||
<p>There are 2 ways to customize your version of Pico.css:</p>
|
||||
<h4>Importing SASS</h4>
|
||||
<p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
|
||||
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
|
||||
|
||||
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||
|
||||
<em>// Override default variables</em>
|
||||
<i>$primary-500</i>: <u class="c500">...</u>;
|
||||
<i>$primary-600</i>: <u class="c600">...</u>;
|
||||
<i>$primary-700</i>: <u class="c700">...</u>;
|
||||
|
||||
<em>// Import full Pico source code</em>
|
||||
<b>@import</b> <u>"path/pico"</u>;</code></pre>
|
||||
|
||||
<p>Alternatively, you can create a custom theme and import it in your project with the components you need.</p>
|
||||
|
||||
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||
|
||||
<em>// Custom theme</em>
|
||||
<b>@import</b> <u>"path/themes/custom"</u>;
|
||||
|
||||
<em>// Import needed components</em>
|
||||
<b>@import</b> <u>"path/layout/document"</u>;
|
||||
<b>@import</b> <u>"path/layout/sectioning"</u>;
|
||||
<em>...</em>
|
||||
<pre><code><em>// Simplified example</em>
|
||||
<b>:root</b> {
|
||||
<i>--primary</i>: <u class="c500">...</u>;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||
</article>
|
||||
|
||||
|
||||
<p>There are 2 ways to customize your version of Pico.css:</p>
|
||||
<h4>Overriding CSS variables</h4>
|
||||
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
|
||||
|
||||
|
|
@ -256,15 +237,42 @@
|
|||
|
||||
<em>/* <span class="name"></span>(Common styles) */</em>
|
||||
<b>:root</b> {
|
||||
<i>--primary-border</i>: <u>var</u>(<i>--primary</i>);
|
||||
<i>--primary-hover-border</i>: <u>var</u>(<i>--primary-hover</i>);
|
||||
<i>--input-hover-border</i>: <u>var</u>(<i>--primary</i>);
|
||||
<i>--input-focus</i>: <u>var</u>(<i>--primary-focus</i>);
|
||||
<i>--input-inverse</i>: <u>var</u>(<i>--primary-inverse</i>);
|
||||
<i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>);
|
||||
<i>--form-element-focus:</i>: <u>var</u>(<i>--primary-focus</i>);
|
||||
<i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>);
|
||||
<i>--switch-checked-background-color:</i>: <u>var</u>(<i>--primary</i>);
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/default.css</a></p>
|
||||
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
|
||||
<h4>Importing Pico SASS library</h4>
|
||||
<p>It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
|
||||
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
|
||||
|
||||
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||
|
||||
<em>// Override default variables</em>
|
||||
<i>$primary-500</i>: <u class="c500">...</u>;
|
||||
<i>$primary-600</i>: <u class="c600">...</u>;
|
||||
<i>$primary-700</i>: <u class="c700">...</u>;
|
||||
|
||||
<em>// Import full Pico source code</em>
|
||||
<b>@import</b> <u>"path/pico"</u>;</code></pre>
|
||||
|
||||
<p>Alternatively, you can create a custom theme and import it in your project with the components you need.</p>
|
||||
|
||||
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||
|
||||
<em>// Custom theme</em>
|
||||
<b>@import</b> <u>"path/themes/custom"</u>;
|
||||
|
||||
<em>// Import needed components</em>
|
||||
<b>@import</b> <u>"path/layout/document"</u>;
|
||||
<b>@import</b> <u>"path/layout/sectioning"</u>;
|
||||
<em>...</em>
|
||||
</code></pre>
|
||||
|
||||
<p>This allows to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||
</section><!-- ./ Docs: Customization -->
|
||||
|
||||
|
||||
|
|
@ -313,19 +321,19 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<th>Breakpoint</th>
|
||||
<td><576<small>px</small></td>
|
||||
<td>≥576<small>px</small></td>
|
||||
<td>≥768<small>px</small></td>
|
||||
<td>≥992<small>px</small></td>
|
||||
<td>≥1200<small>px</small></td>
|
||||
<td><576px</td>
|
||||
<td>≥576px</td>
|
||||
<td>≥768px</td>
|
||||
<td>≥992px</td>
|
||||
<td>≥1200px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Viewport</th>
|
||||
<td>None <small>(auto)</small></td>
|
||||
<td>540<small>px</small></td>
|
||||
<td>720<small>px</small></td>
|
||||
<td>960<small>px</small></td>
|
||||
<td>1140<small>px</small></td>
|
||||
<td>540px</td>
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -469,59 +477,59 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<th>Base font</th>
|
||||
<td>16<small>px</small></td>
|
||||
<td>17<small>px</small></td>
|
||||
<td>18<small>px</small></td>
|
||||
<td>19<small>px</small></td>
|
||||
<td>20<small>px</small></td>
|
||||
<td>16px</td>
|
||||
<td>17px</td>
|
||||
<td>18px</td>
|
||||
<td>19px</td>
|
||||
<td>20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h1</th>
|
||||
<td>32<small>px</small></td>
|
||||
<td>34<small>px</small></td>
|
||||
<td>36<small>px</small></td>
|
||||
<td>38<small>px</small></td>
|
||||
<td>40<small>px</small></td>
|
||||
<td>32px</td>
|
||||
<td>34px</td>
|
||||
<td>36px</td>
|
||||
<td>38px</td>
|
||||
<td>40px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h2</th>
|
||||
<td>28<small>px</small></td>
|
||||
<td>29<small>px</small></td>
|
||||
<td>31.5<small>px</small></td>
|
||||
<td>33.25<small>px</small></td>
|
||||
<td>35<small>px</small></td>
|
||||
<td>28px</td>
|
||||
<td>29px</td>
|
||||
<td>31.5px</td>
|
||||
<td>33.25px</td>
|
||||
<td>35px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h3</th>
|
||||
<td>24<small>px</small></td>
|
||||
<td>25.5<small>px</small></td>
|
||||
<td>27<small>px</small></td>
|
||||
<td>28.5<small>px</small></td>
|
||||
<td>30<small>px</small></td>
|
||||
<td>24px</td>
|
||||
<td>25.5px</td>
|
||||
<td>27px</td>
|
||||
<td>28.5px</td>
|
||||
<td>30px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h4</th>
|
||||
<td>20<small>px</small></td>
|
||||
<td>21.25<small>px</small></td>
|
||||
<td>22.5<small>px</small></td>
|
||||
<td>23.75<small>px</small></td>
|
||||
<td>25<small>px</small></td>
|
||||
<td>20px</td>
|
||||
<td>21.25px</td>
|
||||
<td>22.5px</td>
|
||||
<td>23.75px</td>
|
||||
<td>25px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h5</th>
|
||||
<td>18<small>px</small></td>
|
||||
<td>19.125<small>px</small></td>
|
||||
<td>20.25<small>px</small></td>
|
||||
<td>21.375<small>px</small></td>
|
||||
<td>22.5<small>px</small></td>
|
||||
<td>18px</td>
|
||||
<td>19.125px</td>
|
||||
<td>20.25px</td>
|
||||
<td>21.375px</td>
|
||||
<td>22.5px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h6</th>
|
||||
<td>16<small>px</small></td>
|
||||
<td>17<small>px</small></td>
|
||||
<td>18<small>px</small></td>
|
||||
<td>19<small>px</small></td>
|
||||
<td>20<small>px</small></td>
|
||||
<td>16px</td>
|
||||
<td>17px</td>
|
||||
<td>18px</td>
|
||||
<td>19px</td>
|
||||
<td>20px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -543,7 +551,7 @@
|
|||
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||
|
||||
</article>
|
||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
|
||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
||||
<article aria-label="Hgroup example">
|
||||
<hgroup>
|
||||
<h2>Heading 2</h2>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Add some magic to Pico docs
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// @append src/aside.js
|
||||
|
|
|
|||
2
docs/js/pico.docs.min.js
vendored
2
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -2,7 +2,7 @@
|
|||
* Aside adjustment
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Color Picker
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
|
@ -291,19 +291,6 @@
|
|||
"a700": "#dd2c00",
|
||||
"inverse": "#FFF"
|
||||
},
|
||||
/*"brown": {
|
||||
"50": "#efebe9",
|
||||
"100": "#d7ccc8",
|
||||
"200": "#bcaaa4",
|
||||
"300": "#a1887f",
|
||||
"400": "#8d6e63",
|
||||
"500": "#795548",
|
||||
"600": "#6d4c41",
|
||||
"700": "#5d4037",
|
||||
"800": "#4e342e",
|
||||
"900": "#3e2723",
|
||||
"inverse": "#FFF"
|
||||
},*/
|
||||
"grey": {
|
||||
"50": "#fafafa",
|
||||
"100": "#f5f5f5",
|
||||
|
|
@ -458,7 +445,7 @@
|
|||
|
||||
// Update CSS Style
|
||||
var generatedStyles = '[data-theme="generated"] {'
|
||||
+ '--h4:' + data[700] + ';'
|
||||
+ '--h4-color:' + data[700] + ';'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--primary-hover:' + data[700] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
|
||||
|
|
@ -467,7 +454,7 @@
|
|||
|
||||
+ '@media only screen and (prefers-color-scheme: dark) {'
|
||||
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
||||
+ '--h4:' + data[400] + ';'
|
||||
+ '--h4-color:' + data[400] + ';'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--primary-hover:' + data[500] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||
|
|
@ -476,7 +463,7 @@
|
|||
+ '}'
|
||||
|
||||
+ '[data-theme="dark"] [data-theme="generated"] {'
|
||||
+ '--h4:' + data[500] + ';'
|
||||
+ '--h4-color:' + data[500] + ';'
|
||||
+ '--primary:' + data[600] + ';'
|
||||
+ '--primary-hover:' + data[500] + ';'
|
||||
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||
|
|
@ -484,11 +471,10 @@
|
|||
+ '}'
|
||||
|
||||
+ '[data-theme="generated"] {'
|
||||
+ '--primary-border: var(--primary);'
|
||||
+ '--primary-hover-border: var(--primary-hover);'
|
||||
+ '--input-hover-border: var(--primary);'
|
||||
+ '--input-focus: var(--primary-focus);'
|
||||
+ '--input-inverse: var(--primary-inverse);'
|
||||
+ '--form-element-active-border-color: var(--primary);'
|
||||
+ '--form-element-focus: var(--primary-focus);'
|
||||
+ '--switch-color: var(--primary-inverse);'
|
||||
+ '--switch-checked-background-color: var(--primary);'
|
||||
+ '}';
|
||||
|
||||
// Insert CSS Styles
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Grid Interaction
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* Require `most-visible.js` from https://github.com/andyexeter/most-visible
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Theme Switcher
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ body > nav {
|
|||
right: 0;
|
||||
left: 0;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: var(--nav-background);
|
||||
box-shadow: 0px 1px 0 var(--nav-border);
|
||||
background-color: var(--nav-background-color);
|
||||
box-shadow: 0px 1px 0 var(--nav-border-color);
|
||||
|
||||
a {
|
||||
border-radius: 0;
|
||||
|
|
@ -29,10 +29,10 @@ body > nav {
|
|||
a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin-left: calc(var(--spacing-gutter) * -1);
|
||||
margin-left: calc(var(--spacing) * -1);
|
||||
padding: 0;
|
||||
background: var(--h1);
|
||||
color: var(--background);
|
||||
background: var(--h1-color);
|
||||
color: var(--nav-logo-color);
|
||||
|
||||
svg {
|
||||
height: 3.5rem;
|
||||
|
|
@ -43,8 +43,8 @@ body > nav {
|
|||
// Title
|
||||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: var(--spacing-gutter);
|
||||
color: var(--h1);
|
||||
margin-left: var(--spacing);
|
||||
color: var(--h1-color);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
|
||||
.switcher {
|
||||
position: fixed;
|
||||
right: calc(var(--spacing-gutter) / 2);
|
||||
bottom: var(--spacing-gutter);
|
||||
right: calc(var(--spacing) / 2);
|
||||
bottom: var(--spacing);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: .75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-shadow);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
|
||||
|
|
@ -53,18 +53,17 @@
|
|||
|
||||
i {
|
||||
max-width: 100%;
|
||||
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
|
||||
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
|
||||
transition: max-width var(--transition),
|
||||
padding var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--card-shadow),
|
||||
0 0 0 0.2rem var(--secondary-focus);
|
||||
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
right: var(--spacing-gutter);
|
||||
right: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,40 +2,16 @@
|
|||
* Docs: Code
|
||||
*/
|
||||
|
||||
// Custom spacings for <pre> (vertically aligned with <article> content)
|
||||
pre {
|
||||
code {
|
||||
--font-weight: 400;
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
// Custom spacings for <pre> (Horizontally aligned with <article> content)
|
||||
section > pre {
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background-color: var( --card-sectionning-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
}
|
||||
|
||||
// Badge for Valid & Invalid code
|
||||
|
|
@ -57,8 +33,8 @@ pre {
|
|||
line-height: 1;
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
top: var(--spacing-gutter);
|
||||
right: var(--spacing-gutter);
|
||||
top: var(--spacing);
|
||||
right: var(--spacing);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,14 +47,14 @@ pre {
|
|||
// Color for Valid & Invalid code
|
||||
[data-theme="invalid"] {
|
||||
&:before {
|
||||
background: var(--invalid);
|
||||
background: var(--invalid-color);
|
||||
content: 'Not so great';
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="valid"] {
|
||||
&:before {
|
||||
background: var(--valid);
|
||||
background: var(--valid-color);
|
||||
content: 'Great';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
*/
|
||||
|
||||
section > hgroup {
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
margin-right: calc(var(--spacing-typography) / 4);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-right: calc(var(--typography-spacing-vertical) / 4);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
[role=document] {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ main > aside {
|
|||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-block);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
|
|
@ -55,7 +55,7 @@ main > aside {
|
|||
border-bottom: none;
|
||||
|
||||
summary {
|
||||
color: var(--h3);
|
||||
color: var(--h3-color);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -66,7 +66,7 @@ main > aside {
|
|||
}
|
||||
|
||||
&[open] summary {
|
||||
color: var(--h3);
|
||||
color: var(--h3-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
*/
|
||||
|
||||
// Docs: Themes
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#themes {
|
||||
button i {
|
||||
font-style: normal;
|
||||
|
|
@ -12,8 +10,6 @@
|
|||
}
|
||||
|
||||
// Docs: Customization
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#customization {
|
||||
|
||||
figure {
|
||||
|
|
@ -26,8 +22,8 @@
|
|||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
border-top-right-radius: var(--block-round);
|
||||
border-top-left-radius: var(--block-round);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-top-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
~ article {
|
||||
|
|
@ -75,14 +71,14 @@
|
|||
|
||||
|
||||
// Docs: Grids
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#grids {
|
||||
|
||||
--grid-spacing-vertical: 1rem;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
margin-bottom: var(--spacing);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
display: inline-block;
|
||||
|
|
@ -99,14 +95,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
background: var(--code-background);
|
||||
.grid {
|
||||
> * {
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
background: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
text-align: center;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||
|
||||
svg {
|
||||
vertical-align: bottom;
|
||||
|
|
@ -115,8 +115,6 @@
|
|||
}
|
||||
|
||||
// Docs: Forms
|
||||
// ––––––––––––––––––––
|
||||
|
||||
#forms div.grid {
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,71 +2,73 @@
|
|||
* Docs: Main (Grid)
|
||||
*/
|
||||
|
||||
// Config
|
||||
$navHeight: 3.5rem;
|
||||
|
||||
// Main grid
|
||||
body > main {
|
||||
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||||
}
|
||||
padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
grid-column-gap: calc(var(--spacing-gutter) * 4);
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
min-width: 0; // HACK for childs in overflow
|
||||
> aside,
|
||||
div[role="document"] {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Anchors hacks for internal links
|
||||
// ––––––––––––––––––––
|
||||
|
||||
div[role="document"] > section::before {
|
||||
|
||||
display: block;
|
||||
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
|
||||
height: calc(2rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-2rem - #{$navHeight} + .5rem);
|
||||
content: '';
|
||||
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
|
||||
height: calc(2.5rem + #{$navHeight} - .5rem);
|
||||
height: calc(-2.5rem - #{$navHeight} + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
|
||||
height: calc(3rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-3rem - #{$navHeight} + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
|
||||
height: calc(3.5rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
|
||||
height: calc(4rem + #{$navHeight} - .5rem);
|
||||
margin-top: calc(-4rem - #{$navHeight} + .5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// External links
|
||||
// ––––––––––––––––––––
|
||||
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
|
|
@ -78,20 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
|
|||
content: '';
|
||||
}
|
||||
|
||||
|
||||
// Form grid
|
||||
// ––––––––––––––––––––
|
||||
|
||||
form.grid {
|
||||
> input:not([type=checkbox]):not([type=radio]),
|
||||
> button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Embedded SVG
|
||||
// ––––––––––––––––––––
|
||||
svg {
|
||||
height: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,11 @@
|
|||
// Automatically enabled if user has Dark mode enabled
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
|
||||
--nav-border: #{rgba($grey-500, .2)};
|
||||
--invalid-color: #{rgba($red-900, .5)};
|
||||
--valid-color: #{rgba($green-800, .5)};
|
||||
--nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
--nav-logo-color: #{mix($black, $grey-900)};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -12,6 +15,9 @@
|
|||
// Dark theme (Forced) [Additions for docs]
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
--invalid-color: #{rgba($red-900, .5)};
|
||||
--valid-color: #{rgba($green-800, .5)};
|
||||
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
|
||||
--nav-border: #{rgba($grey-500, .2)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
--nav-logo-color: #{mix($black, $grey-900)};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// 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");
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
// Can be forced with data-theme="light"
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--nav-background: #{rgba($white, .7)};
|
||||
--nav-border: #{rgba($grey-500, .2)};
|
||||
--invalid-color: #{$red-800};
|
||||
--valid-color: #{$green-700};
|
||||
--nav-background-color: #{rgba($white, .7)};
|
||||
--nav-border-color: #{rgba($grey-500, .2)};
|
||||
--nav-logo-color: #{$white};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ $enable-semantic-container: false !default;
|
|||
// Enable .container and .container-fluid
|
||||
$enable-class-container: true !default;
|
||||
|
||||
// Enable a centered viewport
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside <body>
|
||||
// Fluid layout if disabled
|
||||
$enable-viewport: true !default;
|
||||
|
||||
|
|
@ -16,20 +16,17 @@ $enable-viewport: true !default;
|
|||
$enable-responsive-spacings: true !default;
|
||||
|
||||
// Enable responsive typography
|
||||
// Fixed base font if disabled
|
||||
// Fixed root element size if disabled
|
||||
$enable-responsive-typography: true !default;
|
||||
|
||||
// Enable .classes
|
||||
// .classless version if disabled
|
||||
$enable-classes: true !default;
|
||||
|
||||
// Enable validation states for <input>
|
||||
$enable-input-states: true !default;
|
||||
|
||||
// Enable transitions for <a>, <button>, <input>
|
||||
// Enable transitions
|
||||
$enable-transitions: true !default;
|
||||
|
||||
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
|
||||
// Enable overriding with !important
|
||||
$enable-important: true !default;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,15 +5,20 @@
|
|||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding-bottom: calc(var(--spacing-typography) / 2);
|
||||
border-bottom: 1px solid var(--muted-border);
|
||||
margin-bottom: var(--spacing);
|
||||
padding-bottom: calc(var(--spacing) / 2);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
summary {
|
||||
color: var(--accordion-close-summary-color);
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
// Reset marker
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
|
|
@ -44,11 +49,12 @@ details {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--accordion-active-summary-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
~ * {
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
margin-top: calc(var(--spacing) / 2);
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
|
|
@ -60,8 +66,11 @@ details {
|
|||
&[open] {
|
||||
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
color: var(--muted-text);
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
|
||||
&:not(:focus) {
|
||||
color: var(--accordion-open-summary-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(0);
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
/**
|
||||
* Card sectionning (<article> > header, footer, pre)
|
||||
*/
|
||||
|
||||
article {
|
||||
> header,
|
||||
> footer {
|
||||
background-color: var(--card-sections);
|
||||
}
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin: calc(var(--spacing-gutter) * -1);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
> header {
|
||||
margin-top: calc(var(--spacing-gutter) * -2);
|
||||
margin-bottom: var(--spacing-block);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
> footer,
|
||||
> pre {
|
||||
margin-top: var(--spacing-block);
|
||||
margin-bottom: calc(var(--spacing-gutter) * -2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,57 +3,32 @@
|
|||
*/
|
||||
|
||||
article {
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
margin: var(--block-spacing-vertical) 0;
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
overflow: hidden;
|
||||
border-radius: var(--block-round);
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@if $enable-responsive-spacings {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
@else {
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block);
|
||||
}
|
||||
}
|
||||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin-right: calc(var(--block-spacing-horizontal) * -1);
|
||||
margin-left: calc(var(--block-spacing-horizontal) * -1);
|
||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||
background-color: var(--card-sectionning-background-color);
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
> header {
|
||||
margin-top: calc(var(--block-spacing-vertical) * -1);
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
border-bottom: var(--border-width) solid var(--card-border-color);
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
|
||||
// Remove last-child margin bottom
|
||||
@if $enable-important {
|
||||
> *:not(header):not(footer):not(pre):last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
> footer,
|
||||
> pre {
|
||||
margin-top: var(--block-spacing-vertical);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * -1);
|
||||
border-top: var(--border-width) solid var(--card-border-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Nav
|
||||
*/
|
||||
|
||||
// Inline
|
||||
// Horizontal Nav
|
||||
nav,
|
||||
nav ul {
|
||||
display: flex;
|
||||
|
|
@ -19,17 +19,17 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: calc(var(--spacing-gutter) * -0.5);
|
||||
margin-left: calc(var(--spacing) * -0.5);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: calc(var(--spacing-gutter) * -0.5);
|
||||
margin-right: calc(var(--spacing) * -0.5);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
|
|
@ -40,28 +40,17 @@ nav {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
border-radius: var(--block-round);
|
||||
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
|
||||
padding: var(--spacing) calc(var(--spacing) / 2);
|
||||
border-radius: var(--border-radius);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical Nav
|
||||
|
|
@ -75,11 +64,11 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
padding: calc(var(--spacing) / 2);
|
||||
|
||||
a {
|
||||
margin: calc(var(--spacing-gutter) * -0.5);
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
margin: calc(var(--spacing) * -0.5);
|
||||
padding: calc(var(--spacing) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ progress {
|
|||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
progress {
|
||||
|
||||
// Reset the default appearance
|
||||
|
|
@ -29,30 +30,30 @@ progress {
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
margin-bottom: calc(var(--spacing) / 2);
|
||||
overflow: hidden;
|
||||
|
||||
// Remove Firefox and Opera border
|
||||
border: 0;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--muted-background);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--progress-background-color);
|
||||
|
||||
// IE10 uses `color` to set the bar background-color
|
||||
color: var(--primary);
|
||||
color: var(--progress-color);
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
border-radius: var(--block-round);
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
}
|
||||
&[value]::-webkit-progress-value {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--primary);
|
||||
background-color: var(--progress-color);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 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: progress-indeterminate 1s linear infinite;
|
||||
|
||||
&[value]::-webkit-progress-value {
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
padding: .25rem .5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
border-radius: var(--block-round);
|
||||
background: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--tooltip-background-color);
|
||||
color: var(--tooltip-color);
|
||||
font-size: .85rem;
|
||||
font-style: normal;
|
||||
font-weight: var(--text-weight);
|
||||
font-weight: var(--font-weight);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -44,9 +44,8 @@
|
|||
border-left: .3rem solid transparent;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
color: var(--tooltip-background-color);
|
||||
content: '';
|
||||
|
||||
}
|
||||
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot based on :
|
||||
// Based on :
|
||||
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
|
||||
// ––––––––––––––––––––
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
@if $enable-classes {
|
||||
|
||||
/**
|
||||
* Button Styles
|
||||
*/
|
||||
|
||||
// Button .secondary
|
||||
button.secondary,
|
||||
input[type="submit"].secondary,
|
||||
input[type="reset"],
|
||||
a[role="button"].secondary {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .contrast
|
||||
button.contrast,
|
||||
input[type="submit"].contrast,
|
||||
input[type="reset"].contrast,
|
||||
a[role="button"].contrast {
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--contrast-hover-border);
|
||||
background-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline
|
||||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
a[role="button"].outline {
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width) solid var(--primary-hover-border);
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline.secondary
|
||||
button.outline.secondary,
|
||||
input[type="submit"].outline.secondary,
|
||||
input[type="reset"].outline,
|
||||
a[role="button"].outline.secondary {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: transparent;
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width)solid var(--secondary-hover-border);
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button .outline.contrast
|
||||
button.outline.contrast,
|
||||
input[type="submit"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
a[role="button"].outline.contrast {
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: var(--button-border-width) solid var(--contrast-hover-border);
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
|
||||
// Button reset only for classless version
|
||||
input[type="reset"] {
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ button::-moz-focus-inner,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
|
|
@ -54,17 +54,20 @@ button,
|
|||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[type="file"]::-webkit-file-upload-button,
|
||||
a[role="button"] {
|
||||
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
border-radius: var(--button-round);
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
--color: var(--primary-inverse);
|
||||
--box-shadow: none;
|
||||
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;
|
||||
background-color: var(--primary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--primary-inverse);
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--buttons-weight);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -80,19 +83,114 @@ a[role="button"] {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary-hover-border);
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--button-hover-shadow);
|
||||
--background-color: var(--primary-hover);
|
||||
--border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Input [type="reset"]
|
||||
// Secondary button without .class
|
||||
input[type="reset"] {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// .secondary, .contrast & .outline
|
||||
@if $enable-classes {
|
||||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
a[role="button"] {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--background-color: var(--contrast);
|
||||
--border-color: var(--contrast);
|
||||
--color: var(--contrast-inverse);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: var(--contrast-hover);
|
||||
--border-color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (primary)
|
||||
&.outline {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--background-color: transparent;
|
||||
--color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (secondary)
|
||||
&.outline.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline (contrast)
|
||||
&.outline.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button [disabled]
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--code-font); // 1
|
||||
font-size: 1rem; // 2
|
||||
font-family: var(--font-family); // 1
|
||||
font-size: .875rem; // 2
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
|
|
@ -31,49 +31,25 @@ pre {
|
|||
pre,
|
||||
code,
|
||||
kbd {
|
||||
background: var(--code-inlined);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: var(--code-weight);
|
||||
background: var(--code-background-color);
|
||||
color: var(--code-color);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: initial;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: 83%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: 81%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: 79%;
|
||||
}
|
||||
}
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: 77%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
border-radius: var(--block-round);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-block);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: var(--spacing);
|
||||
overflow-x: auto;
|
||||
background: var(--code-background);
|
||||
background: var(--code-background-color);
|
||||
|
||||
> code {
|
||||
display: block;
|
||||
|
|
@ -84,37 +60,37 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
// Code Syntax highlighting
|
||||
// Code Syntax
|
||||
code {
|
||||
|
||||
// Tags
|
||||
b {
|
||||
color: var(--code-color-2);
|
||||
font-weight: var(--code-weight);
|
||||
color: var(--code-tag-color);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
i {
|
||||
color: var(--code-color-3);
|
||||
color: var(--code-property-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Values
|
||||
u {
|
||||
color: var(--code-color-4);
|
||||
color: var(--code-value-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Comments
|
||||
em {
|
||||
color: var(--code-color-5);
|
||||
color: var(--code-comment-color);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// kbd
|
||||
kbd {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-inverse);
|
||||
font-weight: bolder;
|
||||
background-color: var(--code-kbd-background-color);
|
||||
color: var(--code-kbd-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -17,11 +18,12 @@
|
|||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
}
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,17 +50,29 @@
|
|||
|
||||
// File
|
||||
[type="file"] {
|
||||
--color: var(--muted-color);
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: var(--secondary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--secondary-inverse);
|
||||
--background-color: var(--secondary);
|
||||
--border-color: var(--secondary);
|
||||
--color: var(--secondary-inverse);
|
||||
margin-right: calc(var(--spacing) / 2);
|
||||
padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -74,22 +88,17 @@
|
|||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
--color: var(--color);
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::-webkit-file-upload-button {
|
||||
box-shadow: none;
|
||||
--background-color: var(--secondary-hover);
|
||||
--border-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
[type="range"]{
|
||||
[type="range"] {
|
||||
// Config
|
||||
$height-track: .25rem;
|
||||
$height-thumb: 1.25rem;
|
||||
|
|
@ -108,8 +117,8 @@
|
|||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -121,8 +130,8 @@
|
|||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height:$height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -134,8 +143,8 @@
|
|||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--range-border-color);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -145,7 +154,7 @@
|
|||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: var(--input-border);
|
||||
background-color: var(--border-radius);
|
||||
}
|
||||
|
||||
// Slider Thumb
|
||||
|
|
@ -154,9 +163,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -171,9 +180,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -188,9 +197,9 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border: $border-thumb solid var(--range-thumb-border-color);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
background-color: var(--range-thumb-color);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -200,62 +209,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
@if $enable-important {
|
||||
background: transparent !important;
|
||||
}
|
||||
@else {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
--range-border-color: var(--range-active-border-color);
|
||||
--range-thumb-color: var(--range-thumb-hover-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@if $enable-important {
|
||||
background: transparent !important;
|
||||
}
|
||||
@else {
|
||||
background: transparent;
|
||||
}
|
||||
--range-thumb-color: var(--range-thumb-active-color);
|
||||
|
||||
// Slider Thumb
|
||||
&::-webkit-slider-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
transform: scale(1.25);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
|
|
@ -263,15 +238,15 @@
|
|||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left .75rem;
|
||||
background-position: center left 1.125rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
&::-webkit-search-cancel-button{
|
||||
&::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
height: 1.25rem;
|
||||
margin-top: -.125rem;
|
||||
margin-right: .375rem;
|
||||
border-width: var(--checkbox-radio-border-width);
|
||||
border-width: var(--border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -22,19 +22,16 @@
|
|||
}
|
||||
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
&:checked:active,
|
||||
&:checked:focus {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-checkbox);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75rem auto;
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background-image: var(--icon-minus);
|
||||
}
|
||||
|
||||
& ~ label {
|
||||
display: inline-block;
|
||||
margin-right: .375rem;
|
||||
|
|
@ -43,20 +40,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
[type="checkbox"] {
|
||||
&:indeterminate {
|
||||
--background-color: var(--primary);
|
||||
--border-color: var(--primary);
|
||||
background-image: var(--icon-minus);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .75rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
[type="radio"] {
|
||||
border-radius: 50%;
|
||||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-inverse);
|
||||
&:checked,
|
||||
&:checked:active,
|
||||
&:checked:focus{
|
||||
--background-color: var(--primary-inverse);
|
||||
border-width: .35rem;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Switchs
|
||||
[type="checkbox"][role="switch"] {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
--color: var(--switch-color);
|
||||
|
||||
// Config
|
||||
$switch-height: 1.25rem;
|
||||
|
|
@ -66,17 +79,27 @@
|
|||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: var(--switch-border-width) solid var(--input-border);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
background-color: var(--background-color);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:focus {
|
||||
--background-color: var(--switch-background-color);
|
||||
--border-color: var(--switch-background-color);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
--background-color: var(--switch-checked-background-color);
|
||||
--border-color: var(--switch-checked-background-color);
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
|
||||
width: calc(#{$switch-height} - (var(--border-width) * 2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--input-inverse);
|
||||
background-color: var(--color);
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -85,13 +108,11 @@
|
|||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
background-image: none;
|
||||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: calc(#{$switch-width/2} - var(--switch-border-width));
|
||||
margin-left: calc(#{$switch-width / 2} - var(--border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,9 +89,9 @@ textarea {
|
|||
border-style: none;
|
||||
}
|
||||
|
||||
// Restore the focus outline styles unset by the previous rule in Firefox
|
||||
// Remove the focus outline in Firefox
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Remove the additional :invalid styles in Firefox
|
||||
|
|
@ -120,14 +120,14 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
|||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--form-element-border-width) * 2)
|
||||
(var(--border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -136,15 +136,14 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-form-element);
|
||||
margin-bottom: calc(var(--spacing) / 4);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Global layout
|
||||
// Blocks, 100%
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea,
|
||||
form small {
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -164,13 +163,17 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: var(--form-element-border-width) solid var(--input-border);
|
||||
border-radius: var(--block-round);
|
||||
--background-color: var(--form-element-background-color);
|
||||
--border-color: var(--form-element-border-color);
|
||||
--color: var(--form-element-color);
|
||||
--box-shadow: none;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: var(--form-element-weight);
|
||||
|
||||
background-color: var(--background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
color: var(--color);
|
||||
font-weight: var(--font-weight);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -179,102 +182,106 @@ textarea {
|
|||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-background);
|
||||
--background-color: var(--form-element-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
&[readonly],
|
||||
// Active & Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:active,
|
||||
&:focus {
|
||||
--border-color: var(--form-element-active-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Focus
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]),
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
input:not([type="submit"]):not([type="button"]):not([type="reset"]),
|
||||
select,
|
||||
textarea {
|
||||
&[disabled] {
|
||||
border-color: var(--muted-border);
|
||||
box-shadow: none;
|
||||
|
||||
& ~ label {
|
||||
color: var(--muted-text);
|
||||
--background-color: var(--form-element-disabled-background-color);
|
||||
--border-color: var(--form-element-disabled-border-color);
|
||||
opacity: .375;
|
||||
}
|
||||
}
|
||||
|
||||
// Aria-valid
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
--border-color: var(--form-element-valid-border-color);
|
||||
background-image: var(--icon-valid);
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: none !important;
|
||||
--border-color: var(--form-element-valid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
--border-color: var(--form-element-valid-active-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||
background-color: var(--muted-background);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
// Validation states: with aria-invalid only
|
||||
@if $enable-classes {
|
||||
.valid,
|
||||
.invalid,
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
}
|
||||
|
||||
.valid,
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
.invalid,
|
||||
&[aria-invalid="true"]{
|
||||
&[aria-invalid="true"] {
|
||||
--border-color: var(--form-element-invalid-border-color);
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
|
||||
// Validation states: with aria-invalid and classes (.valid & .invalid)
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
--border-color: var(--form-element-invalid-active-border-color) !important;
|
||||
}
|
||||
@else {
|
||||
&[aria-invalid] {
|
||||
padding-right: 2rem;
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
--border-color: var(--form-element-invalid-active-border-color);
|
||||
}
|
||||
|
||||
&[aria-invalid="false"] {
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
&[aria-invalid="true"]{
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes andRadios)
|
||||
// Placeholder
|
||||
input::placeholder,
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::placeholder,
|
||||
textarea::-webkit-input-placeholder,
|
||||
select:invalid {
|
||||
color: var(--form-element-placeholder-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Margin bottom (Not Checkboxes and Radios)
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Focus styles (Not Range and File)
|
||||
input:not([type="range"]):not([type="file"]),
|
||||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||
}
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
// Select
|
||||
|
|
@ -296,16 +303,15 @@ select {
|
|||
}
|
||||
|
||||
// Helper
|
||||
form small {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
+ small {
|
||||
margin-top: calc(var(--spacing-typography) * -0.75);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: calc(var(--spacing) * -0.75);
|
||||
margin-bottom: var(--spacing);
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -314,6 +320,6 @@ label {
|
|||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin-top: var(--spacing-form-element);
|
||||
margin-top: calc(var(--spacing) / 4);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ hr {
|
|||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
border: none;
|
||||
border-top: 1px solid var(--muted-border);
|
||||
border-top: 1px solid var(--muted-border-color);
|
||||
}
|
||||
|
||||
// Add the correct display in IE 10+
|
||||
|
|
|
|||
|
|
@ -26,32 +26,24 @@ table {
|
|||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: var(--text-weight);
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||
color: var(--color);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Titles
|
||||
th,
|
||||
thead td {
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
// Rows
|
||||
tr {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
// First row
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 3px solid var(--table-border);
|
||||
}
|
||||
}
|
||||
|
||||
// Striping
|
||||
table[role="grid"] {
|
||||
// Striped
|
||||
table {
|
||||
&[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
--background-color: var(--table-row-stripped-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
color: var(--text);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -70,9 +70,12 @@ ul {
|
|||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a {
|
||||
background-color: transparent; // 1
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
--color: var(--primary);
|
||||
--background-color: transparent;
|
||||
outline: none;
|
||||
background-color: var(--background-color); // 1
|
||||
color: var(--color);
|
||||
text-decoration: var(--text-decoration);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
|
|
@ -85,54 +88,49 @@ a {
|
|||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--primary-hover);
|
||||
text-decoration: underline;
|
||||
--color: var(--primary-hover);
|
||||
--text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: var(--primary-focus);
|
||||
--background-color: var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
// Link .secondary
|
||||
@if $enable-classes {
|
||||
a.secondary {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
@if $enable-classes {
|
||||
|
||||
// Secondary
|
||||
&.secondary {
|
||||
--color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--secondary-hover);
|
||||
--color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--secondary-focus);
|
||||
--background-color: var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link .contrast
|
||||
@if $enable-classes {
|
||||
a.contrast {
|
||||
color: var(--contrast);
|
||||
text-decoration: underline;
|
||||
// Contrast
|
||||
&.contrast {
|
||||
--color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--contrast-hover);
|
||||
--color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--contrast-focus);
|
||||
--background-color: var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// Because vertical margins can collapse, we avoid `margin-top`
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -140,44 +138,30 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
font-family: var(--titles-font);
|
||||
font-weight: var(--titles-weight);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
color: var(--h1);
|
||||
font-size: var(--h1-size);
|
||||
--color: var(--h1-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||
color: var(--h2);
|
||||
font-size: var(--h2-size);
|
||||
--color: var(--h2-color);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||
color: var(--h3);
|
||||
font-size: var(--h3-size);
|
||||
--color: var(--h3-color);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||
color: var(--h4);
|
||||
font-size: var(--h4-size);
|
||||
--color: var(--h4-color);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||
color: var(--h5);
|
||||
font-size: var(--h5-size);
|
||||
--color: var(--h5-color);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--h6);
|
||||
font-size: var(--h6-size);
|
||||
--color: var(--h6-color);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
|
|
@ -191,88 +175,49 @@ p,
|
|||
pre,
|
||||
table,
|
||||
ul {
|
||||
& ~ h1 {
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
& ~ h2 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||
}
|
||||
|
||||
& ~ h3 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||
}
|
||||
|
||||
& ~ h4 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||
}
|
||||
|
||||
& ~ h5 {
|
||||
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||
}
|
||||
|
||||
& ~ h1,
|
||||
& ~ h2,
|
||||
& ~ h3,
|
||||
& ~ h4,
|
||||
& ~ h5,
|
||||
& ~ h6 {
|
||||
margin-top: calc(var(--spacing-typography));
|
||||
margin-top: var(--typography-spacing-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Multi-level heading
|
||||
// Heading group
|
||||
hgroup {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
|
||||
*{
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
color: var(--muted-text);
|
||||
--color: var(--muted-color);
|
||||
font-family: unset;
|
||||
font-size: 1.125rem;
|
||||
font-size: 1rem;
|
||||
font-weight: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: var(--spacing-typography);
|
||||
margin-bottom: var(--typography-spacing-vertical);
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: 85%;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: 83%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: 81%;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: 79%;
|
||||
}
|
||||
}
|
||||
@if map-get($breakpoints, "lg") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: 77%;
|
||||
}
|
||||
}
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
padding-left: var(--spacing-typography);
|
||||
padding-left: var(--spacing);
|
||||
|
||||
li {
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -280,24 +225,24 @@ ul li {
|
|||
list-style: square;
|
||||
}
|
||||
|
||||
// Marked text
|
||||
// Highlighted text
|
||||
mark {
|
||||
padding: .125rem .25rem;
|
||||
background: var(--mark);
|
||||
color: var(--mark-text);
|
||||
background-color: var(--mark-background-color);
|
||||
color: var(--mark-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: var(--spacing-typography) 0;
|
||||
padding: var(--spacing-gutter);
|
||||
border-left: .25rem solid var(--muted-border);
|
||||
margin: var(--typography-spacing-vertical) 0;
|
||||
padding: var(--spacing);
|
||||
border-left: .25rem solid var(--blockquote-border-color);
|
||||
|
||||
footer {
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
color: var(--muted-text);
|
||||
margin-top: calc(var(--typography-spacing-vertical) / 2);
|
||||
color: var(--blockquote-footer-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -311,13 +256,13 @@ abbr[title] {
|
|||
|
||||
// Ins
|
||||
ins {
|
||||
color: var(--valid);
|
||||
color: var(--ins-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// del
|
||||
del {
|
||||
color: var(--invalid);
|
||||
color: var(--del-color);
|
||||
}
|
||||
|
||||
// selection
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: var(--spacing-gutter);
|
||||
padding-left: var(--spacing-gutter);
|
||||
padding-right: var(--spacing);
|
||||
padding-left: var(--spacing);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
|
|
@ -23,19 +23,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,44 +36,12 @@ html {
|
|||
-moz-tab-size: 4; // 5
|
||||
-ms-text-size-adjust: 100%; // 6
|
||||
-webkit-text-size-adjust: 100%; // 6
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: var(--text-font);
|
||||
font-size: var(--base-font-xs);
|
||||
font-weight: var(--text-weight);
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height); // 1
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default; // 4
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: var(--base-font-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: var(--base-font-md);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: var(--base-font-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: var(--base-font-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: var(--spacing-gutter);
|
||||
grid-row-gap: var(--spacing-gutter);
|
||||
grid-column-gap: var(--grid-spacing-horizontal);
|
||||
grid-row-gap: var(--grid-spacing-vertical);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ figure {
|
|||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
color: var(--muted-text);
|
||||
padding: calc(var(--spacing) / 2) 0;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,37 +4,5 @@
|
|||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
|
||||
}
|
||||
}
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,87 +25,48 @@ body {
|
|||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
$padding-horizontal: var(--spacing-gutter) !default;
|
||||
$spacing-vertical: var(--spacing-block) !default;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
// xs
|
||||
@if $enable-semantic-container == false {
|
||||
$padding-horizontal: 0;
|
||||
}
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
// Semantic container
|
||||
@if $enable-semantic-container {
|
||||
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
|
||||
|
||||
// sm
|
||||
@if map-get($breakpoints, "sm")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
// Centered viewport
|
||||
@if $enable-viewport {
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
@if $enable-responsive-spacings or $enable-viewport {
|
||||
@if $enable-viewport or $enable-semantic-container == false {
|
||||
$padding-horizontal: 0;
|
||||
}
|
||||
@else {
|
||||
$padding-horizontal: var(--spacing-gutter);
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
@else {
|
||||
$spacing-vertical: var(--spacing-block);
|
||||
}
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// md
|
||||
@if map-get($breakpoints, "md")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
|
||||
@if map-get($breakpoints, "md") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// lg
|
||||
@if map-get($breakpoints, "lg")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
|
||||
@if map-get($breakpoints, "lg") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// xl
|
||||
@if map-get($breakpoints, "xl")
|
||||
and ($enable-responsive-spacings or $enable-semantic-container) {
|
||||
|
||||
@if map-get($breakpoints, "xl") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Semantic container
|
||||
@else {
|
||||
padding: var(--block-spacing-vertical) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
// Enable <header>, <main>, <footer> inside <body> as a container
|
||||
$enable-semantic-container: true;
|
||||
|
||||
// Enable a centered viewport
|
||||
// Enable a centered viewport for <header>, <main>, <footer> inside <body>
|
||||
$enable-viewport: false;
|
||||
|
||||
// Enable .classes
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico.css v1.2.1 (https://picocss.com)
|
||||
* Copyright 2020 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
// Config
|
||||
|
|
@ -21,7 +21,6 @@
|
|||
@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/button-styles"; // .secondary, .contrast, .outline
|
||||
@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, ...
|
||||
|
|
@ -33,7 +32,6 @@
|
|||
// Components
|
||||
@import "components/accordion"; // details, summary
|
||||
@import "components/card"; // article
|
||||
@import "components/card-sectioning"; // article > header, footer, pre
|
||||
@import "components/nav"; // nav
|
||||
@import "components/progress"; // progress
|
||||
@import "components/tooltip"; // data-tooltip
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Pico.css v1.2.1 (https://picocss.com)
|
||||
* Copyright 2020 - Licensed under MIT
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*
|
||||
* Slim version example
|
||||
* You can export only the modules you need
|
||||
|
|
@ -13,13 +13,10 @@
|
|||
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||
$enable-responsive-spacings: false;
|
||||
|
||||
// Enable validation states for <input>
|
||||
$enable-input-states: false;
|
||||
|
||||
// Enable transitions for <a>, <button>, <input>, <details>
|
||||
// Enable transitions
|
||||
$enable-transitions: false;
|
||||
|
||||
// Enable overriding with !important (used for <article>, `reduce-motion`, [type="search"])
|
||||
// Enable overriding with !important
|
||||
$enable-important: false;
|
||||
|
||||
|
||||
|
|
@ -36,7 +33,7 @@ $enable-important: false;
|
|||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
// @import "layout/section"; // section
|
||||
@import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
|
|
@ -44,7 +41,6 @@ $enable-important: false;
|
|||
@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/button-styles"; // .secondary, .contrast, .outline
|
||||
@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, ...
|
||||
|
|
@ -56,7 +52,6 @@ $enable-important: false;
|
|||
// Components
|
||||
// @import "components/accordion"; // details, summary
|
||||
// @import "components/card"; // article
|
||||
// @import "components/card-sectioning"; // article > header, footer, pre
|
||||
// @import "components/nav"; // nav
|
||||
// @import "components/progress"; // progress
|
||||
// @import "components/tooltip"; // data-tooltip
|
||||
|
|
|
|||
|
|
@ -2,8 +2,25 @@
|
|||
* Theme: default
|
||||
*/
|
||||
|
||||
// Variables
|
||||
@import "../variables";
|
||||
@import "default/colors";
|
||||
|
||||
// Commons styles
|
||||
@import "default/styles";
|
||||
@import "default/icons";
|
||||
|
||||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
@import "default/light";
|
||||
@import "default/dark";
|
||||
|
||||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
@import "default/dark";
|
||||
}
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
@import "default/dark";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ $grey-800: hsl($grey-hue, 25%, 23%) !default;
|
|||
$grey-900: hsl($grey-hue, 30%, 15%) !default;
|
||||
|
||||
// Light Blue
|
||||
$primary-hue: 195;
|
||||
$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;
|
||||
|
|
@ -28,10 +28,38 @@ $primary-900: hsl($primary-hue, 100%, 15%) !default;
|
|||
$black: #000 !default;
|
||||
$white: #FFF !default;
|
||||
|
||||
// Miscs
|
||||
$amber-200: hsl(45, 100%, 75%) !default;
|
||||
$green-500: hsl(160, 50%, 40%) !default;
|
||||
$green-600: hsl(160, 55%, 35%) !default;
|
||||
$green-700: hsl(160, 60%, 30%) !default;
|
||||
$red-700: hsl(0, 45%, 50%) !default;
|
||||
$red-900: hsl(0, 45%, 40%) !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;
|
||||
|
||||
// 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;
|
||||
|
||||
// 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;
|
||||
|
|
|
|||
|
|
@ -1,164 +1,122 @@
|
|||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
// Default: Dark theme
|
||||
:root:not([data-theme="light"]) {
|
||||
|
||||
// Document
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
color-scheme: dark;
|
||||
--background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-300};
|
||||
--h1: #{$grey-50};
|
||||
--h2: #{$grey-100};
|
||||
--h3: #{$grey-200};
|
||||
--h4: #{$grey-300};
|
||||
--h5: #{$grey-400};
|
||||
--h6: #{$grey-500};
|
||||
// Texts colors
|
||||
--color: #{$grey-200};
|
||||
--h1-color: #{$grey-50};
|
||||
--h2-color: #{mix($grey-50, $grey-100)};
|
||||
--h3-color: #{$grey-100};
|
||||
--h4-color: #{mix($grey-100, $grey-200)};
|
||||
--h5-color: #{$grey-200};
|
||||
--h6-color: #{mix($grey-200, $grey-300)};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{mix($grey-900, $grey-800, 75%)};
|
||||
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-focus: #{rgba($grey-500, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: var(--contrast);
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-50};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
--contrast-focus: #{rgba($grey-500, .25)};
|
||||
--contrast-inverse: #{$black};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($grey-300, $amber-300)};
|
||||
--mark-color: #{mix($black, $grey-900, 37.5%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
|
||||
// Form elements
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
--form-element-background-color: #{mix($black, $grey-900, 37.5%)};
|
||||
--form-element-border-color: #{mix($grey-800, $grey-700)};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: var(--form-element-background-color);
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-800};
|
||||
--form-element-disabled-border-color: #{$grey-700};
|
||||
--form-element-invalid-border-color: #{$red-900};
|
||||
--form-element-invalid-active-border-color: #{$red-800};
|
||||
--form-element-valid-border-color: #{$green-800};
|
||||
--form-element-valid-active-border-color: #{$green-700};
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{mix($grey-800, $grey-700)};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .1875)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{mix($grey-800, $grey-900)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
|
||||
// Card
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
|
||||
|
||||
// Code
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{mix($grey-900, $grey-800)};
|
||||
--range-active-border-color: #{$grey-800};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Dark theme (Forced)
|
||||
// Enabled if forced with data-theme="dark"
|
||||
[data-theme="dark"] {
|
||||
|
||||
// Document
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-300};
|
||||
--h1: #{$grey-50};
|
||||
--h2: #{$grey-100};
|
||||
--h3: #{$grey-200};
|
||||
--h4: #{$grey-300};
|
||||
--h5: #{$grey-400};
|
||||
--h6: #{$grey-500};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: var(--secondary);
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .1875)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{mix($grey-800, $grey-900)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
|
||||
// Card
|
||||
--card-background: #{darken($grey-900, 2%)};
|
||||
--card-sections: #{darken($grey-900, 4%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color: #{rgba($grey-500, .05)};
|
||||
|
||||
// Code
|
||||
--code-background: #{darken($grey-900, 4%)};
|
||||
--code-inlined: #{rgba($grey-700, .25)};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 30%, 50%)};
|
||||
--code-color-3: #{hsl(185, 30%, 50%)};
|
||||
--code-color-4: #{hsl(40, 10%, 50%)};
|
||||
--code-color-5: #{mix($grey-600, $grey-700)};
|
||||
--code-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--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-comment-color: #{mix($grey-600, $grey-700)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-active-summary-color: var(--primary);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// 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-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{mix($grey-900, $grey-800)};
|
||||
--progress-color: var(--primary);
|
||||
|
||||
// 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-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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
// Icons
|
||||
// Source: https://feathericons.com/
|
||||
|
||||
:root {
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -1,81 +1,122 @@
|
|||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
|
||||
// Default: Light theme
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
||||
// Document
|
||||
--background: #{$white};
|
||||
color-scheme: light;
|
||||
--background-color: #{$white};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-700};
|
||||
--h1: #{$grey-900};
|
||||
--h2: #{$grey-800};
|
||||
--h3: #{$grey-700};
|
||||
--h4: #{$grey-600};
|
||||
--h5: #{$grey-500};
|
||||
--h6: #{$grey-400};
|
||||
// Texts colors
|
||||
--color: #{$grey-700};
|
||||
--h1-color: #{$grey-900};
|
||||
--h2-color: #{mix($grey-900, $grey-800)};
|
||||
--h3-color: #{$grey-800};
|
||||
--h4-color: #{mix($grey-800, $grey-700)};
|
||||
--h5-color: #{$grey-700};
|
||||
--h6-color: #{mix($grey-700, $grey-600)};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
// Muted colors
|
||||
--muted-color: #{$grey-500};
|
||||
--muted-border-color: #{$grey-50};
|
||||
|
||||
// Primary colors
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: var(--primary);
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-hover-border: var(--primary-hover);
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-border: var(--secondary);
|
||||
// Secondary colors
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-hover-border: var(--secondary-hover);
|
||||
--secondary-focus: #{rgba($grey-500, .125)};
|
||||
--secondary-focus: #{rgba($grey-600, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-800};
|
||||
--contrast-border: var(--contrast);
|
||||
--contrast-hover: #{mix($grey-900, $black)};
|
||||
--contrast-hover-border: var(--contrast-hover);
|
||||
--contrast-focus: #{rgba($grey-500, .125)};
|
||||
// Contrast colors
|
||||
--contrast: #{$grey-900};
|
||||
--contrast-hover: #{$black};
|
||||
--contrast-focus: #{rgba($grey-600, .125)};
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Highlighted text (<mark>)
|
||||
--mark-background-color: #{mix($amber-50, $amber-100)};
|
||||
--mark-color: #{mix($grey-900, $amber-900, 75%)};
|
||||
|
||||
// Inserted (<ins>) & Deleted (<ins>)
|
||||
--ins-color: #{$green-700};
|
||||
--del-color: #{$red-800};
|
||||
|
||||
// Blockquote
|
||||
--blockquote-border-color: var(--muted-border-color);
|
||||
--blockquote-footer-color: var(--muted-color);
|
||||
|
||||
// Form elements
|
||||
--input-background: #{$white};
|
||||
--input-border: #{mix($grey-100, $grey-200)};
|
||||
--input-hover-background: var(--input-background);
|
||||
--input-hover-border: var(--primary);
|
||||
--input-focus: var(--primary-focus);
|
||||
--input-inverse: var(--primary-inverse);
|
||||
--form-element-background-color: transparent;
|
||||
--form-element-border-color: #{$grey-300};
|
||||
--form-element-color: var(--color);
|
||||
--form-element-placeholder-color: var(--muted-color);
|
||||
--form-element-active-background-color: transparent;
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus: var(--primary-focus);
|
||||
--form-element-disabled-background-color: #{$grey-100};
|
||||
--form-element-disabled-border-color: #{$grey-300};
|
||||
--form-element-invalid-border-color: #{$red-800};
|
||||
--form-element-invalid-active-border-color: #{$red-900};
|
||||
--form-element-valid-border-color: #{$green-700};
|
||||
--form-element-valid-active-border-color: #{$green-800};
|
||||
|
||||
// Button
|
||||
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
||||
// Switch (input[type="checkbox"][role="switch"])
|
||||
--switch-background-color: #{$grey-200};
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
|
||||
// Utilities states
|
||||
--valid: #{$green-600};
|
||||
--invalid: #{$red-700};
|
||||
--mark: #{rgba($amber-200, .33)};
|
||||
--mark-text: #{$grey-800};
|
||||
--muted-text: #{mix($grey-400, $grey-500)};
|
||||
--muted-background: #{$grey-50};
|
||||
--muted-border: #{$grey-50};
|
||||
|
||||
// Card
|
||||
--card-background: #{$white};
|
||||
--card-sections: #{lighten($grey-50, 2%)};
|
||||
--card-shadow: 0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
|
||||
|
||||
// Code
|
||||
--code-background: #{lighten($grey-50, 2%)};
|
||||
--code-inlined: #{$grey-50};
|
||||
--code-color-1: #{$grey-500};
|
||||
--code-color-2: #{hsl(330, 40%, 50%)};
|
||||
--code-color-3: #{hsl(185, 40%, 40%)};
|
||||
--code-color-4: #{hsl(40, 20%, 50%)};
|
||||
--code-color-5: #{mix($grey-300, $grey-400)};
|
||||
// Range (input[type="range"])
|
||||
--range-border-color: #{$grey-100};
|
||||
--range-active-border-color: #{$grey-200};
|
||||
--range-thumb-border-color: var(--background-color);
|
||||
--range-thumb-color: var(--secondary);
|
||||
--range-thumb-hover-color: var(--secondary-hover);
|
||||
--range-thumb-active-color: var(--primary);
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-500, .075)};
|
||||
--table-border-color: var(--muted-border-color);
|
||||
--table-row-stripped-background-color:#{mix($white, $grey-50)};
|
||||
|
||||
// Code
|
||||
--code-background-color: #{$grey-50};
|
||||
--code-color: var(--muted-color);
|
||||
--code-kbd-background-color: var(--contrast);
|
||||
--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-comment-color: #{$grey-300};
|
||||
|
||||
// Accordion (<details>)
|
||||
--accordion-border-color: var(--muted-border-color);
|
||||
--accordion-close-summary-color: var(--color);
|
||||
--accordion-open-summary-color: var(--muted-color);
|
||||
|
||||
// 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-sectionning-background-color: #{mix($white, $grey-50, 75%)};
|
||||
|
||||
// Progress
|
||||
--progress-background-color: #{$grey-100};
|
||||
--progress-color: var(--primary);
|
||||
|
||||
// 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-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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,93 +1,214 @@
|
|||
// Commons Styles
|
||||
|
||||
:root {
|
||||
|
||||
// Typography
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Fonts family
|
||||
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--titles-font: var(--text-font);
|
||||
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
|
||||
// Typography styles
|
||||
--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;
|
||||
--text-weight: 400;
|
||||
--titles-weight: 700;
|
||||
--form-element-weight: var(--text-weight);
|
||||
--buttons-weight: var(--text-weight);
|
||||
--code-weight: var(--text-weight);
|
||||
--font-weight: 400;
|
||||
--font-size: 16px;
|
||||
|
||||
// Base font sizes
|
||||
// All the others sizes are relative to this font base sizes (rem)
|
||||
--base-font-xs: 16px;
|
||||
--base-font-sm: 17px;
|
||||
--base-font-md: 18px;
|
||||
--base-font-lg: 19px;
|
||||
--base-font-xl: 20px;
|
||||
// Responsive typography
|
||||
@if $enable-responsive-typography {
|
||||
|
||||
// Font sizes
|
||||
// All the others sizes are relative to this sizes
|
||||
--h1-size: 2rem;
|
||||
--h2-size: 1.75rem;
|
||||
--h3-size: 1.5rem;
|
||||
--h4-size: 1.25rem;
|
||||
--h5-size: 1.125rem;
|
||||
--h6-size: 1rem;
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
// ––––––––––––––––––––
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
|
||||
--block-round: .25rem;
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form elements
|
||||
--form-element-border-width: 1px;
|
||||
--form-element-outline-width: 3px;
|
||||
--checkbox-radio-border-width: 2px;
|
||||
--switch-border-width: 3px;
|
||||
// Borders
|
||||
--border-radius: .25rem;
|
||||
--border-width: 1px;
|
||||
--outline-width: 3px;
|
||||
|
||||
// Spacings
|
||||
--spacing: 1rem;
|
||||
|
||||
// Spacings for typography elements
|
||||
--typography-spacing-vertical: 1.5rem;
|
||||
|
||||
// Spacings for body > header, body > main, body > footer, section, article
|
||||
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||
--block-spacing-horizontal: var(--spacing);
|
||||
|
||||
// Spacings .grid
|
||||
--grid-spacing-vertical: 0;
|
||||
--grid-spacing-horizontal: var(--spacing);
|
||||
|
||||
// Spacings for form elements and button
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Buttons
|
||||
--button-round: var(--block-round);
|
||||
--button-border-width: var(--form-element-border-width);
|
||||
--button-outline-width: var(--form-element-outline-width);
|
||||
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||
|
||||
|
||||
// Spacings
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Gutters and horizontals margins
|
||||
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
|
||||
--spacing-gutter: 1rem;
|
||||
|
||||
// Vertical spacing for blocks
|
||||
// For <header>, <main>, <footer>, <section>, <article>
|
||||
--spacing-block: 2rem;
|
||||
|
||||
// Multiplication factor for --spacing-block
|
||||
// '1' disable spacing factor on a breakpoint
|
||||
--spacing-factor-xs: 1;
|
||||
--spacing-factor-sm: 1.25;
|
||||
--spacing-factor-md: 1.5;
|
||||
--spacing-factor-lg: 1.75;
|
||||
--spacing-factor-xl: 2;
|
||||
|
||||
// Vertical margins for typography elements
|
||||
--spacing-typography: 1.5rem;
|
||||
|
||||
// Spacing between <form> elements
|
||||
--spacing-form-element: .25rem;
|
||||
|
||||
|
||||
// Transitions
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Transitions: <a>, <form> elements and <button>
|
||||
--transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--block-spacing-vertical: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card (<article>)
|
||||
article {
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
a {
|
||||
--text-decoration: none;
|
||||
|
||||
// Secondary & Contrast
|
||||
&.secondary,
|
||||
&.contrast {
|
||||
--text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
--font-size: 0.875rem;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
--font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--font-size: 2rem;
|
||||
--typography-spacing-vertical: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
--font-size: 1.75rem;
|
||||
--typography-spacing-vertical: 2.625rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
--font-size: 1.5rem;
|
||||
--typography-spacing-vertical: 2.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
--font-size: 1.25rem;
|
||||
--typography-spacing-vertical: 1.874rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
--font-size: 1.125rem;
|
||||
--typography-spacing-vertical: 1.6875rem;
|
||||
}
|
||||
|
||||
// Forms elements
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
[type="checkbox"][role="switch"] {
|
||||
--border-width: 3px;
|
||||
}
|
||||
|
||||
// Table
|
||||
table {
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
--border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:not(thead) td {
|
||||
--font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
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";
|
||||
}
|
||||
|
||||
kbd {
|
||||
--font-weight: bolder;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue