microcss.scss

// Colors
$navy:		#001f3f;
$blue:		#0074D9;
$aqua:		#7FDBFF;
$teal:		#39CCCC;
$olive:		#3D9970;
$green:		#2ECC40;
$lime:		#01FF70;
$yellow:	#FFDC00;
$orange:	#FF851B;
$red:		#FF4136;
$maroon:	#85144b;
$fuchsia:	#F012BE;
$purple:	#B10DC9;
$black:		#212121;
$gray:		#AAAAAA;
$silver:	#DDDDDD;
$white:		#FFFFFF;

/* CSS Reset */

html {
	box-sizing: border-box;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
  
*, *:before, *:after {
	box-sizing: inherit;
}
  
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

ul {
	list-style: circle inside;
}
/* Lists */
ol {
	list-style: decimal inside;
}

li {
	margin-bottom: .5rem;
}

li > ul, li > ol {
	margin: 1rem 0 1rem 1rem;
}
  
img {
	max-width: 100%;
	height: auto;
}

body {
	line-height: 1;
	color: $black;
}

// The grid

$col_size: 100%/12;

@for $i from 1 to 13 {
	.col-#{$i} { width: $col_size * $i; }
}

.row {
	width: 100%;
	max-width: 1140px;
	&:before,
	&:after {
		content:"";
		display:table;
		clear:both;
	}
}

.row *[class*=col-]{
	padding: .2rem 0;
	box-sizing: border-box;
	float: left;
}

h1 {font-size: 3rem;}
h2 {font-size: 2.5rem;}
h3 {font-size: 2rem;}
h4 {font-size: 1.75rem;}
h5 {font-size: 1.5rem;}
h6 {font-size: 1.25rem;}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
}

/* Forms and buttons */

input:not([type=submit]):not([type=reset]):not([type=button]):not([type=checkbox]):not([type=radio]),
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 150%;
	-webkit-appearance: none;
	background: #FFFFFF;
	padding: .2rem .4rem;
	color: $black;
	border: 1px solid $gray;
	border-radius: .2rem;
	transition: border-color 0.2s ease;
	width: 100%;
	max-width: 100%;

	&:focus {
		border-color: $aqua;
	}

	&:disabled {background-color: $silver}

	&:invalid {
		border: 1px solid $red;
		box-shadow: none;
	}
}

input:not([type=submit]):not([type=reset]), select, textarea, optgroup {
	margin: .5rem 0;
}

select{
	padding-right: 24px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcuNDEsOC41OEwxMiwxMy4xN0wxNi41OSw4LjU4TDE4LDEwTDEyLDE2TDYsMTBMNy40MSw4LjU4WiIgLz48L3N2Zz4=);
	background-position: 100% 50%;
	background-repeat: no-repeat;
}

label, legend {
	display: block;
}

/* Buttons */

button, a.button, *[type=submit], *[type=reset] {
	background-color: $white;
	border: 1px solid $gray;
	border-radius: .2rem;
	line-height: 2rem;
	color: $black;
	padding: 0 2rem;
	height: 2rem;
	display: inline-block;
	font-weight: bold;
	box-sizing: border-box;
	font-size: 1rem;
}

/* Alerts */
.alert {
	display: block;
	margin: 10px 0;
	padding: .5rem;
	border-radius: .2rem;
}

.primary, .success, .danger, .warning, .info, *:disabled{
	color: #FFFFFF;
}

.primary {
	background: $blue;
	border-color: $blue;
}

.success {
	background: $green;
	border-color: $green;
}

.danger {
	background: $red;
	border-color: $red;
}

.warning {
	background: $orange;
	border-color: $orange;
}

.info {
	background: $aqua;
	border-color: $aqua;
}

/* Material Icons */
.material-icons {
	display: inline;
	vertical-align: middle;
}

/* Responsive iframes for YouTube videos and Iframes*/

.resp-iframe {
	position: relative;
	width: 100%;
	padding-bottom:56.25%;
	margin: auto;
	height: 0;
	
	iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}

video, audio {
	width: 100%;
	max-width: 1280px;
	height: auto;
}

/* Navbar and links */

.navbar {
	line-height: 50px;
	border-bottom: 1px solid $black;
	margin-bottom: 10px;
	padding: 0 .2rem;

	a, .navbar-title {
		display: inline-block;
		margin-right: 5px;
	}

	nav {
		display: inline;
	}

	.navbar-title {
		font-weight: bold;
		font-size: 1.2rem;
	}

	&.fixed {
		position: sticky;
		top: 0;
		background: $white;
		z-index: 666;
	}

	&.navbar-vert {
		line-height: 1.5rem;
		display: table;
		border-bottom: 0;
		a, .navbar-title {
			display: block;
			padding: .2rem .5rem;
		}
	}
}

a {
	color: $blue;
	text-decoration: none;
	transition: color .5s ease;
	&:hover {color: $black}
}

/* Tables */

table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 10px 0;

	td, th {
		padding: 5px;
		line-height: 150%;
		border-top: 1px solid $gray;
		border-bottom: 1px solid $gray;
		text-align: left;
	}

	&.strip {
		tbody tr:nth-of-type(2n+2) {
			background-color: $silver;
		}
	}

	&.bordered {
		td, th {
			border: 1px solid $gray;
			border-bottom: 1px solid $gray;
		}
	}
}

/* Blockquote */

blockquote, pre {
	font-family: monospace;
	background-color: $black;
	color: $gray;
	border-radius: 3px;
	padding: 1rem;
	margin: 0;
}

pre {
	white-space: pre-wrap;
}

ul, ol, p, table, blockquote, form, blockquote, pre, .resp-iframe,
h1, h2, h3, h4, h5, h6, .card {
	margin-bottom: 1rem;
}

/* Utilities */

.text-left {
	text-align: left
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

/* Cards */

.card {
	border-radius: .2rem;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2),-1px -1px 1px rgba(0, 0, 0, .2);

	.card-title, .card-body, .card-footer {
		padding: .5rem;
	}
	.card-title {
		font-size: 22px;
		font-weight: bold;
	}

	.card-footer {
		border-top: 1px solid $silver;
	}

	p {
		margin: 0;
	}
}

@media (max-width: 639px){

	table.responsive {
		& thead {display: none}
		& th, & td {
			display: block;
			padding-left: 50%;
			position: relative;
			border-bottom: 0;
		}
		& th:before, & td:before{
			display: inline-block;
			width: 50%;
			content: attr(data-title);
			position: absolute;
			left: 0;
			font-weight: bold;
			padding:0 5px;
		}
		& tr:nth-of-type(2n+2) {
			background-color: $silver;
		}
	}
}

@media (max-width: 479px) {
	.row *[class*=col-]{
		float: none;
		width: 100%;
	}

	table.responsive {
		& th, & td {
			display: block;
			width: 100%;
			padding-left: 5px;
		}
		& th:before, & td:before{
			display: block;
			width: 100%;
			position: relative;
			padding: 0;
		}
	}
}