KNACSS/sass/base/_reset.scss

345 lines
4.4 KiB
SCSS
Raw Normal View History

2014-05-04 15:48:00 +02:00
/* ----------------------------- */
2019-07-17 11:57:00 +02:00
/* ==Reset */
2014-05-04 15:48:00 +02:00
/* ----------------------------- */
2019-07-17 11:57:00 +02:00
/**
* disable animations styles when reduced motion is enabled
*/
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
2019-07-17 11:57:00 +02:00
/**
* 1. switch to border-box model for all elements
* 2. avoid min-width: auto and min-height: auto on flex and grid children
*/
2014-05-04 15:48:00 +02:00
2017-12-06 09:32:12 +01:00
*,
*::before,
*::after {
2019-07-17 11:57:00 +02:00
box-sizing: border-box; /* 1 */
min-width: 0; /* 2 */
min-height: 0; /* 2 */
}
2019-07-17 11:57:00 +02:00
/**
* 1. remove the grey highlight on links in iOS
* 2. prevent orientation font changes in iOS
* 3. set base font-size to equiv "10px", which is adapted to rem unit
*/
2014-05-04 15:48:00 +02:00
html {
2019-07-17 11:57:00 +02:00
-webkit-tap-highlight-color: transparent; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
font-size: calc(1em * 0.625); /* 3 */
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2014-05-04 15:48:00 +02:00
body {
2017-10-18 08:24:39 +02:00
margin: 0;
2017-10-30 15:42:32 +01:00
@include font-size(base);
2017-03-03 16:51:48 +01:00
background-color: $background-base;
color: $color-base;
font-family: $font-family-base;
line-height: $line-height-base;
2014-05-04 15:48:00 +02:00
}
2019-07-17 12:24:47 +02:00
/**
* links
*/
2014-06-30 21:20:07 +02:00
a {
2017-09-26 11:42:46 +02:00
color: $link-color;
text-decoration: $link-decoration;
&:focus,
&:hover,
&:active {
color: $link-color-hover;
text-decoration: $link-decoration-hover;
2015-07-01 13:47:48 +02:00
}
2014-06-30 21:20:07 +02:00
}
2019-07-17 12:24:47 +02:00
/**
* headings
*/
2017-07-31 11:45:22 +02:00
h1, .h1-like {
2017-10-30 15:42:32 +01:00
@include font-size(h1);
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
font-family: $font-family-headings;
2017-03-03 16:51:48 +01:00
}
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h2, .h2-like {
2017-10-30 15:42:32 +01:00
@include font-size(h2);
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
font-family: $font-family-headings;
2016-12-07 10:57:06 +01:00
}
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h3, .h3-like {
2017-10-30 15:42:32 +01:00
@include font-size(h3);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h4, .h4-like {
2017-10-30 15:42:32 +01:00
@include font-size(h4);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h5, .h5-like {
2017-10-30 15:42:32 +01:00
@include font-size(h5);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
h6, .h6-like {
2017-10-30 15:42:32 +01:00
@include font-size(h6);
font-weight: $weight-medium;
2014-05-04 15:48:00 +02:00
}
2019-07-17 12:24:47 +02:00
/**
* vertical rythm
*/
h1,
h2,
h3,
h4,
h5,
h6,
2017-10-18 08:40:26 +02:00
dd {
margin-top: 0;
margin-bottom: $headings-margin-bottom;
}
p,
address,
ol,
ul,
dl,
blockquote,
pre {
margin-top: 0;
margin-bottom: $paragraph-margin-bottom;
2014-05-04 15:48:00 +02:00
}
2019-07-17 12:24:47 +02:00
/**
* avoid margin on nested elements
*/
2014-05-04 15:48:00 +02:00
li p,
2017-07-31 11:45:22 +02:00
li .p-like,
2014-05-04 15:48:00 +02:00
li ul,
2017-10-18 08:40:26 +02:00
li ol,
ol ol,
ul ul {
2015-07-01 13:47:48 +02:00
margin-top: 0;
margin-bottom: 0;
2014-05-04 15:48:00 +02:00
}
2019-07-17 12:24:47 +02:00
/**
* common elements styling
*/
2019-07-17 11:57:00 +02:00
a,
area,
button,
[role="button"],
.btn,
.button,
[type="button"]
input:not([type="range"]),
label,
select,
summary,
textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
2015-07-01 13:47:48 +02:00
max-width: 100%;
2014-05-04 15:48:00 +02:00
}
2016-09-27 16:10:21 +02:00
img {
height: auto;
2019-07-17 11:57:00 +02:00
vertical-align: middle;
border-style: none;
}
2019-07-17 12:24:47 +02:00
/**
* fill color matching to text color
*/
svg:not([fill]) {
fill: currentColor;
}
/**
* hide overflow in IE
*/
2019-07-17 11:57:00 +02:00
svg:not(:root) {
overflow: hidden;
2016-10-31 10:53:57 +01:00
}
2017-07-31 17:30:43 +02:00
ul,
ol {
padding-left: 2em;
}
2019-07-17 11:57:00 +02:00
b,
strong {
font-weight: bolder;
2017-07-31 17:30:43 +02:00
}
em,
.italic,
address,
cite,
i,
var {
font-style: italic;
}
2019-07-17 12:24:47 +02:00
/**
* monospace tags and mark tag styling
*/
2019-07-17 11:57:00 +02:00
pre,
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
white-space: pre-wrap;
line-height: normal;
}
pre {
overflow: auto;
-ms-overflow-style: scrollbar;
tab-size: 2;
}
2017-07-31 17:30:43 +02:00
code,
kbd,
mark {
border-radius: 2px;
}
kbd {
padding: 0 2px;
border: 1px solid #999;
}
code {
padding: 2px 4px;
background: rgba(0, 0, 0, 0.04);
color: #b11;
}
pre code {
padding: 0;
background: none;
color: inherit;
border-radius: 0;
}
mark {
padding: 2px 4px;
}
sup,
sub {
vertical-align: 0;
}
sup {
bottom: 1ex;
}
sub {
top: 0.5ex;
}
2019-07-17 12:24:47 +02:00
/**
* quotes, blockquote and hr styling
*/
2017-07-31 17:30:43 +02:00
blockquote {
position: relative;
padding-left: 3em;
min-height: 2em;
}
blockquote::before {
content: "\201C";
position: absolute;
left: 0;
top: 0;
font-family: georgia, serif;
font-size: 5em;
height: .4em;
line-height: .9;
2017-09-26 11:42:46 +02:00
color: $quote-color;
2017-07-31 17:30:43 +02:00
}
blockquote > footer {
margin-top: .75em;
font-size: 0.9em;
color: rgba(0, 0, 0, .7);
&::before {
content: "\2014 \0020";
}
}
q {
font-style: normal;
}
q,
.q {
2017-12-19 15:20:17 +01:00
quotes: "" "" "" "";
2017-07-31 17:30:43 +02:00
&:lang(fr) {
2017-12-19 15:20:17 +01:00
quotes: "«\00a0" "\00a0»" "" "";
2017-07-31 17:30:43 +02:00
}
}
hr {
display: block;
clear: both;
height: 1px;
margin: 1em 0 2em;
padding: 0;
border: 0;
color: #ccc;
background-color: #ccc;
}
blockquote,
figure {
margin-left: 0;
margin-right: 0;
}