KNACSS/sass/_library/_base.scss

348 lines
4.9 KiB
SCSS
Raw Normal View History

2014-05-04 15:48:00 +02:00
/* ----------------------------- */
2016-05-20 08:58:56 +02:00
/* ==Base (basic styles) */
2014-05-04 15:48:00 +02:00
/* ----------------------------- */
/* switching to border-box model for all elements */
html {
2015-07-01 13:47:48 +02:00
box-sizing: border-box;
2014-05-04 15:48:00 +02:00
}
* {
2015-07-01 13:47:48 +02:00
box-sizing: inherit;
2017-08-01 11:57:50 +02:00
/* avoid min-width: auto on flex and grid children */
min-width: 0;
}
2014-05-04 15:48:00 +02:00
html {
2015-07-01 13:47:48 +02:00
/* set base font-size to equiv "10px", which is adapted to rem unit */
font-size: 62.5%;
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
font-size: calc(1em * 0.625);
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 {
2015-12-12 11:20:29 +01:00
font-size: $base-font-size;
2017-03-03 16:51:48 +01:00
@if variable_exists(base-font-size-l) and $base-font-size-l != $base-font-size {
@include respond-to("tiny-up") {
font-size: $base-font-size-l;
}
}
background-color: $background-base;
color: $color-base;
2015-07-01 13:47:48 +02:00
font-family: $font-stack-common;
line-height: $line-height;
2017-03-03 16:51:48 +01:00
@if variable_exists(line-height-l) and $line-height-l != $line-height {
@include respond-to("tiny-up") {
line-height: $line-height-l;
}
}
2014-05-04 15:48:00 +02:00
}
2017-07-31 17:30:43 +02:00
/* Links */
2014-06-30 21:20:07 +02:00
a {
2017-03-03 16:51:48 +01:00
color: $color-link;
2017-07-31 17:30:43 +02:00
// No styling on focus/hover if there's no effect.
2017-03-03 16:51:48 +01:00
@if variable_exists(color-link-hover) and
( null == index( ($color-link, null, false), $color-link-hover) ) {
&:focus,
&:hover,
&:active {
2017-03-03 16:51:48 +01:00
color: $color-link-hover;
}
2015-07-01 13:47:48 +02:00
}
2014-06-30 21:20:07 +02:00
}
2017-07-31 17:30:43 +02:00
/* Headings */
2017-07-31 11:45:22 +02:00
h1, .h1-like {
2015-07-01 13:47:48 +02:00
font-size: $h1-size;
2017-03-03 16:51:48 +01:00
@if variable_exists(h1-size-l) and $h1-size-l != $h1-size {
@include respond-to("tiny-up") {
font-size: $h1-size-l;
}
}
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
2016-12-07 10:57:06 +01:00
font-family: $font-stack-headings;
}
2017-08-31 15:22:12 +02:00
font-weight: bold;
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 {
2015-07-01 13:47:48 +02:00
font-size: $h2-size;
2017-03-03 16:51:48 +01:00
@if variable_exists(h2-size-l) and $h2-size-l != $h2-size {
@include respond-to("tiny-up") {
font-size: $h2-size-l;
}
}
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
2016-12-07 10:57:06 +01:00
font-family: $font-stack-headings;
}
2017-08-31 15:22:12 +02:00
font-weight: bold;
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 {
2015-07-01 13:47:48 +02:00
font-size: $h3-size;
2017-03-03 16:51:48 +01:00
@if variable_exists(h3-size-l) and $h3-size-l != $h3-size {
@include respond-to("tiny-up") {
font-size: $h3-size-l;
}
}
2017-08-31 15:22:12 +02:00
font-weight: bold;
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 {
2015-07-01 13:47:48 +02:00
font-size: $h4-size;
2017-03-03 16:51:48 +01:00
@if variable_exists(h4-size-l) and $h4-size-l != $h4-size {
@include respond-to("tiny-up") {
font-size: $h4-size-l;
}
}
2017-08-31 15:22:12 +02:00
font-weight: bold;
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 {
2015-07-01 13:47:48 +02:00
font-size: $h5-size;
2017-03-03 16:51:48 +01:00
@if variable_exists(h5-size-l) and $h5-size-l != $h5-size {
@include respond-to("tiny-up") {
font-size: $h5-size-l;
}
}
2017-08-31 15:22:12 +02:00
font-weight: bold;
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 {
2015-07-01 13:47:48 +02:00
font-size: $h6-size;
2017-03-03 16:51:48 +01:00
@if variable_exists(h6-size-l) and $h6-size-l != $h6-size {
@include respond-to("tiny-up") {
font-size: $h6-size-l;
2017-03-03 16:51:48 +01:00
}
}
2017-08-31 15:22:12 +02:00
font-weight: bold;
2014-05-04 15:48:00 +02:00
}
2017-07-31 17:30:43 +02:00
/* Vertical rythm for blocks */
p,
.p-like,
ul,
ol,
dl,
blockquote,
2014-05-04 15:48:00 +02:00
pre,
2017-07-31 17:30:43 +02:00
td,
th,
label,
textarea,
caption,
details,
figure {
margin-top: 0.75em;
margin-bottom: 0;
line-height: $line-height;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 17:30:43 +02:00
/* Avoid top margins on first content element */
p,
2017-07-31 11:45:22 +02:00
.p-like,
ul,
ol,
2014-05-07 11:12:14 +02:00
dl,
blockquote,
2017-07-31 18:11:14 +02:00
label,
2014-05-07 11:12:14 +02:00
pre,
h1,
2017-07-31 11:45:22 +02:00
.h1-like,
h2,
2017-07-31 11:45:22 +02:00
.h2-like,
h3,
2017-07-31 11:45:22 +02:00
.h3-like,
h4,
2017-07-31 11:45:22 +02:00
.h4-like,
h5,
2017-07-31 11:45:22 +02:00
.h5-like,
h6,
2017-07-31 11:45:22 +02:00
.h6-like {
2015-07-01 13:47:48 +02:00
&:first-child {
margin-top: 0;
}
2014-05-04 15:48:00 +02:00
}
2017-07-31 17:30:43 +02:00
/* Avoid margins 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,
li ol {
2015-07-01 13:47:48 +02:00
margin-top: 0;
margin-bottom: 0;
2014-05-04 15:48:00 +02:00
}
2017-07-31 17:30:43 +02:00
/* Alternate font-sizing */
.smaller {
font-size: 0.6em;
}
.small {
font-size: 0.8em;
}
.big {
font-size: 1.2em;
}
.bigger {
font-size: 1.5em;
}
.biggest {
font-size: 2em;
}
/* Max values */
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;
2016-10-31 10:53:57 +01:00
}
2017-07-31 17:30:43 +02:00
/* Styling elements */
ul,
ol {
padding-left: 2em;
}
img {
vertical-align: middle;
}
em,
.italic,
address,
cite,
i,
var {
font-style: italic;
}
code,
kbd,
mark {
border-radius: 2px;
}
kbd {
padding: 0 2px;
border: 1px solid #999;
}
pre {
tab-size: 2;
}
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;
}
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;
color: rgba(0, 0, 0, .3);
}
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 {
quotes: "“\00a0" "\00a0”";
&:lang(fr) {
quotes: "«\00a0" "\00a0»";
}
}
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;
}
code,
pre,
samp,
kbd {
white-space: pre-wrap;
font-family: $font-stack-monospace;
line-height: normal;
}