mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
Lucas
parent
d0730c8b6e
commit
a2404b19b5
27 changed files with 1141 additions and 185 deletions
|
|
@ -54,14 +54,38 @@ $spacing-input-button: .75rem 1rem !default;
|
|||
// ––––––––––––––––––––
|
||||
|
||||
// Sans serif native font stack
|
||||
$sans-serif: -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" !default;
|
||||
// Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
$sans-serif:
|
||||
system-ui,
|
||||
-apple-system, // macOS 10.11-10.12
|
||||
"Segoe UI", // Windows 6+
|
||||
"Roboto", // Android 4+
|
||||
"Ubuntu", // Ubuntu 10.10+
|
||||
"Cantarell", // Gnome 3+
|
||||
"Noto Sans", // KDE Plasma 5+
|
||||
sans-serif, // Fallback
|
||||
"Apple Color Emoji", // macOS emoji
|
||||
"Segoe UI Emoji", // Windows emoji
|
||||
"Segoe UI Symbol", // Windows emoji
|
||||
"Noto Color Emoji" // Linux emoji
|
||||
!default;
|
||||
|
||||
// Monospace native font stack
|
||||
$monospace: SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace !default;
|
||||
// // Source: github.com/csstools/sanitize.css/blob/master/typography.css
|
||||
$monospace:
|
||||
"Menlo", // macOS 10.10+
|
||||
"Consolas", // Windows 6+
|
||||
"Roboto Mono", // Android 4+
|
||||
"Ubuntu Monospace", // Ubuntu 10.10+
|
||||
"Noto Mono", // KDE Plasma 5+
|
||||
"Oxygen Mono", // KDE Plasma 4+
|
||||
"Liberation Mono", // Linux/OpenOffice fallback
|
||||
monospace, // Fallback
|
||||
"Apple Color Emoji", // macOS emoji
|
||||
"Segoe UI Emoji", // Windows emoji
|
||||
"Segoe UI Symbol", // Windows emoji
|
||||
"Noto Color Emoji" // Linux emoji
|
||||
!default;
|
||||
|
||||
$line-height: 1.5 !default;
|
||||
$text-weight: 400 !default;
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ details {
|
|||
border-bottom: 1px solid var(--muted-border);
|
||||
|
||||
summary {
|
||||
line-height: 1rem;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
line-height: 1rem;
|
||||
|
||||
// Reset marker
|
||||
&::-webkit-details-marker {
|
||||
|
|
@ -27,14 +27,13 @@ details {
|
|||
|
||||
// Marker
|
||||
&::after {
|
||||
$caret-icon-color: "808080"; // Without '#' !important
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
float: right;
|
||||
transform: rotate(-90deg);
|
||||
// Source: https://feathericons.com/
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%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-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ nav ul {
|
|||
nav {
|
||||
justify-content: space-between;
|
||||
|
||||
ol,
|
||||
ul {
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -65,6 +66,7 @@ nav {
|
|||
aside {
|
||||
|
||||
nav,
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -54,6 +54,5 @@
|
|||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
51
scss/content/_accessibility.scss
Normal file
51
scss/content/_accessibility.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -3,11 +3,12 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// 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. Change the font styles in all browsers.
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
// 3. Show the overflow in Edge
|
||||
button {
|
||||
|
|
@ -17,7 +18,7 @@ button {
|
|||
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,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
|
|
@ -25,7 +26,7 @@ button,
|
|||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
// Remove the inner border and padding in Firefox.
|
||||
// Remove the inner border and padding in Firefox
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
|
|
@ -52,8 +53,8 @@ a[role="button"] {
|
|||
button,
|
||||
input[type="submit"],
|
||||
a[role="button"] {
|
||||
border: 1px solid transparent;
|
||||
padding: $spacing-input-button;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $round;
|
||||
outline: none;
|
||||
background-color: var(--primary);
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
// 2. Correct the odd `em` font sizing 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
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
|
|
@ -16,6 +18,12 @@ samp {
|
|||
font-size: 1rem; // 2
|
||||
}
|
||||
|
||||
// Prevent overflow of the container in all browsers (opinionated)
|
||||
pre {
|
||||
-ms-overflow-style: scrollbar;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
|
@ -27,7 +35,7 @@ kbd {
|
|||
color: var(--code-color-1);
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
line-height: initial;
|
||||
|
||||
@if map-get($breakpoints, "sm") and $enable-responsive-typography {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
|
|
|
|||
54
scss/content/_embedded.scss
Normal file
54
scss/content/_embedded.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -3,12 +3,13 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// 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. Change the font styles in all browsers.
|
||||
// 2. Remove the margin in Firefox and Safari.
|
||||
// 1. Change the font styles in all browsers
|
||||
// 2. Remove the margin in Firefox and Safari
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
|
|
@ -16,23 +17,29 @@ textarea {
|
|||
margin: 0; // 2
|
||||
font-family: inherit; // 1
|
||||
font-size: 1rem; // 1
|
||||
letter-spacing: inherit; // 2
|
||||
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.
|
||||
input {
|
||||
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 {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// 1. Correct the text wrapping in Edge and IE.
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
// 1. Correct the text wrapping in Edge and 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
|
||||
// `fieldset` elements in all browsers.
|
||||
// `fieldset` elements in all browsers
|
||||
legend {
|
||||
display: table; // 1
|
||||
max-width: 100%; // 1
|
||||
|
|
@ -41,41 +48,75 @@ legend {
|
|||
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 {
|
||||
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="radio"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button {
|
||||
// Correct the cursor style of increment and decrement buttons in Safari
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Correct the odd appearance in Chrome and Safari.
|
||||
// 2. Correct the outline style in Safari.
|
||||
// 1. Correct the odd appearance in Chrome and Safari
|
||||
// 2. Correct the outline style in Safari
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
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 {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
// 2. Change font properties to `inherit` in Safari.
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari
|
||||
// 2. Change font properties to `inherit` in Safari
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
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
|
||||
// ––––––––––––––––––––
|
||||
|
|
@ -132,7 +173,8 @@ textarea {
|
|||
box-shadow $transition;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--muted-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -181,17 +223,15 @@ textarea {
|
|||
}
|
||||
|
||||
&.valid {
|
||||
// Source: https://feathericons.com/
|
||||
$valid-icon-color: "288a6a"; // Without '#' !important
|
||||
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 {
|
||||
// Source: https://feathericons.com/
|
||||
$invalid-icon-color: "b94646"; // Without '#' !important
|
||||
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;
|
||||
}
|
||||
|
||||
&:not([multiple]) {
|
||||
&:not([multiple]):not([size]) {
|
||||
// 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='%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 right .75rem;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1rem auto;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// 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. Add the correct box sizing in Firefox.
|
||||
// 2. Show the overflow in Edge and IE.
|
||||
// 1. Add the correct box sizing in Firefox
|
||||
// 2. Show the overflow in Edge and IE
|
||||
hr {
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
|
|
@ -17,13 +18,43 @@ hr {
|
|||
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 {
|
||||
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],
|
||||
template {
|
||||
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
29
scss/content/_reduce-motion.scss
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,20 +2,36 @@
|
|||
* 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 {
|
||||
width: 100%;
|
||||
border-color: inherit; // 2
|
||||
border-collapse: collapse; // 1
|
||||
border-spacing: 0;
|
||||
text-indent: 0; // 3
|
||||
}
|
||||
|
||||
|
||||
// Pico
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: ($spacing-gutter/2) $spacing-gutter;
|
||||
border-bottom: 1px solid var(--table-border);
|
||||
color: var(--muted-text);
|
||||
font-size: 0.875rem;
|
||||
font-weight: $text-weight;
|
||||
text-align: left;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
// Titles
|
||||
|
|
|
|||
|
|
@ -3,17 +3,18 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// 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
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
||||
// Add the correct font weight in Chrome, Edge, and Safari
|
||||
b,
|
||||
strong {
|
||||
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,
|
||||
sup {
|
||||
position: relative;
|
||||
|
|
@ -28,16 +29,21 @@ sup {
|
|||
top: -0.5rem;
|
||||
}
|
||||
|
||||
// 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
|
||||
// Remove the margin on nested lists in Chrome, Edge, IE, and Safari
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ul dl {
|
||||
margin: 0;
|
||||
}
|
||||
svg,
|
||||
img {
|
||||
vertical-align: text-bottom;
|
||||
|
||||
// Remove the margin on nested lists in Edge 18- and IE
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -62,7 +68,7 @@ ul {
|
|||
}
|
||||
|
||||
// Links
|
||||
// 1. Remove the gray background on active links in IE 10.
|
||||
// 1. Remove the gray background on active links in IE 10
|
||||
a {
|
||||
background-color: transparent; // 1
|
||||
color: var(--primary);
|
||||
|
|
@ -258,7 +264,7 @@ blockquote {
|
|||
}
|
||||
|
||||
// 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] {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none; // 1
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
|
||||
@if map-get($breakpoints, "sm") and $enable-viewport {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
max-width: map-get($viewports, "sm");
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
max-width: map-get($viewports, "sm");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,23 +4,38 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// 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 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,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
}
|
||||
|
||||
// 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.
|
||||
// 1. Add text decoration inheritance in all browsers (opinionated)
|
||||
// 2. Add vertical alignment inheritance in all browsers (opinionated)
|
||||
::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 {
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
-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);
|
||||
color: var(--text);
|
||||
font-family: $sans-serif;
|
||||
|
|
@ -28,6 +43,7 @@ html {
|
|||
font-weight: $text-weight;
|
||||
line-height: $line-height; // 1
|
||||
text-rendering: optimizeLegibility;
|
||||
cursor: default; // 4
|
||||
|
||||
@if map-get($breakpoints, "sm") and
|
||||
map-get($base-font, "sm") and
|
||||
|
|
@ -64,5 +80,4 @@ html {
|
|||
font-size: map-get($base-font, "xl");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@
|
|||
*/
|
||||
|
||||
|
||||
// Reboot
|
||||
// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
// 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
|
||||
// ––––––––––––––––––––
|
||||
|
||||
// Render the `main` element consistently in IE.
|
||||
// Render the `main` element consistently in IE
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,14 +18,16 @@
|
|||
@import "layout/scroller"; // figure
|
||||
|
||||
// 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-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "content/button"; // button, a[role=button], ...
|
||||
@import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
@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
|
||||
@import "components/accordion"; // details, summary
|
||||
|
|
@ -33,3 +35,6 @@
|
|||
@import "components/card-sectioning"; // article > header, footer, pre
|
||||
@import "components/nav"; // nav
|
||||
@import "components/tooltip"; // data-tooltip
|
||||
|
||||
// Reduce motion
|
||||
@import "content/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
|
|||
|
|
@ -30,26 +30,31 @@ $enable-transitions: false;
|
|||
@import "themes/default";
|
||||
|
||||
// Layout
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
// @import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
@import "layout/document"; // html
|
||||
@import "layout/sectioning"; // body, header, main, footer
|
||||
@import "layout/container"; // .container, .container-fluid
|
||||
// @import "layout/section"; // section
|
||||
@import "layout/grid"; // .grid
|
||||
@import "layout/scroller"; // figure
|
||||
|
||||
// Content
|
||||
@import "content/typography"; // a, headings, p, ul, blockquote ...
|
||||
@import "content/form"; // label, input, select, ...
|
||||
@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "content/button"; // button, a[role=button], ...
|
||||
// @import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
// @import "content/code"; // pre, code, ...
|
||||
// @import "content/miscs"; // hr, progress, template, [hidden]
|
||||
@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-checkbox-radio"; // type=checkbox, type=radio, role=switch
|
||||
@import "content/button"; // button, a[role=button], ...
|
||||
// @import "content/button-styles"; // .secondary, .contrast, .outline
|
||||
@import "content/table"; // table, tr, td, ...
|
||||
// @import "content/code"; // pre, code, ...
|
||||
@import "content/accessibility"; // -ms-touch-action, aria-*
|
||||
// @import "content/miscs"; // hr, progress, template, [hidden], dialog
|
||||
|
||||
// Components
|
||||
// @import "components/accordion"; // details, summary
|
||||
// @import "components/card"; // article
|
||||
// @import "components/card-sectioning"; // article > header, footer, pre
|
||||
// @import "components/nav"; // nav
|
||||
// @import "components/tooltip"; // data-tooltip
|
||||
// @import "components/accordion"; // details, summary
|
||||
// @import "components/card"; // article
|
||||
// @import "components/card-sectioning"; // article > header, footer, pre
|
||||
// @import "components/nav"; // nav
|
||||
// @import "components/tooltip"; // data-tooltip
|
||||
|
||||
// Reduce motion
|
||||
// @import "content/reduce-motion"; // prefers-reduced-motion
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue