// 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():not():not():not():not(), 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():not(), 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; } }
}