summaryrefslogtreecommitdiff
path: root/sass/components/_global.scss
diff options
context:
space:
mode:
Diffstat (limited to 'sass/components/_global.scss')
-rw-r--r--sass/components/_global.scss769
1 files changed, 769 insertions, 0 deletions
diff --git a/sass/components/_global.scss b/sass/components/_global.scss
new file mode 100644
index 0000000..39f33db
--- /dev/null
+++ b/sass/components/_global.scss
@@ -0,0 +1,769 @@
+//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;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-01 05:20:14 +0000