KNACSS/sass/01-base.scss

@import "00-config";

/* ----------------------------- */
/* == soft reset                 */
/* ----------------------------- */

/**
 * Switching box model for all elements
 */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

ul,
ol {
	padding-left: 2em;
}

ul.unstyled {
	list-style: none;
}

img {
	height: auto;
	vertical-align: middle;
	border: 0;
}

audio,
canvas,
video {
	display: inline-block;
}

svg:not(:root) {
	overflow: hidden;
}

/* ----------------------------- */
/* ==typography                  */
/* ----------------------------- */

/**
 * 1. Base font-size corresponds to "10px" and is adapted to rem unit
 */
html {
	font-size: 62.5%; /* 1 */
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	        text-size-adjust: 100%;
}

body {
	background-color: $base-background;
	color: $base-color;
	font-family: $font-stack-common;
	font-size: ($base-font-size / 10px) * 1em;
	line-height: $line-height;
}

/* font-sizing for content */
p,
.p-like,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
figure,
hgroup {
	margin-top: 0.75em;
	margin-bottom: 0;
	line-height: $line-height;
}

h1, .h1-like {
	font-size: $h1-size;
}

h2, .h2-like {
	font-size: $h2-size;
}

h3, .h3-like {
	font-size: $h3-size;
}

h4, .h4-like {
	font-size: $h4-size;
}

h5, .h5-like {
	font-size: $h5-size;
}

h6, .h6-like {
	font-size: $h6-size;
}

/**
 * Alternate font-sizing
 */
.smaller {
	@include em($base-font-size / 1px - 4);
}

.small {
	@include em($base-font-size / 1px - 2);
}

.big {
	@include em($base-font-size / 1px + 2);
}

.bigger {
	@include em($base-font-size / 1px + 4);
}

.biggest {
	@include em($base-font-size / 1px + 6);
}

/**
 * 1. IE Fix
 */
code,
pre,
samp,
kbd {
	white-space: pre-line; /* 1 */
	white-space: pre-wrap;
	font-family: $font-stack-monospace;
	line-height: normal;
}

em,
.em,
address,
cite,
dfn,
i,
var {
	font-style: italic;
}

.no-em {
	font-style: normal;
}

strong,
.strong {
	font-weight: bold;
}

.no-strong {
	font-weight: normal;
}

small,
sub,
sup {
	font-size: smaller;
}

/* ----------------------------- */
/* == hiding content             */
/* ----------------------------- */

.visually-hidden {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	height: 1px; width: 1px;
}

/**
 * Make sure script tags are not displayed
 * When body has `display: table`
 */
body > script {
	display: none !important;
}

@media print {
	.no-print {
		display: none;
	}
}

@media (max-width: $small-screen) {
	.no-small-screen {
		display: none;
	}
}

@media (min-width: $large-screen) {
	.no-large-screen {
		display: none;
	}
}
/* ----------------------------- */
/* == browsers consistency       */
/* ----------------------------- */

/**
 * Avoid top margins on first content element
 */
p,
.p-like,
ul,
ol,
dl,
blockquote,
pre,
h1,
h2,
h3,
h4,
h5,
h6 {
	&:first-child {
		margin-top: 0;
	}
}

/**
 * Avoid margins on nested elements
 */
li p,
li .p-like,
li ul,
li ol {
	margin-top: 0;
	margin-bottom: 0;
}

/**
 * Max values
 */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video {
	max-width: 100%;
}

/**
 * Margin-bottom on tables
 */
table {
	margin-bottom: $medium-value;
}


/* ----------------------------- */
/* ==layout and modules          */
/* ----------------------------- */

/**
 * Float layout
 * Module, gains superpower "BFC" Block Formating Context
 */
.mod {
	overflow: hidden;
}

/**
 * Blocks that needs to be placed under floats
 */
.clear,
.line,
.row {
	clear: both;
}

/**
 * Blocks that must contain floats
 */
