mirror of
https://github.com/jcreek/phldnhack.git
synced 2026-07-13 02:53:44 +00:00
Cleanup & addition of Foundation 5
This commit is contained in:
jcreek
@@ -0,0 +1,157 @@
|
||||
// shared styles
|
||||
.btn, .btn-flat {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
height: $button-height;
|
||||
line-height: $button-line-height;
|
||||
// margin-bottom: 15px;
|
||||
outline: 0;
|
||||
padding: 0 2rem;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
// Gets rid of tap active state
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
// Disabled shared style
|
||||
.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-floating:disabled {
|
||||
background-color: $button-bg-color-disabled !important;
|
||||
box-shadow: none;
|
||||
color: $button-color-disabled !important;
|
||||
cursor: default;
|
||||
* {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $button-bg-color-disabled;
|
||||
color: $button-color-disabled;
|
||||
}
|
||||
}
|
||||
// Shared icon styles
|
||||
.btn, .btn-floating, .btn-large, .btn-flat {
|
||||
i {
|
||||
font-size: $button-font-size-shared;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Raised Button
|
||||
.btn {
|
||||
text-decoration:none;
|
||||
color: $button-color-raised;
|
||||
background-color: $button-color;
|
||||
text-align: center;
|
||||
letter-spacing: .5px;
|
||||
@extend .z-depth-1;
|
||||
@include transition(.2s ease-out);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($button-color, 5%);
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
}
|
||||
|
||||
// Floating button
|
||||
.btn-floating {
|
||||
display: inline-block;
|
||||
color: $button-color-raised;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
width: $button-floating-size;
|
||||
height: $button-floating-size;
|
||||
line-height: $button-floating-size;
|
||||
padding: 0;
|
||||
background-color: $button-color;
|
||||
border-radius: 50%;
|
||||
@extend .z-depth-1;
|
||||
transition: .3s;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
width: inherit;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: $button-color-raised;
|
||||
font-size: $button-large-icon-font-size;
|
||||
line-height: $button-floating-size;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend .z-depth-1-half;
|
||||
}
|
||||
&:before {
|
||||
border-radius: 0;
|
||||
}
|
||||
&.btn-large {
|
||||
width: $button-floating-size * 1.5;
|
||||
height: $button-floating-size * 1.5;
|
||||
i{
|
||||
line-height: $button-floating-size * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// button fix
|
||||
button.btn-floating {
|
||||
border: none;
|
||||
}
|
||||
|
||||
// Fixed Action Button
|
||||
.fixed-action-btn {
|
||||
position: fixed;
|
||||
right: 23px;
|
||||
bottom: 23px;
|
||||
padding-top: 15px;
|
||||
margin-bottom: 0;
|
||||
z-index: 998;
|
||||
|
||||
ul {
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 64px;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
a.btn-floating {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flat button
|
||||
.btn-flat {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: $button-color-flat;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
color: lighten(#999, 10%);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Large button
|
||||
.btn-large {
|
||||
@extend .btn;
|
||||
height: $button-height * 1.5;
|
||||
line-height: 56px;
|
||||
|
||||
i {
|
||||
font-size: $button-large-icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
// Block button
|
||||
.btn-block {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
|
||||
|
||||
.card-panel {
|
||||
transition: box-shadow .25s;
|
||||
padding: $card-padding;
|
||||
margin: $element-top-margin 0 $element-bottom-margin 0;
|
||||
border-radius: 2px;
|
||||
@extend .z-depth-1;
|
||||
background-color: $card-bg-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: $element-top-margin 0 $element-bottom-margin 0;
|
||||
background-color: $card-bg-color;
|
||||
transition: box-shadow .25s;
|
||||
border-radius: 2px;
|
||||
@extend .z-depth-1;
|
||||
|
||||
|
||||
.card-title {
|
||||
color: $card-bg-color;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
&.activator {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Card Sizes
|
||||
&.small, &.medium, &.large {
|
||||
position: relative;
|
||||
|
||||
.card-image {
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-action {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 300px;
|
||||
|
||||
.card-image {
|
||||
height: 150px;
|
||||
}
|
||||
.card-content {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.medium {
|
||||
height: 400px;
|
||||
|
||||
.card-image {
|
||||
height: 250px;
|
||||
}
|
||||
.card-content {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
height: 500px;
|
||||
|
||||
.card-image {
|
||||
height: 330px;
|
||||
}
|
||||
.card-content {
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-image {
|
||||
position: relative;
|
||||
|
||||
// Image background for content
|
||||
img {
|
||||
display: block;
|
||||
border-radius: 2px 2px 0 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: $card-padding;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: $card-padding;
|
||||
border-radius: 0 0 2px 2px;
|
||||
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.card-title {
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-action {
|
||||
border-top: 1px solid rgba(160,160,160,.2);
|
||||
padding: $card-padding;
|
||||
|
||||
a {
|
||||
color: $card-link-color;
|
||||
margin-right: $card-padding;
|
||||
@include transition(color .3s ease);
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover { color: $card-link-color-light; }
|
||||
}
|
||||
}
|
||||
|
||||
.card-reveal {
|
||||
padding: $card-padding;
|
||||
position: absolute;
|
||||
background-color: $card-bg-color;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
top: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
|
||||
.card-title {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.chip {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(0,0,0,.6);
|
||||
line-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 16px;
|
||||
background-color: #E4E4E4;
|
||||
|
||||
img {
|
||||
float: left;
|
||||
margin: 0 8px 0 -12px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
.collapsible {
|
||||
border-top: 1px solid $collapsible-border-color;
|
||||
border-right: 1px solid $collapsible-border-color;
|
||||
border-left: 1px solid $collapsible-border-color;
|
||||
margin: $element-top-margin 0 $element-bottom-margin 0;
|
||||
@extend .z-depth-1;
|
||||
}
|
||||
|
||||
.collapsible-header {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
min-height: $collapsible-height;
|
||||
line-height: $collapsible-height;
|
||||
padding: 0 1rem;
|
||||
background-color: $collapsible-header-color;
|
||||
border-bottom: 1px solid $collapsible-border-color;
|
||||
|
||||
i {
|
||||
width: 2rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: $collapsible-height;
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-body {
|
||||
display: none;
|
||||
border-bottom: 1px solid $collapsible-border-color;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// sideNav collapsible styling
|
||||
.side-nav {
|
||||
|
||||
.collapsible {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
li { padding: 0; }
|
||||
}
|
||||
|
||||
.collapsible-header {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
line-height: inherit;
|
||||
height: inherit;
|
||||
margin: 0 1rem;
|
||||
|
||||
i { line-height: inherit; }
|
||||
}
|
||||
|
||||
.collapsible-body {
|
||||
border: 0;
|
||||
background-color: $collapsible-header-color;
|
||||
|
||||
li a { margin: 0 1rem 0 2rem; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Popout Collapsible
|
||||
|
||||
.collapsible.popout {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
> li {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
// transform: scaleX(.92);
|
||||
margin: 0 24px;
|
||||
transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
}
|
||||
> li.active {
|
||||
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
|
||||
margin: 16px 0;
|
||||
// transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,412 @@
|
||||
// Utility Color Classes
|
||||
|
||||
//.success {
|
||||
//
|
||||
//}
|
||||
|
||||
// Google Color Palette defined: http://www.google.com/design/spec/style/color.html
|
||||
|
||||
|
||||
$materialize-red: (
|
||||
"lighten-5": #fdeaeb,
|
||||
"lighten-4": #f8c1c3,
|
||||
"lighten-3": #f3989b,
|
||||
"lighten-2": #ee6e73,
|
||||
"lighten-1": #ea454b,
|
||||
"base": #e51c23,
|
||||
"darken-1": #d0181e,
|
||||
"darken-2": #b9151b,
|
||||
"darken-3": #a21318,
|
||||
"darken-4": #8b1014,
|
||||
);
|
||||
|
||||
$red: (
|
||||
"lighten-5": #FFEBEE,
|
||||
"lighten-4": #FFCDD2,
|
||||
"lighten-3": #EF9A9A,
|
||||
"lighten-2": #E57373,
|
||||
"lighten-1": #EF5350,
|
||||
"base": #F44336,
|
||||
"darken-1": #E53935,
|
||||
"darken-2": #D32F2F,
|
||||
"darken-3": #C62828,
|
||||
"darken-4": #B71C1C,
|
||||
"accent-1": #FF8A80,
|
||||
"accent-2": #FF5252,
|
||||
"accent-3": #FF1744,
|
||||
"accent-4": #D50000
|
||||
);
|
||||
|
||||
$pink: (
|
||||
"lighten-5": #fce4ec,
|
||||
"lighten-4": #f8bbd0,
|
||||
"lighten-3": #f48fb1,
|
||||
"lighten-2": #f06292,
|
||||
"lighten-1": #ec407a,
|
||||
"base": #e91e63,
|
||||
"darken-1": #d81b60,
|
||||
"darken-2": #c2185b,
|
||||
"darken-3": #ad1457,
|
||||
"darken-4": #880e4f,
|
||||
"accent-1": #ff80ab,
|
||||
"accent-2": #ff4081,
|
||||
"accent-3": #f50057,
|
||||
"accent-4": #c51162
|
||||
);
|
||||
|
||||
$purple: (
|
||||
"lighten-5": #f3e5f5,
|
||||
"lighten-4": #e1bee7,
|
||||
"lighten-3": #ce93d8,
|
||||
"lighten-2": #ba68c8,
|
||||
"lighten-1": #ab47bc,
|
||||
"base": #9c27b0,
|
||||
"darken-1": #8e24aa,
|
||||
"darken-2": #7b1fa2,
|
||||
"darken-3": #6a1b9a,
|
||||
"darken-4": #4a148c,
|
||||
"accent-1": #ea80fc,
|
||||
"accent-2": #e040fb,
|
||||
"accent-3": #d500f9,
|
||||
"accent-4": #aa00ff
|
||||
);
|
||||
|
||||
$deep-purple: (
|
||||
"lighten-5": #ede7f6,
|
||||
"lighten-4": #d1c4e9,
|
||||
"lighten-3": #b39ddb,
|
||||
"lighten-2": #9575cd,
|
||||
"lighten-1": #7e57c2,
|
||||
"base": #673ab7,
|
||||
"darken-1": #5e35b1,
|
||||
"darken-2": #512da8,
|
||||
"darken-3": #4527a0,
|
||||
"darken-4": #311b92,
|
||||
"accent-1": #b388ff,
|
||||
"accent-2": #7c4dff,
|
||||
"accent-3": #651fff,
|
||||
"accent-4": #6200ea
|
||||
);
|
||||
|
||||
$indigo: (
|
||||
"lighten-5": #e8eaf6,
|
||||
"lighten-4": #c5cae9,
|
||||
"lighten-3": #9fa8da,
|
||||
"lighten-2": #7986cb,
|
||||
"lighten-1": #5c6bc0,
|
||||
"base": #3f51b5,
|
||||
"darken-1": #3949ab,
|
||||
"darken-2": #303f9f,
|
||||
"darken-3": #283593,
|
||||
"darken-4": #1a237e,
|
||||
"accent-1": #8c9eff,
|
||||
"accent-2": #536dfe,
|
||||
"accent-3": #3d5afe,
|
||||
"accent-4": #304ffe
|
||||
);
|
||||
|
||||
$blue: (
|
||||
"lighten-5": #E3F2FD,
|
||||
"lighten-4": #BBDEFB,
|
||||
"lighten-3": #90CAF9,
|
||||
"lighten-2": #64B5F6,
|
||||
"lighten-1": #42A5F5,
|
||||
"base": #2196F3,
|
||||
"darken-1": #1E88E5,
|
||||
"darken-2": #1976D2,
|
||||
"darken-3": #1565C0,
|
||||
"darken-4": #0D47A1,
|
||||
"accent-1": #82B1FF,
|
||||
"accent-2": #448AFF,
|
||||
"accent-3": #2979FF,
|
||||
"accent-4": #2962FF
|
||||
);
|
||||
|
||||
$light-blue: (
|
||||
"lighten-5": #e1f5fe,
|
||||
"lighten-4": #b3e5fc,
|
||||
"lighten-3": #81d4fa,
|
||||
"lighten-2": #4fc3f7,
|
||||
"lighten-1": #29b6f6,
|
||||
"base": #03a9f4,
|
||||
"darken-1": #039be5,
|
||||
"darken-2": #0288d1,
|
||||
"darken-3": #0277bd,
|
||||
"darken-4": #01579b,
|
||||
"accent-1": #80d8ff,
|
||||
"accent-2": #40c4ff,
|
||||
"accent-3": #00b0ff,
|
||||
"accent-4": #0091ea
|
||||
);
|
||||
|
||||
$cyan: (
|
||||
"lighten-5": #e0f7fa,
|
||||
"lighten-4": #b2ebf2,
|
||||
"lighten-3": #80deea,
|
||||
"lighten-2": #4dd0e1,
|
||||
"lighten-1": #26c6da,
|
||||
"base": #00bcd4,
|
||||
"darken-1": #00acc1,
|
||||
"darken-2": #0097a7,
|
||||
"darken-3": #00838f,
|
||||
"darken-4": #006064,
|
||||
"accent-1": #84ffff,
|
||||
"accent-2": #18ffff,
|
||||
"accent-3": #00e5ff,
|
||||
"accent-4": #00b8d4
|
||||
);
|
||||
|
||||
$teal: (
|
||||
"lighten-5": #e0f2f1,
|
||||
"lighten-4": #b2dfdb,
|
||||
"lighten-3": #80cbc4,
|
||||
"lighten-2": #4db6ac,
|
||||
"lighten-1": #26a69a,
|
||||
"base": #009688,
|
||||
"darken-1": #00897b,
|
||||
"darken-2": #00796b,
|
||||
"darken-3": #00695c,
|
||||
"darken-4": #004d40,
|
||||
"accent-1": #a7ffeb,
|
||||
"accent-2": #64ffda,
|
||||
"accent-3": #1de9b6,
|
||||
"accent-4": #00bfa5
|
||||
);
|
||||
|
||||
$green: (
|
||||
"lighten-5": #E8F5E9,
|
||||
"lighten-4": #C8E6C9,
|
||||
"lighten-3": #A5D6A7,
|
||||
"lighten-2": #81C784,
|
||||
"lighten-1": #66BB6A,
|
||||
"base": #4CAF50,
|
||||
"darken-1": #43A047,
|
||||
"darken-2": #388E3C,
|
||||
"darken-3": #2E7D32,
|
||||
"darken-4": #1B5E20,
|
||||
"accent-1": #B9F6CA,
|
||||
"accent-2": #69F0AE,
|
||||
"accent-3": #00E676,
|
||||
"accent-4": #00C853
|
||||
);
|
||||
|
||||
$light-green: (
|
||||
"lighten-5": #f1f8e9,
|
||||
"lighten-4": #dcedc8,
|
||||
"lighten-3": #c5e1a5,
|
||||
"lighten-2": #aed581,
|
||||
"lighten-1": #9ccc65,
|
||||
"base": #8bc34a,
|
||||
"darken-1": #7cb342,
|
||||
"darken-2": #689f38,
|
||||
"darken-3": #558b2f,
|
||||
"darken-4": #33691e,
|
||||
"accent-1": #ccff90,
|
||||
"accent-2": #b2ff59,
|
||||
"accent-3": #76ff03,
|
||||
"accent-4": #64dd17
|
||||
);
|
||||
|
||||
$lime: (
|
||||
"lighten-5": #f9fbe7,
|
||||
"lighten-4": #f0f4c3,
|
||||
"lighten-3": #e6ee9c,
|
||||
"lighten-2": #dce775,
|
||||
"lighten-1": #d4e157,
|
||||
"base": #cddc39,
|
||||
"darken-1": #c0ca33,
|
||||
"darken-2": #afb42b,
|
||||
"darken-3": #9e9d24,
|
||||
"darken-4": #827717,
|
||||
"accent-1": #f4ff81,
|
||||
"accent-2": #eeff41,
|
||||
"accent-3": #c6ff00,
|
||||
"accent-4": #aeea00
|
||||
);
|
||||
|
||||
$yellow: (
|
||||
"lighten-5": #fffde7,
|
||||
"lighten-4": #fff9c4,
|
||||
"lighten-3": #fff59d,
|
||||
"lighten-2": #fff176,
|
||||
"lighten-1": #ffee58,
|
||||
"base": #ffeb3b,
|
||||
"darken-1": #fdd835,
|
||||
"darken-2": #fbc02d,
|
||||
"darken-3": #f9a825,
|
||||
"darken-4": #f57f17,
|
||||
"accent-1": #ffff8d,
|
||||
"accent-2": #ffff00,
|
||||
"accent-3": #ffea00,
|
||||
"accent-4": #ffd600
|
||||
);
|
||||
|
||||
$amber: (
|
||||
"lighten-5": #fff8e1,
|
||||
"lighten-4": #ffecb3,
|
||||
"lighten-3": #ffe082,
|
||||
"lighten-2": #ffd54f,
|
||||
"lighten-1": #ffca28,
|
||||
"base": #ffc107,
|
||||
"darken-1": #ffb300,
|
||||
"darken-2": #ffa000,
|
||||
"darken-3": #ff8f00,
|
||||
"darken-4": #ff6f00,
|
||||
"accent-1": #ffe57f,
|
||||
"accent-2": #ffd740,
|
||||
"accent-3": #ffc400,
|
||||
"accent-4": #ffab00
|
||||
);
|
||||
|
||||
$orange: (
|
||||
"lighten-5": #fff3e0,
|
||||
"lighten-4": #ffe0b2,
|
||||
"lighten-3": #ffcc80,
|
||||
"lighten-2": #ffb74d,
|
||||
"lighten-1": #ffa726,
|
||||
"base": #ff9800,
|
||||
"darken-1": #fb8c00,
|
||||
"darken-2": #f57c00,
|
||||
"darken-3": #ef6c00,
|
||||
"darken-4": #e65100,
|
||||
"accent-1": #ffd180,
|
||||
"accent-2": #ffab40,
|
||||
"accent-3": #ff9100,
|
||||
"accent-4": #ff6d00
|
||||
);
|
||||
|
||||
$deep-orange: (
|
||||
"lighten-5": #fbe9e7,
|
||||
"lighten-4": #ffccbc,
|
||||
"lighten-3": #ffab91,
|
||||
"lighten-2": #ff8a65,
|
||||
"lighten-1": #ff7043,
|
||||
"base": #ff5722,
|
||||
"darken-1": #f4511e,
|
||||
"darken-2": #e64a19,
|
||||
"darken-3": #d84315,
|
||||
"darken-4": #bf360c,
|
||||
"accent-1": #ff9e80,
|
||||
"accent-2": #ff6e40,
|
||||
"accent-3": #ff3d00,
|
||||
"accent-4": #dd2c00
|
||||
);
|
||||
|
||||
$brown: (
|
||||
"lighten-5": #efebe9,
|
||||
"lighten-4": #d7ccc8,
|
||||
"lighten-3": #bcaaa4,
|
||||
"lighten-2": #a1887f,
|
||||
"lighten-1": #8d6e63,
|
||||
"base": #795548,
|
||||
"darken-1": #6d4c41,
|
||||
"darken-2": #5d4037,
|
||||
"darken-3": #4e342e,
|
||||
"darken-4": #3e2723
|
||||
);
|
||||
|
||||
$blue-grey: (
|
||||
"lighten-5": #eceff1,
|
||||
"lighten-4": #cfd8dc,
|
||||
"lighten-3": #b0bec5,
|
||||
"lighten-2": #90a4ae,
|
||||
"lighten-1": #78909c,
|
||||
"base": #607d8b,
|
||||
"darken-1": #546e7a,
|
||||
"darken-2": #455a64,
|
||||
"darken-3": #37474f,
|
||||
"darken-4": #263238
|
||||
);
|
||||
|
||||
$grey: (
|
||||
"lighten-5": #fafafa,
|
||||
"lighten-4": #f5f5f5,
|
||||
"lighten-3": #eeeeee,
|
||||
"lighten-2": #e0e0e0,
|
||||
"lighten-1": #bdbdbd,
|
||||
"base": #9e9e9e,
|
||||
"darken-1": #757575,
|
||||
"darken-2": #616161,
|
||||
"darken-3": #424242,
|
||||
"darken-4": #212121
|
||||
);
|
||||
|
||||
$shades: (
|
||||
"black": #000000,
|
||||
"white": #FFFFFF,
|
||||
"transparent": transparent
|
||||
);
|
||||
|
||||
$colors: (
|
||||
"materialize-red": $materialize-red,
|
||||
"red": $red,
|
||||
"pink": $pink,
|
||||
"purple": $purple,
|
||||
"deep-purple": $deep-purple,
|
||||
"indigo": $indigo,
|
||||
"blue": $blue,
|
||||
"light-blue": $light-blue,
|
||||
"cyan": $cyan,
|
||||
"teal": $teal,
|
||||
"green": $green,
|
||||
"light-green": $light-green,
|
||||
"lime": $lime,
|
||||
"yellow": $yellow,
|
||||
"amber": $amber,
|
||||
"orange": $orange,
|
||||
"deep-orange": $deep-orange,
|
||||
"brown": $brown,
|
||||
"blue-grey": $blue-grey,
|
||||
"grey": $grey,
|
||||
"shades": $shades
|
||||
);
|
||||
|
||||
|
||||
// Color Classes
|
||||
|
||||
@each $color_name, $color in $colors {
|
||||
@each $color_type, $color_value in $color {
|
||||
@if $color_type == "base" {
|
||||
.#{$color_name} {
|
||||
background-color: $color_value !important;
|
||||
}
|
||||
.#{$color_name}-text {
|
||||
color: $color_value !important;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$color_name}.#{$color_type} {
|
||||
background-color: $color_value !important;
|
||||
}
|
||||
.#{$color_name}-text.text-#{$color_type} {
|
||||
color: $color_value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shade classes
|
||||
@each $color, $color_value in $shades {
|
||||
.#{$color} {
|
||||
background-color: $color_value !important;
|
||||
}
|
||||
.#{$color}-text {
|
||||
color: $color_value !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// usage: color("name_of_color", "type_of_color")
|
||||
// to avoid to repeating map-get($colors, ...)
|
||||
|
||||
@function color($color, $type) {
|
||||
@if map-has-key($colors, $color) {
|
||||
$curr_color: map-get($colors, $color);
|
||||
@if map-has-key($curr_color, $type) {
|
||||
@return map-get($curr_color, $type);
|
||||
}
|
||||
}
|
||||
@warn "Unknown `#{name}` in $colors.";
|
||||
@return null;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
.dropdown-content {
|
||||
@extend .z-depth-1;
|
||||
background-color: $dropdown-bg-color;
|
||||
margin: 0;
|
||||
display: none;
|
||||
min-width: 100px;
|
||||
max-height: 650px;
|
||||
overflow-y: auto;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
will-change: width, height;
|
||||
|
||||
li {
|
||||
clear: both;
|
||||
color: $off-black;
|
||||
cursor: pointer;
|
||||
line-height: 1.5rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: $dropdown-hover-bg-color;
|
||||
}
|
||||
|
||||
& > a, & > span {
|
||||
font-size: 1.2rem;
|
||||
color: $dropdown-color;
|
||||
display: block;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
|
||||
// Icon alignment override
|
||||
& > a > i {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,888 @@
|
||||
/* Remove Focus Boxes */
|
||||
select:focus {
|
||||
outline: 1px solid lighten($secondary-color, 47%);
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
background-color: lighten($button-color, 4%);
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: $label-font-size;
|
||||
color: $input-border-color;
|
||||
}
|
||||
|
||||
/***************************
|
||||
Text Inputs + Textarea
|
||||
****************************/
|
||||
|
||||
// Style Placeholders
|
||||
::-webkit-input-placeholder {
|
||||
color: lighten($input-border-color, 20%);
|
||||
}
|
||||
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: lighten($input-border-color, 20%);
|
||||
}
|
||||
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: lighten($input-border-color, 20%);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: lighten($input-border-color, 20%);
|
||||
}
|
||||
|
||||
// Text inputs
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=email],
|
||||
input[type=url],
|
||||
input[type=time],
|
||||
input[type=date],
|
||||
input[type=datetime-local],
|
||||
input[type=tel],
|
||||
input[type=number],
|
||||
input[type=search],
|
||||
textarea.materialize-textarea {
|
||||
|
||||
// General Styles
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid $input-border-color;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
height: 3rem;
|
||||
width: 100%;
|
||||
|
||||
font-size: 1rem;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
@include box-sizing(content-box);
|
||||
transition: all .3s;
|
||||
|
||||
|
||||
// Disabled input style
|
||||
&:disabled, &[readonly="readonly"] {
|
||||
color: $input-disabled-color;
|
||||
border-bottom: 1px dotted $input-disabled-color;
|
||||
}
|
||||
// Disabled label style
|
||||
&:disabled+label, &[readonly="readonly"]+label {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
// Focused input style
|
||||
&:focus:not([readonly]) {
|
||||
border-bottom: 1px solid $input-focus-color;
|
||||
box-shadow: 0 1px 0 0 $input-focus-color;
|
||||
}
|
||||
// Focused label style
|
||||
&:focus:not([readonly])+label {
|
||||
color: $input-focus-color;
|
||||
}
|
||||
// Valid Input Style
|
||||
&.valid,
|
||||
&:focus.valid {
|
||||
border-bottom: 1px solid $input-success-color;
|
||||
box-shadow: 0 1px 0 0 $input-success-color;
|
||||
}
|
||||
// Custom Success Message
|
||||
&.valid + label:after,
|
||||
&:focus.valid + label:after {
|
||||
content: attr(data-success);
|
||||
color: $input-success-color;
|
||||
opacity: 1;
|
||||
}
|
||||
// Invalid Input Style
|
||||
&.invalid,
|
||||
&:focus.invalid {
|
||||
border-bottom: 1px solid $input-error-color;
|
||||
box-shadow: 0 1px 0 0 $input-error-color;
|
||||
}
|
||||
// Custom Error message
|
||||
&.invalid + label:after,
|
||||
&:focus.invalid + label:after {
|
||||
content: attr(data-error);
|
||||
color: $input-error-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Form Message Shared Styles
|
||||
& + label:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
opacity: 0;
|
||||
transition: .2s opacity ease-out, .2s color ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
// Styling for input field wrapper
|
||||
.input-field {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
|
||||
label {
|
||||
color: $input-border-color;
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
left: $gutter-width / 2;
|
||||
font-size: 1rem;
|
||||
cursor: text;
|
||||
@include transition(.2s ease-out);
|
||||
}
|
||||
label.active {
|
||||
font-size: $label-font-size;
|
||||
@include transform(translateY(-140%));
|
||||
}
|
||||
|
||||
// Prefix Icons
|
||||
.prefix {
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
font-size: 2rem;
|
||||
@include transition(color .2s);
|
||||
|
||||
&.active { color: $input-focus-color; }
|
||||
}
|
||||
.prefix ~ input,
|
||||
.prefix ~ textarea {
|
||||
margin-left: 3rem;
|
||||
width: 92%;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
.prefix ~ textarea { padding-top: .8rem; }
|
||||
.prefix ~ label { margin-left: 3rem; }
|
||||
|
||||
@media #{$medium-and-down} {
|
||||
.prefix ~ input {
|
||||
width: 86%;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
}
|
||||
@media #{$small-and-down} {
|
||||
.prefix ~ input {
|
||||
width: 80%;
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Search Field
|
||||
|
||||
|
||||
.input-field input[type=search] {
|
||||
display: block;
|
||||
line-height: inherit;
|
||||
padding-left: 4rem;
|
||||
width: calc(100% - 4rem);
|
||||
|
||||
&:focus {
|
||||
background-color: $input-bg-color;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: #444;
|
||||
|
||||
& + label i,
|
||||
& ~ .mdi-navigation-close,
|
||||
& ~ .material-icons {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
& + label {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
& ~ .mdi-navigation-close,
|
||||
& ~ .material-icons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 1rem;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
transition: .3s color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Default textarea
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: transparent;
|
||||
|
||||
&.materialize-textarea {
|
||||
overflow-y: hidden; /* prevents scroll bar flash */
|
||||
padding: 1.6rem 0; /* prevents text jump on Enter keypress */
|
||||
resize: none;
|
||||
min-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// For textarea autoresize
|
||||
.hiddendiv {
|
||||
display: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
|
||||
padding-top: 1.2rem; /* prevents text jump on Enter keypress */
|
||||
}
|
||||
|
||||
|
||||
/***************
|
||||
Radio Buttons
|
||||
***************/
|
||||
|
||||
/* Remove default Radio Buttons */
|
||||
[type="radio"]:not(:checked),
|
||||
[type="radio"]:checked {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
[type="radio"]:not(:checked) + label,
|
||||
[type="radio"]:checked + label {
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 1rem;
|
||||
@include transition(.28s ease);
|
||||
|
||||
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
||||
-moz-user-select: none; /* mozilla browsers */
|
||||
-khtml-user-select: none; /* webkit (konqueror) browsers */
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
}
|
||||
|
||||
[type="radio"] + label:before,
|
||||
[type="radio"] + label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 4px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 0;
|
||||
@include transition(.28s ease);
|
||||
}
|
||||
|
||||
|
||||
/* Unchecked styles */
|
||||
[type="radio"]:not(:checked) + label:before {
|
||||
border-radius: 50%;
|
||||
border: 2px solid $radio-empty-color;
|
||||
}
|
||||
[type="radio"]:not(:checked) + label:after {
|
||||
border-radius: 50%;
|
||||
border: 2px solid $radio-empty-color;
|
||||
z-index: -1;
|
||||
|
||||
@include transform(scale(0));
|
||||
}
|
||||
|
||||
/* Checked styles */
|
||||
[type="radio"]:checked + label:before {
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
[type="radio"]:checked + label:after {
|
||||
border-radius: 50%;
|
||||
border: 2px solid $radio-fill-color;
|
||||
background-color: $radio-fill-color;
|
||||
z-index: 0;
|
||||
@include transform(scale(1.02));
|
||||
}
|
||||
|
||||
/* Radio With gap */
|
||||
[type="radio"].with-gap:checked + label:before {
|
||||
border-radius: 50%;
|
||||
border: 2px solid $radio-fill-color;
|
||||
}
|
||||
[type="radio"].with-gap:checked + label:after {
|
||||
border-radius: 50%;
|
||||
border: 2px solid $radio-fill-color;
|
||||
background-color: $radio-fill-color;
|
||||
z-index: 0;
|
||||
@include transform(scale(.5));
|
||||
}
|
||||
|
||||
/* Disabled Radio With gap */
|
||||
[type="radio"].with-gap:disabled:checked + label:before {
|
||||
border: 2px solid $input-disabled-color;
|
||||
}
|
||||
[type="radio"].with-gap:disabled:checked + label:after {
|
||||
border: none;
|
||||
background-color: $input-disabled-color;
|
||||
}
|
||||
|
||||
/* Disabled style */
|
||||
[type="radio"]:disabled:not(:checked) + label:before,
|
||||
[type="radio"]:disabled:checked + label:before {
|
||||
background-color: transparent;
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
[type="radio"]:disabled + label {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
[type="radio"]:disabled:not(:checked) + label:before {
|
||||
border-color: $input-disabled-color;
|
||||
}
|
||||
[type="radio"]:disabled:checked + label:after {
|
||||
background-color: $input-disabled-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
|
||||
|
||||
/***************
|
||||
Checkboxes
|
||||
***************/
|
||||
|
||||
/* CUSTOM CSS CHECKBOXES */
|
||||
form p {
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
form p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Remove default checkbox */
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
// Checkbox Styles
|
||||
[type="checkbox"] {
|
||||
|
||||
// Text Label Style
|
||||
+ label {
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 1rem;
|
||||
|
||||
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
||||
-moz-user-select: none; /* mozilla browsers */
|
||||
-khtml-user-select: none; /* webkit (konqueror) browsers */
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
}
|
||||
|
||||
/* checkbox aspect */
|
||||
+ label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
z-index: 0;
|
||||
border: 2px solid $radio-empty-color;
|
||||
border-radius: 1px;
|
||||
margin-top: 2px;
|
||||
@include transition(.2s);
|
||||
}
|
||||
|
||||
&:not(:checked):disabled + label:before {
|
||||
border: none;
|
||||
background-color: $input-disabled-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
[type="checkbox"]:checked {
|
||||
+ label:before {
|
||||
top: -4px;
|
||||
left: -3px;
|
||||
width: 12px; height: 22px;
|
||||
border-top: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-right: 2px solid $radio-fill-color;
|
||||
border-bottom: 2px solid $radio-fill-color;
|
||||
@include transform(rotate(40deg));
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transform-origin(100% 100%);
|
||||
}
|
||||
|
||||
&:disabled + label:before {
|
||||
border-right: 2px solid $input-disabled-color;
|
||||
border-bottom: 2px solid $input-disabled-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Indeterminate checkbox */
|
||||
[type="checkbox"]:indeterminate {
|
||||
+label:before {
|
||||
left: -10px;
|
||||
top: -11px;
|
||||
width: 10px; height: 22px;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: 2px solid $radio-fill-color;
|
||||
border-bottom: none;
|
||||
@include transform(rotate(90deg));
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transform-origin(100% 100%);
|
||||
}
|
||||
|
||||
// Disabled indeterminate
|
||||
&:disabled + label:before {
|
||||
border-right: 2px solid $input-disabled-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Filled in Style
|
||||
[type="checkbox"].filled-in {
|
||||
// General
|
||||
+ label:after {
|
||||
border-radius: 2px;
|
||||
}
|
||||
+ label:before,
|
||||
+ label:after {
|
||||
content: '';
|
||||
left: 0;
|
||||
position: absolute;
|
||||
/* .1s delay is for check animation */
|
||||
transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
|
||||
z-index: 1;
|
||||
}
|
||||
// Unchecked style
|
||||
&:not(:checked) + label:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 3px solid transparent;
|
||||
left: 6px;
|
||||
top: 10px;
|
||||
|
||||
-webkit-transform: rotateZ(37deg);
|
||||
transform: rotateZ(37deg);
|
||||
-webkit-transform-origin: 20% 40%;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
&:not(:checked) + label:after {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: transparent;
|
||||
border: 2px solid $radio-empty-color;
|
||||
top: 0px;
|
||||
z-index: 0;
|
||||
}
|
||||
// Checked style
|
||||
&:checked {
|
||||
+ label:before {
|
||||
top: 0;
|
||||
left: 1px;
|
||||
width: 8px;
|
||||
height: 13px;
|
||||
border-top: 2px solid transparent;
|
||||
border-left: 2px solid transparent;
|
||||
border-right: 2px solid $input-bg-color;
|
||||
border-bottom: 2px solid $input-bg-color;
|
||||
-webkit-transform: rotateZ(37deg);
|
||||
transform: rotateZ(37deg);
|
||||
|
||||
-webkit-transform-origin: 100% 100%;
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
+ label:after {
|
||||
top: 0px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $secondary-color;
|
||||
background-color: $secondary-color;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
// Disabled style
|
||||
&:disabled:not(:checked) + label:before {
|
||||
|
||||
background-color: transparent;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
&:disabled:not(:checked) + label:after {
|
||||
border-color: transparent;
|
||||
background-color: $input-disabled-solid-color;
|
||||
}
|
||||
&:disabled:checked + label:before {
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
&:disabled:checked + label:after {
|
||||
background-color: $input-disabled-solid-color;
|
||||
border-color: $input-disabled-solid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/***************
|
||||
Switch
|
||||
***************/
|
||||
.switch,
|
||||
.switch * {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.switch label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch label input[type=checkbox]{
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.switch label input[type=checkbox]:checked + .lever {
|
||||
background-color: $switch-checked-lever-bg;
|
||||
}
|
||||
.switch label input[type=checkbox]:checked + .lever:after {
|
||||
background-color: $switch-bg-color;
|
||||
}
|
||||
.switch label .lever {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 15px;
|
||||
background-color: $switch-unchecked-lever-bg;
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
margin: 0 16px;
|
||||
}
|
||||
.switch label .lever:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
background-color: $switch-unchecked-bg;
|
||||
border-radius: 21px;
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
|
||||
left: -5px;
|
||||
top: -3px;
|
||||
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
// Switch active style
|
||||
input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9);
|
||||
}
|
||||
input[type=checkbox]:not(:disabled) ~ .lever:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08);
|
||||
}
|
||||
.switch label input[type=checkbox]:checked + .lever:after {
|
||||
left: 24px;
|
||||
}
|
||||
|
||||
// Disabled Styles
|
||||
|
||||
.switch input[type=checkbox][disabled] + .lever{
|
||||
cursor: default;
|
||||
}
|
||||
.switch label input[type=checkbox][disabled] + .lever:after,
|
||||
.switch label input[type=checkbox][disabled]:checked + .lever:after {
|
||||
background-color: $input-disabled-solid-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/***************
|
||||
Select Field
|
||||
***************/
|
||||
|
||||
.select-label {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
|
||||
input.select-dropdown {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
// color: #444;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid $input-border-color;
|
||||
outline: none;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
span.caret {
|
||||
color: initial;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 16px;
|
||||
font-size: 10px;
|
||||
&.disabled {
|
||||
color: $input-disabled-color;
|
||||
}
|
||||
}
|
||||
& + label {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
font-size: $label-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
select { display: none; }
|
||||
select.browser-default { display: block; }
|
||||
|
||||
|
||||
// Disabled styles
|
||||
select:disabled {
|
||||
color: rgba(0,0,0,.3);
|
||||
}
|
||||
.select-wrapper input.select-dropdown:disabled {
|
||||
color: rgba(0,0,0,.3);
|
||||
cursor: default;
|
||||
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
||||
-moz-user-select: none; /* mozilla browsers */
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
border-bottom: 1px solid rgba(0,0,0,.3);
|
||||
}
|
||||
.select-wrapper i {
|
||||
color: rgba(0,0,0,.3);
|
||||
}
|
||||
.select-dropdown li.disabled {
|
||||
color: rgba(0,0,0,.3);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
File Input
|
||||
**********************/
|
||||
.file-field {
|
||||
position: relative;
|
||||
|
||||
.file-path-wrapper {
|
||||
overflow: hidden;
|
||||
padding-left: 10px;
|
||||
}
|
||||
input.file-path { width: 100%; }
|
||||
|
||||
.btn {
|
||||
float: left;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/***************
|
||||
Range
|
||||
***************/
|
||||
|
||||
.range-field {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type=range], input[type=range] + .thumb {
|
||||
@extend .no-select;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range] {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
margin: 15px 0px;
|
||||
padding: 0;
|
||||
}
|
||||
input[type=range] + .thumb {
|
||||
position: absolute;
|
||||
border: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-radius: 50%;
|
||||
background-color: $radio-fill-color;
|
||||
top: 10px;
|
||||
margin-left: -6px;
|
||||
|
||||
@include transform-origin(50% 50%);
|
||||
@include transform(rotate(-45deg));
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
color: $radio-fill-color;
|
||||
font-size: 0;
|
||||
@include transform(rotate(45deg));
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-radius: 50% 50% 50% 0;
|
||||
|
||||
.value {
|
||||
color: $input-bg-color;
|
||||
margin-left: -1px;
|
||||
margin-top: 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// WebKit
|
||||
input[type=range]{
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
height: 3px;
|
||||
background: #c2c0c2;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background-color: $radio-fill-color;
|
||||
transform-origin: 50% 50%;
|
||||
margin: -5px 0 0 0;
|
||||
@include transition(.3s);
|
||||
}
|
||||
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
// FireFox
|
||||
input[type=range]{
|
||||
/* fix for FF unable to apply focus style bug */
|
||||
border: 1px solid white;
|
||||
|
||||
/*required for proper track sizing in FF*/
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-track {
|
||||
height: 3px;
|
||||
background: #ddd;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: $radio-fill-color;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
/*hide the outline behind the border*/
|
||||
input[type=range]:-moz-focusring{
|
||||
outline: 1px solid white;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-moz-range-track {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
// IE 10+
|
||||
input[type=range]::-ms-track {
|
||||
height: 3px;
|
||||
|
||||
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
|
||||
background: transparent;
|
||||
|
||||
/*leave room for the larger thumb to overflow with a transparent border */
|
||||
border-color: transparent;
|
||||
border-width: 6px 0;
|
||||
|
||||
/*remove default tick marks*/
|
||||
color: transparent;
|
||||
}
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: #777;
|
||||
}
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: #ddd;
|
||||
}
|
||||
input[type=range]::-ms-thumb {
|
||||
border: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 50%;
|
||||
background: $radio-fill-color;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: #888;
|
||||
}
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
/***************************
|
||||
Text Inputs + Textarea
|
||||
****************************/
|
||||
|
||||
select {
|
||||
background-color: rgba(255, 255, 255, 0.90);
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 2px;
|
||||
height: 3rem;
|
||||
}
|
||||
@@ -0,0 +1,729 @@
|
||||
//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;
|
||||
}
|
||||
|
||||
ul {
|
||||
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 {
|
||||
@include flexbox();
|
||||
@include align(center);
|
||||
|
||||
.valign {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
// classic clearfix
|
||||
.clearfix {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
// Z-levels
|
||||
.z-depth-0 {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.z-depth-1{
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.z-depth-1-half{
|
||||
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.z-depth-2{
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
.z-depth-3{
|
||||
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
.z-depth-4{
|
||||
box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
|
||||
}
|
||||
.z-depth-5{
|
||||
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.hoverable:hover {
|
||||
transition: box-shadow .25s;
|
||||
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;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
|
||||
a { color: #444; }
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Parallax
|
||||
.parallax-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.parallax {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
img {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
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;
|
||||
}
|
||||
}
|
||||
.show-on-large {
|
||||
@media #{$large-and-up} {
|
||||
display: initial !important;
|
||||
}
|
||||
}
|
||||
.show-on-medium {
|
||||
@media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
|
||||
display: initial !important;
|
||||
}
|
||||
}
|
||||
.show-on-small {
|
||||
@media #{$small-and-down} {
|
||||
display: initial !important;
|
||||
}
|
||||
}
|
||||
.show-on-medium-and-up {
|
||||
@media #{$medium-and-up} {
|
||||
display: initial !important;
|
||||
}
|
||||
}
|
||||
.show-on-medium-and-down {
|
||||
@media #{$medium-and-down} {
|
||||
display: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Center text on mobile
|
||||
.center-on-small-only {
|
||||
@media #{$small-and-down} {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
footer.page-footer {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
background-color: $footer-bg-color;
|
||||
|
||||
.footer-copyright {
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: rgba(255,255,255,.8);
|
||||
background-color: rgba(51,51,51,.08);
|
||||
@extend .light;
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
table, th, td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width:100%;
|
||||
display: table;
|
||||
|
||||
&.bordered > thead > tr,
|
||||
&.bordered > tbody > tr {
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
|
||||
&.striped > tbody {
|
||||
> tr:nth-child(odd) {
|
||||
background-color: $table-striped-color;
|
||||
}
|
||||
|
||||
> tr > td {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight > tbody > tr {
|
||||
@include transition(background-color .25s ease);
|
||||
&:hover {
|
||||
background-color: $table-striped-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.centered {
|
||||
thead tr th, tbody tr td {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
thead {
|
||||
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;
|
||||
|
||||
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 { padding: 0 10px; }
|
||||
|
||||
/* sort out borders */
|
||||
thead {
|
||||
border: 0;
|
||||
border-right: 1px solid $table-border-color;
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
th { border-bottom: 0; border-left: 0; }
|
||||
td { border-left: 0; border-right: 0; border-bottom: 0; }
|
||||
tr { border: 0; }
|
||||
tbody tr { 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: 1.5rem;
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $collection-border-color;
|
||||
|
||||
// Avatar Collection
|
||||
&.avatar {
|
||||
min-height: 84px;
|
||||
padding-left: 72px;
|
||||
position: relative;
|
||||
|
||||
.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;
|
||||
@include transition(.25s);
|
||||
color: $secondary-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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Badges
|
||||
span.badge {
|
||||
min-width: 3rem;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
color: color('grey', 'darken-1');
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
&.new {
|
||||
font-weight: 300;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
background-color: $badge-bg-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
&.new:after {
|
||||
content: " new";
|
||||
}
|
||||
}
|
||||
nav ul a span.badge {
|
||||
position: static;
|
||||
margin-left: 4px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
// Responsive Videos
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 30px;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
&.no-controls {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
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;
|
||||
background-color: inherit;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: $progress-bar-color;
|
||||
@include 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
|
||||
@include 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
|
||||
@include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite);
|
||||
@include animation-delay(1.15s);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include keyframes(indeterminate) {
|
||||
0% {
|
||||
left: -35%;
|
||||
right:100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
|
||||
@include 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 {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1280px;
|
||||
width: 90%;
|
||||
}
|
||||
@media #{$medium-and-up} {
|
||||
.container {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
@media #{$large-and-up} {
|
||||
.container {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
.container .row {
|
||||
margin-left: (-1 * $gutter-width / 2);
|
||||
margin-right: (-1 * $gutter-width / 2);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&.no-pad {
|
||||
padding: 0;
|
||||
}
|
||||
&.no-pad-bot {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&.no-pad-top {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.row {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
|
||||
// Clear floating children
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
@include box-sizing(border-box);
|
||||
padding: 0 $gutter-width / 2;
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.s#{$i} {
|
||||
width: $perc;
|
||||
margin-left: 0;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.offset-s#{$i} {
|
||||
margin-left: $perc;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
@media #{$medium-and-up} {
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.m#{$i} {
|
||||
width: $perc;
|
||||
margin-left: 0;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.offset-m#{$i} {
|
||||
margin-left: $perc;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media #{$large-and-up} {
|
||||
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.l#{$i} {
|
||||
width: $perc;
|
||||
margin-left: 0;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
$i: 1;
|
||||
@while $i <= $num-cols {
|
||||
$perc: unquote((100 / ($num-cols / $i)) + "%");
|
||||
&.offset-l#{$i} {
|
||||
margin-left: $perc;
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,42 @@
|
||||
.materialboxed {
|
||||
display: block;
|
||||
cursor: zoom-in;
|
||||
position: relative;
|
||||
@include transition(opacity .4s);
|
||||
|
||||
&:hover {
|
||||
&:not(.active) {
|
||||
opacity: .8;
|
||||
}
|
||||
will-change: left, top, width, height;
|
||||
}
|
||||
}
|
||||
|
||||
.materialboxed.active {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
#materialbox-overlay {
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #292929;
|
||||
z-index: 999;
|
||||
|
||||
will-change: opacity;
|
||||
}
|
||||
.materialbox-caption {
|
||||
position: fixed;
|
||||
display: none;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0% 15%;
|
||||
height: 50px;
|
||||
z-index: 1000;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@mixin box-shadow-2($args1, $args2) {
|
||||
-webkit-box-shadow: $args1, $args2;
|
||||
-moz-box-shadow: $args1, $args2;
|
||||
box-shadow: $args1, $args2;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
.modal {
|
||||
@extend .z-depth-4;
|
||||
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fafafa;
|
||||
padding: 0;
|
||||
max-height: 70%;
|
||||
width: 55%;
|
||||
margin: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
border-radius: 2px;
|
||||
will-change: top, opacity;
|
||||
|
||||
@media #{$medium-and-down} {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 24px;
|
||||
}
|
||||
.modal-close {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-radius: 0 0 2px 2px;
|
||||
background-color: #fafafa;
|
||||
padding: 4px 6px;
|
||||
height: 56px;
|
||||
width: 100%;
|
||||
|
||||
.btn, .btn-flat {
|
||||
float: right;
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lean-overlay {
|
||||
position: fixed;
|
||||
z-index:999;
|
||||
top: -100px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 125%;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
display: none;
|
||||
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
// Modal with fixed action footer
|
||||
.modal.modal-fixed-footer {
|
||||
padding: 0;
|
||||
height: 70%;
|
||||
|
||||
.modal-content {
|
||||
position: absolute;
|
||||
height: calc(100% - 56px);
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Bottom Sheet Style
|
||||
.modal.bottom-sheet {
|
||||
top: auto;
|
||||
bottom: -100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: 45%;
|
||||
border-radius: 0;
|
||||
will-change: bottom, opacity;
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
nav {
|
||||
color: $navbar-font-color;
|
||||
@extend .z-depth-1;
|
||||
background-color: $primary-color;
|
||||
width: 100%;
|
||||
height: $navbar-height-mobile;
|
||||
line-height: $navbar-height-mobile;
|
||||
|
||||
a { color: $navbar-font-color; }
|
||||
|
||||
.nav-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$large-and-up} {
|
||||
a.button-collapse { display: none; }
|
||||
}
|
||||
|
||||
|
||||
// Collapse button
|
||||
.button-collapse {
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: $navbar-height-mobile;
|
||||
|
||||
i {
|
||||
font-size: 2.7rem;
|
||||
height: $navbar-height-mobile;
|
||||
line-height: $navbar-height-mobile;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Logo
|
||||
.brand-logo {
|
||||
position: absolute;
|
||||
color: $navbar-font-color;
|
||||
display: inline-block;
|
||||
font-size: $navbar-brand-font-size;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.center {
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
}
|
||||
|
||||
@media #{$medium-and-down} {
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%));
|
||||
|
||||
&.left, &.right {
|
||||
padding: 0;
|
||||
@include transform(none);
|
||||
}
|
||||
|
||||
&.left { left: 0.5rem; }
|
||||
&.right {
|
||||
right: 0.5rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 0.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar Links
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
@include transition(background-color .3s);
|
||||
float: left;
|
||||
padding: 0;
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: rgba(0,0,0,.1);
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-size: 1rem;
|
||||
color: $navbar-font-color;
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar Search Form
|
||||
.input-field {
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
font-size: 1.2rem;
|
||||
border: none;
|
||||
padding-left: 2rem;
|
||||
|
||||
&:focus, &[type=text]:valid, &[type=password]:valid,
|
||||
&[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
label {
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
i {
|
||||
color: rgba(255,255,255,.7);
|
||||
@include transition(color .3s);
|
||||
}
|
||||
&.active i { color: $navbar-font-color; }
|
||||
&.active {
|
||||
@include transform(translateY(0));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Fixed Navbar
|
||||
.navbar-fixed {
|
||||
position: relative;
|
||||
height: $navbar-height-mobile;
|
||||
z-index: 998;
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
@media #{$medium-and-up} {
|
||||
nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
|
||||
height: $navbar-height;
|
||||
line-height: $navbar-height;
|
||||
}
|
||||
.navbar-fixed {
|
||||
height: $navbar-height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,427 @@
|
||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
/* 1 */ html input[type="button"],
|
||||
button,
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,376 @@
|
||||
//---------------------------------------------------
|
||||
// Sass Prefixer
|
||||
// -------------------------------------------------
|
||||
// TABLE OF CONTENTS
|
||||
// (*) denotes a syntax-sugar helper
|
||||
// -------------------------------------------------
|
||||
//
|
||||
// animation($args)
|
||||
// animation-delay($delay)
|
||||
// animation-direction($direction)
|
||||
// animation-duration($duration)
|
||||
// animation-fill-mode($mode)
|
||||
// animation-iteration-count($count)
|
||||
// animation-name($name)
|
||||
// animation-play-state($state)
|
||||
// animation-timing-function($function)
|
||||
// background-size($args)
|
||||
// inner-shadow($args) *
|
||||
// box-sizing($args)
|
||||
// border-box() *
|
||||
// content-box() *
|
||||
// columns($args)
|
||||
// column-count($count)
|
||||
// column-gap($gap)
|
||||
// column-rule($args)
|
||||
// column-width($width)
|
||||
// flexbox()
|
||||
// flex($args)
|
||||
// order($args)
|
||||
// align($args)
|
||||
// justify-content($args)
|
||||
// gradient($default,$start,$stop) *
|
||||
// linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
|
||||
// linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
|
||||
// transform($args)
|
||||
// transform-origin($args)
|
||||
// transform-style($style)
|
||||
// rotate($deg)
|
||||
// scale($factor)
|
||||
// translate($x,$y)
|
||||
// translate3d($x,$y,$z)
|
||||
// translateHardware($x,$y) *
|
||||
// text-shadow($args)
|
||||
// transition($args)
|
||||
// transition-delay($delay)
|
||||
// transition-duration($duration)
|
||||
// transition-property($property)
|
||||
// transition-timing-function($function)
|
||||
|
||||
|
||||
// Animation
|
||||
|
||||
@mixin animation($args) {
|
||||
-webkit-animation: $args;
|
||||
-moz-animation: $args;
|
||||
-ms-animation: $args;
|
||||
-o-animation: $args;
|
||||
animation: $args;
|
||||
}
|
||||
@mixin animation-delay($delay) {
|
||||
-webkit-animation-delay: $delay;
|
||||
-moz-animation-delay: $delay;
|
||||
-ms-animation-delay: $delay;
|
||||
-o-animation-delay: $delay;
|
||||
animation-delay: $delay;
|
||||
}
|
||||
@mixin animation-direction($direction) {
|
||||
-webkit-animation-direction: $direction;
|
||||
-moz-animation-direction: $direction;
|
||||
-ms-animation-direction: $direction;
|
||||
-o-animation-direction: $direction;
|
||||
}
|
||||
@mixin animation-duration($duration) {
|
||||
-webkit-animation-duration: $duration;
|
||||
-moz-animation-duration: $duration;
|
||||
-ms-animation-duration: $duration;
|
||||
-o-animation-duration: $duration;
|
||||
}
|
||||
@mixin animation-fill-mode($mode) {
|
||||
-webkit-animation-fill-mode: $mode;
|
||||
-moz-animation-fill-mode: $mode;
|
||||
-ms-animation-fill-mode: $mode;
|
||||
-o-animation-fill-mode: $mode;
|
||||
animation-fill-mode: $mode;
|
||||
}
|
||||
@mixin animation-iteration-count($count) {
|
||||
-webkit-animation-iteration-count: $count;
|
||||
-moz-animation-iteration-count: $count;
|
||||
-ms-animation-iteration-count: $count;
|
||||
-o-animation-iteration-count: $count;
|
||||
animation-iteration-count: $count;
|
||||
}
|
||||
@mixin animation-name($name) {
|
||||
-webkit-animation-name: $name;
|
||||
-moz-animation-name: $name;
|
||||
-ms-animation-name: $name;
|
||||
-o-animation-name: $name;
|
||||
animation-name: $name;
|
||||
}
|
||||
@mixin animation-play-state($state) {
|
||||
-webkit-animation-play-state: $state;
|
||||
-moz-animation-play-state: $state;
|
||||
-ms-animation-play-state: $state;
|
||||
-o-animation-play-state: $state;
|
||||
animation-play-state: $state;
|
||||
}
|
||||
@mixin animation-timing-function($function) {
|
||||
-webkit-animation-timing-function: $function;
|
||||
-moz-animation-timing-function: $function;
|
||||
-ms-animation-timing-function: $function;
|
||||
-o-animation-timing-function: $function;
|
||||
animation-timing-function: $function;
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
@mixin keyframes($animation-name) {
|
||||
@-webkit-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@-moz-keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
@keyframes #{$animation-name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Backface-visibility
|
||||
|
||||
@mixin backface-visibility($args) {
|
||||
-webkit-backface-visibility: $args;
|
||||
-moz-backface-visibility: $args;
|
||||
-ms-backface-visibility: $args;
|
||||
backface-visibility: $args;
|
||||
}
|
||||
|
||||
|
||||
// Background Size
|
||||
|
||||
@mixin background-size($args) {
|
||||
-webkit-background-size: $args;
|
||||
background-size: $args;
|
||||
}
|
||||
|
||||
// Box Sizing
|
||||
|
||||
@mixin box-sizing($args) {
|
||||
-webkit-box-sizing: $args;
|
||||
-moz-box-sizing: $args;
|
||||
box-sizing: $args;
|
||||
}
|
||||
@mixin border-box(){
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
@mixin content-box(){
|
||||
@include box-sizing(content-box);
|
||||
}
|
||||
|
||||
|
||||
// Columns
|
||||
|
||||
@mixin columns($args) {
|
||||
-webkit-columns: $args;
|
||||
-moz-columns: $args;
|
||||
columns: $args;
|
||||
}
|
||||
@mixin column-count($count) {
|
||||
-webkit-column-count: $count;
|
||||
-moz-column-count: $count;
|
||||
column-count: $count;
|
||||
}
|
||||
@mixin column-gap($gap) {
|
||||
-webkit-column-gap: $gap;
|
||||
-moz-column-gap: $gap;
|
||||
column-gap: $gap;
|
||||
}
|
||||
@mixin column-width($width) {
|
||||
-webkit-column-width: $width;
|
||||
-moz-column-width: $width;
|
||||
column-width: $width;
|
||||
}
|
||||
@mixin column-rule($args) {
|
||||
-webkit-column-rule: $args;
|
||||
-moz-column-rule: $args;
|
||||
column-rule: $args;
|
||||
}
|
||||
|
||||
// Filter
|
||||
@mixin filter($args) {
|
||||
-webkit-filter: $args;
|
||||
-moz-filter: $args;
|
||||
-o-filter: $args;
|
||||
-ms-filter: $args;
|
||||
}
|
||||
|
||||
// Flexbox
|
||||
@mixin flexbox() {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
@mixin flex($values) {
|
||||
-webkit-box-flex: $values;
|
||||
-moz-box-flex: $values;
|
||||
-webkit-flex: $values;
|
||||
-ms-flex: $values;
|
||||
flex: $values;
|
||||
}
|
||||
@mixin order($val) {
|
||||
-webkit-box-ordinal-group: $val;
|
||||
-moz-box-ordinal-group: $val;
|
||||
-ms-flex-order: $val;
|
||||
-webkit-order: $val;
|
||||
order: $val;
|
||||
}
|
||||
@mixin align($align) {
|
||||
-webkit-flex-align: $align;
|
||||
-ms-flex-align: $align;
|
||||
-webkit-align-items: $align;
|
||||
align-items: $align;
|
||||
}
|
||||
@mixin justify-content($val) {
|
||||
-webkit-justify-content: $val;
|
||||
justify-content: $val;
|
||||
}
|
||||
// Gradients
|
||||
|
||||
@mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) {
|
||||
@include linear-gradient-top($default,$start,0%,$stop,100%);
|
||||
}
|
||||
@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) {
|
||||
background-color: $default;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2));
|
||||
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2);
|
||||
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2);
|
||||
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2);
|
||||
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2);
|
||||
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2);
|
||||
}
|
||||
@mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
|
||||
background-color: $default;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
|
||||
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
}
|
||||
@mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
|
||||
background-color: $default;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
|
||||
background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
}
|
||||
@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) {
|
||||
background-color: $default;
|
||||
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2));
|
||||
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2);
|
||||
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2);
|
||||
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2);
|
||||
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2);
|
||||
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2);
|
||||
}
|
||||
@mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
|
||||
background-color: $default;
|
||||
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
|
||||
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
|
||||
}
|
||||
@mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
|
||||
background-color: $default;
|
||||
background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
|
||||
background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
|
||||
}
|
||||
|
||||
// Text Shadow
|
||||
|
||||
@mixin text-shadow($args) {
|
||||
text-shadow: $args;
|
||||
}
|
||||
|
||||
|
||||
// Transforms
|
||||
|
||||
@mixin transform($args) {
|
||||
-webkit-transform: $args;
|
||||
-moz-transform: $args;
|
||||
-ms-transform: $args;
|
||||
-o-transform: $args;
|
||||
transform: $args;
|
||||
}
|
||||
@mixin transform-origin($args) {
|
||||
-webkit-transform-origin: $args;
|
||||
-moz-transform-origin: $args;
|
||||
-ms-transform-origin: $args;
|
||||
-o-transform-origin: $args;
|
||||
transform-origin: $args;
|
||||
}
|
||||
@mixin transform-style($style) {
|
||||
-webkit-transform-style: $style;
|
||||
-moz-transform-style: $style;
|
||||
-ms-transform-style: $style;
|
||||
-o-transform-style: $style;
|
||||
transform-style: $style;
|
||||
}
|
||||
@mixin rotate($deg:45deg){
|
||||
@include transform(rotate($deg));
|
||||
}
|
||||
@mixin scale($factor:.5){
|
||||
@include transform(scale($factor));
|
||||
}
|
||||
@mixin translate($x,$y){
|
||||
@include transform(translate($x,$y));
|
||||
}
|
||||
@mixin translate3d($x,$y,$z) {
|
||||
@include transform(translate3d($x,$y,$z));
|
||||
}
|
||||
@mixin translateHardware($x,$y) {
|
||||
@include translate($x,$y);
|
||||
-webkit-transform: translate3d($x,$y,0);
|
||||
-moz-transform: translate3d($x,$y,0);
|
||||
-o-transform: translate3d($x,$y,0);
|
||||
-ms-transform: translate3d($x,$y,0);
|
||||
transform: translate3d($x,$y,0);
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
|
||||
@mixin transition($args:200ms) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-o-transition: $args;
|
||||
-ms-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
@mixin transition-delay($delay:0) {
|
||||
-webkit-transition-delay: $delay;
|
||||
-moz-transition-delay: $delay;
|
||||
-o-transition-delay: $delay;
|
||||
-ms-transition-delay: $delay;
|
||||
transition-delay: $delay;
|
||||
}
|
||||
@mixin transition-duration($duration:200ms) {
|
||||
-webkit-transition-duration: $duration;
|
||||
-moz-transition-duration: $duration;
|
||||
-o-transition-duration: $duration;
|
||||
-ms-transition-duration: $duration;
|
||||
transition-duration: $duration;
|
||||
}
|
||||
@mixin transition-property($property:all) {
|
||||
-webkit-transition-property: $property;
|
||||
-moz-transition-property: $property;
|
||||
-o-transition-property: $property;
|
||||
-ms-transition-property: $property;
|
||||
transition-property: $property;
|
||||
}
|
||||
@mixin transition-timing-function($function:ease) {
|
||||
-webkit-transition-timing-function: $function;
|
||||
-moz-transition-timing-function: $function;
|
||||
-o-transition-timing-function: $function;
|
||||
-ms-transition-timing-function: $function;
|
||||
transition-timing-function: $function;
|
||||
}
|
||||
@@ -0,0 +1,334 @@
|
||||
/*
|
||||
@license
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
/**************************/
|
||||
/* STYLES FOR THE SPINNER */
|
||||
/**************************/
|
||||
|
||||
/*
|
||||
* Constants:
|
||||
* STROKEWIDTH = 3px
|
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc)
|
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc
|
||||
* should rotate each time, 216 gives us a
|
||||
* 5 pointed star shape (it's 360/5 * 3).
|
||||
* For a 7 pointed star, we might do
|
||||
* 360/7 * 3 = 154.286)
|
||||
* CONTAINERWIDTH = 28px
|
||||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
|
||||
.preloader-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
&.small {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
&.big {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite;
|
||||
animation: container-rotate 1568ms linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes container-rotate {
|
||||
to { -webkit-transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
@keyframes container-rotate {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.spinner-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
border-color: $spinner-default-color;
|
||||
}
|
||||
|
||||
.spinner-blue,
|
||||
.spinner-blue-only {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
|
||||
.spinner-red,
|
||||
.spinner-red-only {
|
||||
border-color: #db4437;
|
||||
}
|
||||
|
||||
.spinner-yellow,
|
||||
.spinner-yellow-only {
|
||||
border-color: #f4b400;
|
||||
}
|
||||
|
||||
.spinner-green,
|
||||
.spinner-green-only {
|
||||
border-color: #0f9d58;
|
||||
}
|
||||
|
||||
/**
|
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
||||
*
|
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using
|
||||
* animation-delay and instead set custom keyframes for each color (as redundant as it
|
||||
* seems).
|
||||
*
|
||||
* We write out each animation in full (instead of separating animation-name,
|
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
||||
* specific properties properly, treats them as -webkit-animation, and overrides the
|
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53.
|
||||
*/
|
||||
.active .spinner-layer.spinner-blue {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.spinner-red {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.spinner-yellow {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.spinner-green {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer,
|
||||
.active .spinner-layer.spinner-blue-only,
|
||||
.active .spinner-layer.spinner-red-only,
|
||||
.active .spinner-layer.spinner-yellow-only,
|
||||
.active .spinner-layer.spinner-green-only {
|
||||
/* durations: 4 * ARCTIME */
|
||||
opacity: 1;
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fill-unfill-rotate {
|
||||
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@keyframes fill-unfill-rotate {
|
||||
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@-webkit-keyframes blue-fade-in-out {
|
||||
from { opacity: 1; }
|
||||
25% { opacity: 1; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 1; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes blue-fade-in-out {
|
||||
from { opacity: 1; }
|
||||
25% { opacity: 1; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 1; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes red-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 1; }
|
||||
50% { opacity: 1; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes red-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 1; }
|
||||
50% { opacity: 1; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes yellow-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
75% { opacity: 1; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes yellow-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
75% { opacity: 1; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes green-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes green-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the
|
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*/
|
||||
.gap-patch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.gap-patch .circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
|
||||
.circle {
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
border-width: 3px; /* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.left .circle {
|
||||
left: 0;
|
||||
border-right-color: transparent !important;
|
||||
-webkit-transform: rotate(129deg);
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
&.right .circle {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: rotate(-129deg);
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.active .circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes left-spin {
|
||||
from { -webkit-transform: rotate(130deg); }
|
||||
50% { -webkit-transform: rotate(-5deg); }
|
||||
to { -webkit-transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@keyframes left-spin {
|
||||
from { transform: rotate(130deg); }
|
||||
50% { transform: rotate(-5deg); }
|
||||
to { transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes right-spin {
|
||||
from { -webkit-transform: rotate(-130deg); }
|
||||
50% { -webkit-transform: rotate(5deg); }
|
||||
to { -webkit-transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
@keyframes right-spin {
|
||||
from { transform: rotate(-130deg); }
|
||||
50% { transform: rotate(5deg); }
|
||||
to { transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: local(Roboto Thin),
|
||||
url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
|
||||
url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
|
||||
url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
|
||||
font-weight: 200;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: local(Roboto Light),
|
||||
url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
|
||||
url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
|
||||
url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src:
|
||||
local(Roboto Regular),
|
||||
url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
|
||||
url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
|
||||
url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
|
||||
url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
|
||||
url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
|
||||
url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
|
||||
url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
.side-nav {
|
||||
position: fixed;
|
||||
width: 240px;
|
||||
left: -105%;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
height: calc(100% + 60px);
|
||||
height: -moz-calc(100%); //Temporary Firefox Fix
|
||||
padding-bottom: 60px;
|
||||
background-color: $sidenav-bg-color;
|
||||
z-index: 999;
|
||||
overflow-y: auto;
|
||||
|
||||
@extend .z-depth-1;
|
||||
will-change: left;
|
||||
|
||||
// Right Align
|
||||
&.right-aligned {
|
||||
will-change: right;
|
||||
right: -105%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.collapsible{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
float: none;
|
||||
padding: 0 $sidenav-padding-right;
|
||||
&:hover, &.active { background-color: #ddd; }
|
||||
}
|
||||
a {
|
||||
color: #444;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
padding: 0 $sidenav-padding-right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Touch interaction
|
||||
.drag-target {
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
|
||||
// Hidden side-nav for all sizes
|
||||
.side-nav.fixed {
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 $sidenav-padding-right;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fixed side-nav shown
|
||||
.side-nav.fixed {
|
||||
left: 0;
|
||||
position: fixed;
|
||||
|
||||
// Right Align
|
||||
&.right-aligned {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed sideNav hide on smaller
|
||||
@media #{$medium-and-down} {
|
||||
.side-nav.fixed {
|
||||
left: -105%;
|
||||
|
||||
&.right-aligned {
|
||||
right: -105%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.side-nav .collapsible-body li.active,
|
||||
.side-nav.fixed .collapsible-body li.active {
|
||||
background-color: $primary-color;
|
||||
a {
|
||||
color: $sidenav-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sidenav-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
height: 120vh;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
z-index: 997;
|
||||
|
||||
will-change: opacity;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
.slider {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
|
||||
// Fullscreen slider
|
||||
&.fullscreen {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
ul.slides {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ul.indicators {
|
||||
z-index: 2;
|
||||
bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.slides {
|
||||
background-color: $slider-bg-color;
|
||||
margin: 0;
|
||||
height: 400px;
|
||||
|
||||
li {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.caption {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 15%;
|
||||
width: 70%;
|
||||
opacity: 0;
|
||||
|
||||
p { color: $slider-bg-color-light; }
|
||||
}
|
||||
|
||||
&.active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.indicators {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
|
||||
.indicator-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 0 12px;
|
||||
background-color: $slider-bg-color-light;
|
||||
|
||||
@include transition(background-color .3s);
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
background-color: $slider-indicator-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/***************
|
||||
Nav List
|
||||
***************/
|
||||
.table-of-contents {
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 2px 0;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
color: #757575;
|
||||
padding-left: 20px;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
letter-spacing: .4;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: lighten(#757575, 20%);
|
||||
padding-left: 19px;
|
||||
border-left: 1px solid lighten(color("materialize-red", "base"),10%);
|
||||
}
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
padding-left: 18px;
|
||||
border-left: 2px solid lighten(color("materialize-red", "base"),10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
.tabs {
|
||||
@include flexbox();
|
||||
position: relative;
|
||||
height: 48px;
|
||||
background-color: $tabs-bg-color;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
.tab {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .8px;
|
||||
width: 15%;
|
||||
|
||||
a {
|
||||
color: $tabs-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition( color .28s ease);
|
||||
&:hover {
|
||||
color: lighten($tabs-text-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled a {
|
||||
color: lighten($tabs-text-color, 20%);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: $tabs-underline-color;
|
||||
will-change: left, right;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs .tab { padding: 0; }
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
#toast-container {
|
||||
display:block;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
|
||||
@media #{$small-and-down} {
|
||||
min-width: 100%;
|
||||
bottom: 0%;
|
||||
}
|
||||
@media #{$medium-only} {
|
||||
min-width: 30%;
|
||||
left: 5%;
|
||||
bottom: 7%;
|
||||
}
|
||||
@media #{$large-and-up} {
|
||||
min-width: 8%;
|
||||
top: 10%;
|
||||
right: 7%;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
@extend .z-depth-1;
|
||||
border-radius: 2px;
|
||||
top: 0;
|
||||
width: auto;
|
||||
clear: both;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
max-width:100%;
|
||||
height: $toast-height;
|
||||
line-height: $toast-height;
|
||||
background-color: $toast-color;
|
||||
padding: 0 25px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
color: $toast-text-color;
|
||||
|
||||
@include flexbox();
|
||||
@include align(center);
|
||||
@include justify-content(space-between);
|
||||
|
||||
.btn, .btn-flat {
|
||||
margin: 0;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
&.rounded{
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
@media #{$small-and-down} {
|
||||
width:100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media #{$medium-only} {
|
||||
float: left;
|
||||
}
|
||||
@media #{$large-and-up} {
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.material-tooltip {
|
||||
padding: 10px 8px;
|
||||
font-size: 1rem;
|
||||
z-index: 2000;
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
min-height: 36px;
|
||||
line-height: 1rem;
|
||||
// max-width: 350px;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
left:0;
|
||||
top:0;
|
||||
|
||||
will-change: top, left;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
height: 7px;
|
||||
width: 14px;
|
||||
border-radius: 0 0 14px 14px;
|
||||
background-color: #323232;
|
||||
z-index: -1;
|
||||
@include transform-origin( 50% 10%);
|
||||
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html{
|
||||
line-height: 1.5;
|
||||
|
||||
@media only screen and (min-width: 0) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $medium-screen) {
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $large-screen) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: normal;
|
||||
color: $off-black;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
// Header Styles
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
||||
h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;}
|
||||
h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;}
|
||||
h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;}
|
||||
h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;}
|
||||
h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;}
|
||||
h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;}
|
||||
|
||||
// Text Styles
|
||||
em { font-style: italic; }
|
||||
strong { font-weight: 500; }
|
||||
small { font-size: 75%; }
|
||||
.light { font-weight: 300; }
|
||||
.thin { font-weight: 200; }
|
||||
|
||||
|
||||
.flow-text{
|
||||
font-weight: 300;
|
||||
$i: 0;
|
||||
@while $i <= $intervals {
|
||||
@media only screen and (min-width : 360 + ($i * $interval-size)) {
|
||||
font-size: 1.2rem * (1 + (.02 * $i));
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
// Handle below 360px screen
|
||||
@media only screen and (max-width: 360px) {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
/*** Colors ***/
|
||||
$primary-color: color("materialize-red", "lighten-2") !default;
|
||||
$primary-color-light: lighten($primary-color, 15%) !default;
|
||||
$primary-color-dark: darken($primary-color, 15%) !default;
|
||||
|
||||
$secondary-color: color("teal", "lighten-1") !default;
|
||||
$success-color: color("green", "base") !default;
|
||||
$error-color: color("red", "base") !default;
|
||||
$link-color: color("light-blue", "darken-1") !default;
|
||||
|
||||
/*** Badges ***/
|
||||
$badge-bg-color: $secondary-color !default;
|
||||
|
||||
/*** Buttons ***/
|
||||
$button-bg-color-disabled: #DFDFDF !default;
|
||||
$button-color: $secondary-color !default;
|
||||
$button-color-disabled: #9F9F9F !default;
|
||||
$button-color-flat: #343434 !default;
|
||||
$button-color-raised: #fff !default;
|
||||
$button-floating-size: 37px !default;
|
||||
$button-height: 36px !default;
|
||||
$button-font-size-shared: 1.3rem !default;
|
||||
$button-large-icon-font-size: 1.6rem !default;
|
||||
$button-line-height: 36px !default;
|
||||
|
||||
/*** Cards ***/
|
||||
$card-padding: 20px !default;
|
||||
$card-bg-color: #fff !default;
|
||||
$card-link-color: color("orange", "accent-2") !default;
|
||||
$card-link-color-light: lighten($card-link-color, 20%) !default;
|
||||
|
||||
/*** Collapsible ***/
|
||||
$collapsible-height: 3rem !default;
|
||||
$collapsible-header-color: #fff !default;
|
||||
$collapsible-border-color: #ddd !default;
|
||||
|
||||
/*** Dropdown ***/
|
||||
$dropdown-bg-color: #fff !default;
|
||||
$dropdown-hover-bg-color: #eee !default;
|
||||
$dropdown-color: $secondary-color !default;
|
||||
|
||||
/*** Fonts ***/
|
||||
$roboto-font-path: "../font/roboto/" !default;
|
||||
$icons-font-path: "../font/material-design-icons/" !default;
|
||||
|
||||
/*** Forms ***/
|
||||
// Text Inputs + Textarea
|
||||
$input-border-color: color("grey", "base") !default;
|
||||
$input-bg-color: #fff !default;
|
||||
$input-error-color: $error-color !default;
|
||||
$input-success-color: $success-color !default;
|
||||
$input-focus-color: $secondary-color !default;
|
||||
$label-font-size: .8rem !default;
|
||||
$input-disabled-color: rgba(0,0,0, .26) !default;
|
||||
$input-disabled-solid-color: #BDBDBD !default;
|
||||
|
||||
// Radio Buttons
|
||||
$radio-fill-color: $secondary-color !default;
|
||||
$radio-empty-color: #5a5a5a !default;
|
||||
|
||||
// Switches
|
||||
$switch-bg-color: $secondary-color !default;
|
||||
$switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
|
||||
$switch-unchecked-bg: #F1F1F1 !default;
|
||||
$switch-unchecked-lever-bg: #818181 !default;
|
||||
|
||||
// Date Picker
|
||||
$datepicker-weekday-bg: darken($secondary_color, 7%) !default;
|
||||
$datepicker-date-bg: $secondary_color !default;
|
||||
$datepicker-year: rgba(255, 255, 255, .4) !default;
|
||||
$datepicker-focus: rgba(0,0,0, .05) !default;
|
||||
$datepicker-selected: $secondary-color !default;
|
||||
$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
|
||||
|
||||
|
||||
/*** Global ***/
|
||||
// Media Query Ranges
|
||||
$small-screen-up: 601px !default;
|
||||
$medium-screen-up: 993px !default;
|
||||
$large-screen-up: 1201px !default;
|
||||
$small-screen: 600px !default;
|
||||
$medium-screen: 992px !default;
|
||||
$large-screen: 1200px !default;
|
||||
|
||||
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
|
||||
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
|
||||
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
|
||||
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
|
||||
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
|
||||
|
||||
// Grid Variables
|
||||
$num-cols: 12 !default;
|
||||
$gutter-width: 1.5rem !default;
|
||||
$element-top-margin: $gutter-width/3 !default;
|
||||
$element-bottom-margin: ($gutter-width*2)/3 !default;
|
||||
|
||||
/*** Navbar ***/
|
||||
$navbar-height: 64px !default;
|
||||
$navbar-height-mobile: 56px !default;
|
||||
$navbar-font-color: #fff !default;
|
||||
$navbar-brand-font-size: 2.1rem !default;
|
||||
|
||||
/*** SideNav ***/
|
||||
$sidenav-bg-color: #fff !default;
|
||||
$sidenav-padding-right: 15px !default;
|
||||
|
||||
/*** Photo Slider ***/
|
||||
$slider-bg-color: color('grey', 'base') !default;
|
||||
$slider-bg-color-light: color('grey', 'lighten-2') !default;
|
||||
$slider-indicator-color: color('green', 'base') !default;
|
||||
|
||||
/*** Spinners | Loaders ***/
|
||||
$spinner-default-color: $secondary-color !default;
|
||||
|
||||
/*** Tabs ***/
|
||||
$tabs-underline-color: $primary-color-light !default;
|
||||
$tabs-text-color: $primary-color !default;
|
||||
$tabs-bg-color: #fff !default;
|
||||
|
||||
/*** Tables ***/
|
||||
$table-border-color: #d0d0d0 !default;
|
||||
$table-striped-color: #f2f2f2 !default;
|
||||
|
||||
/*** Toasts ***/
|
||||
$toast-height: 48px !default;
|
||||
$toast-color: #323232 !default;
|
||||
$toast-text-color: #fff !default;
|
||||
|
||||
/*** Typography ***/
|
||||
$off-black: rgba(0, 0, 0, 0.87) !default;
|
||||
// Header Styles
|
||||
$h1-fontsize: 4.2rem !default;
|
||||
$h2-fontsize: 3.56rem !default;
|
||||
$h3-fontsize: 2.92rem !default;
|
||||
$h4-fontsize: 2.28rem !default;
|
||||
$h5-fontsize: 1.64rem !default;
|
||||
$h6-fontsize: 1rem !default;
|
||||
|
||||
// Footer
|
||||
$footer-bg-color: $primary-color !default;
|
||||
|
||||
// Flowtext
|
||||
$range : $large-screen - $small-screen !default;
|
||||
$intervals: 20 !default;
|
||||
$interval-size: $range / $intervals !default;
|
||||
|
||||
/*** Collections ***/
|
||||
$collection-border-color: #e0e0e0 !default;
|
||||
$collection-bg-color: #fff !default;
|
||||
$collection-active-bg-color: $secondary-color !default;
|
||||
$collection-active-color: lighten($secondary-color, 55%) !default;
|
||||
$collection-hover-bg-color: #ddd !default;
|
||||
|
||||
/* Progress Bar */
|
||||
$progress-bar-color: $secondary-color !default;
|
||||
@@ -0,0 +1,167 @@
|
||||
|
||||
/*!
|
||||
* Waves v0.6.0
|
||||
* http://fian.my.id/Waves
|
||||
*
|
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE
|
||||
*/
|
||||
|
||||
|
||||
.waves-effect {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
// white-space: nowrap;
|
||||
// outline: 0;
|
||||
|
||||
vertical-align: middle;
|
||||
// cursor: pointer;
|
||||
// border: none;
|
||||
// outline: none;
|
||||
// color: inherit;
|
||||
// background-color: rgba(0, 0, 0, 0);
|
||||
// font-size: 1em;
|
||||
// line-height:1em;
|
||||
// text-align: center;
|
||||
// text-decoration: none;
|
||||
z-index: 1;
|
||||
will-change: opacity, transform;
|
||||
@include transition(all .3s ease-out);
|
||||
|
||||
.waves-ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top:-10px;
|
||||
margin-left:-10px;
|
||||
opacity: 0;
|
||||
|
||||
background: rgba(0,0,0,0.2);
|
||||
// $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
|
||||
// background: -webkit-radial-gradient($gradient);
|
||||
// background: -o-radial-gradient($gradient);
|
||||
// background: -moz-radial-gradient($gradient);
|
||||
// background: radial-gradient($gradient);
|
||||
@include transition(all 0.7s ease-out);
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
-o-transition-property: -o-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
@include transform(scale(0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Waves Colors
|
||||
&.waves-light .waves-ripple {
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
&.waves-red .waves-ripple {
|
||||
background-color: rgba(244, 67, 54, .70);
|
||||
}
|
||||
&.waves-yellow .waves-ripple {
|
||||
background-color: rgba(255, 235, 59, .70);
|
||||
}
|
||||
&.waves-orange .waves-ripple {
|
||||
background-color: rgba(255, 152, 0, .70);
|
||||
}
|
||||
&.waves-purple .waves-ripple {
|
||||
background-color: rgba(156, 39, 176, 0.70);
|
||||
}
|
||||
&.waves-green .waves-ripple {
|
||||
background-color: rgba(76, 175, 80, 0.70);
|
||||
}
|
||||
&.waves-teal .waves-ripple {
|
||||
background-color: rgba(0, 150, 136, 0.70);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.waves-notransition {
|
||||
@include transition(none #{"!important"});
|
||||
}
|
||||
|
||||
.waves-circle {
|
||||
@include transform(translateZ(0));
|
||||
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
|
||||
}
|
||||
|
||||
// .waves-button,
|
||||
// .waves-button:hover,
|
||||
// .waves-button:visited,
|
||||
// .waves-button-input {
|
||||
// white-space: nowrap;
|
||||
// vertical-align: middle;
|
||||
// cursor: pointer;
|
||||
// border: none;
|
||||
// outline: none;
|
||||
// color: inherit;
|
||||
// background-color: rgba(0, 0, 0, 0);
|
||||
// font-size: 1em;
|
||||
// line-height:1em;
|
||||
// text-align: center;
|
||||
// text-decoration: none;
|
||||
// z-index: 1;
|
||||
// }
|
||||
|
||||
// .waves-button {
|
||||
// padding: 0.85em 1.1em;
|
||||
// border-radius: 0.2em;
|
||||
// }
|
||||
|
||||
// .waves-button-input {
|
||||
// margin: 0;
|
||||
// padding: 0.85em 1.1em;
|
||||
// }
|
||||
|
||||
.waves-input-wrapper {
|
||||
border-radius: 0.2em;
|
||||
vertical-align: bottom;
|
||||
|
||||
// &.waves-button {
|
||||
// padding: 0;
|
||||
// }
|
||||
|
||||
.waves-button-input {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.waves-circle {
|
||||
text-align: center;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
border-radius: 50%;
|
||||
-webkit-mask-image: none;
|
||||
}
|
||||
|
||||
// .waves-float {
|
||||
// -webkit-mask-image: none;
|
||||
// @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
|
||||
|
||||
// &:active {
|
||||
// @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
|
||||
// }
|
||||
// }
|
||||
|
||||
.waves-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Firefox Bug: link not triggered */
|
||||
a.waves-effect .waves-ripple {
|
||||
z-index: -1;
|
||||
}
|
||||
@@ -0,0 +1,435 @@
|
||||
/* ==========================================================================
|
||||
$BASE-DATE-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
.picker__box {
|
||||
padding: 0 1em;
|
||||
}
|
||||
/**
|
||||
* The header containing the month and year stuff.
|
||||
*/
|
||||
.picker__header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: .75em;
|
||||
}
|
||||
/**
|
||||
* The month and year labels.
|
||||
*/
|
||||
.picker__month,
|
||||
.picker__year {
|
||||
// font-weight: 500;
|
||||
display: inline-block;
|
||||
margin-left: .25em;
|
||||
margin-right: .25em;
|
||||
}
|
||||
/**
|
||||
* The month and year selectors.
|
||||
*/
|
||||
.picker__select--month,
|
||||
.picker__select--year {
|
||||
|
||||
height: 2em;
|
||||
padding: 0;
|
||||
margin-left: .25em;
|
||||
margin-right: .25em;
|
||||
}
|
||||
|
||||
// Modified
|
||||
.picker__select--month.browser-default {
|
||||
display: inline;
|
||||
background-color: #FFFFFF;
|
||||
width: 40%;
|
||||
}
|
||||
.picker__select--year.browser-default {
|
||||
display: inline;
|
||||
background-color: #FFFFFF;
|
||||
width: 25%;
|
||||
}
|
||||
.picker__select--month:focus,
|
||||
.picker__select--year:focus {
|
||||
border-color: $datepicker-focus;
|
||||
}
|
||||
/**
|
||||
* The month navigation buttons.
|
||||
*/
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next {
|
||||
position: absolute;
|
||||
padding: .5em 1.25em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
box-sizing: content-box;
|
||||
top: -0.25em;
|
||||
}
|
||||
//@media (min-width: 24.5em) {
|
||||
// .picker__nav--prev,
|
||||
// .picker__nav--next {
|
||||
// top: -0.33em;
|
||||
// }
|
||||
//}
|
||||
.picker__nav--prev {
|
||||
left: -1em;
|
||||
padding-right: 1.25em;
|
||||
}
|
||||
//@media (min-width: 24.5em) {
|
||||
// .picker__nav--prev {
|
||||
// padding-right: 1.5em;
|
||||
// }
|
||||
//}
|
||||
.picker__nav--next {
|
||||
right: -1em;
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
//@media (min-width: 24.5em) {
|
||||
// .picker__nav--next {
|
||||
// padding-left: 1.5em;
|
||||
// }
|
||||
//}
|
||||
|
||||
.picker__nav--disabled,
|
||||
.picker__nav--disabled:hover,
|
||||
.picker__nav--disabled:before,
|
||||
.picker__nav--disabled:before:hover {
|
||||
cursor: default;
|
||||
background: none;
|
||||
border-right-color: #f5f5f5;
|
||||
border-left-color: #f5f5f5;
|
||||
}
|
||||
/**
|
||||
* The calendar table of dates
|
||||
*/
|
||||
.picker__table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
margin-top: .75em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.picker__table th, .picker__table td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.picker__table td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/**
|
||||
* The weekday labels
|
||||
*/
|
||||
.picker__weekday {
|
||||
width: 14.285714286%;
|
||||
font-size: .75em;
|
||||
padding-bottom: .25em;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
/* Increase the spacing a tad */
|
||||
}
|
||||
@media (min-height: 33.875em) {
|
||||
.picker__weekday {
|
||||
padding-bottom: .5em;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The days on the calendar
|
||||
*/
|
||||
|
||||
.picker__day--today {
|
||||
position: relative;
|
||||
color: #595959;
|
||||
letter-spacing: -.3;
|
||||
padding: .75rem 0;
|
||||
font-weight: 400;
|
||||
border: 1px solid transparent;
|
||||
|
||||
}
|
||||
|
||||
//.picker__day--today:before {
|
||||
// content: " ";
|
||||
// position: absolute;
|
||||
// top: 2px;
|
||||
// right: 2px;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// border-top: 0.5em solid #0059bc;
|
||||
// border-left: .5em solid transparent;
|
||||
//}
|
||||
.picker__day--disabled:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
|
||||
|
||||
.picker__day--infocus:hover{
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.picker__day--outfocus {
|
||||
display: none;
|
||||
padding: .75rem 0;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.picker__day--outfocus:hover {
|
||||
cursor: pointer;
|
||||
color: #dddddd;
|
||||
// background: #b1dcfb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.picker__day--highlighted {
|
||||
// border-color: #0089ec;
|
||||
}
|
||||
.picker__day--highlighted:hover,
|
||||
.picker--focused .picker__day--highlighted {
|
||||
cursor: pointer;
|
||||
// color: #000000;
|
||||
// background: #b1dcfb;
|
||||
// font-weight: 500;
|
||||
}
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused .picker__day--selected {
|
||||
|
||||
|
||||
// Circle background
|
||||
border-radius: 50%;
|
||||
@include transform(scale(.75));
|
||||
background: #0089ec;
|
||||
color: #ffffff;
|
||||
}
|
||||
.picker__day--disabled,
|
||||
.picker__day--disabled:hover,
|
||||
.picker--focused .picker__day--disabled {
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
color: #dddddd;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__day--highlighted.picker__day--disabled,
|
||||
.picker__day--highlighted.picker__day--disabled:hover {
|
||||
background: #bbbbbb;
|
||||
}
|
||||
/**
|
||||
* The footer containing the "today", "clear", and "close" buttons.
|
||||
*/
|
||||
.picker__footer {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.picker__button--today,
|
||||
.picker__button--clear,
|
||||
.picker__button--close {
|
||||
border: 1px solid #ffffff;
|
||||
background: #ffffff;
|
||||
font-size: .8em;
|
||||
padding: .66em 0;
|
||||
font-weight: bold;
|
||||
width: 33%;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.picker__button--today:hover,
|
||||
.picker__button--clear:hover,
|
||||
.picker__button--close:hover {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background: #b1dcfb;
|
||||
border-bottom-color: #b1dcfb;
|
||||
}
|
||||
.picker__button--today:focus,
|
||||
.picker__button--clear:focus,
|
||||
.picker__button--close:focus {
|
||||
background: #b1dcfb;
|
||||
border-color: $datepicker-focus;
|
||||
outline: none;
|
||||
}
|
||||
.picker__button--today:before,
|
||||
.picker__button--clear:before,
|
||||
.picker__button--close:before {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
}
|
||||
.picker__button--today:before,
|
||||
.picker__button--clear:before {
|
||||
content: " ";
|
||||
margin-right: .45em;
|
||||
}
|
||||
.picker__button--today:before {
|
||||
top: -0.05em;
|
||||
width: 0;
|
||||
border-top: 0.66em solid #0059bc;
|
||||
border-left: .66em solid transparent;
|
||||
}
|
||||
.picker__button--clear:before {
|
||||
top: -0.25em;
|
||||
width: .66em;
|
||||
border-top: 3px solid #ee2200;
|
||||
}
|
||||
.picker__button--close:before {
|
||||
content: "\D7";
|
||||
top: -0.1em;
|
||||
vertical-align: top;
|
||||
font-size: 1.1em;
|
||||
margin-right: .35em;
|
||||
color: #777777;
|
||||
}
|
||||
.picker__button--today[disabled],
|
||||
.picker__button--today[disabled]:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
color: #dddddd;
|
||||
cursor: default;
|
||||
}
|
||||
.picker__button--today[disabled]:before {
|
||||
border-top-color: #aaaaaa;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
.picker__box {
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picker__date-display {
|
||||
text-align: center;
|
||||
background-color: $datepicker-date-bg;
|
||||
color: #fff;
|
||||
padding-bottom: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.picker__nav--prev:hover,
|
||||
.picker__nav--next:hover {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background: $datepicker-selected-outfocus;
|
||||
}
|
||||
|
||||
.picker__weekday-display {
|
||||
background-color: $datepicker-weekday-bg;
|
||||
padding: 10px;
|
||||
font-weight: 200;
|
||||
letter-spacing: .5;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.picker__month-display {
|
||||
text-transform: uppercase;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.picker__day-display {
|
||||
|
||||
font-size: 4.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.picker__year-display {
|
||||
font-size: 1.8rem;
|
||||
color: $datepicker-year;
|
||||
}
|
||||
|
||||
.picker__box {
|
||||
padding: 0;
|
||||
}
|
||||
.picker__calendar-container {
|
||||
padding: 0 1rem;
|
||||
|
||||
thead {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
.picker__table {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.picker__day--infocus {
|
||||
color: #595959;
|
||||
letter-spacing: -.3;
|
||||
padding: .75rem 0;
|
||||
font-weight: 400;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
//Today style
|
||||
.picker__day.picker__day--today {
|
||||
color: $datepicker-selected;
|
||||
}
|
||||
|
||||
.picker__day.picker__day--today.picker__day--selected {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Table Header
|
||||
.picker__weekday {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
|
||||
.picker__day--selected,
|
||||
.picker__day--selected:hover,
|
||||
.picker--focused .picker__day--selected {
|
||||
// Circle background
|
||||
border-radius: 50%;
|
||||
@include transform(scale(.9));
|
||||
background-color: $datepicker-selected;
|
||||
&.picker__day--outfocus {
|
||||
background-color: $datepicker-selected-outfocus;
|
||||
}
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.picker__footer {
|
||||
text-align: right;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
// Materialize modified
|
||||
.picker__close, .picker__today {
|
||||
font-size: 1.1rem;
|
||||
padding: 0 1rem;
|
||||
color: $datepicker-selected;
|
||||
}
|
||||
|
||||
//month nav buttons
|
||||
.picker__nav--prev:before,
|
||||
.picker__nav--next:before {
|
||||
content: " ";
|
||||
border-top: .5em solid transparent;
|
||||
border-bottom: .5em solid transparent;
|
||||
border-right: 0.75em solid #676767;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.picker__nav--next:before {
|
||||
border-right: 0;
|
||||
border-left: 0.75em solid #676767;
|
||||
}
|
||||
button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus {
|
||||
background-color: $datepicker-selected-outfocus;
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
/* ==========================================================================
|
||||
$BASE-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
.picker {
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/**
|
||||
* The picker input element.
|
||||
*/
|
||||
.picker__input {
|
||||
cursor: default;
|
||||
}
|
||||
/**
|
||||
* When the picker is opened, the input element is "activated".
|
||||
*/
|
||||
.picker__input.picker__input--active {
|
||||
border-color: #0089ec;
|
||||
}
|
||||
/**
|
||||
* The holder is the only "scrollable" top-level container element.
|
||||
*/
|
||||
.picker__holder {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/*!
|
||||
* Default mobile-first, responsive styling for pickadate.js
|
||||
* Demo: http://amsul.github.io/pickadate.js
|
||||
*/
|
||||
/**
|
||||
* Note: the root picker element should *NOT* be styled more than what's here.
|
||||
*/
|
||||
/**
|
||||
* Make the holder and frame fullscreen.
|
||||
*/
|
||||
.picker__holder,
|
||||
.picker__frame {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
}
|
||||
/**
|
||||
* The holder should overlay the entire screen.
|
||||
*/
|
||||
.picker__holder {
|
||||
position: fixed;
|
||||
-webkit-transition: background 0.15s ease-out, top 0s 0.15s;
|
||||
-moz-transition: background 0.15s ease-out, top 0s 0.15s;
|
||||
transition: background 0.15s ease-out, top 0s 0.15s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
/**
|
||||
* The frame that bounds the box contents of the picker.
|
||||
*/
|
||||
.picker__frame {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
min-width: 256px;
|
||||
|
||||
// picker width
|
||||
width: 300px;
|
||||
max-height: 350px;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
-moz-opacity: 0;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.15s ease-out;
|
||||
-moz-transition: all 0.15s ease-out;
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
@media (min-height: 28.875em) {
|
||||
.picker__frame {
|
||||
overflow: visible;
|
||||
top: auto;
|
||||
bottom: -100%;
|
||||
max-height: 80%;
|
||||
}
|
||||
}
|
||||
@media (min-height: 40.125em) {
|
||||
.picker__frame {
|
||||
margin-bottom: 7.5%;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The wrapper sets the stage to vertically align the box contents.
|
||||
*/
|
||||
.picker__wrap {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@media (min-height: 28.875em) {
|
||||
.picker__wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* The box contains all the picker contents.
|
||||
*/
|
||||
.picker__box {
|
||||
background: #ffffff;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
//@media (min-height: 26.5em) {
|
||||
// .picker__box {
|
||||
//// font-size: 1.25em;
|
||||
// }
|
||||
//}
|
||||
@media (min-height: 28.875em) {
|
||||
.picker__box {
|
||||
display: block;
|
||||
|
||||
// picker header font-size
|
||||
// font-size: 1rem;
|
||||
|
||||
border: 1px solid #777777;
|
||||
border-top-color: #898989;
|
||||
border-bottom-width: 0;
|
||||
-webkit-border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
-webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
|
||||
-moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
}
|
||||
//@media (min-height: 40.125em) {
|
||||
// .picker__box {
|
||||
// font-size: 1.1rem;
|
||||
// border-bottom-width: 1px;
|
||||
// -webkit-border-radius: 5px;
|
||||
// -moz-border-radius: 5px;
|
||||
// border-radius: 5px;
|
||||
// }
|
||||
//}
|
||||
/**
|
||||
* When the picker opens...
|
||||
*/
|
||||
.picker--opened .picker__holder {
|
||||
top: 0;
|
||||
background: transparent;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
|
||||
zoom: 1;
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
-webkit-transition: background 0.15s ease-out;
|
||||
-moz-transition: background 0.15s ease-out;
|
||||
transition: background 0.15s ease-out;
|
||||
}
|
||||
.picker--opened .picker__frame {
|
||||
top: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
@media (min-height: 35.875em) {
|
||||
.picker--opened .picker__frame {
|
||||
top: 10%;
|
||||
bottom: 20%auto;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* For `large` screens, transform into an inline picker.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
CUSTOM MATERIALIZE STYLES
|
||||
========================================================================== */
|
||||
|
||||
.picker__input.picker__input--active {
|
||||
border-color: color("blue", "lighten-5");
|
||||
}
|
||||
|
||||
.picker__frame {
|
||||
margin: 0 auto;
|
||||
max-width: 325px;
|
||||
}
|
||||
|
||||
@media (min-height: 38.875em) {
|
||||
.picker--opened .picker__frame {
|
||||
top: 10%;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
/* ==========================================================================
|
||||
$BASE-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The list of times.
|
||||
*/
|
||||
.picker__list {
|
||||
list-style: none;
|
||||
padding: 0.75em 0 4.2em;
|
||||
margin: 0;
|
||||
}
|
||||
/**
|
||||
* The times on the clock.
|
||||
*/
|
||||
.picker__list-item {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-top: 1px solid #dddddd;
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
padding: .75em 1.25em;
|
||||
}
|
||||
@media (min-height: 46.75em) {
|
||||
.picker__list-item {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
}
|
||||
/* Hovered time */
|
||||
.picker__list-item:hover {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background: #b1dcfb;
|
||||
border-color: #0089ec;
|
||||
z-index: 10;
|
||||
}
|
||||
/* Highlighted and hovered/focused time */
|
||||
.picker__list-item--highlighted {
|
||||
border-color: #0089ec;
|
||||
z-index: 10;
|
||||
}
|
||||
.picker__list-item--highlighted:hover,
|
||||
.picker--focused .picker__list-item--highlighted {
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background: #b1dcfb;
|
||||
}
|
||||
/* Selected and hovered/focused time */
|
||||
.picker__list-item--selected,
|
||||
.picker__list-item--selected:hover,
|
||||
.picker--focused .picker__list-item--selected {
|
||||
background: #0089ec;
|
||||
color: #ffffff;
|
||||
z-index: 10;
|
||||
}
|
||||
/* Disabled time */
|
||||
.picker__list-item--disabled,
|
||||
.picker__list-item--disabled:hover,
|
||||
.picker--focused .picker__list-item--disabled {
|
||||
background: #f5f5f5;
|
||||
border-color: #f5f5f5;
|
||||
color: #dddddd;
|
||||
cursor: default;
|
||||
border-color: #dddddd;
|
||||
z-index: auto;
|
||||
}
|
||||
/**
|
||||
* The clear button
|
||||
*/
|
||||
.picker--time .picker__button--clear {
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: 1em auto 0;
|
||||
padding: 1em 1.25em;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-weight: 500;
|
||||
font-size: .67em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #666;
|
||||
}
|
||||
.picker--time .picker__button--clear:hover,
|
||||
.picker--time .picker__button--clear:focus {
|
||||
color: #000000;
|
||||
background: #b1dcfb;
|
||||
background: #ee2200;
|
||||
border-color: #ee2200;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
outline: none;
|
||||
}
|
||||
.picker--time .picker__button--clear:before {
|
||||
top: -0.25em;
|
||||
color: #666;
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.picker--time .picker__button--clear:hover:before,
|
||||
.picker--time .picker__button--clear:focus:before {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
$DEFAULT-TIME-PICKER
|
||||
========================================================================== */
|
||||
/**
|
||||
* The frame the bounds the time picker.
|
||||
*/
|
||||
.picker--time .picker__frame {
|
||||
min-width: 256px;
|
||||
max-width: 320px;
|
||||
}
|
||||
/**
|
||||
* The picker box.
|
||||
*/
|
||||
.picker--time .picker__box {
|
||||
font-size: 1em;
|
||||
background: #f2f2f2;
|
||||
padding: 0;
|
||||
}
|
||||
@media (min-height: 40.125em) {
|
||||
.picker--time .picker__box {
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user