//Default styles
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
// display: flex;
// min-height: 100vh;
// flex-direction: column;
}
main {
// flex: 1 0 auto;
}
button,
input,
optgroup,
select,
textarea {
font-family: $font-stack;
}
ul {
&:not(.browser-default) {
padding-left: 0;
list-style-type: none;
& > li {
list-style-type: none;
}
}
}
a {
color: $link-color;
text-decoration: none;
// Gets rid of tap active state
-webkit-tap-highlight-color: transparent;
}
// Positioning
.valign-wrapper {
display: flex;
align-items: center;
}
// classic clearfix
.clearfix {
clear: both;
}
// Z-levels
.z-depth-0 {
box-shadow: none !important;
}
/* 2dp elevation modified*/
.z-depth-1 {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
}
.z-depth-1-half {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
/* 6dp elevation modified*/
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
0 1px 10px 0 rgba(0,0,0,0.12),
0 2px 4px -1px rgba(0,0,0,0.3);
}
/* 12dp elevation modified*/
.z-depth-3 {
box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),
0 3px 14px 2px rgba(0,0,0,0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
/* 16dp elevation */
.z-depth-4 {
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
0 6px 30px 5px rgba(0,0,0,0.12),
0 8px 10px -7px rgba(0,0,0,0.2);
}
/* 24dp elevation */
.z-depth-5 {
box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
0 9px 46px 8px rgba(0,0,0,0.12),
0 11px 15px -7px rgba(0,0,0,0.2);
}
.hoverable {
transition: box-shadow .25s;
&:hover {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}
// Dividers
.divider {
height: 1px;
overflow: hidden;
background-color: color("grey", "lighten-2");
}
// Blockquote
blockquote {
margin: 20px 0;
padding-left: 1.5rem;
border-left: 5px solid $primary-color;
}
// Icon Styles
i {
line-height: inherit;
&.left {
float: left;
margin-right: 15px;
}
&.right {
float: right;
margin-left: 15px;
}
&.tiny {
font-size: 1rem;
}
&.small {
font-size: 2rem;
}
&.medium {
font-size: 4rem;
}
&.large {
font-size: 6rem;
}
}
// Images
img.responsive-img,
video.responsive-video {
max-width: 100%;
height: auto;
}
// Pagination
.pagination {
li {
display: inline-block;
border-radius: 2px;
text-align: center;
vertical-align: top;
height: 30px;
a {
color: #444;
display: inline-block;
font-size: 1.2rem;
padding: 0 10px;
line-height: 30px;
}
&.active a { color: #fff; }
&.active { background-color: $primary-color; }
&.disabled a {
cursor: default;
color: #999;
}
i {
font-size: 2rem;
}
}
li.pages ul li {
display: inline-block;
float: none;
}
}
@media #{$medium-and-down} {
.pagination {
width: 100%;
li.prev,
li.next {
width: 10%;
}
li.pages {
width: 80%;
overflow: hidden;
white-space: nowrap;
}
}
}
// Breadcrumbs
.breadcrumb {
font-size: 18px;
color: rgba(255,255,255, .7);
i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons {
display: inline-block;
float: left;
font-size: 24px;
}
&:before {
content: '\E5CC';
color: rgba(255,255,255, .7);
vertical-align: top;
display: inline-block;
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 25px;
margin: 0 10px 0 8px;
-webkit-font-smoothing: antialiased;
}
&:first-child:before {
display: none;
}
&:last-child {
color: #fff;
}
}
// Parallax
.parallax-container {
position: relative;
overflow: hidden;
height: 500px;
.parallax {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
img {
opacity: 0;
position: absolute;
left: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translate3d(0,0,0);
transform: translateX(-50%);
}
}
}
// Pushpin
.pin-top, .pin-bottom {
position: relative;
}
.pinned {
position: fixed !important;
}
/*********************
Transition Classes
**********************/
ul.staggered-list li {
opacity: 0;
}
.fade-in {
opacity: 0;
transform-origin: 0 50%;
}
/*********************
Media Query Classes
**********************/
.hide-on-small-only, .hide-on-small-and-down {
@media #{$small-and-down} {
display: none !important;
}
}
.hide-on-med-and-down {
@media #{$medium-and-down} {
display: none !important;
}
}
.hide-on-med-and-up {
@media #{$medium-and-up} {
display: none !important;
}
}
.hide-on-med-only {
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
display: none !important;
}
}
.hide-on-large-only {
@media #{$large-and-up} {
display: none !important;
}
}
.hide-on-extra-large-only {
@media #{$extra-large-and-up} {
display: none !important;
}
}
.show-on-extra-large {
@media #{$extra-large-and-up} {
display: block !important;
}
}
.show-on-large {
@media #{$large-and-up} {
display: block !important;
}
}
.show-on-medium {
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
display: block !important;
}
}
.show-on-small {
@media #{$small-and-down} {
display: block !important;
}
}
.show-on-medium-and-up {
@media #{$medium-and-up} {
display: block !important;
}
}
.show-on-medium-and-down {
@media #{$medium-and-down} {
display: block !important;
}
}
// Center text on mobile
.center-on-small-only {
@media #{$small-and-down} {
text-align: center;
}
}
// Footer
.page-footer {
padding-top: 20px;
color: $footer-font-color;
background-color: $footer-bg-color;
.footer-copyright {
overflow: hidden;
min-height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0px;
color: $footer-copyright-font-color;
background-color: $footer-copyright-bg-color;
}
}
// Tables
table, th, td {
border: none;
}
table {
width:100%;
display: table;
border-collapse: collapse;
border-spacing: 0;
&.striped {
tr {
border-bottom: none;
}
> tbody {
> tr:nth-child(odd) {
background-color: $table-striped-color;
}
> tr > td {
border-radius: 0;
}
}
}
&.highlight > tbody > tr {
transition: background-color .25s ease;
&:hover {
background-color: $table-striped-color;
}
}
&.centered {
thead tr th, tbody tr td {
text-align: center;
}
}
}
tr {
border-bottom: 1px solid $table-border-color;
}
td, th{
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px;
}
// Responsive Table
@media #{$medium-and-down} {
table.responsive-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
td:empty:before {
content: '\00a0';
}
th,
td {
margin: 0;
vertical-align: top;
}
th { text-align: left; }
thead {
display: block;
float: left;
tr {
display: block;
padding: 0 10px 0 0;
th::before {
content: "\00a0";
}
}
}
tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
tr {
display: inline-block;
vertical-align: top;
}
}
th {
display: block;
text-align: right;
}
td {
display: block;
min-height: 1.25em;
text-align: left;
}
tr {
border-bottom: none;
padding: 0 10px;
}
/* sort out borders */
thead {
border: 0;
border-right: 1px solid $table-border-color;
}
}
}
// Collections
.collection {
margin: $element-top-margin 0 $element-bottom-margin 0;
border: 1px solid $collection-border-color;
border-radius: 2px;
overflow: hidden;
position: relative;
.collection-item {
background-color: $collection-bg-color;
line-height: $collection-line-height;
padding: 10px 20px;
margin: 0;
border-bottom: 1px solid $collection-border-color;
// Avatar Collection
&.avatar {
min-height: 84px;
padding-left: 72px;
position: relative;
// Don't style circles inside preloader classes.
&:not(.circle-clipper) > .circle,
:not(.circle-clipper) > .circle {
position: absolute;
width: 42px;
height: 42px;
overflow: hidden;
left: 15px;
display: inline-block;
vertical-align: middle;
}
i.circle {
font-size: 18px;
line-height: 42px;
color: #fff;
background-color: #999;
text-align: center;
}
.title {
font-size: 16px;
}
p {
margin: 0;
}
.secondary-content {
position: absolute;
top: 16px;
right: 16px;
}
}
&:last-child {
border-bottom: none;
}
&.active {
background-color: $collection-active-bg-color;
color: $collection-active-color;
.secondary-content {
color: #fff;
}
}
}
a.collection-item{
display: block;
transition: .25s;
color: $collection-link-color;
&:not(.active) {
&:hover {
background-color: $collection-hover-bg-color;
}
}
}
&.with-header {
.collection-header {
background-color: $collection-bg-color;
border-bottom: 1px solid $collection-border-color;
padding: 10px 20px;
}
.collection-item {
padding-left: 30px;
}
.collection-item.avatar {
padding-left: 72px;
}
}
}
// Made less specific to allow easier overriding
.secondary-content {
float: right;
color: $secondary-color;
}
.collapsible .collection {
margin: 0;
border: none;
}
// Responsive Videos
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// Progress Bar
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: lighten($progress-bar-color, 40%);
border-radius: 2px;
margin: $element-top-margin 0 $element-bottom-margin 0;
overflow: hidden;
.determinate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: $progress-bar-color;
transition: width .3s linear;
}
.indeterminate {
background-color: $progress-bar-color;
&:before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left:0;
bottom: 0;
will-change: left, right;
// Custom bezier
animation: indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite;
}
&:after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left:0;
bottom: 0;
will-change: left, right;
// Custom bezier
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
animation-delay: 1.15s;
}
}
}
@keyframes indeterminate {
0% {
left: -35%;
right:100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
/*******************
Utility Classes
*******************/
.hide {
display: none !important;
}
// Text Align
.left-align {
text-align: left;
}
.right-align {
text-align: right
}
.center, .center-align {
text-align: center;
}
.left {
float: left !important;
}
.right {
float: right !important;
}
// No Text Select
.no-select {
user-select: none;
}
.circle {
border-radius: 50%;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.truncate {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.no-padding {
padding: 0 !important;
}