.clearfix,
.line {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

/**
 * Table layout
 */
.row {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.row > *,
.col {
	display: table-cell;
	vertical-align: top;
}

/**
 * Inline-block
 */
.inbl {
	display: inline-block;
	vertical-align: top;
}


/* ------------------------------ */
/* alignments (blocks and inline) */
/* ------------------------------ */

/**
 * Left or starting elements
 */
.left,
.start {
	float: left;
}

img.left,
img.start  {
	margin-right: $small-value;
}

/**
 * Right or ending elements
 */
.right,
.end {
	float: right;
}

img.right,
img.end {
	margin-left: $small-value;
}

img.left, img.right,
img.start, img.end {
	margin-bottom: $tiny-value;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.txtleft {
	text-align: left;
}

.txtright {
	text-align: right;
}

.txtcenter {
	text-align: center;
}

/**
 * Width helpers
 * Only output when `$enable-helpers-width` is enabled
 */
@if $enable-helpers-width == true {
	/**
	 * Blocks widths (percentage and pixels)
	 */
	.w10 {
		width: 10%;
	}

	.w20 {
		width: 20%;
	}

	.w25 {
		width: 25%;
	}

	.w30 {
		width: 30%;
	}

	.w33 {
		width: 33.3333%;
	}

	.w40 {
		width: 40%;
	}

	.w50 {
		width: 50%;
	}

	.w60 {
		width: 60%;
	}

	.w66 {
		width: 66.6666%;
	}

	.w70 {
		width: 70%;
	}

	.w75 {
		width: 75%;
	}

	.w80 {
		width: 80%;
	}

	.w90 {
		width: 90%;
	}

	.w100 {
		width: 100%;
	}


	.w50p {
		width: 50px;
	}

	.w100p {
		width: 100px;
	}

	.w150p {
		width: 150px;
	}

	.w200p {
		width: 200px;
	}

	.w300p {
		width: 300px;
	}

	.w400p {
		width: 400px;
	}

	.w500p {
		width: 500px;
	}

	.w600p {
		width: 600px;
	}

	.w700p {
		width: 700px;
	}

	.w800p {
		width: 800px;
	}

	.w960p {
		width: 960px;
	}

	.mw960p {
		max-width: 960px;
	}

	.w1140p {
		width: 1140px;
	}

	.mw1140p {
		max-width: 1140px;
	}

	.wauto {
		width: auto;
	}
}

/**
 * Spacing helpers
 * Only output when `$enable-helpers-spacing` is enabled
 */
@if $enable-helpers-spacing == true {
	/**
	 * Spacing helpers
	 * p, m = padding, margin
	 * s, m, l, n = small, medium, large, none
	 * a, t, r, b, l = all, top, right, bottom, left
	 */
	.man {
		margin: 0;
	}

	.pan {
		padding: 0;
	}

	.mas {
		margin: $small-value;
	}

	.mam {
		margin: $medium-value;
	}

	.mal {
		margin: $large-value;
	}

	.pas {
		padding: $small-value;
	}

	.pam {
		padding: $medium-value;
	}

	.pal {
		padding: $large-value;
	}


	.mtn {
		margin-top: 0;
	}

	.mts {
		margin-top: $small-value;
	}

	.mtm {
		margin-top: $medium-value;
	}

	.mtl {
		margin-top: $large-value;
	}

	.mrn {
		margin-right: 0;
	}

	.mrs {
		margin-right: $small-value;
	}

	.mrm {
		margin-right: $medium-value;
	}

	.mrl {
		margin-right: $large-value;
	}

	.mbn {
		margin-bottom: 0;
	}

	.mbs {
		margin-bottom: $small-value;
	}

	.mbm {
		margin-bottom: $medium-value;
	}

	.mbl {
		margin-bottom: $large-value;
	}

	.mln {
		margin-left: 0;
	}

	.mls {
		margin-left: $small-value;
	}

	.mlm {
		margin-left: $medium-value;
	}

	.mll {
		margin-left: $large-value;
	}


	.ptn {
		padding-top: 0;
	}

	.pts {
		padding-top: $small-value;
	}

	.ptm {
		padding-top: $medium-value;
	}

	.ptl {
		padding-top: $large-value;
	}

	.prn {
		padding-right: 0;
	}

	.prs {
		padding-right: $small-value;
	}

	.prm {
		padding-right: $medium-value;
	}

	.prl {
		padding-right: $large-value;
	}

	.pbn {
		padding-bottom: 0;
	}

	.pbs {
		padding-bottom: $small-value;
	}

	.pbm {
		padding-bottom: $medium-value;
	}

	.pbl {
		padding-bottom: $large-value;
	}

	.pln {
		padding-left: 0;
	}

	.pls {
		padding-left: $small-value;
	}

	.plm {
		padding-left: $medium-value;
	}

	.pll {
		padding-left: $large-value;
	}
}