770 lines
12 KiB
SCSS
770 lines
12 KiB
SCSS
//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;
|
|
}
|