mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
1185 lines
28 KiB
CSS
1185 lines
28 KiB
CSS
/*!
|
|
* Pico.css v1.2.0 (https://picocss.com)
|
|
* Copyright 2020 - Licensed under MIT
|
|
*
|
|
* Slim version example
|
|
* You can export only the modules you need
|
|
*/
|
|
/**
|
|
* 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;
|
|
--h6-size: 1rem;
|
|
--block-round: .25rem;
|
|
--form-element-border-width: 1px;
|
|
--form-element-outline-width: 3px;
|
|
--checkbox-radio-border-width: 2px;
|
|
--switch-border-width: 3px;
|
|
--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: var(--primary);
|
|
--primary-hover: #08769b;
|
|
--primary-hover-border: var(--primary-hover);
|
|
--primary-focus: rgba(16, 149, 193, 0.125);
|
|
--primary-inverse: #FFF;
|
|
--secondary: #73828c;
|
|
--secondary-border: var(--secondary);
|
|
--secondary-hover: #415462;
|
|
--secondary-hover-border: var(--secondary-hover);
|
|
--secondary-focus: rgba(115, 130, 140, 0.125);
|
|
--secondary-inverse: #FFF;
|
|
--contrast: #2c3d49;
|
|
--contrast-border: var(--contrast);
|
|
--contrast-hover: #0d1419;
|
|
--contrast-hover-border: var(--contrast-hover);
|
|
--contrast-focus: rgba(115, 130, 140, 0.125);
|
|
--contrast-inverse: #FFF;
|
|
--input-background: #FFF;
|
|
--input-border: #c8d1d8;
|
|
--input-hover-background: var(--input-background);
|
|
--input-hover-border: var(--primary);
|
|
--input-focus: var(--primary-focus);
|
|
--input-inverse: var(--primary-inverse);
|
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
--valid: #288a6a;
|
|
--invalid: #b94646;
|
|
--mark: rgba(255, 223, 128, 0.33);
|
|
--mark-text: #2c3d49;
|
|
--muted-text: #7e8d98;
|
|
--muted-background: #edf0f3;
|
|
--muted-border: #edf0f3;
|
|
--card-background: #FFF;
|
|
--card-sections: #f3f5f7;
|
|
--card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
|
--code-background: #f3f5f7;
|
|
--code-inlined: #edf0f3;
|
|
--code-color-1: #73828c;
|
|
--code-color-2: #b34d80;
|
|
--code-color-3: #3d888f;
|
|
--code-color-4: #998866;
|
|
--code-color-5: #96a4ae;
|
|
--table-border: rgba(237, 240, 243, 0.75);
|
|
--table-stripping: rgba(115, 130, 140, 0.075);
|
|
}
|
|
|
|
@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: var(--primary);
|
|
--primary-hover: #1ab3e6;
|
|
--primary-hover-border: var(--primary-hover);
|
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
|
--primary-inverse: #FFF;
|
|
--secondary: #596b78;
|
|
--secondary-border: var(--secondary);
|
|
--secondary-hover: #73828c;
|
|
--secondary-hover-border: var(--secondary-hover);
|
|
--secondary-focus: rgba(89, 107, 120, 0.25);
|
|
--secondary-inverse: #FFF;
|
|
--contrast: #d5dce2;
|
|
--contrast-border: var(--contrast);
|
|
--contrast-hover: #FFF;
|
|
--contrast-hover-border: var(--contrast-hover);
|
|
--contrast-focus: rgba(89, 107, 120, 0.25);
|
|
--contrast-inverse: #10181e;
|
|
--input-background: #10181e;
|
|
--input-border: #374956;
|
|
--input-hover-background: var(--input-background);
|
|
--input-hover-border: var(--primary);
|
|
--input-focus: var(--primary-focus);
|
|
--input-inverse: var(--primary-inverse);
|
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
--valid: #1f7a5c;
|
|
--invalid: #943838;
|
|
--mark: rgba(255, 223, 128, 0.1875);
|
|
--mark-text: #FFF;
|
|
--muted-text: #73828c;
|
|
--muted-background: #23333e;
|
|
--muted-border: #23333e;
|
|
--card-background: #17232b;
|
|
--card-sections: #141d24;
|
|
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
|
--code-background: #141d24;
|
|
--code-inlined: rgba(65, 84, 98, 0.25);
|
|
--code-color-1: #73828c;
|
|
--code-color-2: #a65980;
|
|
--code-color-3: #599fa6;
|
|
--code-color-4: #8c8473;
|
|
--code-color-5: #4d606d;
|
|
--table-border: rgba(115, 130, 140, 0.075);
|
|
--table-stripping: rgba(115, 130, 140, 0.05);
|
|
}
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--background: #10181e;
|
|
--text: #a2afb9;
|
|
--h1: #edf0f3;
|
|
--h2: #d5dce2;
|
|
--h3: #bbc6ce;
|
|
--h4: #a2afb9;
|
|
--h5: #8a99a3;
|
|
--h6: #73828c;
|
|
--primary: #1095c1;
|
|
--primary-border: var(--primary);
|
|
--primary-hover: #1ab3e6;
|
|
--primary-hover-border: var(--primary-hover);
|
|
--primary-focus: rgba(16, 149, 193, 0.25);
|
|
--primary-inverse: #FFF;
|
|
--secondary: #596b78;
|
|
--secondary-border: var(--secondary);
|
|
--secondary-hover: #73828c;
|
|
--secondary-hover-border: var(--secondary-hover);
|
|
--secondary-focus: rgba(89, 107, 120, 0.25);
|
|
--secondary-inverse: #FFF;
|
|
--contrast: #d5dce2;
|
|
--contrast-border: var(--contrast);
|
|
--contrast-hover: #FFF;
|
|
--contrast-hover-border: var(--contrast-hover);
|
|
--contrast-focus: rgba(89, 107, 120, 0.25);
|
|
--contrast-inverse: #10181e;
|
|
--input-background: #10181e;
|
|
--input-border: #374956;
|
|
--input-hover-background: var(--input-background);
|
|
--input-hover-border: var(--primary);
|
|
--input-focus: var(--primary-focus);
|
|
--input-inverse: var(--primary-inverse);
|
|
--button-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
--button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
--valid: #1f7a5c;
|
|
--invalid: #943838;
|
|
--mark: rgba(255, 223, 128, 0.1875);
|
|
--mark-text: #FFF;
|
|
--muted-text: #73828c;
|
|
--muted-background: #23333e;
|
|
--muted-border: #23333e;
|
|
--card-background: #17232b;
|
|
--card-sections: #141d24;
|
|
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
|
--code-background: #141d24;
|
|
--code-inlined: rgba(65, 84, 98, 0.25);
|
|
--code-color-1: #73828c;
|
|
--code-color-2: #a65980;
|
|
--code-color-3: #599fa6;
|
|
--code-color-4: #8c8473;
|
|
--code-color-5: #4d606d;
|
|
--table-border: rgba(115, 130, 140, 0.075);
|
|
--table-stripping: rgba(115, 130, 140, 0.05);
|
|
}
|
|
|
|
/**
|
|
* Document
|
|
* Content-box & Responsive typography
|
|
*/
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
::before,
|
|
::after {
|
|
text-decoration: inherit;
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-moz-tab-size: 4;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
background: var(--background);
|
|
color: var(--text);
|
|
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: var(--base-font-sm);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
html {
|
|
font-size: var(--base-font-md);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
html {
|
|
font-size: var(--base-font-lg);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
html {
|
|
font-size: var(--base-font-xl);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sectioning
|
|
* Container and responsive spacings for header, main, footer
|
|
*/
|
|
main {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body > header,
|
|
body > main,
|
|
body > footer {
|
|
width: 100%;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding: var(--spacing-block) 0;
|
|
}
|
|
|
|
/**
|
|
* Container
|
|
*/
|
|
.container,
|
|
.container-fluid {
|
|
width: 100%;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
padding-right: var(--spacing-gutter);
|
|
padding-left: var(--spacing-gutter);
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 510px;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 700px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 920px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1130px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Grid
|
|
* Minimal grid system with auto-layout columns
|
|
*/
|
|
.grid {
|
|
grid-column-gap: var(--spacing-gutter);
|
|
grid-row-gap: var(--spacing-gutter);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
|
}
|
|
}
|
|
|
|
.grid > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
/**
|
|
* Horizontal scroller (<figure>)
|
|
*/
|
|
figure {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
figure figcaption {
|
|
padding: calc(var(--spacing-gutter) / 2) 0;
|
|
color: var(--muted-text);
|
|
}
|
|
|
|
/**
|
|
* Typography
|
|
*/
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
position: relative;
|
|
font-size: .75rem;
|
|
line-height: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25rem;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5rem;
|
|
}
|
|
|
|
dl dl,
|
|
dl ol,
|
|
dl ul,
|
|
ol dl,
|
|
ul dl {
|
|
margin: 0;
|
|
}
|
|
|
|
ol ol,
|
|
ol ul,
|
|
ul ol,
|
|
ul ul {
|
|
margin: 0;
|
|
}
|
|
|
|
address,
|
|
blockquote,
|
|
dl,
|
|
figure,
|
|
form,
|
|
ol,
|
|
p,
|
|
pre,
|
|
table,
|
|
ul {
|
|
margin-top: 0;
|
|
margin-bottom: var(--spacing-typography);
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
a {
|
|
background-color: transparent;
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, a:active, a:focus {
|
|
color: var(--primary-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:focus {
|
|
outline: none;
|
|
background-color: var(--primary-focus);
|
|
}
|
|
|
|
a.secondary {
|
|
color: var(--secondary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.secondary:hover, a.secondary:active, a.secondary:focus {
|
|
color: var(--secondary-hover);
|
|
}
|
|
|
|
a.secondary:focus {
|
|
background-color: var(--secondary-focus);
|
|
}
|
|
|
|
a.contrast {
|
|
color: var(--contrast);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.contrast:hover, a.contrast:active, a.contrast:focus {
|
|
color: var(--contrast-hover);
|
|
}
|
|
|
|
a.contrast:focus {
|
|
background-color: var(--contrast-focus);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
margin-bottom: var(--spacing-typography);
|
|
font-family: var(--titles-font);
|
|
font-weight: var(--titles-weight);
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: calc(var(--spacing-typography) * 2);
|
|
color: var(--h1);
|
|
font-size: var(--h1-size);
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: calc(var(--spacing-typography) * 1.75);
|
|
color: var(--h2);
|
|
font-size: var(--h2-size);
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: calc(var(--spacing-typography) * 1.5);
|
|
color: var(--h3);
|
|
font-size: var(--h3-size);
|
|
}
|
|
|
|
h4 {
|
|
margin-bottom: calc(var(--spacing-typography) * 1.25);
|
|
color: var(--h4);
|
|
font-size: var(--h4-size);
|
|
}
|
|
|
|
h5 {
|
|
margin-bottom: calc(var(--spacing-typography) * 1.125);
|
|
color: var(--h5);
|
|
font-size: var(--h5-size);
|
|
}
|
|
|
|
h6 {
|
|
color: var(--h6);
|
|
font-size: var(--h6-size);
|
|
}
|
|
|
|
address ~ h1,
|
|
blockquote ~ h1,
|
|
dl ~ h1,
|
|
figure ~ h1,
|
|
form ~ h1,
|
|
ol ~ h1,
|
|
p ~ h1,
|
|
pre ~ h1,
|
|
table ~ h1,
|
|
ul ~ h1 {
|
|
margin-top: calc(var(--spacing-typography) * 2);
|
|
}
|
|
|
|
address ~ h2,
|
|
blockquote ~ h2,
|
|
dl ~ h2,
|
|
figure ~ h2,
|
|
form ~ h2,
|
|
ol ~ h2,
|
|
p ~ h2,
|
|
pre ~ h2,
|
|
table ~ h2,
|
|
ul ~ h2 {
|
|
margin-top: calc(var(--spacing-typography) * 1.75);
|
|
}
|
|
|
|
address ~ h3,
|
|
blockquote ~ h3,
|
|
dl ~ h3,
|
|
figure ~ h3,
|
|
form ~ h3,
|
|
ol ~ h3,
|
|
p ~ h3,
|
|
pre ~ h3,
|
|
table ~ h3,
|
|
ul ~ h3 {
|
|
margin-top: calc(var(--spacing-typography) * 1.5);
|
|
}
|
|
|
|
address ~ h4,
|
|
blockquote ~ h4,
|
|
dl ~ h4,
|
|
figure ~ h4,
|
|
form ~ h4,
|
|
ol ~ h4,
|
|
p ~ h4,
|
|
pre ~ h4,
|
|
table ~ h4,
|
|
ul ~ h4 {
|
|
margin-top: calc(var(--spacing-typography) * 1.25);
|
|
}
|
|
|
|
address ~ h5,
|
|
blockquote ~ h5,
|
|
dl ~ h5,
|
|
figure ~ h5,
|
|
form ~ h5,
|
|
ol ~ h5,
|
|
p ~ h5,
|
|
pre ~ h5,
|
|
table ~ h5,
|
|
ul ~ h5 {
|
|
margin-top: calc(var(--spacing-typography) * 1.125);
|
|
}
|
|
|
|
address ~ h6,
|
|
blockquote ~ h6,
|
|
dl ~ h6,
|
|
figure ~ h6,
|
|
form ~ h6,
|
|
ol ~ h6,
|
|
p ~ h6,
|
|
pre ~ h6,
|
|
table ~ h6,
|
|
ul ~ h6 {
|
|
margin-top: calc(var(--spacing-typography));
|
|
}
|
|
|
|
hgroup {
|
|
margin-bottom: var(--spacing-typography);
|
|
}
|
|
|
|
hgroup * {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
hgroup > *:last-child {
|
|
color: var(--muted-text);
|
|
font-family: unset;
|
|
font-size: 1.125rem;
|
|
font-weight: unset;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--spacing-typography);
|
|
}
|
|
|
|
small {
|
|
font-size: 85%;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
small {
|
|
font-size: 83%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
small {
|
|
font-size: 81%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
small {
|
|
font-size: 79%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
small {
|
|
font-size: 77%;
|
|
}
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: var(--spacing-typography);
|
|
}
|
|
|
|
ul li,
|
|
ol li {
|
|
margin-bottom: calc(var(--spacing-typography) / 4);
|
|
}
|
|
|
|
ul li {
|
|
list-style: square;
|
|
}
|
|
|
|
mark {
|
|
padding: .125rem .25rem;
|
|
background: var(--mark);
|
|
color: var(--mark-text);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
blockquote {
|
|
display: block;
|
|
margin: var(--spacing-typography) 0;
|
|
padding: var(--spacing-gutter);
|
|
border-left: 0.25rem solid var(--muted-border);
|
|
}
|
|
|
|
blockquote footer {
|
|
margin-top: calc(var(--spacing-typography) / 2);
|
|
color: var(--muted-text);
|
|
}
|
|
|
|
abbr[title] {
|
|
border-bottom: 1px dotted;
|
|
text-decoration: none;
|
|
cursor: help;
|
|
}
|
|
|
|
ins {
|
|
color: var(--valid);
|
|
text-decoration: none;
|
|
}
|
|
|
|
del {
|
|
color: var(--invalid);
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--primary-focus);
|
|
}
|
|
|
|
/**
|
|
* Embedded content
|
|
*/
|
|
audio,
|
|
canvas,
|
|
iframe,
|
|
img,
|
|
svg,
|
|
video {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
audio,
|
|
video {
|
|
display: inline-block;
|
|
}
|
|
|
|
audio:not([controls]) {
|
|
display: none;
|
|
height: 0;
|
|
}
|
|
|
|
iframe {
|
|
border-style: none;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-style: none;
|
|
}
|
|
|
|
svg:not([fill]) {
|
|
fill: currentColor;
|
|
}
|
|
|
|
svg:not(:root) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/**
|
|
* Button
|
|
*/
|
|
button {
|
|
margin: 0;
|
|
overflow: visible;
|
|
font-family: inherit;
|
|
text-transform: none;
|
|
}
|
|
|
|
button,
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"] {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
button::-moz-focus-inner,
|
|
[type="button"]::-moz-focus-inner,
|
|
[type="reset"]::-moz-focus-inner,
|
|
[type="submit"]::-moz-focus-inner {
|
|
padding: 0;
|
|
border-style: none;
|
|
}
|
|
|
|
button {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-typography);
|
|
}
|
|
|
|
a[role="button"] {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
input[type="reset"],
|
|
[type="file"]::-webkit-file-upload-button,
|
|
a[role="button"] {
|
|
padding: var(--button-spacing-vertical) var(--button-spacing-horizontal);
|
|
border: var(--button-border-width) solid var(--primary-border);
|
|
border-radius: var(--button-round);
|
|
outline: none;
|
|
background-color: var(--primary);
|
|
box-shadow: var(--button-shadow);
|
|
color: var(--primary-inverse);
|
|
font-size: 1rem;
|
|
font-weight: var(--buttons-weight);
|
|
line-height: var(--line-height);
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover, button:active, button:focus,
|
|
input[type="submit"]:hover,
|
|
input[type="submit"]:active,
|
|
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: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus);
|
|
}
|
|
|
|
input[type="reset"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button[disabled],
|
|
input[type="submit"][disabled],
|
|
input[type="button"][disabled],
|
|
input[type="reset"][disabled],
|
|
a[role="button"][disabled] {
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/**
|
|
* Form elements
|
|
*/
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
letter-spacing: inherit;
|
|
line-height: var(--line-height);
|
|
}
|
|
|
|
input {
|
|
overflow: visible;
|
|
}
|
|
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
legend {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
color: inherit;
|
|
white-space: normal;
|
|
}
|
|
|
|
textarea {
|
|
margin: 0;
|
|
overflow: auto;
|
|
resize: vertical;
|
|
resize: block;
|
|
}
|
|
|
|
[type="checkbox"],
|
|
[type="radio"] {
|
|
padding: 0;
|
|
}
|
|
|
|
::-webkit-inner-spin-button,
|
|
::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
[type="search"] {
|
|
-webkit-appearance: textfield;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button;
|
|
font: inherit;
|
|
}
|
|
|
|
::-moz-focus-inner {
|
|
padding: 0;
|
|
border-style: none;
|
|
}
|
|
|
|
:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
:-moz-ui-invalid {
|
|
box-shadow: none;
|
|
}
|
|
|
|
::-ms-expand {
|
|
display: none;
|
|
}
|
|
|
|
[type="file"],
|
|
[type="range"] {
|
|
padding: 0;
|
|
border-width: 0;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
|
|
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2));
|
|
}
|
|
|
|
fieldset {
|
|
margin: 0;
|
|
margin-bottom: var(--spacing-typography);
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
label,
|
|
fieldset legend {
|
|
display: block;
|
|
margin-bottom: var(--spacing-form-element);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
|
select,
|
|
textarea,
|
|
form small {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
|
|
select,
|
|
textarea {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
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: var(--form-element-weight);
|
|
}
|
|
|
|
input::placeholder, input::-webkit-input-placeholder,
|
|
select::placeholder,
|
|
select::-webkit-input-placeholder,
|
|
textarea::placeholder,
|
|
textarea::-webkit-input-placeholder {
|
|
color: var(--muted-text);
|
|
opacity: 1;
|
|
}
|
|
|
|
input:active, input:focus,
|
|
select:active,
|
|
select:focus,
|
|
textarea:active,
|
|
textarea:focus {
|
|
border-color: var(--input-hover-border);
|
|
background-color: var(--input-hover-background);
|
|
}
|
|
|
|
input[readonly], input[disabled],
|
|
select[readonly],
|
|
select[disabled],
|
|
textarea[readonly],
|
|
textarea[disabled] {
|
|
border-color: var(--muted-border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
input[readonly] ~ label, input[disabled] ~ label,
|
|
select[readonly] ~ label,
|
|
select[disabled] ~ label,
|
|
textarea[readonly] ~ label,
|
|
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"]) {
|
|
background-color: var(--muted-background);
|
|
}
|
|
|
|
input[disabled],
|
|
select[disabled],
|
|
textarea[disabled] {
|
|
opacity: .66;
|
|
}
|
|
|
|
input .valid,
|
|
input .invalid, input[aria-invalid],
|
|
select .valid,
|
|
select .invalid,
|
|
select[aria-invalid],
|
|
textarea .valid,
|
|
textarea .invalid,
|
|
textarea[aria-invalid] {
|
|
padding-right: 2rem;
|
|
background-position: center right .75rem;
|
|
background-repeat: no-repeat;
|
|
background-size: 1rem auto;
|
|
}
|
|
|
|
input .valid, input[aria-invalid="false"],
|
|
select .valid,
|
|
select[aria-invalid="false"],
|
|
textarea .valid,
|
|
textarea[aria-invalid="false"] {
|
|
background-image: var(--icon-valid);
|
|
}
|
|
|
|
input .invalid, input[aria-invalid="true"],
|
|
select .invalid,
|
|
select[aria-invalid="true"],
|
|
textarea .invalid,
|
|
textarea[aria-invalid="true"] {
|
|
background-image: var(--icon-invalid);
|
|
}
|
|
|
|
input:not([type="checkbox"]):not([type="radio"]),
|
|
select,
|
|
textarea {
|
|
margin-bottom: var(--spacing-typography);
|
|
}
|
|
|
|
input:not([type="range"]):not([type="file"]):focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
|
|
}
|
|
|
|
select::-ms-expand {
|
|
border: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
select:not([multiple]):not([size]) {
|
|
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;
|
|
}
|
|
|
|
form small {
|
|
color: var(--muted-text);
|
|
}
|
|
|
|
input + small,
|
|
select + small,
|
|
textarea + small {
|
|
margin-top: calc(var(--spacing-typography) * -0.75);
|
|
margin-bottom: var(--spacing-typography);
|
|
}
|
|
|
|
label > input,
|
|
label > select,
|
|
label > textarea {
|
|
margin-top: var(--spacing-form-element);
|
|
}
|
|
|
|
/**
|
|
* Table
|
|
*/
|
|
table {
|
|
width: 100%;
|
|
border-color: inherit;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
text-indent: 0;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter);
|
|
border-bottom: 1px solid var(--table-border);
|
|
color: var(--muted-text);
|
|
font-size: 0.875rem;
|
|
font-weight: var(--text-weight);
|
|
text-align: left;
|
|
}
|
|
|
|
th,
|
|
thead td {
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
thead th,
|
|
thead td {
|
|
border-bottom: 3px solid var(--table-border);
|
|
}
|
|
|
|
table[role="grid"] tbody tr:nth-child(odd) {
|
|
background-color: var(--table-stripping);
|
|
}
|
|
|
|
/**
|
|
* Accessibility & User interaction
|
|
*/
|
|
[aria-busy="true"] {
|
|
cursor: progress;
|
|
}
|
|
|
|
[aria-controls] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[aria-disabled="true"],
|
|
[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[aria-hidden="false"][hidden] {
|
|
display: initial;
|
|
}
|
|
|
|
[aria-hidden="false"][hidden]:not(:focus) {
|
|
clip: rect(0, 0, 0, 0);
|
|
position: absolute;
|
|
}
|
|
|
|
a,
|
|
area,
|
|
button,
|
|
input,
|
|
label,
|
|
select,
|
|
summary,
|
|
textarea,
|
|
[tabindex] {
|
|
-ms-touch-action: manipulation;
|
|
}
|