You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
4.1 KiB
204 lines
4.1 KiB
/**
|
|
* normalize
|
|
*
|
|
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
|
|
*
|
|
* @author Björn Hase, Tentakelfabrik
|
|
* @license http://opensource.org/licenses/MIT The MIT License
|
|
* @link https://github.com/tentakelfabrik/plain-ui
|
|
*
|
|
*/
|
|
|
|
:root {
|
|
@each $var, $color in $plain-ui__colors {
|
|
#{$var}: $color;
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-size: 100%;
|
|
line-height: 1.15; // Correct the line height in all browsers.
|
|
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
|
|
}
|
|
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
html,
|
|
legend {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: $plain-ui__font-family;
|
|
color: var(--text);
|
|
|
|
background-color: var(--body);
|
|
direction: $plain-ui__direction;
|
|
|
|
font-size: $plain-ui__font-size;
|
|
@include media-breakpoints('font-size', $plain-ui__font-size-breakpoints);
|
|
|
|
line-height: $plain-ui__line-height;
|
|
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
|
|
}
|
|
|
|
a {
|
|
color: var(--link);
|
|
transition: color 0.5s;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
main {
|
|
display: block; // Render the `main` element consistently in IE.
|
|
}
|
|
|
|
*,
|
|
*::after,
|
|
*::before {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
figcaption {
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
/**
|
|
* form elements
|
|
*
|
|
*
|
|
*/
|
|
|
|
// Remove the margin in Firefox and Safari.
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
}
|
|
|
|
fieldset {
|
|
margin: $plain-ui__margin;
|
|
}
|
|
|
|
// Remove the inheritance of text transform in Firefox
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
// Correct the inability to style clickable types in iOS and Safari.
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"],
|
|
button {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
// Remove the inner border and padding in Firefox.
|
|
[type="button"]::-moz-focus-inner,
|
|
[type="reset"]::-moz-focus-inner,
|
|
[type="submit"]::-moz-focus-inner,
|
|
button::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
// Restore the focus styles unset by the previous rule.
|
|
[type="button"]:-moz-focusring,
|
|
[type="reset"]:-moz-focusring,
|
|
[type="submit"]:-moz-focusring,
|
|
button:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
legend {
|
|
box-sizing: border-box; //Correct the text wrapping in Edge and IE.
|
|
display: table; // Correct the text wrapping in Edge and IE.
|
|
max-width: 100%; // Correct the text wrapping in Edge and IE.
|
|
padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
|
|
white-space: normal; // Correct the text wrapping in Edge and IE.
|
|
}
|
|
|
|
// Correct the cursor style of increment and decrement buttons in Chrome.
|
|
[type="number"]::-webkit-inner-spin-button,
|
|
[type="number"]::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
[type="search"] {
|
|
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
|
|
outline-offset: -2px; // Correct the outline style in Safari.
|
|
}
|
|
|
|
// Remove the inner padding in Chrome and Safari on macOS.
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
|
|
font: inherit; // Change font properties to `inherit` in Safari.
|
|
}
|
|
|
|
/**
|
|
* hr
|
|
*
|
|
*/
|
|
hr {
|
|
box-sizing: content-box; // Add the correct box sizing in Firefox.
|
|
height: 0; // Add the correct box sizing in Firefox.
|
|
overflow: visible; // Show the overflow in Edge and IE.
|
|
border: 0;
|
|
border-top: 1px solid var(--border);
|
|
margin: $plain-ui__margin;
|
|
}
|
|
|
|
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
// Add the correct display in Firefox.
|
|
details {
|
|
display: block;
|
|
}
|
|
|
|
// Add the correct display in all browsers.
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: $plain-ui__font-family;
|
|
font-size: $plain-ui__font-size;
|
|
// @TODO
|
|
}
|