mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 09:06:14 -04:00
Move styles in SCSS vars to CSS vars
This commit is contained in:
Lucas
parent
f67044ecae
commit
9b1ef33577
49 changed files with 2921 additions and 1841 deletions
File diff suppressed because it is too large
Load diff
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
816
css/pico.css
816
css/pico.css
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
2
css/pico.fluid.classless.min.css
vendored
2
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -8,144 +8,230 @@
|
|||
/**
|
||||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--titles-font: var(--text-font);
|
||||
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--line-height: 1.5;
|
||||
--text-weight: 400;
|
||||
--titles-weight: 700;
|
||||
--form-element-weight: var(--text-weight);
|
||||
--buttons-weight: var(--text-weight);
|
||||
--code-weight: var(--text-weight);
|
||||
--base-font-xs: 16px;
|
||||
--base-font-sm: 17px;
|
||||
--base-font-md: 18px;
|
||||
--base-font-lg: 19px;
|
||||
--base-font-xl: 20px;
|
||||
--h1-size: 2rem;
|
||||
--h2-size: 1.75rem;
|
||||
--h3-size: 1.5rem;
|
||||
--h4-size: 1.25rem;
|
||||
--h5-size: 1.125rem;
|
||||
--block-round: .25rem ;
|
||||
--form-element-border-width: 1px;
|
||||
--form-element-outline-width: 3px;
|
||||
--checkbox-radio-border-width: 2px;
|
||||
--switch-border-width: 3px;
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--button-round: var(--block-round);
|
||||
--button-border-width: var(--form-element-border-width);
|
||||
--button-outline-width: var(--form-element-outline-width);
|
||||
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||
--spacing-gutter: 1rem;
|
||||
--spacing-block: 2rem;
|
||||
--spacing-factor-xs: 1;
|
||||
--spacing-factor-sm: 1.25;
|
||||
--spacing-factor-md: 1.5;
|
||||
--spacing-factor-lg: 1.75;
|
||||
--spacing-factor-xl: 2;
|
||||
--spacing-typography: 1.5rem;
|
||||
--spacing-form-element: .25rem;
|
||||
--transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
:root {
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--background: #FFF;
|
||||
--text: #415462;
|
||||
--h1: #1b2832;
|
||||
--h2: #2c3d49;
|
||||
--h3: #415462;
|
||||
--h4: #596b78;
|
||||
--h5: #73828c;
|
||||
--h6: #8a99a3;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #08769b;
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #73828c;
|
||||
--secondary-hover: #415462;
|
||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #2c3d49;
|
||||
--contrast-hover: #0d1419;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.125);
|
||||
--contrast-border: rgba(255, 223, 128, 0.5);
|
||||
--contrast-border-h: #ffdf80;
|
||||
--contrast-inverse: #FFF;
|
||||
--input-background: #FFF;
|
||||
--input-border: #c8d1d8;
|
||||
--valid: #288a6a;
|
||||
--invalid: #b94646;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--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.04);
|
||||
--background: #FFF;
|
||||
--text: #415462;
|
||||
--h1: #1b2832;
|
||||
--h2: #2c3d49;
|
||||
--h3: #415462;
|
||||
--h4: #596b78;
|
||||
--h5: #73828c;
|
||||
--h6: #8a99a3;
|
||||
--primary: #1095c1;
|
||||
--primary-border: #1095c1;
|
||||
--primary-hover: #08769b;
|
||||
--primary-hover-border: #08769b;
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #73828c;
|
||||
--secondary-border: #73828c;
|
||||
--secondary-hover: #415462;
|
||||
--secondary-hover-border: #415462;
|
||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #2c3d49;
|
||||
--contrast-border: #2c3d49;
|
||||
--contrast-hover: #0d1419;
|
||||
--contrast-hover-border: #0d1419;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.125);
|
||||
--contrast-inverse: #FFF;
|
||||
--input-background: #FFF;
|
||||
--input-border: #c8d1d8;
|
||||
--input-hover-background: #FFF;
|
||||
--input-hover-border: #1095c1;
|
||||
--input-focus: rgba(16, 149, 193, 0.125);
|
||||
--input-inverse: #FFF;
|
||||
--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.5);
|
||||
--mark-text: #2c3d49;
|
||||
--muted-text: #7e8d98;
|
||||
--muted-background: #edf0f3;
|
||||
--muted-border: #edf0f3;
|
||||
--card-background: #FFF;
|
||||
--card-sections: #f3f5f7;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||
--code-background: #f3f5f7;
|
||||
--code-inlined: #edf0f3;
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #b34d80;
|
||||
--code-color-3: #3d888f;
|
||||
--code-color-4: #998866;
|
||||
--code-color-5: #96a4ae;
|
||||
--table-border: rgba(237, 240, 243, 0.75);
|
||||
--table-stripping: rgba(115, 130, 140, 0.075);
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-border: rgba(255, 223, 128, 0.33);
|
||||
--contrast-border-h: rgba(255, 223, 128, 0.5);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--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.06);
|
||||
--table-stripping: rgba(115, 130, 140, 0.02);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-border: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-hover-border: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-border: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-hover-border: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-border: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover-border: #FFF;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--input-hover-background: #10181e;
|
||||
--input-hover-border: #1095c1;
|
||||
--input-focus: rgba(16, 149, 193, 0.25);
|
||||
--input-inverse: #FFF;
|
||||
--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.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #23333e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: rgba(115, 130, 140, 0.075);
|
||||
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-border: rgba(255, 223, 128, 0.33);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--valid: #1f7a5c;
|
||||
--invalid: #943838;
|
||||
--mark: rgba(255, 223, 128, 0.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #10181e;
|
||||
--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.06);
|
||||
--table-stripping: rgba(115, 130, 140, 0.02);
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-border: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-hover-border: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-border: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-hover-border: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-border: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover-border: #FFF;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--input-hover-background: #10181e;
|
||||
--input-hover-border: #1095c1;
|
||||
--input-focus: rgba(16, 149, 193, 0.25);
|
||||
--input-inverse: #FFF;
|
||||
--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.5);
|
||||
--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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -172,35 +258,35 @@ html {
|
|||
-webkit-text-size-adjust: 100%;
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
font-family: var(--text-font);
|
||||
font-size: var(--base-font-xs);
|
||||
font-weight: var(--text-weight);
|
||||
line-height: var(--line-height);
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
html {
|
||||
font-size: 17px;
|
||||
font-size: var(--base-font-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
font-size: var(--base-font-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
html {
|
||||
font-size: 19px;
|
||||
font-size: var(--base-font-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
font-size: var(--base-font-xl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -223,7 +309,7 @@ body > footer {
|
|||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 2rem 0;
|
||||
padding: var(--spacing-block) 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -234,8 +320,8 @@ body > footer {
|
|||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: var(--spacing-gutter);
|
||||
padding-left: var(--spacing-gutter);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -269,8 +355,8 @@ body > footer {
|
|||
* Minimal grid system with auto-layout columns
|
||||
*/
|
||||
.grid {
|
||||
grid-column-gap: 1rem;
|
||||
grid-row-gap: 1rem;
|
||||
grid-column-gap: var(--spacing-gutter);
|
||||
grid-row-gap: var(--spacing-gutter);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
|
|
@ -297,7 +383,7 @@ figure {
|
|||
}
|
||||
|
||||
figure figcaption {
|
||||
padding: 0.5rem 0;
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
|
|
@ -351,7 +437,7 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
|
|
@ -375,6 +461,7 @@ a:focus {
|
|||
|
||||
a.secondary {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
||||
|
|
@ -385,18 +472,16 @@ a.secondary:focus {
|
|||
background-color: var(--secondary-focus);
|
||||
}
|
||||
|
||||
a.contrast:not([role="button"]) {
|
||||
box-shadow: inset 0 -0.33rem 0 var(--contrast-border);
|
||||
a.contrast {
|
||||
color: var(--contrast);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
|
||||
box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
|
||||
a.contrast:hover, a.contrast:active, a.contrast:focus {
|
||||
color: var(--contrast-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.contrast:not([role="button"]):focus {
|
||||
a.contrast:focus {
|
||||
background-color: var(--contrast-focus);
|
||||
}
|
||||
|
||||
|
|
@ -407,43 +492,43 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
font-weight: var(--titles-weight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
color: var(--h1);
|
||||
font-size: 2rem;
|
||||
font-size: var(--h1-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 2.625rem;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||
color: var(--h2);
|
||||
font-size: 1.75rem;
|
||||
font-size: var(--h2-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2.25rem;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||
color: var(--h3);
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--h3-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 1.875rem;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||
color: var(--h4);
|
||||
font-size: 1.25rem;
|
||||
font-size: var(--h4-size);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 1.6875rem;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||
color: var(--h5);
|
||||
font-size: 1.125rem;
|
||||
font-size: var(--h5-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--h6);
|
||||
font-size: 1rem;
|
||||
font-size: var(--h6-size);
|
||||
}
|
||||
|
||||
address ~ h1,
|
||||
|
|
@ -456,7 +541,7 @@ p ~ h1,
|
|||
pre ~ h1,
|
||||
table ~ h1,
|
||||
ul ~ h1 {
|
||||
margin-top: 3rem;
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
address ~ h2,
|
||||
|
|
@ -469,7 +554,7 @@ p ~ h2,
|
|||
pre ~ h2,
|
||||
table ~ h2,
|
||||
ul ~ h2 {
|
||||
margin-top: 2.625rem;
|
||||
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||
}
|
||||
|
||||
address ~ h3,
|
||||
|
|
@ -482,7 +567,7 @@ p ~ h3,
|
|||
pre ~ h3,
|
||||
table ~ h3,
|
||||
ul ~ h3 {
|
||||
margin-top: 2.25rem;
|
||||
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||
}
|
||||
|
||||
address ~ h4,
|
||||
|
|
@ -495,7 +580,7 @@ p ~ h4,
|
|||
pre ~ h4,
|
||||
table ~ h4,
|
||||
ul ~ h4 {
|
||||
margin-top: 1.875rem;
|
||||
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||
}
|
||||
|
||||
address ~ h5,
|
||||
|
|
@ -508,7 +593,7 @@ p ~ h5,
|
|||
pre ~ h5,
|
||||
table ~ h5,
|
||||
ul ~ h5 {
|
||||
margin-top: 1.6875rem;
|
||||
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||
}
|
||||
|
||||
address ~ h6,
|
||||
|
|
@ -521,11 +606,11 @@ p ~ h6,
|
|||
pre ~ h6,
|
||||
table ~ h6,
|
||||
ul ~ h6 {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: calc(var(--spacing-typography));
|
||||
}
|
||||
|
||||
hgroup {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
hgroup * {
|
||||
|
|
@ -535,11 +620,11 @@ hgroup * {
|
|||
hgroup > *:last-child {
|
||||
color: var(--muted-text);
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-weight: unset;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
small {
|
||||
|
|
@ -572,12 +657,12 @@ small {
|
|||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.5rem;
|
||||
padding-left: var(--spacing-typography);
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
margin-bottom: 0.375rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
}
|
||||
|
||||
ul li {
|
||||
|
|
@ -593,13 +678,13 @@ mark {
|
|||
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: 3rem 0;
|
||||
padding: 1rem;
|
||||
margin: var(--spacing-typography) 0;
|
||||
padding: var(--spacing-gutter);
|
||||
border-left: 0.25rem solid var(--muted-border);
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
margin-top: 0.75rem;
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
|
|
@ -690,7 +775,7 @@ button::-moz-focus-inner,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
|
|
@ -701,17 +786,19 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[type="file"]::-webkit-file-upload-button,
|
||||
a[role="button"] {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
border-radius: var(--button-round);
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--primary-inverse);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
font-weight: var(--buttons-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -723,21 +810,27 @@ input[type="submit"]:focus,
|
|||
input[type="button"]:hover,
|
||||
input[type="button"]:active,
|
||||
input[type="button"]:focus,
|
||||
input[type="reset"]:hover,
|
||||
input[type="reset"]:active,
|
||||
input[type="reset"]:focus,
|
||||
[type="file"]::-webkit-file-upload-button:hover,
|
||||
[type="file"]::-webkit-file-upload-button:active,
|
||||
[type="file"]::-webkit-file-upload-button:focus,
|
||||
a[role="button"]:hover,
|
||||
a[role="button"]:active,
|
||||
a[role="button"]:focus {
|
||||
border-color: var(--primary-hover-border);
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--button-hover-shadow);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
input[type="submit"]:focus,
|
||||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
[type="file"]::-webkit-file-upload-button:focus,
|
||||
a[role="button"]:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||
}
|
||||
|
||||
input[type="reset"] {
|
||||
|
|
@ -764,7 +857,7 @@ textarea {
|
|||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
letter-spacing: inherit;
|
||||
line-height: 1.5;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -776,7 +869,6 @@ select {
|
|||
}
|
||||
|
||||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
|
|
@ -838,12 +930,12 @@ textarea {
|
|||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||
height: calc(1.5rem + 1.5rem + 2px);
|
||||
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2));
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -851,7 +943,7 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: var(--spacing-form-element);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -869,19 +961,19 @@ textarea {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 0.25rem;
|
||||
border: var(--form-element-border-width) solid var(--input-border);
|
||||
border-radius: var(--block-round);
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
font-weight: var(--form-element-weight);
|
||||
}
|
||||
|
||||
input::placeholder, input::-webkit-input-placeholder,
|
||||
|
|
@ -898,7 +990,8 @@ select:active,
|
|||
select:focus,
|
||||
textarea:active,
|
||||
textarea:focus {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-background);
|
||||
}
|
||||
|
||||
input[readonly], input[disabled],
|
||||
|
|
@ -918,6 +1011,18 @@ textarea[disabled] ~ label {
|
|||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus,
|
||||
select[readonly]:active,
|
||||
select[readonly]:focus,
|
||||
select[disabled]:active,
|
||||
select[disabled]:focus,
|
||||
textarea[readonly]:active,
|
||||
textarea[readonly]:focus,
|
||||
textarea[disabled]:active,
|
||||
textarea[disabled]:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
|
||||
select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]),
|
||||
textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||
|
|
@ -927,20 +1032,19 @@ textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"])
|
|||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
input:not([type="range"]):not([type="file"]):focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
|
|
@ -949,8 +1053,8 @@ select::-ms-expand {
|
|||
}
|
||||
|
||||
select:not([multiple]):not([size]) {
|
||||
padding-right: 2.5rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -963,14 +1067,14 @@ form small {
|
|||
input + small,
|
||||
select + small,
|
||||
textarea + small {
|
||||
margin-top: -1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: calc(var(--spacing-typography) * -0.5);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
label > input,
|
||||
label > select,
|
||||
label > textarea {
|
||||
margin-top: 0.25rem;
|
||||
margin-top: var(--spacing-form-element);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -986,11 +1090,11 @@ table {
|
|||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
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: 400;
|
||||
font-weight: var(--text-weight);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -1005,7 +1109,7 @@ thead td {
|
|||
border-bottom: 3px solid var(--table-border);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
table[role="grid"] tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
}
|
||||
|
||||
|
|
|
|||
2
css/pico.slim.min.css
vendored
2
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
228
css/themes/default.css
Normal file
228
css/themes/default.css
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/**
|
||||
* Theme: default
|
||||
*/
|
||||
:root {
|
||||
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--titles-font: var(--text-font);
|
||||
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--line-height: 1.5;
|
||||
--text-weight: 400;
|
||||
--titles-weight: 700;
|
||||
--form-element-weight: var(--text-weight);
|
||||
--buttons-weight: var(--text-weight);
|
||||
--code-weight: var(--text-weight);
|
||||
--base-font-xs: 16px;
|
||||
--base-font-sm: 17px;
|
||||
--base-font-md: 18px;
|
||||
--base-font-lg: 19px;
|
||||
--base-font-xl: 20px;
|
||||
--h1-size: 2rem;
|
||||
--h2-size: 1.75rem;
|
||||
--h3-size: 1.5rem;
|
||||
--h4-size: 1.25rem;
|
||||
--h5-size: 1.125rem;
|
||||
--block-round: .25rem ;
|
||||
--form-element-border-width: 1px;
|
||||
--form-element-outline-width: 3px;
|
||||
--checkbox-radio-border-width: 2px;
|
||||
--switch-border-width: 3px;
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
--button-round: var(--block-round);
|
||||
--button-border-width: var(--form-element-border-width);
|
||||
--button-outline-width: var(--form-element-outline-width);
|
||||
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||
--spacing-gutter: 1rem;
|
||||
--spacing-block: 2rem;
|
||||
--spacing-factor-xs: 1;
|
||||
--spacing-factor-sm: 1.25;
|
||||
--spacing-factor-md: 1.5;
|
||||
--spacing-factor-lg: 1.75;
|
||||
--spacing-factor-xl: 2;
|
||||
--spacing-typography: 1.5rem;
|
||||
--spacing-form-element: .25rem;
|
||||
--transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
:root {
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--background: #FFF;
|
||||
--text: #415462;
|
||||
--h1: #1b2832;
|
||||
--h2: #2c3d49;
|
||||
--h3: #415462;
|
||||
--h4: #596b78;
|
||||
--h5: #73828c;
|
||||
--h6: #8a99a3;
|
||||
--primary: #1095c1;
|
||||
--primary-border: #1095c1;
|
||||
--primary-hover: #08769b;
|
||||
--primary-hover-border: #08769b;
|
||||
--primary-focus: rgba(16, 149, 193, 0.125);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #73828c;
|
||||
--secondary-border: #73828c;
|
||||
--secondary-hover: #415462;
|
||||
--secondary-hover-border: #415462;
|
||||
--secondary-focus: rgba(115, 130, 140, 0.125);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #2c3d49;
|
||||
--contrast-border: #2c3d49;
|
||||
--contrast-hover: #0d1419;
|
||||
--contrast-hover-border: #0d1419;
|
||||
--contrast-focus: rgba(115, 130, 140, 0.125);
|
||||
--contrast-inverse: #FFF;
|
||||
--input-background: #FFF;
|
||||
--input-border: #c8d1d8;
|
||||
--input-hover-background: #FFF;
|
||||
--input-hover-border: #1095c1;
|
||||
--input-focus: rgba(16, 149, 193, 0.125);
|
||||
--input-inverse: #FFF;
|
||||
--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.5);
|
||||
--mark-text: #2c3d49;
|
||||
--muted-text: #7e8d98;
|
||||
--muted-background: #edf0f3;
|
||||
--muted-border: #edf0f3;
|
||||
--card-background: #FFF;
|
||||
--card-sections: #f3f5f7;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||
--code-background: #f3f5f7;
|
||||
--code-inlined: #edf0f3;
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #b34d80;
|
||||
--code-color-3: #3d888f;
|
||||
--code-color-4: #998866;
|
||||
--code-color-5: #96a4ae;
|
||||
--table-border: rgba(237, 240, 243, 0.75);
|
||||
--table-stripping: rgba(115, 130, 140, 0.075);
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-border: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-hover-border: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-border: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-hover-border: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-border: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover-border: #FFF;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--input-hover-background: #10181e;
|
||||
--input-hover-border: #1095c1;
|
||||
--input-focus: rgba(16, 149, 193, 0.25);
|
||||
--input-inverse: #FFF;
|
||||
--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.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #23333e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: rgba(115, 130, 140, 0.075);
|
||||
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background: #10181e;
|
||||
--text: #a2afb9;
|
||||
--h1: #edf0f3;
|
||||
--h2: #d5dce2;
|
||||
--h3: #bbc6ce;
|
||||
--h4: #a2afb9;
|
||||
--h5: #8a99a3;
|
||||
--h6: #73828c;
|
||||
--primary: #1095c1;
|
||||
--primary-border: #1095c1;
|
||||
--primary-hover: #1ab3e6;
|
||||
--primary-hover-border: #1ab3e6;
|
||||
--primary-focus: rgba(16, 149, 193, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
--secondary: #596b78;
|
||||
--secondary-border: #596b78;
|
||||
--secondary-hover: #73828c;
|
||||
--secondary-hover-border: #73828c;
|
||||
--secondary-focus: rgba(89, 107, 120, 0.25);
|
||||
--secondary-inverse: #FFF;
|
||||
--contrast: #d5dce2;
|
||||
--contrast-border: #d5dce2;
|
||||
--contrast-hover: #FFF;
|
||||
--contrast-hover-border: #FFF;
|
||||
--contrast-focus: rgba(89, 107, 120, 0.25);
|
||||
--contrast-inverse: #10181e;
|
||||
--input-background: #10181e;
|
||||
--input-border: #374956;
|
||||
--input-hover-background: #10181e;
|
||||
--input-hover-border: #1095c1;
|
||||
--input-focus: rgba(16, 149, 193, 0.25);
|
||||
--input-inverse: #FFF;
|
||||
--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.5);
|
||||
--mark-text: #FFF;
|
||||
--muted-text: #73828c;
|
||||
--muted-background: #23333e;
|
||||
--muted-border: #23333e;
|
||||
--card-background: #17232b;
|
||||
--card-sections: #141d24;
|
||||
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
||||
--code-background: #141d24;
|
||||
--code-inlined: rgba(65, 84, 98, 0.25);
|
||||
--code-color-1: #73828c;
|
||||
--code-color-2: #a65980;
|
||||
--code-color-3: #599fa6;
|
||||
--code-color-4: #8c8473;
|
||||
--code-color-5: #4d606d;
|
||||
--table-border: rgba(115, 130, 140, 0.075);
|
||||
--table-stripping: rgba(115, 130, 140, 0.05);
|
||||
}
|
||||
1
css/themes/default.min.css
vendored
Normal file
1
css/themes/default.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -4,6 +4,11 @@
|
|||
/**
|
||||
* 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");
|
||||
}
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--nav-background: rgba(255, 255, 255, 0.7);
|
||||
|
|
@ -33,33 +38,33 @@ html {
|
|||
* Docs: Main (Grid)
|
||||
*/
|
||||
body > main {
|
||||
padding-top: 4.5rem;
|
||||
padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
body > main {
|
||||
padding-top: 4.75rem;
|
||||
padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body > main {
|
||||
padding-top: 5rem;
|
||||
padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
body > main {
|
||||
grid-column-gap: 4rem;
|
||||
grid-column-gap: calc(var(--spacing-gutter) * 4);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
padding-top: 5.25rem;
|
||||
padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
body > main {
|
||||
padding-top: 5.5rem;
|
||||
padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,36 +74,36 @@ body > main > * {
|
|||
|
||||
div[role="document"] > section::before {
|
||||
display: block;
|
||||
height: 4.5rem;
|
||||
margin-top: -4.5rem;
|
||||
height: calc(1rem * var(--spacing-factor-xs) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem);
|
||||
content: '';
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
div[role="document"] > section::before {
|
||||
height: 4.75rem;
|
||||
margin-top: -4.75rem;
|
||||
height: calc(1rem * var(--spacing-factor-sm) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
div[role="document"] > section::before {
|
||||
height: 5rem;
|
||||
margin-top: -5rem;
|
||||
height: calc(1rem * var(--spacing-factor-md) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
div[role="document"] > section::before {
|
||||
height: 5.25rem;
|
||||
margin-top: -5.25rem;
|
||||
height: calc(1rem * var(--spacing-factor-lg) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
div[role="document"] > section::before {
|
||||
height: 5.5rem;
|
||||
margin-top: -5.5rem;
|
||||
height: calc(1rem * var(--spacing-factor-xl) + 3.5rem);
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +111,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
|
|||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-image: var(--icon-external);
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
|
|
@ -123,11 +128,11 @@ form.grid > button {
|
|||
*/
|
||||
main > aside nav {
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: var(--spacing-block);
|
||||
}
|
||||
|
||||
main > aside nav h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
|
|
@ -207,8 +212,8 @@ main > aside details[open] summary {
|
|||
#customization figure {
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: var(--block-round);
|
||||
border-top-left-radius: var(--block-round);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -231,19 +236,15 @@ main > aside details[open] summary {
|
|||
}
|
||||
|
||||
#customization figure button.picked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-check);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
#customization h4 {
|
||||
transition: color 0.2s ease-in-out;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
#customization pre[data-theme="generated"] {
|
||||
|
|
@ -253,7 +254,7 @@ main > aside details[open] summary {
|
|||
#grids button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
|
|
@ -273,13 +274,13 @@ main > aside details[open] summary {
|
|||
}
|
||||
|
||||
#grids .grid > * {
|
||||
padding: 0.5rem 0;
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
background: var(--code-background);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#grids details {
|
||||
margin-top: 3rem;
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
#forms div.grid {
|
||||
|
|
@ -290,12 +291,12 @@ main > aside details[open] summary {
|
|||
* Docs: Typography
|
||||
*/
|
||||
section > hgroup {
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-right: calc(var(--spacing-typography) / 4);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
[role=document] section > h1,
|
||||
|
|
@ -309,25 +310,25 @@ a[role=button] {
|
|||
*/
|
||||
@media (min-width: 576px) {
|
||||
pre {
|
||||
padding: 2rem 2.5rem;
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
pre {
|
||||
padding: 2rem 3rem;
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
pre {
|
||||
padding: 2rem 3.5rem;
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
pre {
|
||||
padding: 2rem 4rem;
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -353,8 +354,8 @@ a[role=button] {
|
|||
@media (min-width: 992px) {
|
||||
[data-theme="invalid"]:before,
|
||||
[data-theme="valid"]:before {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
top: var(--spacing-gutter);
|
||||
right: var(--spacing-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -399,7 +400,7 @@ body > nav a svg {
|
|||
body > nav ul:first-of-type li:first-of-type a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin-left: -1rem;
|
||||
margin-left: calc(var(--spacing-gutter) * -1);
|
||||
padding: 0;
|
||||
background: var(--h1);
|
||||
color: var(--background);
|
||||
|
|
@ -407,7 +408,7 @@ body > nav ul:first-of-type li:first-of-type a {
|
|||
|
||||
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: 1rem;
|
||||
margin-left: var(--spacing-gutter);
|
||||
color: var(--h1);
|
||||
}
|
||||
|
||||
|
|
@ -422,15 +423,15 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
*/
|
||||
.switcher {
|
||||
position: fixed;
|
||||
right: 0.5rem;
|
||||
bottom: 1rem;
|
||||
right: calc(var(--spacing-gutter) / 2);
|
||||
bottom: var(--spacing-gutter);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: .75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-shadow);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.switcher::after {
|
||||
|
|
@ -442,7 +443,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||
vertical-align: bottom;
|
||||
content: '';
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.switcher i {
|
||||
|
|
@ -457,7 +458,7 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
|
||||
.switcher:hover, .switcher:focus {
|
||||
max-width: 100%;
|
||||
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.switcher:hover::after {
|
||||
|
|
@ -466,8 +467,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
|
||||
.switcher:hover i {
|
||||
max-width: 100%;
|
||||
padding: 0 0.5rem 0 0.25rem;
|
||||
transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out;
|
||||
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
|
||||
transition: max-width var(--transition), padding var(--transition);
|
||||
}
|
||||
|
||||
.switcher:focus {
|
||||
|
|
@ -476,6 +477,6 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
|||
|
||||
@media (min-width: 576px) {
|
||||
.switcher {
|
||||
right: 1rem;
|
||||
right: var(--spacing-gutter);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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
|
|
@ -133,11 +133,11 @@
|
|||
<h2>Themes</h2>
|
||||
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
|
||||
</hgroup>
|
||||
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
|
||||
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
|
||||
<article aria-label="Theme switcher">
|
||||
<button class="contrast theme-switcher">...</button>
|
||||
</article>
|
||||
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code>.</p>
|
||||
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code></p>
|
||||
<article data-theme="light">
|
||||
<h4>Light theme</h4>
|
||||
<form class="grid">
|
||||
|
|
@ -301,7 +301,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code>.</p>
|
||||
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>
|
||||
<p><code><<b>section</b>></code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||
</section><!-- ./ Docs: Container -->
|
||||
|
||||
|
|
@ -327,7 +327,7 @@
|
|||
</<b>div</b>></code></pre>
|
||||
|
||||
</article>
|
||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
|
||||
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
|
||||
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
|
||||
<details>
|
||||
<summary>
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
<h2>Horizontal scroller</h2>
|
||||
<h3><code><<b>figure</b>></code> act as a container to make any content scrollable horizontally.</h3>
|
||||
</hgroup>
|
||||
<p>Useful to have responsives <code><<b>table</b>></code>.</p>
|
||||
<p>Useful to have responsives <code><<b>table</b>></code></p>
|
||||
<figure>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -938,7 +938,7 @@
|
|||
<!-- Love -->
|
||||
<section id="love">
|
||||
<h2>We love <code>.classes</code></h2>
|
||||
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</p>
|
||||
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
|
||||
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
|
||||
<p>Feel free to use <em>modifiers</em>.</p>
|
||||
<div data-theme="valid">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ body > nav {
|
|||
a {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin-left: -$spacing-gutter;
|
||||
margin-left: calc(var(--spacing-gutter) * -1);
|
||||
padding: 0;
|
||||
background: var(--h1);
|
||||
color: var(--background);
|
||||
|
|
@ -38,7 +38,7 @@ body > nav {
|
|||
// Title
|
||||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
margin-left: $spacing-gutter;
|
||||
margin-left: var(--spacing-gutter);
|
||||
color: var(--h1);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@
|
|||
|
||||
.switcher {
|
||||
position: fixed;
|
||||
right: $spacing-gutter/2;
|
||||
bottom: $spacing-gutter;
|
||||
right: calc(var(--spacing-gutter) / 2);
|
||||
bottom: var(--spacing-gutter);
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
padding: .75rem;
|
||||
border-radius: 2rem;
|
||||
box-shadow: var(--card-shadow);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||
vertical-align: bottom;
|
||||
content: '';
|
||||
transition: transform $transition;
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
@ -40,10 +40,10 @@
|
|||
&:focus {
|
||||
max-width: 100%;
|
||||
transition:
|
||||
background-color $transition,
|
||||
border-color $transition,
|
||||
color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -53,9 +53,9 @@
|
|||
|
||||
i {
|
||||
max-width: 100%;
|
||||
padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4);
|
||||
transition: max-width $transition,
|
||||
padding $transition;
|
||||
padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
|
||||
transition: max-width var(--transition),
|
||||
padding var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,6 +65,6 @@
|
|||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
right: $spacing-gutter;
|
||||
right: var(--spacing-gutter);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,38 +6,34 @@
|
|||
pre {
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
||||
padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,8 +57,8 @@ pre {
|
|||
line-height: 1;
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
top: $spacing-gutter;
|
||||
right: $spacing-gutter;
|
||||
top: var(--spacing-gutter);
|
||||
right: var(--spacing-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
*/
|
||||
|
||||
section > hgroup {
|
||||
margin-bottom: $spacing-typography*2;
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
margin-right: $spacing-gutter/4;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-right: calc(var(--spacing-typography) / 4);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
[role=document] {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ main > aside {
|
|||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-block;
|
||||
margin-bottom: var(--spacing-block);
|
||||
|
||||
h1 {
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
border-top-right-radius: $round;
|
||||
border-top-left-radius: $round;
|
||||
border-top-right-radius: var(--block-round);
|
||||
border-top-left-radius: var(--block-round);
|
||||
}
|
||||
|
||||
~ article {
|
||||
|
|
@ -48,8 +48,7 @@
|
|||
}
|
||||
|
||||
&.picked {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-check);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
|
|
@ -59,15 +58,14 @@
|
|||
&[data-color="yellow"],
|
||||
&[data-color="amber"] {
|
||||
&.picked {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
transition: color $transition;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
pre[data-theme="generated"] {
|
||||
|
|
@ -84,7 +82,7 @@
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-typography/2;
|
||||
margin-bottom: calc(var(--spacing-typography) / 2);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
display: inline-block;
|
||||
|
|
@ -102,13 +100,13 @@
|
|||
}
|
||||
|
||||
.grid > * {
|
||||
padding: ($spacing-gutter/2) 0;
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
background: var(--code-background);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-top: $spacing-typography*2;
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,25 +5,25 @@
|
|||
$navHeight: 3.5rem;
|
||||
|
||||
body > main {
|
||||
padding-top:map-get($spacing-factor, "xs") + $navHeight;
|
||||
padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
padding-top: map-get($spacing-factor, "sm") + $navHeight;
|
||||
padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
padding-top: map-get($spacing-factor, "md") + $navHeight;
|
||||
padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
grid-column-gap: $spacing-gutter*4;
|
||||
grid-column-gap: calc(var(--spacing-gutter) * 4);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
padding-top: map-get($spacing-factor, "lg") + $navHeight;
|
||||
padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
padding-top: map-get($spacing-factor, "xl") + $navHeight;
|
||||
padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||||
}
|
||||
|
||||
> * {
|
||||
|
|
@ -37,29 +37,29 @@ body > main {
|
|||
|
||||
div[role="document"] > section::before {
|
||||
display: block;
|
||||
height: map-get($spacing-factor, "xs") + $navHeight;
|
||||
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
|
||||
height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
|
||||
content: '';
|
||||
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
height: map-get($spacing-factor, "sm") + $navHeight;
|
||||
margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
|
||||
height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
height: map-get($spacing-factor, "md") + $navHeight;
|
||||
margin-top: -(map-get($spacing-factor, "md") + $navHeight);
|
||||
height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
height: map-get($spacing-factor, "lg") + $navHeight;
|
||||
margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
|
||||
height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
height: map-get($spacing-factor, "xl") + $navHeight;
|
||||
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
|
||||
height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
|
||||
margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,8 +71,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
|
|||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-image: var(--icon-external);
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .66rem auto;
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@
|
|||
*/
|
||||
|
||||
@import "../../../scss/themes/default/colors";
|
||||
@import "docs/icons";
|
||||
@import "docs/light";
|
||||
@import "docs/dark";
|
||||
7
docs/scss/themes/docs/_icons.scss
Normal file
7
docs/scss/themes/docs/_icons.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
// Icons
|
||||
// Source: https://feathericons.com/
|
||||
|
||||
:root {
|
||||
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
}
|
||||
370
index.html
Normal file
370
index.html
Normal file
|
|
@ -0,0 +1,370 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
|
||||
<title>Class-less example • Pico.css</title>
|
||||
<meta name="description" content="Just a pure semantic HTML markup, without .classes. Built with Pico CSS.">
|
||||
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
|
||||
<link rel="canonical" href="https://picocss.com/examples/classless/">
|
||||
|
||||
<!-- Pico.css -->
|
||||
<link rel="stylesheet" href="css/pico.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="container">
|
||||
<hgroup>
|
||||
<h1>Pico</h1>
|
||||
<h2>Graceful & Minimal CSS design system in pure semantic HTML</h2>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Color scheme:</a></li>
|
||||
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
||||
<li><a href="#" data-theme-switcher="light">Light</a></li>
|
||||
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
|
||||
<section>
|
||||
|
||||
<h2>Buttons</h2>
|
||||
<div class="grid">
|
||||
<button>Primary</button>
|
||||
<button class="secondary">Secondary</button>
|
||||
<button class="contrast">Contrast</button>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<button class="outline">Primary outline</button>
|
||||
<button class="outline secondary">Secondary outline</button>
|
||||
<button class="outline contrast">Contrast outline</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<form>
|
||||
<h2>Form elements</h2>
|
||||
|
||||
<!-- Search -->
|
||||
<input type="search" id="search" name="search" placeholder="Search">
|
||||
|
||||
<!-- Text -->
|
||||
<label for="firstname">First name</label>
|
||||
<input type="text" id="firstname" name="firstname" placeholder="First name">
|
||||
<small>Curabitur consequat lacus at lacus porta finibus.</small>
|
||||
|
||||
<!-- States -->
|
||||
<div class="grid">
|
||||
<label for="valid">
|
||||
Valid
|
||||
<input type="text" id="valid" name="valid" placeholder="Valid" aria-label="Valid" class="valid">
|
||||
</label>
|
||||
<label for="invalid">
|
||||
Invalid
|
||||
<input type="text" id="invalid" name="invalid" placeholder="Invalid" aria-label="Invalid" class="invalid">
|
||||
</label>
|
||||
<label for="disabled">
|
||||
Disabled
|
||||
<input type="text" id="disabled" name="disabled" placeholder="Disabled" aria-label="Disabled" disabled>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Date-->
|
||||
<label for="date">Birthdate</label>
|
||||
<input type="date" id="date" name="date" >
|
||||
|
||||
<!-- Select -->
|
||||
<label for="select">Select</label>
|
||||
<select id="select" name="select">
|
||||
<option selected>Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<!-- Checkboxes -->
|
||||
<fieldset>
|
||||
<legend><strong>Checkboxes</strong></legend>
|
||||
<label for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
|
||||
Checkbox
|
||||
</label>
|
||||
<label for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" name="checkbox-2">
|
||||
Checkbox
|
||||
</label>
|
||||
<label for="checkbox-3">
|
||||
<input type="checkbox" id="checkbox-3" name="checkbox-3">
|
||||
Checkbox
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Radio buttons -->
|
||||
<fieldset>
|
||||
<legend><strong>Radio buttons</strong></legend>
|
||||
<label for="radio-1">
|
||||
<input type="radio" id="radio-1" name="radio" value="radio-1" checked>
|
||||
Radio button
|
||||
</label>
|
||||
<label for="radio-2">
|
||||
<input type="radio" id="radio-2" name="radio" value="radio-2">
|
||||
Radio button
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Switch -->
|
||||
<fieldset>
|
||||
<legend><strong>Switches</strong></legend>
|
||||
<label for="switch-1">
|
||||
<input type="checkbox" id="switch-1" name="switch-1" role="switch" aria-checked="true" checked>
|
||||
Switch
|
||||
</label>
|
||||
<label for="switch-2">
|
||||
<input type="checkbox" id="switch-2" name="switch-2" role="switch" aria-checked="false">
|
||||
Switch
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- File browser -->
|
||||
<label for="file">File browser
|
||||
<input type="file" id="file" name="file">
|
||||
</label>
|
||||
|
||||
<!-- Range slider control -->
|
||||
<label for="range">Range slider
|
||||
<input type="range" min="0" max="100" value="50" id="range" name="range">
|
||||
</label>
|
||||
|
||||
<!-- Buttons -->
|
||||
<input type="reset" value="Reset">
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<article>
|
||||
|
||||
<header>
|
||||
Test
|
||||
</header>
|
||||
|
||||
<h3>Article example</h3>
|
||||
<p>Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra rutrum.</p>
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li>Nulla pellentesque elit nec velit convallis, sit amet accumsan odio pulvinar.</li>
|
||||
<li>Aliquam venenatis massa a ornare ullamcorper.</li>
|
||||
</ul>
|
||||
|
||||
<footer>
|
||||
Test
|
||||
</footer>
|
||||
|
||||
</article>
|
||||
|
||||
<section>
|
||||
|
||||
<h2>Typography</h2>
|
||||
<p>Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique felis.</p>
|
||||
|
||||
<blockquote>
|
||||
"Blockquote example: Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||||
<footer>
|
||||
<cite>- Phasellus eget lacinia</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<h3>Lists</h3>
|
||||
<ul>
|
||||
<li>Aliquam lobortis lacus eu libero ornare facilisis.</li>
|
||||
<li>Nam et magna at libero scelerisque egestas.</li>
|
||||
<li>Suspendisse id nisl ut leo finibus vehicula quis eu ex.</li>
|
||||
<li>Proin ultricies turpis et volutpat vehicula.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Inline text elements</h3>
|
||||
<div class="grid">
|
||||
<p><a href="#">Primary link</a></p>
|
||||
<p><a href="#" class="secondary">Secondary link</a></p>
|
||||
<p><a href="#" class="contrast">Contrast link</a></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p><strong>Bold</strong></p>
|
||||
<p><em>Italic</em></p>
|
||||
<p><u>Underline</u></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p><del>Deleted</del></p>
|
||||
<p><ins>Inserted</ins></p>
|
||||
<p><s>Strikethrough</s></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p><small>Small </small></p>
|
||||
<p>Text <sub>Sub</sub></p>
|
||||
<p>Text <sup>Sup</sup></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p><abbr title="Abbreviation">Abbr.</abbr></p>
|
||||
<p><kbd>Kbd</kbd></p>
|
||||
<p><mark>Highlighted</mark></p>
|
||||
</div>
|
||||
|
||||
<h3>Heading 3</h3>
|
||||
<p>Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
||||
|
||||
<h4>Heading 4</h4>
|
||||
<p>Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus.</p>
|
||||
|
||||
<h5>Heading 5</h5>
|
||||
<p>Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam sem.</p>
|
||||
|
||||
<h6>Heading 6</h6>
|
||||
<p>Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in velit.</p>
|
||||
|
||||
<figure>
|
||||
<img src="https://source.unsplash.com/a562ZEFKW8I/2000x1000" alt="Minimal landscape">
|
||||
<figcaption>Image from <a href="https://unsplash.com">unsplash.com</a></figcaption>
|
||||
</figure>
|
||||
|
||||
</section>
|
||||
|
||||
<section aria-label="Responsive table example">
|
||||
<p>Responsive table example</p>
|
||||
<figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<table role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<small>Built with <a href="https://picocss.com">Pico</a> • <a href="https://github.com/picocss/examples/blob/master/classless/index.html">Source code</a></small>
|
||||
</footer>
|
||||
|
||||
|
||||
<script>
|
||||
// Minimal theme switcher
|
||||
(function() {
|
||||
var buttonsTheme = document.querySelectorAll('a[data-theme-switcher]');
|
||||
for (var i = 0; i < buttonsTheme.length; i++) {
|
||||
buttonsTheme[i].addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
document.querySelector('html').setAttribute(
|
||||
'data-theme',
|
||||
event.target.getAttribute('data-theme-switcher'));
|
||||
}, false);
|
||||
}
|
||||
})();
|
||||
|
||||
// Set undeterminate checkbox
|
||||
document.getElementById('checkbox-2').indeterminate = true;
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -33,86 +33,6 @@ $enable-transitions: true !default;
|
|||
$enable-important: true !default;
|
||||
|
||||
|
||||
// Spacings
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Gutters and horizontals margins
|
||||
// For <body>, .grid, <nav>, <table>
|
||||
$spacing-gutter: 1rem !default;
|
||||
|
||||
// Blocks verticals margins and paddings
|
||||
// For <header>, <main>, <footer>, <section>, <article>
|
||||
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
||||
$spacing-block: 2rem !default;
|
||||
|
||||
// Vertical margins for Typography and Form elements
|
||||
// This value is proportionally multiplied according breakpoints for great responsive spacings
|
||||
$spacing-typography: 1.5rem !default;
|
||||
|
||||
// Spacing between: Label and Input, Checkboxes, Radios
|
||||
$spacing-form-elements: $spacing-typography/6 !default;
|
||||
|
||||
// Padding for <input> and <button>
|
||||
$spacing-input-button-vertical: .75rem !default;
|
||||
$spacing-input-button-horizontal: 1rem !default;
|
||||
|
||||
|
||||
// Typography
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Sans serif native font stack
|
||||
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
$sans-serif:
|
||||
system-ui,
|
||||
-apple-system, // macOS 10.11-10.12
|
||||
"Segoe UI", // Windows 6+
|
||||
"Roboto", // Android 4+
|
||||
"Ubuntu", // Ubuntu 10.10+
|
||||
"Cantarell", // Gnome 3+
|
||||
"Noto Sans", // KDE Plasma 5+
|
||||
sans-serif, // Fallback
|
||||
"Apple Color Emoji", // macOS emoji
|
||||
"Segoe UI Emoji", // Windows emoji
|
||||
"Segoe UI Symbol", // Windows emoji
|
||||
"Noto Color Emoji" // Linux emoji
|
||||
!default;
|
||||
|
||||
// Monospace native font stack
|
||||
// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
$monospace:
|
||||
"Menlo", // macOS 10.10+
|
||||
"Consolas", // Windows 6+
|
||||
"Roboto Mono", // Android 4+
|
||||
"Ubuntu Monospace", // Ubuntu 10.10+
|
||||
"Noto Mono", // KDE Plasma 5+
|
||||
"Oxygen Mono", // KDE Plasma 4+
|
||||
"Liberation Mono", // Linux/OpenOffice fallback
|
||||
monospace, // Fallback
|
||||
"Apple Color Emoji", // macOS emoji
|
||||
"Segoe UI Emoji", // Windows emoji
|
||||
"Segoe UI Symbol", // Windows emoji
|
||||
"Noto Color Emoji" // Linux emoji
|
||||
!default;
|
||||
|
||||
$line-height: 1.5 !default;
|
||||
$text-weight: 400 !default;
|
||||
$heading-weight: 700 !default;
|
||||
|
||||
|
||||
// Blocks
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// For <form> elements, <button>, <article>, <details> inlined code, tooltips
|
||||
$round: .25rem !default;
|
||||
|
||||
|
||||
// Transitions
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// For <a>, <form> elements and <button>
|
||||
$transition: .2s ease-in-out !default;
|
||||
|
||||
|
||||
// Responsive
|
||||
// ––––––––––––––––––––
|
||||
|
||||
|
|
@ -126,7 +46,6 @@ $transition: .2s ease-in-out !default;
|
|||
// To provide an easy and fine styling on each breakpoint
|
||||
// we didn't use @each, @mixin or @include.
|
||||
// That means you need to edit each CSS selector file to add a breakpoint
|
||||
// You can disable any viewports, base-font and spacing-factor with 'null'
|
||||
|
||||
// Breakpoints
|
||||
// 'null' disable the breakpoint
|
||||
|
|
@ -146,24 +65,3 @@ $viewports: (
|
|||
lg: 920px,
|
||||
xl: 1130px
|
||||
) !default;
|
||||
|
||||
// Base font for .rem
|
||||
// 'null' disable the base font on a breakpoint
|
||||
// 'xs' should not be 'null'
|
||||
$base-font: (
|
||||
xs: 16px,
|
||||
sm: 17px,
|
||||
md: 18px,
|
||||
lg: 19px,
|
||||
xl: 20px
|
||||
) !default;
|
||||
|
||||
// Multiplication factor for spacings
|
||||
// 'null' disable spacing factor on a breakpoint
|
||||
$spacing-factor: (
|
||||
xs: 1,
|
||||
sm: 1.25,
|
||||
md: 1.5,
|
||||
lg: 1.75,
|
||||
xl: 2
|
||||
) !default;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
|
||||
details {
|
||||
display: block;
|
||||
margin-bottom: $spacing-typography;
|
||||
padding-bottom: $spacing-typography/2;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding-bottom: calc(var(--spacing-typography) / 2);
|
||||
border-bottom: 1px solid var(--muted-border);
|
||||
|
||||
summary {
|
||||
|
|
@ -32,12 +32,15 @@ details {
|
|||
height: 1rem;
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -45,7 +48,7 @@ details {
|
|||
}
|
||||
|
||||
~ * {
|
||||
margin-top: $spacing-typography/2;
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
|
||||
~ * {
|
||||
margin-top: 0;
|
||||
|
|
@ -57,7 +60,7 @@ details {
|
|||
&[open] {
|
||||
|
||||
summary {
|
||||
margin-bottom: $spacing-typography/4;
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
color: var(--muted-text);
|
||||
|
||||
&::after {
|
||||
|
|
|
|||
|
|
@ -10,135 +10,123 @@ article {
|
|||
> header,
|
||||
> footer,
|
||||
> pre {
|
||||
margin: -$spacing-gutter;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
margin: calc(var(--spacing-gutter) * -1);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "sm");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "md");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "lg");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: -$spacing-block*map-get($spacing-factor, "xl");
|
||||
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "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: -$spacing-gutter*2;
|
||||
margin-bottom: $spacing-block;
|
||||
margin-top: calc(var(--spacing-gutter) * -2);
|
||||
margin-bottom: var(--spacing-block);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "sm"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "md"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "lg"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: -($spacing-block*map-get($spacing-factor, "xl"));
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "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: $spacing-block;
|
||||
margin-bottom: -$spacing-gutter*2;
|
||||
margin-top: var(--spacing-block);
|
||||
margin-bottom: calc(var(--spacing-gutter) * -2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "sm");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "md");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "lg");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-top: $spacing-block*map-get($spacing-factor, "xl");
|
||||
margin-bottom: -($spacing-block*map-get($spacing-factor, "xl"));
|
||||
margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,53 +3,50 @@
|
|||
*/
|
||||
|
||||
article {
|
||||
margin: $spacing-block 0;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
overflow: hidden;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background: var(--card-background);
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
@if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "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: $spacing-block 0;
|
||||
padding: $spacing-block;
|
||||
margin: var(--spacing-block) 0;
|
||||
padding: var(--spacing-block);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "md");
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "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
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
|
||||
padding: $spacing-block*map-get($spacing-factor, "xl");
|
||||
margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;
|
||||
padding: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,17 +19,17 @@ nav {
|
|||
list-style: none;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: -$spacing-gutter/2;
|
||||
margin-left: calc(var(--spacing-gutter) * -0.5);
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: -$spacing-gutter/2;
|
||||
margin-right: calc(var(--spacing-gutter) * -0.5);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: $spacing-gutter $spacing-gutter/2;
|
||||
padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2);
|
||||
|
||||
// HACK: Input & Button inside Nav
|
||||
> *,
|
||||
|
|
@ -40,23 +40,25 @@ nav {
|
|||
|
||||
a {
|
||||
display: block;
|
||||
margin: -$spacing-gutter (-$spacing-gutter/2);
|
||||
padding: $spacing-gutter $spacing-gutter/2;
|
||||
border-radius: $round;
|
||||
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 {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Disable underline for a.contrast in nav
|
||||
@if $enable-classes {
|
||||
&.contrast:not([role="button"]),
|
||||
&.contrast:not([role="button"]):hover,
|
||||
&.contrast:not([role="button"]):active,
|
||||
&.contrast:not([role="button"]):focus {
|
||||
box-shadow: none;
|
||||
@if $enable-important {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -73,11 +75,11 @@ aside {
|
|||
}
|
||||
|
||||
li {
|
||||
padding: $spacing-gutter/2;
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
|
||||
a {
|
||||
margin: -$spacing-gutter/2;
|
||||
padding: $spacing-gutter/2;
|
||||
margin: calc(var(--spacing-gutter) * -0.5);
|
||||
padding: calc(var(--spacing-gutter) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,12 +21,12 @@
|
|||
padding: .25rem .5rem;
|
||||
overflow: hidden;
|
||||
transform: translate(-50%, -.25rem);
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background: var(--contrast);
|
||||
color: var(--contrast-inverse);
|
||||
font-size: .85rem;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: var(--text-weight);
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -9,17 +9,24 @@
|
|||
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 {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
@if $enable-important {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,17 +36,19 @@
|
|||
input[type="submit"].contrast,
|
||||
input[type="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: 0 0 0 0.2rem var(--contrast-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,14 +57,14 @@
|
|||
button.outline,
|
||||
input[type="submit"].outline,
|
||||
a.outline[role="button"] {
|
||||
border: 1px solid var(--primary);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--primary-hover);
|
||||
border: 1px solid var(--primary-hover-border);
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -66,20 +75,16 @@
|
|||
input[type="submit"].outline.secondary,
|
||||
input[type="reset"].outline,
|
||||
a[role="button"].outline.secondary {
|
||||
border: 1px solid var(--secondary);
|
||||
border: var(--button-border-width) solid var(--secondary-border);
|
||||
background-color: transparent;
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--secondary-hover);
|
||||
border: 1px solid var(--secondary-hover-border);
|
||||
color: var(--secondary-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -88,19 +93,15 @@
|
|||
input[type="submit"].outline.contrast,
|
||||
input[type="reset"].outline.contrast,
|
||||
a[role="button"].outline.contrast {
|
||||
border: 1px solid var(--contrast);
|
||||
border: var(--button-border-width) solid var(--contrast-border);
|
||||
background-color: transparent;
|
||||
color: var(--contrast);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: 1px solid var(--contrast-hover);
|
||||
border: 1px solid var(--contrast-hover-border);
|
||||
color: var(--contrast-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ button::-moz-focus-inner,
|
|||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
a[role="button"] {
|
||||
|
|
@ -53,35 +53,40 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
[type="file"]::-webkit-file-upload-button,
|
||||
a[role="button"] {
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $round;
|
||||
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
||||
border: var(--button-border-width) solid var(--primary-border);
|
||||
border-radius: var(--button-round);
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
box-shadow: var(--button-shadow);
|
||||
color: var(--primary-inverse);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: $line-height;
|
||||
font-weight: var(--buttons-weight);
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary-hover-border);
|
||||
background-color: var(--primary-hover);
|
||||
box-shadow: var(--button-hover-shadow);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ pre,
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: $monospace; // 1
|
||||
font-family: var(--code-font); // 1
|
||||
font-size: 1rem; // 2
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ kbd {
|
|||
background: var(--code-inlined);
|
||||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
font-weight: var(--code-weight);
|
||||
line-height: initial;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
|
|
@ -65,13 +65,13 @@ code,
|
|||
kbd {
|
||||
display: inline-block;
|
||||
padding: .375rem .5rem;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-bottom: $spacing-block;
|
||||
padding: $spacing-block $spacing-gutter;
|
||||
margin-bottom: var(--spacing-block);
|
||||
padding: var(--spacing-block) var(--spacing-gutter);
|
||||
overflow-x: auto;
|
||||
background: var(--code-background);
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ pre {
|
|||
padding: 0;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
line-height: $line-height;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ code {
|
|||
// Tags
|
||||
b {
|
||||
color: var(--code-color-2);
|
||||
font-weight: normal;
|
||||
font-weight: var(--code-weight);
|
||||
}
|
||||
|
||||
// Properties
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
// Swatch
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
}
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: $round/2;
|
||||
border-radius: calc(var(--block-round)/2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +31,7 @@
|
|||
[type="month"],
|
||||
[type="time"],
|
||||
[type="week"] {
|
||||
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-image: var(--icon-date);
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -45,30 +43,40 @@
|
|||
|
||||
// Time
|
||||
[type="time"] {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-time);
|
||||
}
|
||||
|
||||
// File
|
||||
[type="file"] {
|
||||
padding: $spacing-input-button-horizontal/2 0;
|
||||
padding: calc(var(--form-element-spacing-vertical)/2) 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
color: var(--muted-text);
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
padding-top: $spacing-input-button-horizontal/2;
|
||||
padding-bottom: $spacing-input-button-horizontal/2;
|
||||
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);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
border-color: var(--secondary-hover-border);
|
||||
background-color: var(--secondary-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +84,7 @@
|
|||
&:focus {
|
||||
box-shadow: none;
|
||||
&::-webkit-file-upload-button {
|
||||
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
|
||||
box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,38 +109,39 @@
|
|||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height:$height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
width: 100%;
|
||||
height: $height-track;
|
||||
border-radius: $round;
|
||||
border-radius: var(--block-round);
|
||||
background-color: var(--input-border);
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -146,16 +155,15 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--background);
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -164,15 +172,15 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -181,39 +189,36 @@
|
|||
width: $height-thumb;
|
||||
height: $height-thumb;
|
||||
margin-top: #{(-($height-thumb/2) + ($height-track/2))};
|
||||
border: 0;
|
||||
border: $border-thumb solid var(--input-background);
|
||||
border-radius: 50%;
|
||||
background-color: var(--text);
|
||||
cursor: pointer;
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
transform $transition;
|
||||
background-color var(--transition),
|
||||
transform var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: transparent;
|
||||
|
||||
// Slider Track
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
background-color: var(--muted-text);
|
||||
box-shadow: 0 0 0 0.1rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 0.1rem var(--input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,12 +248,11 @@
|
|||
|
||||
// Search
|
||||
[type="search"] {
|
||||
border-radius: #{1rem*$line-height + $spacing-input-button-vertical*2};
|
||||
border-radius: 5rem;
|
||||
|
||||
@if $enable-important {
|
||||
padding-left: #{$spacing-input-button-horizontal + 1.5rem} !important;
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||
background-image: var(--icon-search);
|
||||
background-position: center left .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-top: -.125rem;
|
||||
margin-right: .375rem;
|
||||
margin-bottom: $spacing-form-elements;
|
||||
border-width: 2px;
|
||||
border-width: var(--checkbox-radio-border-width);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -21,16 +21,20 @@
|
|||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%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");
|
||||
&:checked,
|
||||
&:indeterminate {
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-border);
|
||||
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;
|
||||
|
|
@ -45,8 +49,8 @@
|
|||
|
||||
&:checked {
|
||||
border-width: .33rem;
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary-inverse);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-inverse);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,23 +61,22 @@
|
|||
// Config
|
||||
$switch-height: 1.25rem;
|
||||
$switch-width: 2.25rem;
|
||||
$switch-border: 3px;
|
||||
$switch-transition: .1s ease-in-out;
|
||||
|
||||
// Styles
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
border: $switch-border solid var(--input-border);
|
||||
border: var(--switch-border-width) solid var(--input-border);
|
||||
border-radius: $switch-height;
|
||||
background-color: var(--input-border);
|
||||
line-height: $switch-height;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: calc(#{$switch-height} - #{$switch-border*2});
|
||||
width: calc(#{$switch-height} - (var(--switch-border-width)*2));
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--primary-inverse);
|
||||
background-color: var(--input-inverse);
|
||||
content: '';
|
||||
|
||||
@if $enable-transitions {
|
||||
|
|
@ -82,13 +85,13 @@
|
|||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
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} - #{$switch-border});
|
||||
margin-left: calc(#{$switch-width/2} - var(--switch-border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ textarea {
|
|||
font-family: inherit; // 1
|
||||
font-size: 1rem; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
line-height: $line-height; // 1
|
||||
line-height: var(--line-height); // 1
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
|
|
@ -36,7 +36,6 @@ select {
|
|||
// 3. Remove the padding so developers are not caught out when they zero out
|
||||
// `fieldset` elements in all browsers
|
||||
legend {
|
||||
display: table; // 1
|
||||
max-width: 100%; // 1
|
||||
padding: 0; // 3
|
||||
color: inherit; // 2
|
||||
|
|
@ -118,13 +117,17 @@ textarea {
|
|||
|
||||
// Force height for alternatives input types
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
||||
height: calc(#{1rem*$line-height} + #{$spacing-input-button-vertical*2} + 2px);
|
||||
height: calc(
|
||||
(1rem * var(--line-height)) +
|
||||
(var(--form-element-spacing-vertical) * 2) +
|
||||
(var(--form-element-border-width) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -133,7 +136,7 @@ fieldset {
|
|||
label,
|
||||
fieldset legend {
|
||||
display: block;
|
||||
margin-bottom: $spacing-form-elements;
|
||||
margin-bottom: var(--spacing-form-element);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +156,7 @@ textarea {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: $spacing-input-button-vertical $spacing-input-button-horizontal;
|
||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
|
@ -161,20 +164,20 @@ textarea {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: $round;
|
||||
border: var(--form-element-border-width) solid var(--input-border);
|
||||
border-radius: var(--block-round);
|
||||
outline: none;
|
||||
background-color: var(--input-background);
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
font-weight: var(--form-element-weight);
|
||||
|
||||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
border-color $transition,
|
||||
color $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&::placeholder,
|
||||
|
|
@ -185,7 +188,8 @@ textarea {
|
|||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--input-hover-border);
|
||||
background-color: var(--input-hover-background);
|
||||
}
|
||||
|
||||
&[readonly],
|
||||
|
|
@ -196,6 +200,16 @@ textarea {
|
|||
& ~ label {
|
||||
color: var(--muted-text);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@if $enable-important {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@else {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) {
|
||||
|
|
@ -203,8 +217,7 @@ textarea {
|
|||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
opacity: .66;
|
||||
}
|
||||
|
||||
// Validation states
|
||||
|
|
@ -220,13 +233,11 @@ textarea {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-image: var(--icon-valid);
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{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");
|
||||
background-image: var(--icon-invalid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +246,7 @@ textarea {
|
|||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Focus styles (Not Range and File)
|
||||
|
|
@ -243,7 +254,7 @@ input:not([type="range"]):not([type="file"]),
|
|||
select,
|
||||
textarea {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
||||
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -257,9 +268,8 @@ select {
|
|||
}
|
||||
|
||||
&:not([multiple]):not([size]) {
|
||||
padding-right: #{$spacing-input-button-horizontal + 1.5rem};
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||
background-image: var(--icon-chevron);
|
||||
background-position: center right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
@ -276,8 +286,8 @@ input,
|
|||
select,
|
||||
textarea {
|
||||
+ small {
|
||||
margin-top: -$spacing-typography/1.5;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-top: calc(var(--spacing-typography) * -0.5);
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -286,6 +296,6 @@ label {
|
|||
& > input,
|
||||
& > select,
|
||||
& > textarea {
|
||||
margin-top: $spacing-form-elements;
|
||||
margin-top: var(--spacing-form-element);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ table {
|
|||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: ($spacing-gutter/2) $spacing-gutter;
|
||||
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: $text-weight;
|
||||
font-weight: var(--text-weight);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -50,6 +50,8 @@ thead {
|
|||
}
|
||||
|
||||
// Striping
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
table[role="grid"] {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: var(--table-stripping);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
|
|
@ -76,10 +76,10 @@ a {
|
|||
|
||||
@if $enable-transitions {
|
||||
transition:
|
||||
background-color $transition,
|
||||
color $transition,
|
||||
text-decoration $transition,
|
||||
box-shadow $transition;
|
||||
background-color var(--transition),
|
||||
color var(--transition),
|
||||
text-decoration var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
|
@ -99,6 +99,7 @@ a {
|
|||
@if $enable-classes {
|
||||
a.secondary {
|
||||
color: var(--secondary);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
@ -114,16 +115,14 @@ a {
|
|||
|
||||
// Link .contrast
|
||||
@if $enable-classes {
|
||||
a.contrast:not([role="button"]) {
|
||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border);
|
||||
a.contrast {
|
||||
color: var(--contrast);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: inset 0 -.33rem 0 var(--contrast-border-h);
|
||||
color: var(--contrast-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -141,43 +140,43 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-typography;
|
||||
font-weight: $heading-weight;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
font-weight: var(--titles-weight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: $spacing-typography*2;
|
||||
margin-bottom: calc(var(--spacing-typography) * 2);
|
||||
color: var(--h1);
|
||||
font-size: 2rem;
|
||||
font-size: var(--h1-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: $spacing-typography*1.75;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
||||
color: var(--h2);
|
||||
font-size: 1.75rem;
|
||||
font-size: var(--h2-size);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: $spacing-typography*1.5;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
||||
color: var(--h3);
|
||||
font-size: 1.5rem;
|
||||
font-size: var(--h3-size);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: $spacing-typography*1.25;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
||||
color: var(--h4);
|
||||
font-size: 1.25rem;
|
||||
font-size: var(--h4-size);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: $spacing-typography*1.125;
|
||||
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
||||
color: var(--h5);
|
||||
font-size: 1.125rem;
|
||||
font-size: var(--h5-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--h6);
|
||||
font-size: 1rem;
|
||||
font-size: var(--h6-size);
|
||||
}
|
||||
|
||||
// Margin-top for headings after a typography block
|
||||
|
|
@ -192,34 +191,34 @@ pre,
|
|||
table,
|
||||
ul {
|
||||
& ~ h1 {
|
||||
margin-top: $spacing-typography*2;
|
||||
margin-top: calc(var(--spacing-typography) * 2);
|
||||
}
|
||||
|
||||
& ~ h2 {
|
||||
margin-top: $spacing-typography*1.75;
|
||||
margin-top: calc(var(--spacing-typography) * 1.75);
|
||||
}
|
||||
|
||||
& ~ h3 {
|
||||
margin-top: $spacing-typography*1.5;
|
||||
margin-top: calc(var(--spacing-typography) * 1.5);
|
||||
}
|
||||
|
||||
& ~ h4 {
|
||||
margin-top: $spacing-typography*1.25;
|
||||
margin-top: calc(var(--spacing-typography) * 1.25);
|
||||
}
|
||||
|
||||
& ~ h5 {
|
||||
margin-top: $spacing-typography*1.125;
|
||||
margin-top: calc(var(--spacing-typography) * 1.125);
|
||||
}
|
||||
|
||||
& ~ h6 {
|
||||
margin-top: $spacing-typography;
|
||||
margin-top: calc(var(--spacing-typography));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Multi-level heading
|
||||
hgroup {
|
||||
margin-bottom: $spacing-typography;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
|
||||
*{
|
||||
margin-bottom: 0;
|
||||
|
|
@ -228,13 +227,13 @@ hgroup {
|
|||
> *:last-child {
|
||||
color: var(--muted-text);
|
||||
font-size: 1.125rem;
|
||||
font-weight: normal;
|
||||
font-weight: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Paragraphs
|
||||
p {
|
||||
margin-bottom: $spacing-typography/2;
|
||||
margin-bottom: var(--spacing-typography);
|
||||
}
|
||||
|
||||
// Small
|
||||
|
|
@ -268,10 +267,10 @@ small {
|
|||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $spacing-typography;
|
||||
padding-left: var(--spacing-typography);
|
||||
|
||||
li {
|
||||
margin-bottom: $spacing-typography/4;
|
||||
margin-bottom: calc(var(--spacing-typography) / 4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -290,12 +289,12 @@ mark {
|
|||
// Blockquote
|
||||
blockquote {
|
||||
display: block;
|
||||
margin: ($spacing-typography*2) 0;
|
||||
padding: $spacing-gutter;
|
||||
margin: var(--spacing-typography) 0;
|
||||
padding: var(--spacing-gutter);
|
||||
border-left: .25rem solid var(--muted-border);
|
||||
|
||||
footer {
|
||||
margin-top: $spacing-typography/2;
|
||||
margin-top: calc(var(--spacing-typography) / 2);
|
||||
color: var(--muted-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-gutter;
|
||||
padding-left: $spacing-gutter;
|
||||
padding-right: var(--spacing-gutter);
|
||||
padding-left: var(--spacing-gutter);
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -38,46 +38,42 @@ html {
|
|||
-webkit-text-size-adjust: 100%; // 6
|
||||
background: var(--background);
|
||||
color: var(--text);
|
||||
font-family: $sans-serif;
|
||||
font-size: map-get($base-font, "xs");
|
||||
font-weight: $text-weight;
|
||||
line-height: $line-height; // 1
|
||||
font-family: var(--text-font);
|
||||
font-size: var(--base-font-xs);
|
||||
font-weight: var(--text-weight);
|
||||
line-height: var(--line-height); // 1
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default; // 4
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($base-font, "sm") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
font-size: map-get($base-font, "sm");
|
||||
font-size: var(--base-font-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($base-font, "md") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
font-size: map-get($base-font, "md");
|
||||
font-size: var(--base-font-md);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($base-font, "lg") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
font-size: map-get($base-font, "lg");
|
||||
font-size: var(--base-font-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($base-font, "xl") and
|
||||
$enable-responsive-typography {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
font-size: map-get($base-font, "xl");
|
||||
font-size: var(--base-font-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
*/
|
||||
|
||||
.grid {
|
||||
grid-column-gap: $spacing-gutter;
|
||||
grid-row-gap: $spacing-gutter;
|
||||
grid-column-gap: var(--spacing-gutter);
|
||||
grid-row-gap: var(--spacing-gutter);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ figure {
|
|||
overflow-x: auto;
|
||||
|
||||
figcaption {
|
||||
padding: ($spacing-gutter/2) 0;
|
||||
padding: calc(var(--spacing-gutter) / 2) 0;
|
||||
color: var(--muted-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,41 +4,37 @@
|
|||
*/
|
||||
|
||||
section {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xs")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2);
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($spacing-factor, "sm") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "sm")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") and
|
||||
map-get($spacing-factor, "md") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "md")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") and
|
||||
map-get($spacing-factor, "lg") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "lg")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") and
|
||||
map-get($spacing-factor, "xl") and
|
||||
$enable-responsive-spacings {
|
||||
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
margin-bottom: $spacing-block*map-get($spacing-factor, "xl")*2;
|
||||
margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ body {
|
|||
> header,
|
||||
> main,
|
||||
> footer {
|
||||
$padding-horizontal: $spacing-gutter !default;
|
||||
$spacing-vertical: $spacing-block !default;
|
||||
$padding-horizontal: var(--spacing-gutter) !default;
|
||||
$spacing-vertical: var(--spacing-block) !default;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
|
@ -50,13 +50,13 @@ body {
|
|||
$padding-horizontal: 0;
|
||||
}
|
||||
@else {
|
||||
$padding-horizontal: $spacing-gutter;
|
||||
$padding-horizontal: var(--spacing-gutter);
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-sm));
|
||||
}
|
||||
@else {
|
||||
$spacing-vertical: $spacing-block;
|
||||
$spacing-vertical: var(--spacing-block);
|
||||
}
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
|
|
@ -71,8 +71,8 @@ body {
|
|||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "md");
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "md") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "md");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-md));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
|
@ -86,8 +86,8 @@ body {
|
|||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "lg");
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "lg") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "lg");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-lg));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
|
@ -101,8 +101,8 @@ body {
|
|||
@if $enable-viewport and $enable-semantic-container {
|
||||
max-width: map-get($viewports, "xl");
|
||||
}
|
||||
@if $enable-responsive-spacings and map-get($spacing-factor, "xl") {
|
||||
$spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
|
||||
@if $enable-responsive-spacings {
|
||||
$spacing-vertical: calc(var(--spacing-block) * var(--spacing-factor-xl));
|
||||
padding: $spacing-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,7 @@
|
|||
*/
|
||||
|
||||
@import "default/colors";
|
||||
@import "default/styles";
|
||||
@import "default/icons";
|
||||
@import "default/light";
|
||||
@import "default/dark";
|
||||
|
|
@ -35,9 +35,3 @@ $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;
|
||||
|
||||
// Icons color
|
||||
// For <details>, [type="date"], <select>, etc.
|
||||
// Must be neutral to work in light or dark mode
|
||||
// HACK: .99 opacity is used to force rgba() vs #hex
|
||||
$icon-color: #{rgba($grey-500, .999)};
|
||||
|
|
|
|||
|
|
@ -1,70 +1,83 @@
|
|||
// Dark theme (Auto)
|
||||
// Automatically enabled if user has Dark mode enabled
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
|
||||
// Document
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
--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};
|
||||
--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-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// // Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-border: #{rgba($amber-200, .33)}; // Links underline for
|
||||
--contrast-border-h: #{rgba($amber-200, .5)}; // Links hover underline
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: #{$white};
|
||||
--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-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-hover-background: #{darken($grey-900, 6%)};
|
||||
--input-hover-border: #{$primary-600};
|
||||
--input-focus: #{rgba($primary-600, .25)};
|
||||
--input-inverse: #{$white};
|
||||
|
||||
// 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, .5)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{darken($grey-900, 6%)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--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)};
|
||||
--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)};
|
||||
--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)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .06)};
|
||||
--table-stripping: #{rgba($grey-500, .02)};
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,64 +88,77 @@
|
|||
[data-theme="dark"] {
|
||||
|
||||
// Document
|
||||
--background: #{darken($grey-900, 6%)};
|
||||
--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};
|
||||
--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-hover: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: #{$primary-600};
|
||||
--primary-hover: #{$primary-500};
|
||||
--primary-hover-border: #{$primary-500};
|
||||
--primary-focus: #{rgba($primary-600, .25)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
// // Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-600};
|
||||
--secondary-border: #{$grey-600};
|
||||
--secondary-hover: #{$grey-500};
|
||||
--secondary-hover-border: #{$grey-500};
|
||||
--secondary-focus: #{rgba($grey-600, .25)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-focus: #{rgba($grey-600, .25)};
|
||||
--contrast-border: #{rgba($amber-200, .33)}; // For links
|
||||
--contrast-inverse: #{darken($grey-900, 6%)};
|
||||
--contrast: #{$grey-100};
|
||||
--contrast-border: #{$grey-100};
|
||||
--contrast-hover: #{$white};
|
||||
--contrast-hover-border: #{$white};
|
||||
--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-background: #{darken($grey-900, 6%)};
|
||||
--input-border: #{mix($grey-800, $grey-700)};
|
||||
--input-hover-background: #{darken($grey-900, 6%)};
|
||||
--input-hover-border: #{$primary-600};
|
||||
--input-focus: #{rgba($primary-600, .25)};
|
||||
--input-inverse: #{$white};
|
||||
|
||||
// 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, .5)};
|
||||
--mark-text: #{$white};
|
||||
--muted-text: #{$grey-500};
|
||||
--muted-background: #{darken($grey-900, 6%)};
|
||||
--muted-border: #{mix($grey-800, $grey-900)};
|
||||
--valid: #{$green-700};
|
||||
--invalid: #{$red-900};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--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)};
|
||||
--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)};
|
||||
--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)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-500, .06)};
|
||||
--table-stripping: #{rgba($grey-500, .02)};
|
||||
--table-border: #{rgba($grey-500, .075)};
|
||||
--table-stripping: #{rgba($grey-500, .05)};
|
||||
}
|
||||
|
|
|
|||
13
scss/themes/default/_icons.scss
Normal file
13
scss/themes/default/_icons.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// Icons
|
||||
// Source: https://feathericons.com/
|
||||
|
||||
:root {
|
||||
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
||||
--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .999)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .999)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -1,68 +1,81 @@
|
|||
// Light theme (Default)
|
||||
// Can be forced with data-theme="light"
|
||||
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
|
||||
// Document
|
||||
--background: #{$white};
|
||||
--background: #{$white};
|
||||
|
||||
// Typography
|
||||
--text: #{$grey-700};
|
||||
--h1: #{$grey-900};
|
||||
--h2: #{$grey-800};
|
||||
--h3: #{$grey-700};
|
||||
--h4: #{$grey-600};
|
||||
--h5: #{$grey-500};
|
||||
--h6: #{$grey-400};
|
||||
--text: #{$grey-700};
|
||||
--h1: #{$grey-900};
|
||||
--h2: #{$grey-800};
|
||||
--h3: #{$grey-700};
|
||||
--h4: #{$grey-600};
|
||||
--h5: #{$grey-500};
|
||||
--h6: #{$grey-400};
|
||||
|
||||
// Primary Call-to-Action and links
|
||||
--primary: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
--primary: #{$primary-600};
|
||||
--primary-border: #{$primary-600};
|
||||
--primary-hover: #{$primary-700};
|
||||
--primary-hover-border: #{$primary-700};
|
||||
--primary-focus: #{rgba($primary-600, .125)};
|
||||
--primary-inverse: #{$white};
|
||||
|
||||
// Secondary Call-to-Action, links and kbd
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-500, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
--secondary: #{$grey-500};
|
||||
--secondary-border: #{$grey-500};
|
||||
--secondary-hover: #{$grey-700};
|
||||
--secondary-hover-border: #{$grey-700};
|
||||
--secondary-focus: #{rgba($grey-500, .125)};
|
||||
--secondary-inverse: #{$white};
|
||||
|
||||
// Contrast Call-to-Action and Tooltips
|
||||
--contrast: #{$grey-800};
|
||||
--contrast-hover: #{mix($grey-900, $black)};
|
||||
--contrast-focus: #{rgba($grey-500, .125)};
|
||||
--contrast-border: #{rgba($amber-200, .5)}; // Links underline
|
||||
--contrast-border-h: #{rgba($amber-200, 1)}; // Links hover underline
|
||||
--contrast-inverse: #{$white};
|
||||
--contrast: #{$grey-800};
|
||||
--contrast-border: #{$grey-800};
|
||||
--contrast-hover: #{mix($grey-900, $black)};
|
||||
--contrast-hover-border: #{mix($grey-900, $black)};
|
||||
--contrast-focus: #{rgba($grey-500, .125)};
|
||||
--contrast-inverse: #{$white};
|
||||
|
||||
// Form elements
|
||||
--input-background: #{$white};
|
||||
--input-border: #{mix($grey-100, $grey-200)};
|
||||
--input-background: #{$white};
|
||||
--input-border: #{mix($grey-100, $grey-200)};
|
||||
--input-hover-background: #{$white};
|
||||
--input-hover-border: #{$primary-600};
|
||||
--input-focus: #{rgba($primary-600, .125)};
|
||||
--input-inverse: #{$white};
|
||||
|
||||
// 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-600};
|
||||
--invalid: #{$red-700};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--mark-text: #{$grey-800};
|
||||
--muted-text: #{mix($grey-400, $grey-500)};
|
||||
--muted-background: #{$grey-50};
|
||||
--muted-border: #{$grey-50};
|
||||
--valid: #{$green-600};
|
||||
--invalid: #{$red-700};
|
||||
--mark: #{rgba($amber-200, .5)};
|
||||
--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)};
|
||||
--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)};
|
||||
--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)};
|
||||
|
||||
// Table
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-500, .04)};
|
||||
--table-border: #{rgba($grey-50, .75)};
|
||||
--table-stripping: #{rgba($grey-500, .075)};
|
||||
}
|
||||
|
|
|
|||
93
scss/themes/default/_styles.scss
Normal file
93
scss/themes/default/_styles.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
// Commons Styles
|
||||
|
||||
:root {
|
||||
|
||||
// Typography
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Fonts family
|
||||
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
--text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--titles-font: var(--text-font);
|
||||
--code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
|
||||
// Typography styles
|
||||
--line-height: 1.5;
|
||||
--text-weight: 400;
|
||||
--titles-weight: 700;
|
||||
--form-element-weight: var(--text-weight);
|
||||
--buttons-weight: var(--text-weight);
|
||||
--code-weight: var(--text-weight);
|
||||
|
||||
// Base font sizes
|
||||
// All the others sizes are relative to this font base sizes (rem)
|
||||
--base-font-xs: 16px;
|
||||
--base-font-sm: 17px;
|
||||
--base-font-md: 18px;
|
||||
--base-font-lg: 19px;
|
||||
--base-font-xl: 20px;
|
||||
|
||||
// Font sizes
|
||||
// All the others sizes are relative to this sizes
|
||||
--h1-size: 2rem;
|
||||
--h2-size: 1.75rem;
|
||||
--h3-size: 1.5rem;
|
||||
--h4-size: 1.25rem;
|
||||
--h5-size: 1.125rem;
|
||||
|
||||
|
||||
// Styles
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Blocks styles: <form> elements, <article>, inlined <code>, [data-tooltip]
|
||||
--block-round: .25rem ;
|
||||
|
||||
// Form elements
|
||||
--form-element-border-width: 1px;
|
||||
--form-element-outline-width: 3px;
|
||||
--checkbox-radio-border-width: 2px;
|
||||
--switch-border-width: 3px;
|
||||
--form-element-spacing-vertical: .75rem;
|
||||
--form-element-spacing-horizontal: 1rem;
|
||||
|
||||
// Buttons
|
||||
--button-round: var(--block-round);
|
||||
--button-border-width: var(--form-element-border-width);
|
||||
--button-outline-width: var(--form-element-outline-width);
|
||||
--button-spacing-vertical: var(--form-element-spacing-vertical);
|
||||
--button-spacing-horizontal: var(--form-element-spacing-horizontal);
|
||||
|
||||
|
||||
// Spacings
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Gutters and horizontals margins
|
||||
// For <body>, ,container, .grid, <nav>, <table>, <article>, <pre>
|
||||
--spacing-gutter: 1rem;
|
||||
|
||||
// Vertical spacing for blocks
|
||||
// For <header>, <main>, <footer>, <section>, <article>
|
||||
--spacing-block: 2rem;
|
||||
|
||||
// Multiplication factor for --spacing-block
|
||||
// '1' disable spacing factor on a breakpoint
|
||||
--spacing-factor-xs: 1;
|
||||
--spacing-factor-sm: 1.25;
|
||||
--spacing-factor-md: 1.5;
|
||||
--spacing-factor-lg: 1.75;
|
||||
--spacing-factor-xl: 2;
|
||||
|
||||
// Vertical margins for typography elements
|
||||
--spacing-typography: 1.5rem;
|
||||
|
||||
// Spacing between <form> elements
|
||||
--spacing-form-element: .25rem;
|
||||
|
||||
|
||||
// Transitions
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Transitions: <a>, <form> elements and <button>
|
||||
--transition: .2s ease-in-out;
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue