168 lines
2.8 KiB
SCSS
168 lines
2.8 KiB
SCSS
// TODO: Remove this once we enable box-sixing: border-box globally.
|
|
[class^='crayons'],
|
|
[class^='crayons']::before,
|
|
[class^='crayons']::after,
|
|
[class^='crayons'] *,
|
|
[class^='crayons'] *::before,
|
|
[class^='crayons'] *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// TODO: uncomment when we're ready!
|
|
// *,
|
|
// *::before,
|
|
// *::after {
|
|
// box-sizing: border-box;
|
|
// }
|
|
|
|
// Remove default padding
|
|
ul[class],
|
|
ol[class] {
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
|
|
}
|
|
|
|
// Remove default margin
|
|
body,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
ul[class],
|
|
ol[class],
|
|
li,
|
|
figure,
|
|
figcaption,
|
|
blockquote,
|
|
dl,
|
|
dd,
|
|
pre {
|
|
margin: 0;
|
|
}
|
|
|
|
// Set core body defaults
|
|
body {
|
|
scroll-behavior: smooth;
|
|
text-rendering: optimizeSpeed;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// Render the `main` element consistently in IE.
|
|
main {
|
|
display: block;
|
|
}
|
|
|
|
// Remove list styles on ul, ol elements with a class attribute
|
|
ul[class],
|
|
ol[class] {
|
|
list-style: none;
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: var(--ff-monospace);
|
|
font-size: 1em;
|
|
}
|
|
|
|
// Unify styling
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
// Drop default outline (Crayons provides custom)
|
|
input[type='text'],
|
|
textarea,
|
|
input[type='url'],
|
|
input[type='email'],
|
|
input[type='password'] {
|
|
outline: 0;
|
|
}
|
|
|
|
// Correct the inability to style clickable types in iOS and Safari.
|
|
button,
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
-webkit-appearance: button;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Remove default stylings for fieldset
|
|
fieldset {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
// Remove the inner border and padding in Firefox.
|
|
button::-moz-focus-inner,
|
|
[type='button']::-moz-focus-inner,
|
|
[type='reset']::-moz-focus-inner,
|
|
[type='submit']::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
button:-moz-focusring,
|
|
[type='button']:-moz-focusring,
|
|
[type='reset']:-moz-focusring,
|
|
[type='submit']:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
// Add the correct font weight in Chrome, Edge, and Safari.
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
// Add the correct font size in all browsers.
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
//Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
// Remove all animations and transitions for people that prefer not to see them
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
::before,
|
|
::after {
|
|
animation-delay: -1ms !important;
|
|
animation-duration: 1ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
background-attachment: initial !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0s !important;
|
|
transition-delay: 0s !important;
|
|
}
|
|
}
|