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

Add Sanitize.css

Browse source 
https://csstools.github.io/sanitize.css/
This commit is contained in:
Lucas 2020-09-11 23:22:50 +07:00
parent d0730c8b6e
commit a2404b19b5
27 changed files with 1141 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -15,7 +15,7 @@
# Pico.css # Pico.css
`5.6 KB` minified and gzipped `6.2 KB` minified and gzipped
- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico. - **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript. - **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
@ -83,6 +83,6 @@ npm install @picocss/pico
## Copyright and license ## Copyright and license
- Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md) - Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md)
- Openly inspired by [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)), [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)), [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)), [CSS Bed](https://github.com/ubershmekel/cssbed) & [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) - Openly inspired by [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)), [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)), [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) & [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md))
- Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE)) - Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
- Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free)) - Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free))

219
css/pico.classless.css
View file

@ -155,16 +155,26 @@
box-sizing: border-box; box-sizing: border-box;
} }
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -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); background: var(--background);
color: var(--text); color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -320,15 +330,19 @@ sup {
top: -0.5rem; top: -0.5rem;
} }
img { dl dl,
max-width: 100%; dl ol,
height: auto; dl ul,
border-style: none; ol dl,
ul dl {
margin: 0;
} }
svg, ol ol,
img { ol ul,
vertical-align: text-bottom; ul ol,
ul ul {
margin: 0;
} }
address, address,
@ -509,6 +523,46 @@ del {
background-color: var(--primary-focus); 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;
}
/** /**
* Form elements * Form elements
*/ */
@ -519,9 +573,14 @@ textarea {
margin: 0; margin: 0;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
letter-spacing: inherit;
line-height: 1.5; line-height: 1.5;
} }
/**
* 1. Change the inconsistent appearance in all browsers (opinionated).
* 2. Add typography inheritance in all browsers (opinionated).
*/
input { input {
overflow: visible; overflow: visible;
} }
@ -539,7 +598,10 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],
@ -547,7 +609,8 @@ textarea {
padding: 0; padding: 0;
} }
[type="number"]::-webkit-inner-spin-button { ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto; height: auto;
} }
@ -565,6 +628,29 @@ textarea {
font: inherit; 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="color"],
[type="range"] {
padding: 0;
border-width: 0;
}
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -603,9 +689,11 @@ textarea {
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
} }
input::placeholder, input::placeholder, input::-webkit-input-placeholder,
select::placeholder, select::placeholder,
textarea::placeholder { select::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder {
color: var(--muted-text); color: var(--muted-text);
opacity: 1; opacity: 1;
} }
@ -664,8 +752,8 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple]) { select:not([multiple]):not([size]) {
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='%23808080' 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: 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.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");
background-position: center right .75rem; background-position: center right .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
@ -808,8 +896,8 @@ a[role="button"] {
button, button,
input[type="submit"], input[type="submit"],
a[role="button"] { a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem; border-radius: 0.25rem;
outline: none; outline: none;
background-color: var(--primary); background-color: var(--primary);
@ -855,7 +943,10 @@ a[role="button"][disabled] {
*/ */
table { table {
width: 100%; width: 100%;
border-color: inherit;
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
text-indent: 0;
} }
th, th,
@ -863,9 +954,9 @@ td {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border);
color: var(--muted-text); color: var(--muted-text);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
font-size: 0.875rem;
} }
th, th,
@ -890,10 +981,15 @@ pre,
code, code,
kbd, kbd,
samp { samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem; font-size: 1rem;
} }
pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
pre, pre,
code, code,
kbd { kbd {
@ -901,7 +997,7 @@ kbd {
color: var(--code-color-1); color: var(--code-color-1);
font-size: 85%; font-size: 85%;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: initial;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -985,6 +1081,43 @@ kbd {
font-weight: bolder; font-weight: bolder;
} }
/**
* 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;
}
/** /**
* Miscs * Miscs
*/ */
@ -997,6 +1130,7 @@ hr {
} }
progress { progress {
display: inline-block;
vertical-align: baseline; vertical-align: baseline;
} }
@ -1005,6 +1139,32 @@ template {
display: none; display: none;
} }
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
canvas {
display: inline-block;
}
/** /**
* Accordion (<details>) * Accordion (<details>)
* Inspiration: https://codepen.io/koca/pen/RyeLLV * Inspiration: https://codepen.io/koca/pen/RyeLLV
@ -1017,9 +1177,9 @@ details {
} }
details summary { details summary {
line-height: 1rem;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
line-height: 1rem;
} }
details summary::-webkit-details-marker { details summary::-webkit-details-marker {
@ -1040,7 +1200,7 @@ details summary::after {
height: 1rem; height: 1rem;
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
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='%23808080' 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: 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.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");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
@ -1246,6 +1406,7 @@ nav {
justify-content: space-between; justify-content: space-between;
} }
nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
@ -1253,10 +1414,12 @@ nav ul {
list-style: none; list-style: none;
} }
nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: -0.5rem; margin-left: -0.5rem;
} }
nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: -0.5rem; margin-right: -0.5rem;
} }
@ -1284,6 +1447,7 @@ nav a:hover, nav a:active, nav a:focus {
} }
aside nav, aside nav,
aside ol,
aside ul, aside ul,
aside li { aside li {
display: block; display: block;
@ -1349,3 +1513,20 @@ aside li a {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
/**
* Reduce Motion Features
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
background-attachment: initial;
animation-duration: 1ms;
animation-delay: -1ms;
animation-iteration-count: 1;
scroll-behavior: auto;
transition-delay: 0s;
transition-duration: 0s;
}
}

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

File diff suppressed because one or more lines are too long

225
css/pico.css
View file

@ -155,16 +155,26 @@
box-sizing: border-box; box-sizing: border-box;
} }
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -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); background: var(--background);
color: var(--text); color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -259,9 +269,9 @@ body > footer {
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
max-width: 510px;
} }
} }
@ -376,15 +386,19 @@ sup {
top: -0.5rem; top: -0.5rem;
} }
img { dl dl,
max-width: 100%; dl ol,
height: auto; dl ul,
border-style: none; ol dl,
ul dl {
margin: 0;
} }
svg, ol ol,
img { ol ul,
vertical-align: text-bottom; ul ol,
ul ul {
margin: 0;
} }
address, address,
@ -592,6 +606,46 @@ del {
background-color: var(--primary-focus); 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;
}
/** /**
* Form elements * Form elements
*/ */
@ -602,9 +656,14 @@ textarea {
margin: 0; margin: 0;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
letter-spacing: inherit;
line-height: 1.5; line-height: 1.5;
} }
/**
* 1. Change the inconsistent appearance in all browsers (opinionated).
* 2. Add typography inheritance in all browsers (opinionated).
*/
input { input {
overflow: visible; overflow: visible;
} }
@ -622,7 +681,10 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],
@ -630,7 +692,8 @@ textarea {
padding: 0; padding: 0;
} }
[type="number"]::-webkit-inner-spin-button { ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto; height: auto;
} }
@ -648,6 +711,29 @@ textarea {
font: inherit; 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="color"],
[type="range"] {
padding: 0;
border-width: 0;
}
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -686,9 +772,11 @@ textarea {
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
} }
input::placeholder, input::placeholder, input::-webkit-input-placeholder,
select::placeholder, select::placeholder,
textarea::placeholder { select::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder {
color: var(--muted-text); color: var(--muted-text);
opacity: 1; opacity: 1;
} }
@ -753,14 +841,14 @@ input:not([type="checkbox"]):not([type="radio"]).valid,
select.valid, select.valid,
textarea.valid { textarea.valid {
border-bottom: 1px solid var(--valid); border-bottom: 1px solid var(--valid);
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='%23288a6a' 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: 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.99)' 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");
} }
input:not([type="checkbox"]):not([type="radio"]).invalid, input:not([type="checkbox"]):not([type="radio"]).invalid,
select.invalid, select.invalid,
textarea.invalid { textarea.invalid {
border-bottom: 1px solid var(--invalid); border-bottom: 1px solid var(--invalid);
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='%23b94646' 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: 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.99)' 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");
} }
input[type="color"] { input[type="color"] {
@ -772,8 +860,8 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple]) { select:not([multiple]):not([size]) {
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='%23808080' 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: 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.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");
background-position: center right .75rem; background-position: center right .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
@ -916,8 +1004,8 @@ a[role="button"] {
button, button,
input[type="submit"], input[type="submit"],
a[role="button"] { a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem; border-radius: 0.25rem;
outline: none; outline: none;
background-color: var(--primary); background-color: var(--primary);
@ -1101,7 +1189,10 @@ a.outline.contrast[role="button"]:focus {
*/ */
table { table {
width: 100%; width: 100%;
border-color: inherit;
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
text-indent: 0;
} }
th, th,
@ -1109,9 +1200,9 @@ td {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border);
color: var(--muted-text); color: var(--muted-text);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
font-size: 0.875rem;
} }
th, th,
@ -1136,10 +1227,15 @@ pre,
code, code,
kbd, kbd,
samp { samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem; font-size: 1rem;
} }
pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
pre, pre,
code, code,
kbd { kbd {
@ -1147,7 +1243,7 @@ kbd {
color: var(--code-color-1); color: var(--code-color-1);
font-size: 85%; font-size: 85%;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: initial;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -1231,6 +1327,43 @@ kbd {
font-weight: bolder; font-weight: bolder;
} }
/**
* 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;
}
/** /**
* Miscs * Miscs
*/ */
@ -1243,6 +1376,7 @@ hr {
} }
progress { progress {
display: inline-block;
vertical-align: baseline; vertical-align: baseline;
} }
@ -1251,6 +1385,32 @@ template {
display: none; display: none;
} }
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
canvas {
display: inline-block;
}
/** /**
* Accordion (<details>) * Accordion (<details>)
* Inspiration: https://codepen.io/koca/pen/RyeLLV * Inspiration: https://codepen.io/koca/pen/RyeLLV
@ -1263,9 +1423,9 @@ details {
} }
details summary { details summary {
line-height: 1rem;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
line-height: 1rem;
} }
details summary::-webkit-details-marker { details summary::-webkit-details-marker {
@ -1286,7 +1446,7 @@ details summary::after {
height: 1rem; height: 1rem;
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
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='%23808080' 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: 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.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");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
@ -1492,6 +1652,7 @@ nav {
justify-content: space-between; justify-content: space-between;
} }
nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
@ -1499,10 +1660,12 @@ nav ul {
list-style: none; list-style: none;
} }
nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: -0.5rem; margin-left: -0.5rem;
} }
nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: -0.5rem; margin-right: -0.5rem;
} }
@ -1534,6 +1697,7 @@ nav a.contrast:not([role="button"]), nav a.contrast:not([role="button"]):hover,
} }
aside nav, aside nav,
aside ol,
aside ul, aside ul,
aside li { aside li {
display: block; display: block;
@ -1599,3 +1763,20 @@ aside li a {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
/**
* Reduce Motion Features
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
background-attachment: initial;
animation-duration: 1ms;
animation-delay: -1ms;
animation-iteration-count: 1;
scroll-behavior: auto;
transition-delay: 0s;
transition-duration: 0s;
}
}

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

@ -155,16 +155,26 @@
box-sizing: border-box; box-sizing: border-box;
} }
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -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); background: var(--background);
color: var(--text); color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -316,15 +326,19 @@ sup {
top: -0.5rem; top: -0.5rem;
} }
img { dl dl,
max-width: 100%; dl ol,
height: auto; dl ul,
border-style: none; ol dl,
ul dl {
margin: 0;
} }
svg, ol ol,
img { ol ul,
vertical-align: text-bottom; ul ol,
ul ul {
margin: 0;
} }
address, address,
@ -505,6 +519,46 @@ del {
background-color: var(--primary-focus); 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;
}
/** /**
* Form elements * Form elements
*/ */
@ -515,9 +569,14 @@ textarea {
margin: 0; margin: 0;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
letter-spacing: inherit;
line-height: 1.5; line-height: 1.5;
} }
/**
* 1. Change the inconsistent appearance in all browsers (opinionated).
* 2. Add typography inheritance in all browsers (opinionated).
*/
input { input {
overflow: visible; overflow: visible;
} }
@ -535,7 +594,10 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],
@ -543,7 +605,8 @@ textarea {
padding: 0; padding: 0;
} }
[type="number"]::-webkit-inner-spin-button { ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto; height: auto;
} }
@ -561,6 +624,29 @@ textarea {
font: inherit; 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="color"],
[type="range"] {
padding: 0;
border-width: 0;
}
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -599,9 +685,11 @@ textarea {
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
} }
input::placeholder, input::placeholder, input::-webkit-input-placeholder,
select::placeholder, select::placeholder,
textarea::placeholder { select::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder {
color: var(--muted-text); color: var(--muted-text);
opacity: 1; opacity: 1;
} }
@ -660,8 +748,8 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple]) { select:not([multiple]):not([size]) {
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='%23808080' 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: 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.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");
background-position: center right .75rem; background-position: center right .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
@ -804,8 +892,8 @@ a[role="button"] {
button, button,
input[type="submit"], input[type="submit"],
a[role="button"] { a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem; border-radius: 0.25rem;
outline: none; outline: none;
background-color: var(--primary); background-color: var(--primary);
@ -851,7 +939,10 @@ a[role="button"][disabled] {
*/ */
table { table {
width: 100%; width: 100%;
border-color: inherit;
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
text-indent: 0;
} }
th, th,
@ -859,9 +950,9 @@ td {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border);
color: var(--muted-text); color: var(--muted-text);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
font-size: 0.875rem;
} }
th, th,
@ -886,10 +977,15 @@ pre,
code, code,
kbd, kbd,
samp { samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem; font-size: 1rem;
} }
pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
pre, pre,
code, code,
kbd { kbd {
@ -897,7 +993,7 @@ kbd {
color: var(--code-color-1); color: var(--code-color-1);
font-size: 85%; font-size: 85%;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: initial;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -981,6 +1077,43 @@ kbd {
font-weight: bolder; font-weight: bolder;
} }
/**
* 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;
}
/** /**
* Miscs * Miscs
*/ */
@ -993,6 +1126,7 @@ hr {
} }
progress { progress {
display: inline-block;
vertical-align: baseline; vertical-align: baseline;
} }
@ -1001,6 +1135,32 @@ template {
display: none; display: none;
} }
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
canvas {
display: inline-block;
}
/** /**
* Accordion (<details>) * Accordion (<details>)
* Inspiration: https://codepen.io/koca/pen/RyeLLV * Inspiration: https://codepen.io/koca/pen/RyeLLV
@ -1013,9 +1173,9 @@ details {
} }
details summary { details summary {
line-height: 1rem;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
line-height: 1rem;
} }
details summary::-webkit-details-marker { details summary::-webkit-details-marker {
@ -1036,7 +1196,7 @@ details summary::after {
height: 1rem; height: 1rem;
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
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='%23808080' 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: 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.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");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
@ -1242,6 +1402,7 @@ nav {
justify-content: space-between; justify-content: space-between;
} }
nav ol,
nav ul { nav ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
@ -1249,10 +1410,12 @@ nav ul {
list-style: none; list-style: none;
} }
nav ol:first-of-type,
nav ul:first-of-type { nav ul:first-of-type {
margin-left: -0.5rem; margin-left: -0.5rem;
} }
nav ol:last-of-type,
nav ul:last-of-type { nav ul:last-of-type {
margin-right: -0.5rem; margin-right: -0.5rem;
} }
@ -1280,6 +1443,7 @@ nav a:hover, nav a:active, nav a:focus {
} }
aside nav, aside nav,
aside ol,
aside ul, aside ul,
aside li { aside li {
display: block; display: block;
@ -1345,3 +1509,20 @@ aside li a {
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
opacity: 1; opacity: 1;
} }
/**
* Reduce Motion Features
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
background-attachment: initial;
animation-duration: 1ms;
animation-delay: -1ms;
animation-iteration-count: 1;
scroll-behavior: auto;
transition-delay: 0s;
transition-duration: 0s;
}
}

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

160
css/pico.slim.css
View file

@ -158,16 +158,26 @@
box-sizing: border-box; box-sizing: border-box;
} }
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -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); background: var(--background);
color: var(--text); color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -230,9 +240,9 @@ body > footer {
@media (min-width: 576px) { @media (min-width: 576px) {
.container { .container {
max-width: 510px;
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
max-width: 510px;
} }
} }
@ -315,15 +325,19 @@ sup {
top: -0.5rem; top: -0.5rem;
} }
img { dl dl,
max-width: 100%; dl ol,
height: auto; dl ul,
border-style: none; ol dl,
ul dl {
margin: 0;
} }
svg, ol ol,
img { ol ul,
vertical-align: text-bottom; ul ol,
ul ul {
margin: 0;
} }
address, address,
@ -530,6 +544,46 @@ del {
background-color: var(--primary-focus); 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;
}
/** /**
* Form elements * Form elements
*/ */
@ -540,9 +594,14 @@ textarea {
margin: 0; margin: 0;
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
letter-spacing: inherit;
line-height: 1.5; line-height: 1.5;
} }
/**
* 1. Change the inconsistent appearance in all browsers (opinionated).
* 2. Add typography inheritance in all browsers (opinionated).
*/
input { input {
overflow: visible; overflow: visible;
} }
@ -560,7 +619,10 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],
@ -568,7 +630,8 @@ textarea {
padding: 0; padding: 0;
} }
[type="number"]::-webkit-inner-spin-button { ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto; height: auto;
} }
@ -586,6 +649,29 @@ textarea {
font: inherit; 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="color"],
[type="range"] {
padding: 0;
border-width: 0;
}
fieldset { fieldset {
margin: 0; margin: 0;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -623,9 +709,11 @@ textarea {
vertical-align: middle; vertical-align: middle;
} }
input::placeholder, input::placeholder, input::-webkit-input-placeholder,
select::placeholder, select::placeholder,
textarea::placeholder { select::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder {
color: var(--muted-text); color: var(--muted-text);
opacity: 1; opacity: 1;
} }
@ -684,8 +772,8 @@ select::-ms-expand {
background-color: transparent; background-color: transparent;
} }
select:not([multiple]) { select:not([multiple]):not([size]) {
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='%23808080' 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: 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.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");
background-position: center right .75rem; background-position: center right .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
@ -827,8 +915,8 @@ a[role="button"] {
button, button,
input[type="submit"], input[type="submit"],
a[role="button"] { a[role="button"] {
border: 1px solid transparent;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid transparent;
border-radius: 0.25rem; border-radius: 0.25rem;
outline: none; outline: none;
background-color: var(--primary); background-color: var(--primary);
@ -873,7 +961,10 @@ a[role="button"][disabled] {
*/ */
table { table {
width: 100%; width: 100%;
border-color: inherit;
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
text-indent: 0;
} }
th, th,
@ -881,9 +972,9 @@ td {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-bottom: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border);
color: var(--muted-text); color: var(--muted-text);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
text-align: left; text-align: left;
font-size: 0.875rem;
} }
th, th,
@ -900,3 +991,40 @@ thead td {
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: var(--table-stripping); 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;
}

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

File diff suppressed because one or more lines are too long

36
scss/_variables.scss
View file

@ -54,14 +54,38 @@ $spacing-input-button: .75rem 1rem !default;
// –––––––––––––––––––– // ––––––––––––––––––––
// Sans serif native font stack // Sans serif native font stack
$sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, // Source: github.com/csstools/sanitize.css/blob/master/typography.css
"Helvetica Neue", Arial, "Noto Sans", sans-serif, $sans-serif:
"Apple Color Emoji", "Segoe UI Emoji", system-ui,
"Segoe UI Symbol", "Noto Color Emoji" !default; -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 // Monospace native font stack
$monospace: SFMono-Regular, Menlo, Monaco, Consolas, // // Source: github.com/csstools/sanitize.css/blob/master/typography.css
"Liberation Mono", "Courier New", monospace !default; $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; $line-height: 1.5 !default;
$text-weight: 400 !default; $text-weight: 400 !default;

5
scss/components/_accordion.scss
View file

@ -10,9 +10,9 @@ details {
border-bottom: 1px solid var(--muted-border); border-bottom: 1px solid var(--muted-border);
summary { summary {
line-height: 1rem;
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
line-height: 1rem;
// Reset marker // Reset marker
&::-webkit-details-marker { &::-webkit-details-marker {
@ -27,14 +27,13 @@ details {
// Marker // Marker
&::after { &::after {
$caret-icon-color: "808080"; // Without '#' !important
display: inline-block; display: inline-block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
float: right; float: right;
transform: rotate(-90deg); transform: rotate(-90deg);
// Source: https://feathericons.com/ // 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='%23" + $caret-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: 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, .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");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;

2
scss/components/_nav.scss
View file

@ -11,6 +11,7 @@ nav ul {
nav { nav {
justify-content: space-between; justify-content: space-between;
ol,
ul { ul {
align-items: center; align-items: center;
margin-bottom: 0; margin-bottom: 0;
@ -65,6 +66,7 @@ nav {
aside { aside {
nav, nav,
ol,
ul, ul,
li { li {
display: block; display: block;

1
scss/components/_tooltip.scss
View file

@ -54,6 +54,5 @@
&::after { &::after {
opacity: 1; opacity: 1;
} }
} }
} }

51
scss/content/_accessibility.scss Normal file
View file

@ -0,0 +1,51 @@
/**
* Accessibility & User interaction
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Accessibility
// Change the cursor on busy elements in all browsers (opinionated)
[aria-busy="true"] {
cursor: progress;
}
// Change the cursor on control elements in all browsers (opinionated)
[aria-controls] {
cursor: pointer;
}
// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
// Change the display on visually hidden accessible elements in all browsers (opinionated)
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
// User interaction
// Remove the tapping delay in IE 10
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}

13
scss/content/_button.scss
View file

@ -3,11 +3,12 @@
*/ */
// Reboot // Reboot based on :
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Change the font styles in all browsers. // 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari // 2. Remove the margin in Firefox and Safari
// 3. Show the overflow in Edge // 3. Show the overflow in Edge
button { button {
@ -17,7 +18,7 @@ button {
text-transform: none; // 1 text-transform: none; // 1
} }
// Correct the inability to style clickable types in iOS and Safari. // Correct the inability to style clickable types in iOS and Safari
button, button,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
@ -25,7 +26,7 @@ button,
-webkit-appearance: button; -webkit-appearance: button;
} }
// Remove the inner border and padding in Firefox. // Remove the inner border and padding in Firefox
button::-moz-focus-inner, button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
@ -52,8 +53,8 @@ a[role="button"] {
button, button,
input[type="submit"], input[type="submit"],
a[role="button"] { a[role="button"] {
border: 1px solid transparent;
padding: $spacing-input-button; padding: $spacing-input-button;
border: 1px solid transparent;
border-radius: $round; border-radius: $round;
outline: none; outline: none;
background-color: var(--primary); background-color: var(--primary);

16
scss/content/_code.scss
View file

@ -3,11 +3,13 @@
*/ */
// Reboot // Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Correct the inheritance and scaling of font size in all browsers. // 1. Correct the inheritance and scaling of font size in all browsers
// 2. Correct the odd `em` font sizing in all browsers. // 2. Correct the odd `em` font sizing in all browsers
pre, pre,
code, code,
kbd, kbd,
@ -16,6 +18,12 @@ samp {
font-size: 1rem; // 2 font-size: 1rem; // 2
} }
// Prevent overflow of the container in all browsers (opinionated)
pre {
-ms-overflow-style: scrollbar;
overflow: auto;
}
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
@ -27,7 +35,7 @@ kbd {
color: var(--code-color-1); color: var(--code-color-1);
font-size: 85%; font-size: 85%;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: initial;
@if map-get($breakpoints, "sm") and $enable-responsive-typography { @if map-get($breakpoints, "sm") and $enable-responsive-typography {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {

54
scss/content/_embedded.scss Normal file
View file

@ -0,0 +1,54 @@
/**
* Embedded content
*/
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// Change the alignment on media elements in all browsers (opinionated)
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
// Add the correct display in IE 9-
audio,
video {
display: inline-block;
}
// Add the correct display in iOS 4-7
audio:not([controls]) {
display: none;
height: 0;
}
// Remove the border on iframes in all browsers (opinionated)
iframe {
border-style: none;
}
// 1. Remove the border on images inside links in IE 10.
// 2. Responsive by default
img {
max-width: 100%; // 2
height: auto; // 2
border-style: none; // 1
}
// Change the fill color to match the text color in all browsers (opinionated)
svg:not([fill]) {
fill: currentColor;
}
// Hide the overflow in IE
svg:not(:root) {
overflow: hidden;
}

95
scss/content/_form.scss
View file

@ -3,12 +3,13 @@
*/ */
// Reboot // Reboot based on :
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Change the font styles in all browsers. // 1. Change the font styles in all browsers
// 2. Remove the margin in Firefox and Safari. // 2. Remove the margin in Firefox and Safari
input, input,
optgroup, optgroup,
select, select,
@ -16,23 +17,29 @@ textarea {
margin: 0; // 2 margin: 0; // 2
font-family: inherit; // 1 font-family: inherit; // 1
font-size: 1rem; // 1 font-size: 1rem; // 1
letter-spacing: inherit; // 2
line-height: $line-height; // 1 line-height: $line-height; // 1
} }
/**
* 1. Change the inconsistent appearance in all browsers (opinionated).
* 2. Add typography inheritance in all browsers (opinionated).
*/
// Show the overflow in IE. // Show the overflow in IE.
input { input {
overflow: visible; overflow: visible;
} }
// Remove the inheritance of text transform in Edge, Firefox, and IE. // Remove the inheritance of text transform in Edge, Firefox, and IE
select { select {
text-transform: none; text-transform: none;
} }
// 1. Correct the text wrapping in Edge and IE. // 1. Correct the text wrapping in Edge and IE
// 2. Correct the color inheritance from `fieldset` elements in IE. // 2. Correct the color inheritance from `fieldset` elements in IE
// 3. Remove the padding so developers are not caught out when they zero out // 3. Remove the padding so developers are not caught out when they zero out
// `fieldset` elements in all browsers. // `fieldset` elements in all browsers
legend { legend {
display: table; // 1 display: table; // 1
max-width: 100%; // 1 max-width: 100%; // 1
@ -41,41 +48,75 @@ legend {
white-space: normal; // 1 white-space: normal; // 1
} }
// Remove the default vertical scrollbar in IE 10+. // 1. Remove the margin in Firefox and Safari
// 2. Remove the default vertical scrollbar in IE
// 3. Change the resize direction in all browsers (opinionated)
textarea { textarea {
overflow: auto; margin: 0; // 1
overflow: auto; // 2
resize: vertical; // 3
resize: block; // 3
} }
// Remove the padding in IE 10. // Remove the padding in IE 10
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
padding: 0; padding: 0;
} }
// Correct the cursor style of increment and decrement buttons in Chrome. // Correct the cursor style of increment and decrement buttons in Safari
[type="number"]::-webkit-inner-spin-button { ::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto; height: auto;
} }
// 1. Correct the odd appearance in Chrome and Safari. // 1. Correct the odd appearance in Chrome and Safari
// 2. Correct the outline style in Safari. // 2. Correct the outline style in Safari
[type="search"] { [type="search"] {
-webkit-appearance: textfield; // 1 -webkit-appearance: textfield; // 1
outline-offset: -2px; // 2 outline-offset: -2px; // 2
} }
// Remove the inner padding in Chrome and Safari on macOS. // Remove the inner padding in Chrome and Safari on macOS
[type="search"]::-webkit-search-decoration { [type="search"]::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
// 1. Correct the inability to style clickable types in iOS and Safari. // 1. Correct the inability to style clickable types in iOS and Safari
// 2. Change font properties to `inherit` in Safari. // 2. Change font properties to `inherit` in Safari
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; // 1 -webkit-appearance: button; // 1
font: inherit; // 2 font: inherit; // 2
} }
// Remove the inner border and padding of focus outlines in Firefox
::-moz-focus-inner {
padding: 0;
border-style: none;
}
// Restore the focus outline styles unset by the previous rule in Firefox
:-moz-focusring {
outline: 1px dotted ButtonText;
}
// Remove the additional :invalid styles in Firefox
:-moz-ui-invalid {
box-shadow: none;
}
// Change the inconsistent appearance in IE (opinionated)
::-ms-expand {
display: none;
}
// Remove the border and padding in all browsers (opinionated)
[type="color"],
[type="range"] {
padding: 0;
border-width: 0;
}
// Pico // Pico
// –––––––––––––––––––– // ––––––––––––––––––––
@ -132,7 +173,8 @@ textarea {
box-shadow $transition; box-shadow $transition;
} }
&::placeholder { &::placeholder,
&::-webkit-input-placeholder {
color: var(--muted-text); color: var(--muted-text);
opacity: 1; opacity: 1;
} }
@ -181,17 +223,15 @@ textarea {
} }
&.valid { &.valid {
// Source: https://feathericons.com/
$valid-icon-color: "288a6a"; // Without '#' !important
border-bottom: 1px solid var(--valid); border-bottom: 1px solid var(--valid);
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='%23" + $valid-icon-color + "' 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"); // 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, .99)}' 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");
} }
&.invalid { &.invalid {
// Source: https://feathericons.com/
$invalid-icon-color: "b94646"; // Without '#' !important
border-bottom: 1px solid var(--invalid); border-bottom: 1px solid var(--invalid);
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='%23" + $invalid-icon-color + "' 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"); // 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, .99)}' 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");
} }
} }
} }
@ -210,10 +250,9 @@ select {
background-color: transparent; background-color: transparent;
} }
&:not([multiple]) { &:not([multiple]):not([size]) {
// Source: https://feathericons.com/ // Source: https://feathericons.com/
$caret-icon-color: "808080"; // Without '#' !important 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($grey-500, .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");
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='%23" + $caret-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-position: center right .75rem; background-position: center right .75rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;

45
scss/content/_miscs.scss
View file

@ -3,12 +3,13 @@
*/ */
// Reboot // Reboot based on :
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// 1. Add the correct box sizing in Firefox. // 1. Add the correct box sizing in Firefox
// 2. Show the overflow in Edge and IE. // 2. Show the overflow in Edge and IE
hr { hr {
box-sizing: content-box; // 1 box-sizing: content-box; // 1
height: 0; // 1 height: 0; // 1
@ -17,13 +18,43 @@ hr {
border-top: 1px solid var(--muted-border); border-top: 1px solid var(--muted-border);
} }
// Add the correct vertical alignment in Chrome, Firefox, and Opera. // 1. Add the correct display in Edge 18- and IE
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
progress { progress {
vertical-align: baseline; display: inline-block; // 1
vertical-align: baseline; // 2
} }
// Add the correct display in IE 10+. // Add the correct display in IE 10+
[hidden], [hidden],
template { template {
display: none; display: none;
} }
// Add the correct styles in Edge 18-, IE, and Safari
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
// Add the correct display in IE 9-
canvas {
display: inline-block;
}

29
scss/content/_reduce-motion.scss Normal file
View file

@ -0,0 +1,29 @@
@if $enable-transitions {
/**
* Reduce Motion Features
*/
// Based on :
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Remove animations when motion is reduced (opinionated)
// 2. Remove fixed background attachments when motion is reduced (opinionated)
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
// 4. Remove transitions when motion is reduced (opinionated)
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
background-attachment: initial; // 2
animation-duration: 1ms; // 1
animation-delay: -1ms; // 1
animation-iteration-count: 1; // 1
scroll-behavior: auto; // 3
transition-delay: 0s; // 4
transition-duration: 0s; // 4
}
}
}

18
scss/content/_table.scss
View file

@ -2,20 +2,36 @@
* Table * Table
*/ */
// Reboot based on :
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// ––––––––––––––––––––
// 1. Collapse border spacing in all browsers (opinionated).
// 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
// 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
table { table {
width: 100%; width: 100%;
border-color: inherit; // 2
border-collapse: collapse; // 1
border-spacing: 0; border-spacing: 0;
text-indent: 0; // 3
} }
// Pico
// ––––––––––––––––––––
// Cells // Cells
th, th,
td { td {
padding: ($spacing-gutter/2) $spacing-gutter; padding: ($spacing-gutter/2) $spacing-gutter;
border-bottom: 1px solid var(--table-border); border-bottom: 1px solid var(--table-border);
color: var(--muted-text); color: var(--muted-text);
font-size: 0.875rem;
font-weight: $text-weight; font-weight: $text-weight;
text-align: left; text-align: left;
font-size: 0.875rem;
} }
// Titles // Titles

36
scss/content/_typography.scss
View file

@ -3,17 +3,18 @@
*/ */
// Reboot // Reboot based on :
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// Add the correct font weight in Chrome, Edge, and Safari. // Add the correct font weight in Chrome, Edge, and Safari
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
// Prevent `sub` and `sup` elements from affecting the line height in all browsers. // Prevent `sub` and `sup` elements from affecting the line height in all browsers
sub, sub,
sup { sup {
position: relative; position: relative;
@ -28,16 +29,21 @@ sup {
top: -0.5rem; top: -0.5rem;
} }
// 1. Remove the border on images inside links in IE 10. // Remove the margin on nested lists in Chrome, Edge, IE, and Safari
// 2. Responsive by default dl dl,
img { dl ol,
max-width: 100%; // 2 dl ul,
height: auto; // 2 ol dl,
border-style: none; // 1 ul dl {
margin: 0;
} }
svg,
img { // Remove the margin on nested lists in Edge 18- and IE
vertical-align: text-bottom; ol ol,
ol ul,
ul ol,
ul ul {
margin: 0;
} }
@ -62,7 +68,7 @@ ul {
} }
// Links // Links
// 1. Remove the gray background on active links in IE 10. // 1. Remove the gray background on active links in IE 10
a { a {
background-color: transparent; // 1 background-color: transparent; // 1
color: var(--primary); color: var(--primary);
@ -258,7 +264,7 @@ blockquote {
} }
// Abbreviations // Abbreviations
// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari. // 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
text-decoration: none; // 1 text-decoration: none; // 1

2
scss/layout/_container.scss
View file

@ -17,9 +17,9 @@
@if map-get($breakpoints, "sm") and $enable-viewport { @if map-get($breakpoints, "sm") and $enable-viewport {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
max-width: map-get($viewports, "sm");
} }
} }

29
scss/layout/_document.scss
View file

@ -4,23 +4,38 @@
*/ */
// Reboot // Reboot based on :
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; // 1 box-sizing: border-box; // 1
} }
// 1. Correct the line height in all browsers. // 1. Add text decoration inheritance in all browsers (opinionated)
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. // 2. Add vertical alignment inheritance in all browsers (opinionated)
// 3. Change the default tap highlight to be completely transparent in iOS. ::before,
::after {
text-decoration: inherit; // 1
vertical-align: inherit; // 2
}
// 1. Correct the line height in all browsers
// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
// 3. Change the default tap highlight to be completely transparent in iOS
// 4. Use the default cursor in all browsers (opinionated)
// 5. Use a 4-space tab width in all browsers (opinionated)
// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
html { html {
-webkit-text-size-adjust: 100%; // 2 -webkit-text-size-adjust: 100%; // 2
-webkit-tap-highlight-color: rgba(0,0,0,0); // 3 -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
-moz-tab-size: 4; // 5
-ms-text-size-adjust: 100%; // 6
-webkit-text-size-adjust: 100%; // 6
background: var(--background); background: var(--background);
color: var(--text); color: var(--text);
font-family: $sans-serif; font-family: $sans-serif;
@ -28,6 +43,7 @@ html {
font-weight: $text-weight; font-weight: $text-weight;
line-height: $line-height; // 1 line-height: $line-height; // 1
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
cursor: default; // 4
@if map-get($breakpoints, "sm") and @if map-get($breakpoints, "sm") and
map-get($base-font, "sm") and map-get($base-font, "sm") and
@ -64,5 +80,4 @@ html {
font-size: map-get($base-font, "xl"); font-size: map-get($base-font, "xl");
} }
} }
} }

7
scss/layout/_sectioning.scss
View file

@ -4,11 +4,12 @@
*/ */
// Reboot // Reboot based on :
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css // - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
// –––––––––––––––––––– // ––––––––––––––––––––
// Render the `main` element consistently in IE. // Render the `main` element consistently in IE
main { main {
display: block; display: block;
} }

9
scss/pico.scss
View file

@ -18,14 +18,16 @@
@import "layout/scroller"; // figure @import "layout/scroller"; // figure
// Content // Content
@import "content/typography"; // a, headings, p, ul, blockquote ... @import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/form"; // label, input, select, ... @import "content/form"; // label, input, select, ...
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "content/button"; // button, a[role=button], ... @import "content/button"; // button, a[role=button], ...
@import "content/button-styles"; // .secondary, .contrast, .outline @import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/table"; // table, tr, td, ... @import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ... @import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, progress, template, [hidden] @import "content/accessibility"; // -ms-touch-action, aria-*
@import "content/miscs"; // hr, progress, template, [hidden], dialog, canvas
// Components // Components
@import "components/accordion"; // details, summary @import "components/accordion"; // details, summary
@ -33,3 +35,6 @@
@import "components/card-sectioning"; // article > header, footer, pre @import "components/card-sectioning"; // article > header, footer, pre
@import "components/nav"; // nav @import "components/nav"; // nav
@import "components/tooltip"; // data-tooltip @import "components/tooltip"; // data-tooltip
// Reduce motion
@import "content/reduce-motion"; // prefers-reduced-motion

43
scss/pico.slim.scss
View file

@ -30,26 +30,31 @@ $enable-transitions: false;
@import "themes/default"; @import "themes/default";
// Layout // Layout
@import "layout/document"; // html @import "layout/document"; // html
@import "layout/sectioning"; // body, header, main, footer @import "layout/sectioning"; // body, header, main, footer
@import "layout/container"; // .container, .container-fluid @import "layout/container"; // .container, .container-fluid
// @import "layout/section"; // section // @import "layout/section"; // section
@import "layout/grid"; // .grid @import "layout/grid"; // .grid
@import "layout/scroller"; // figure @import "layout/scroller"; // figure
// Content // Content
@import "content/typography"; // a, headings, p, ul, blockquote ... @import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/form"; // label, input, select, ... @import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch @import "content/form"; // label, input, select, ...
@import "content/button"; // button, a[role=button], ... @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
// @import "content/button-styles"; // .secondary, .contrast, .outline @import "content/button"; // button, a[role=button], ...
@import "content/table"; // table, tr, td, ... // @import "content/button-styles"; // .secondary, .contrast, .outline
// @import "content/code"; // pre, code, ... @import "content/table"; // table, tr, td, ...
// @import "content/miscs"; // hr, progress, template, [hidden] // @import "content/code"; // pre, code, ...
@import "content/accessibility"; // -ms-touch-action, aria-*
// @import "content/miscs"; // hr, progress, template, [hidden], dialog
// Components // Components
// @import "components/accordion"; // details, summary // @import "components/accordion"; // details, summary
// @import "components/card"; // article // @import "components/card"; // article
// @import "components/card-sectioning"; // article > header, footer, pre // @import "components/card-sectioning"; // article > header, footer, pre
// @import "components/nav"; // nav // @import "components/nav"; // nav
// @import "components/tooltip"; // data-tooltip // @import "components/tooltip"; // data-tooltip
// Reduce motion
// @import "content/reduce-motion"; // prefers-reduced-motion