mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-10-30 23:47:42 +03:00
reorganized main file into _core.scss, collapsed directory structure and scss linted (first time) - should be no changes to variables or logic
This commit is contained in:
Kevin Ross
parent
8ce96b04a3
commit
1c747cf86d
|
|
@ -285,7 +285,7 @@ module.exports = function (grunt) {
|
|||
config: 'scss/.scss-lint.yml',
|
||||
reporterOutput: null
|
||||
},
|
||||
src: ['scss/*.scss', '!scss/_normalize.scss']
|
||||
src: ['scss/**/*.scss', '!scss/_normalize.scss']
|
||||
},
|
||||
|
||||
postcss: {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
// Load Bootstrap variables and mixins
|
||||
//@import '../../../scss/includes/variables';
|
||||
//@import '../../../scss/includes/mixins';
|
||||
@import '../../../scss/includes/colors';
|
||||
@import '../../../scss/variables/colors';
|
||||
|
||||
//http://www.materialpalette.com/indigo/light-blue
|
||||
$brand-primary: $indigo-500; // #3F51B5
|
||||
|
|
@ -45,7 +45,7 @@ $brand-primary: $indigo-500; // #3F51B5
|
|||
//$divider-color: #B6B6B6
|
||||
|
||||
// Import default variables
|
||||
@import '../../../scss/includes/variables';
|
||||
@import '../../../scss/variables';
|
||||
|
||||
// Local docs variables or overrides
|
||||
$bd-purple: $brand-primary; // #563d7c;
|
||||
|
|
@ -59,7 +59,7 @@ $bd-warning: $brand-warning; // #f0ad4e;
|
|||
$bd-info: $brand-info; // #5bc0de;
|
||||
|
||||
// Import material design configured with the above variables
|
||||
@import '../../../scss/includes/bootstrap-material-design';
|
||||
@import '../../../scss/core';
|
||||
|
||||
// Load docs components
|
||||
@import 'booticon';
|
||||
|
|
|
|||
48
scss/_bootstrap.scss
Normal file
48
scss/_bootstrap.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
//Bootstrap v4.0.0-alpha (http://getbootstrap.com)
|
||||
//Copyright 2011-2015 Twitter, Inc.
|
||||
//Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
// Core variables and mixins
|
||||
@import "../bower_components/bootstrap/scss/variables";
|
||||
@import "../bower_components/bootstrap/scss/mixins";
|
||||
// Reset and dependencies
|
||||
@import "../bower_components/bootstrap/scss/normalize";
|
||||
@import "../bower_components/bootstrap/scss/print";
|
||||
// Core CSS
|
||||
@import "../bower_components/bootstrap/scss/reboot";
|
||||
@import "../bower_components/bootstrap/scss/type";
|
||||
@import "../bower_components/bootstrap/scss/images";
|
||||
@import "../bower_components/bootstrap/scss/code";
|
||||
@import "../bower_components/bootstrap/scss/grid";
|
||||
@import "../bower_components/bootstrap/scss/tables";
|
||||
@import "../bower_components/bootstrap/scss/forms";
|
||||
@import "../bower_components/bootstrap/scss/buttons";
|
||||
// Components
|
||||
@import "../bower_components/bootstrap/scss/animation";
|
||||
@import "../bower_components/bootstrap/scss/dropdown";
|
||||
@import "../bower_components/bootstrap/scss/button-group";
|
||||
@import "../bower_components/bootstrap/scss/input-group";
|
||||
@import "../bower_components/bootstrap/scss/custom-forms";
|
||||
@import "../bower_components/bootstrap/scss/nav";
|
||||
@import "../bower_components/bootstrap/scss/navbar";
|
||||
@import "../bower_components/bootstrap/scss/card";
|
||||
@import "../bower_components/bootstrap/scss/breadcrumb";
|
||||
@import "../bower_components/bootstrap/scss/pagination";
|
||||
@import "../bower_components/bootstrap/scss/pager";
|
||||
@import "../bower_components/bootstrap/scss/labels";
|
||||
@import "../bower_components/bootstrap/scss/jumbotron";
|
||||
@import "../bower_components/bootstrap/scss/alert";
|
||||
@import "../bower_components/bootstrap/scss/progress";
|
||||
@import "../bower_components/bootstrap/scss/media";
|
||||
@import "../bower_components/bootstrap/scss/list-group";
|
||||
@import "../bower_components/bootstrap/scss/responsive-embed";
|
||||
@import "../bower_components/bootstrap/scss/close";
|
||||
// Components w/ JavaScript
|
||||
@import "../bower_components/bootstrap/scss/modal";
|
||||
@import "../bower_components/bootstrap/scss/tooltip";
|
||||
@import "../bower_components/bootstrap/scss/popover";
|
||||
@import "../bower_components/bootstrap/scss/carousel";
|
||||
// Utility classes
|
||||
@import "../bower_components/bootstrap/scss/utilities";
|
||||
@import "../bower_components/bootstrap/scss/utilities-background";
|
||||
@import "../bower_components/bootstrap/scss/utilities-spacing";
|
||||
@import "../bower_components/bootstrap/scss/utilities-responsive";
|
||||
|
|
@ -1,15 +1,13 @@
|
|||
|
||||
|
||||
// specification: https://www.google.com/design/spec/components/buttons.html
|
||||
|
||||
@mixin typo-button($colorContrast: false){
|
||||
@mixin typo-button($color-contrast: false) {
|
||||
font-size: $mdb-btn-font-size-base;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
//line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
@if ($colorContrast) {
|
||||
@if ($color-contrast) {
|
||||
opacity: 0.87;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,19 +16,19 @@
|
|||
// synchronized with mdl 11/23/15
|
||||
.btn,
|
||||
.input-group-btn .btn {
|
||||
border: none;
|
||||
border-radius: $border-radius-base;
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
margin: 10px 1px;
|
||||
@include typo-button();
|
||||
will-change: box-shadow, transform;
|
||||
transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in,
|
||||
background-color 0.2s $mdb-animation-curve-default,
|
||||
color 0.2s $mdb-animation-curve-default;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
outline: none;
|
||||
transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in, background-color 0.2s $mdb-animation-curve-default, color 0.2s $mdb-animation-curve-default;
|
||||
will-change: box-shadow, transform;
|
||||
|
||||
@include typo-button();
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
|
|
@ -38,7 +36,6 @@
|
|||
|
||||
//---
|
||||
// btn-flat
|
||||
background: transparent;
|
||||
&:not(.btn-raised) {
|
||||
@include variations(unquote(".btn"), unquote(""), color, $mdb-text-color-primary);
|
||||
box-shadow: none;
|
||||
|
|
@ -47,11 +44,11 @@
|
|||
&:hover,
|
||||
&:focus {
|
||||
// spec: flat/light bg Hover: 20% #999999
|
||||
background-color: rgba(#999999, (20/100));
|
||||
background-color: rgba(#999, (20 / 100));
|
||||
|
||||
.theme-dark & {
|
||||
// spec: dark bg Hover: 15% #CCCCCC
|
||||
background-color: rgba(#CCCCCC, (15/100));
|
||||
background-color: rgba(#ccc, (15 / 100));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -64,7 +61,6 @@
|
|||
@include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
|
||||
}
|
||||
|
||||
|
||||
//---
|
||||
// btn-raised
|
||||
&.btn-raised {
|
||||
|
|
@ -95,17 +91,17 @@
|
|||
|
||||
&.btn-fab {
|
||||
// see above for color variations
|
||||
border-radius: 50%;
|
||||
font-size: $mdb-btn-fab-font-size;
|
||||
height: $mdb-btn-fab-size;
|
||||
margin: auto;
|
||||
min-width: $mdb-btn-fab-size;
|
||||
width: $mdb-btn-fab-size;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
||||
position: relative;
|
||||
width: $mdb-btn-fab-size;
|
||||
min-width: $mdb-btn-fab-size;
|
||||
height: $mdb-btn-fab-size;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
font-size: $mdb-btn-fab-font-size;
|
||||
line-height: normal;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 1.5px 0 rgba($black, 0.12), 0 1px 1px 0 rgba($black, 0.24);
|
||||
|
||||
.ripple-container {
|
||||
border-radius: 50%;
|
||||
|
|
@ -113,9 +109,9 @@
|
|||
|
||||
&.btn-fab-mini,
|
||||
.btn-group-sm & {
|
||||
height: $mdb-btn-fab-size-mini;
|
||||
min-width: $mdb-btn-fab-size-mini;
|
||||
width: $mdb-btn-fab-size-mini;
|
||||
min-width: $mdb-btn-fab-size-mini;
|
||||
height: $mdb-btn-fab-size-mini;
|
||||
|
||||
&.material-icons {
|
||||
top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
|
||||
|
|
@ -127,9 +123,9 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
|
||||
line-height: $mdb-btn-fab-font-size;
|
||||
width: $mdb-btn-fab-font-size;
|
||||
line-height: $mdb-btn-fab-font-size;
|
||||
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,7 +134,6 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
&.btn-lg,
|
||||
.btn-group-lg & {
|
||||
|
|
@ -166,11 +161,11 @@
|
|||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled][disabled] {
|
||||
// spec: light theme: Disabled text: 26% #000000
|
||||
color: rgba(#000000, (26/100));
|
||||
// spec: light theme: Disabled text: 26% $black
|
||||
color: rgba($black, (26 / 100));
|
||||
.theme-dark & {
|
||||
// spec: dark theme: Disabled text: 30% #FFFFFF
|
||||
color: rgba(#FFFFFF, (30/100));
|
||||
// spec: dark theme: Disabled text: 30% $white
|
||||
color: rgba($white, (30 / 100));
|
||||
}
|
||||
|
||||
// flat buttons lose transparency
|
||||
|
|
@ -197,14 +192,13 @@
|
|||
//border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
|
||||
|
||||
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
|
||||
&.open {
|
||||
.dropdown-toggle {
|
||||
//box-shadow: none;
|
||||
}
|
||||
|
||||
& > .dropdown-toggle.btn {
|
||||
> .dropdown-toggle.btn {
|
||||
@include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -217,7 +211,7 @@
|
|||
@include shadow-2dp();
|
||||
}
|
||||
|
||||
& .btn + .btn,
|
||||
.btn + .btn,
|
||||
.btn,
|
||||
.btn:active,
|
||||
.btn-group {
|
||||
66
scss/_cards.scss
Normal file
66
scss/_cards.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
//
|
||||
//.card {
|
||||
//
|
||||
// /***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
//
|
||||
// display: inline-block;
|
||||
// position: relative;
|
||||
// width: 100%;
|
||||
// .card-height-indicator {
|
||||
// margin-top: 100%;
|
||||
// }
|
||||
// .card-content {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// }
|
||||
//
|
||||
// /**************************************************************************/
|
||||
//
|
||||
// border-radius: $border-radius-base;
|
||||
// color: $mdb-card-body-text;
|
||||
// background: $mdb-card-body-background;
|
||||
//
|
||||
// @include shadow-z-2();
|
||||
//
|
||||
// .card-image {
|
||||
// height: 60%;
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// border-top-left-radius: 2px;
|
||||
// border-top-right-radius: 2px;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .card-image-headline {
|
||||
// position: absolute;
|
||||
// bottom: 16px;
|
||||
// left: 18px;
|
||||
// font-size: 2em;
|
||||
// color: $mdb-card-image-headline;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .card-body {
|
||||
// height: 30%;
|
||||
// padding: 18px;
|
||||
// }
|
||||
//
|
||||
// .card-footer {
|
||||
// height: 10%;
|
||||
// padding: 18px;
|
||||
// button {
|
||||
// position: relative;
|
||||
// bottom: 25px;
|
||||
// width: auto;
|
||||
// margin: 0 !important;
|
||||
// &:first-child {
|
||||
// left: -15px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
@ -3,60 +3,59 @@ label.checkbox,
|
|||
label.checkbox-inline,
|
||||
.checkbox label,
|
||||
.checkbox-inline label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
color: $mdb-checkbox-label-color;
|
||||
cursor: pointer;
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.checkbox-decorator {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
&::before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, .84);
|
||||
height: $mdb-checkbox-size;
|
||||
width: $mdb-checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
width: $mdb-checkbox-size;
|
||||
height: $mdb-checkbox-size;
|
||||
margin: 0;
|
||||
content: "";
|
||||
background-color: rgba($black, .84);
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
width: $mdb-checkbox-size;
|
||||
height: $mdb-checkbox-size;
|
||||
border: $border-radius-base solid $mdb-checkbox-border-color;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border: $border-radius-base solid $mdb-checkbox-border-color;
|
||||
}
|
||||
.check:before {
|
||||
.check::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
content: "";
|
||||
box-shadow: 0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
|
|
@ -64,51 +63,52 @@ label.checkbox-inline,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
transform: rotate(45deg);
|
||||
animation: checkbox-off $mdb-checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
|
||||
&:focus + .checkbox-decorator .check:after {
|
||||
&:focus + .checkbox-decorator .check::after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
|
||||
// FIXME: once working - combine further to reduce code
|
||||
& + .checkbox-decorator .check {
|
||||
+ .checkbox-decorator .check {
|
||||
color: $mdb-checkbox-checked-color;
|
||||
border-color: $mdb-checkbox-checked-color;
|
||||
}
|
||||
|
||||
& + .checkbox-decorator .check:before {
|
||||
+ .checkbox-decorator .check::before {
|
||||
color: $mdb-checkbox-checked-color;
|
||||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
0px 32px 0 20px,
|
||||
032px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on $mdb-checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
& + .checkbox-decorator:before {
|
||||
+ .checkbox-decorator::before {
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
& + .checkbox-decorator .check:after {
|
||||
+ .checkbox-decorator .check::after {
|
||||
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
& + .checkbox-decorator:before {
|
||||
+ .checkbox-decorator::before {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
& + .checkbox-decorator .check:after {
|
||||
+ .checkbox-decorator .check::after {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||
|
||||
}
|
||||
|
|
@ -118,12 +118,12 @@ label.checkbox-inline,
|
|||
// Style for disabled inputs
|
||||
fieldset[disabled] &,
|
||||
fieldset[disabled] & input[type=checkbox],
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check:before,
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
|
||||
input[type=checkbox][disabled] + .radio-decorator {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-decorator .check:after {
|
||||
input[type=checkbox][disabled] + .checkbox-decorator .check::after {
|
||||
background-color: $mdb-text-color-primary;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
|
@ -134,7 +134,7 @@ label.checkbox-inline,
|
|||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
0px 32px 0 20px,
|
||||
0 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
15px 2px 0 11px;
|
||||
}
|
||||
|
|
@ -142,7 +142,7 @@ label.checkbox-inline,
|
|||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
0px 32px 0 20px,
|
||||
0 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px 2px 0 11px;
|
||||
}
|
||||
|
|
@ -150,7 +150,7 @@ label.checkbox-inline,
|
|||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
0px 32px 0 20px,
|
||||
0 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
}
|
||||
|
|
@ -161,7 +161,7 @@ label.checkbox-inline,
|
|||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
0px 32px 0 20px,
|
||||
0 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px,
|
||||
0 0 0 0 inset;
|
||||
|
|
@ -171,52 +171,52 @@ label.checkbox-inline,
|
|||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
0px 32px 0 20px,
|
||||
0 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px,
|
||||
0 0 0 0 inset;
|
||||
}
|
||||
50% {
|
||||
transform: rotate(45deg);
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
0px 32px 0 20px,
|
||||
0 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
15px 2px 0 11px,
|
||||
0 0 0 0 inset;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
51% {
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
box-shadow: 0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0 0 10px inset;
|
||||
0 0 0 10px inset;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
box-shadow: 0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0 0 0 inset;
|
||||
0 0 0 0 inset;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
30
scss/_core.scss
Normal file
30
scss/_core.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// This is the main scss file, provided as an underscored file so that variable contexts remain in-tact when importing from the source.
|
||||
@import "variables";
|
||||
|
||||
// FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350
|
||||
@import "bootstrap";
|
||||
|
||||
@import "mixins";
|
||||
|
||||
@import "reboot";
|
||||
@import "buttons";
|
||||
@import "checkboxes";
|
||||
@import "switch";
|
||||
@import "radios";
|
||||
@import "forms";
|
||||
@import "input-group";
|
||||
@import "lists";
|
||||
@import "navbar";
|
||||
@import "alerts";
|
||||
@import "progress";
|
||||
@import "type";
|
||||
@import "tabs";
|
||||
@import "popover";
|
||||
@import "cards";
|
||||
@import "modal";
|
||||
@import "dividers";
|
||||
@import "themes";
|
||||
|
||||
@import "ripples";
|
||||
|
||||
@import "plugins";
|
||||
72
scss/_dividers.scss
Normal file
72
scss/_dividers.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
hr {
|
||||
&.on-dark {
|
||||
color: lighten($black, 10%);
|
||||
}
|
||||
|
||||
&.on-light {
|
||||
color: lighten($white, 10%);
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 0.75),
|
||||
(min--moz-device-pixel-ratio: 0.75),
|
||||
(-o-device-pixel-ratio: 3/4),
|
||||
(min-device-pixel-ratio: 0.75),
|
||||
(min-resolution: 0.75dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
height: 0.75px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1),
|
||||
(min--moz-device-pixel-ratio: 1),
|
||||
(-o-device-pixel-ratio: 1),
|
||||
(min-device-pixel-ratio: 1),
|
||||
(min-resolution: 1dppx),
|
||||
(min-resolution: 160dpi) {
|
||||
height: 1px;
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.33),
|
||||
(min--moz-device-pixel-ratio: 1.33),
|
||||
(-o-device-pixel-ratio: 133/100),
|
||||
(min-device-pixel-ratio: 1.33),
|
||||
(min-resolution: 1.33dppx),
|
||||
(min-resolution: 213dpi) {
|
||||
height: 1.333px;
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5),
|
||||
(min--moz-device-pixel-ratio: 1.5),
|
||||
(-o-device-pixel-ratio: 3/2),
|
||||
(min-device-pixel-ratio: 1.5),
|
||||
(min-resolution: 1.5dppx),
|
||||
(min-resolution: 240dpi) {
|
||||
height: 1.5px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2),
|
||||
(min--moz-device-pixel-ratio: 2),
|
||||
(-o-device-pixel-ratio: 2/1),
|
||||
(min-device-pixel-ratio: 2),
|
||||
(min-resolution: 2dppx),
|
||||
(min-resolution: 380dpi) {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 3),
|
||||
(min--moz-device-pixel-ratio: 3),
|
||||
(-o-device-pixel-ratio: 3/1),
|
||||
(min-device-pixel-ratio: 3),
|
||||
(min-resolution: 3dppx),
|
||||
(min-resolution: 480dpi) {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 4),
|
||||
(min--moz-device-pixel-ratio: 4),
|
||||
(-o-device-pixel-ratio: 4/1),
|
||||
(min-device-pixel-ratio: 3),
|
||||
(min-resolution: 4dppx),
|
||||
(min-resolution: 640dpi) {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
.dropdown-menu {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
box-shadow: 0 2px 5px 0 rgba($black, 0.26);
|
||||
.divider {
|
||||
background-color: rgba(229, 229, 229, 0.12);
|
||||
}
|
||||
li {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
color: $brand-primary;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// label variations
|
||||
.label {
|
||||
border-radius: $border-radius-small;
|
||||
//@include variations(unquote(".label"), unquote(""), background-color, $grey);
|
||||
//@include variations(unquote(""), background-color, $grey);
|
||||
}
|
||||
|
||||
// must be broken out for reuse - webkit selector breaks firefox
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
&.is-focused .form-control {
|
||||
background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
||||
.text-input-decorator:after {
|
||||
.text-input-decorator::after {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
|
@ -91,10 +91,8 @@
|
|||
// this is outside a form-group
|
||||
@if not $parent {
|
||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
||||
}
|
||||
|
||||
} @else {
|
||||
// this is inside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
|
||||
@else {
|
||||
#{$parent} {
|
||||
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
|
||||
|
||||
|
|
@ -137,14 +135,13 @@
|
|||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
.form-control //,
|
||||
//.mdb-form-group .form-control
|
||||
{
|
||||
border: 0;
|
||||
//.mdb-form-group .form-control,
|
||||
.form-control {
|
||||
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
|
||||
background-size: 0 2px, 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom, center calc(100% - 1px);
|
||||
background-size: 0 2px, 100% 1px;
|
||||
border: 0;
|
||||
transition: background 0s ease-out;
|
||||
//float: none; // why?
|
||||
|
||||
|
|
@ -153,11 +150,11 @@
|
|||
//}
|
||||
|
||||
.mdb-form-group.is-focused & {
|
||||
outline: none;
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
outline: none;
|
||||
transition-duration: 0.3s;
|
||||
|
||||
.text-input-decorator:after {
|
||||
.text-input-decorator::after {
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -165,7 +162,7 @@
|
|||
//&[readonly],
|
||||
//&[disabled],
|
||||
//fieldset[disabled] & {
|
||||
// background-color: rgba(0, 0, 0, 0); // replaced with $input-bg-disabled
|
||||
// background-color: rgba($black, 0); // replaced with $input-bg-disabled
|
||||
//}
|
||||
|
||||
&[disabled],
|
||||
|
|
@ -246,7 +243,7 @@
|
|||
|
||||
textarea {
|
||||
//resize: none;
|
||||
& ~ .form-control-highlight {
|
||||
~ .form-control-highlight {
|
||||
//margin-top: -11px;
|
||||
}
|
||||
}
|
||||
|
|
@ -254,7 +251,7 @@
|
|||
select {
|
||||
//appearance: none; // Fix for OS X
|
||||
|
||||
& ~ .text-input-decorator:after {
|
||||
~ .text-input-decorator::after {
|
||||
//display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,15 @@
|
|||
|
||||
|
||||
.list-group {
|
||||
border-radius: 0;
|
||||
.list-group-item {
|
||||
background-color: transparent;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0 16px;
|
||||
&.baseline {
|
||||
border-bottom: 1px solid #cecece;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.row-picture, .row-action-primary {
|
||||
|
|
@ -24,25 +22,22 @@
|
|||
height: 56px;
|
||||
}
|
||||
img {
|
||||
background: rgba(0,0,0,0.1);
|
||||
padding: 1px;
|
||||
background: rgba($black, 0.1);
|
||||
&.radio-decorator {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
i {
|
||||
background: rgba(0,0,0,0.25);
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
line-height: 56px;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
line-height: 56px;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
background: rgba($black, 0.25);
|
||||
border-radius: 100%;
|
||||
}
|
||||
label {
|
||||
margin-left: 7px;
|
||||
margin-right: -7px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
margin: 5px -7px -5px 7px;
|
||||
.checkbox-decorator {
|
||||
left: -10px;
|
||||
}
|
||||
|
|
@ -54,51 +49,52 @@
|
|||
min-height: 66px;
|
||||
.action-secondary {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: rgba(0,0,0,0.25);
|
||||
color: rgba($black, 0.25);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.action-secondary ~ * {
|
||||
.action-secondary ~ * {
|
||||
max-width: unquote("calc(100% - 30px)");
|
||||
}
|
||||
.least-content {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 0;
|
||||
color: rgba(0,0,0,0.54);
|
||||
right: 16px;
|
||||
font-size: 14px;
|
||||
color: rgba($black, 0.54);
|
||||
}
|
||||
}
|
||||
.list-group-item-heading {
|
||||
color: rgba(0, 0, 0, 0.77);
|
||||
font-size: 20px;
|
||||
line-height: 29px;
|
||||
color: rgba($black, 0.77);
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item.active {
|
||||
&:hover, &:focus {
|
||||
background: rgba(0,0,0,.15);
|
||||
outline: 10px solid rgba(0,0,0,.15);
|
||||
background: rgba($black, .15);
|
||||
outline: 10px solid rgba($black, .15);
|
||||
}
|
||||
.list-group-item-heading, .list-group-item-text {
|
||||
color: $mdb-text-color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list-group-separator {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
&:before {
|
||||
content: "";
|
||||
width: unquote("calc(100% - 90px)");
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
&::before {
|
||||
float: right;
|
||||
width: unquote("calc(100% - 90px)");
|
||||
content: "";
|
||||
border-bottom: 1px solid rgba($black, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +1,39 @@
|
|||
|
||||
|
||||
//
|
||||
// Modals
|
||||
// Material Design element Dialogs
|
||||
// --------------------------------------------------
|
||||
.modal-content {
|
||||
@include shadow-z-5();
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
border: none;
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
padding-top: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 0;
|
||||
padding-left: 24px;
|
||||
padding: 24px 24px 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
padding-top: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 16px;
|
||||
padding-left: 24px;
|
||||
padding: 24px 24px 16px;
|
||||
}
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
padding: 7px;
|
||||
border-top: 0;
|
||||
button {
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
width: auto;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
margin: 0;
|
||||
&.pull-left {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
button+button {
|
||||
button + button {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -49,6 +41,7 @@
|
|||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
background: rgba(0,0,0,0.3);
|
||||
background: rgba($black, 0.3);
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
// &:hover,
|
||||
// &:focus {
|
||||
// color: inherit;
|
||||
// background-color: rgba(255, 255, 255, 0.1);
|
||||
// background-color: rgba($white, 0.1);
|
||||
// }
|
||||
// }
|
||||
// > .disabled > a {
|
||||
5
scss/_plugins.scss
Normal file
5
scss/_plugins.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// External plugins
|
||||
@import "plugins/plugin-snackbarjs";
|
||||
@import "plugins/plugin-nouislider";
|
||||
@import "plugins/plugin-selectize";
|
||||
@import "plugins/plugin-dropdownjs";
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
|
||||
|
||||
.popover, .tooltip-inner {
|
||||
color: $mdb-popover-color;
|
||||
line-height: 1em;
|
||||
color: $mdb-popover-color;
|
||||
background: $mdb-popover-background;
|
||||
border: none;
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
@include shadow-z-1();
|
||||
}
|
||||
11
scss/_progress.scss
Normal file
11
scss/_progress.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
.progress {
|
||||
height: 4px;
|
||||
background: #c8c8c8;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
@include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
@mixin radio-color($color, $opacity) {
|
||||
& ~ .check,
|
||||
& ~ .radio-decorator {
|
||||
~ .check,
|
||||
~ .radio-decorator {
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
& ~ .check {
|
||||
~ .check {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
& ~ .radio-decorator {
|
||||
~ .radio-decorator {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,59 +17,59 @@ label.radio,
|
|||
label.radio-inline,
|
||||
.radio label,
|
||||
.radio-inline label {
|
||||
cursor: pointer;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
padding-left: 45px;
|
||||
color: $mdb-radio-label-color;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 2px;
|
||||
left: 10px;
|
||||
display: block;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.radio-decorator {
|
||||
border: 2px solid $mdb-radio-color-off;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid $mdb-radio-color-off;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.check {
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
height: 15px;
|
||||
background-color: $mdb-radio-color-on;
|
||||
border-radius: 100%;
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
.check:after {
|
||||
display: block;
|
||||
.check::after {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: -18px;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
content: "";
|
||||
background-color: $mdb-text-color-primary;
|
||||
left: -18px;
|
||||
top: -18px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale3d(1.5, 1.5, 1);
|
||||
}
|
||||
input[type=radio]:not(:checked) ~ .check:after {
|
||||
input[type=radio]:not(:checked) ~ .check::after {
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
input[type=radio]:checked ~ .check:after {
|
||||
input[type=radio]:checked ~ .check::after {
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
|
||||
&:checked {
|
||||
@include radio-color($mdb-radio-color-on, 1);
|
||||
|
|
@ -4,7 +4,7 @@ body {
|
|||
|
||||
//// Prevent highlight on mobile
|
||||
//* {
|
||||
// -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||
// -webkit-tap-highlight-color: rgba($white, 0);
|
||||
// -webkit-tap-highlight-color: transparent;
|
||||
// &:focus {
|
||||
// outline: 0;
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
// marker class (used as a selector for one-off elements to decorate)
|
||||
.ripple {
|
||||
position: relative;
|
||||
|
|
@ -12,31 +11,30 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
|
||||
.ripple-decorator {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
pointer-events: none;
|
||||
background-color: rgba($black, 0.05);
|
||||
border-radius: 100%;
|
||||
background-color: #000; // fallback color
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
transform-origin: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&.ripple-on {
|
||||
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
opacity: 0.1;
|
||||
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
}
|
||||
|
||||
&.ripple-out {
|
||||
transition: opacity 0.1s linear 0s !important;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s linear 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +1,76 @@
|
|||
|
||||
|
||||
.switch {
|
||||
vertical-align: middle;
|
||||
&, label, input, .switch-decorator {
|
||||
user-select: none;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: $mdb-switch-label-color;
|
||||
cursor: pointer;
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
// Switch bg off and disabled
|
||||
.switch-decorator,
|
||||
input[type=checkbox][disabled] + .switch-decorator {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
margin-right: 15px;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 15px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Handle off
|
||||
.switch-decorator:after {
|
||||
content: "";
|
||||
.switch-decorator::after {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: -5px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
content: "";
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
box-shadow: 0 1px 3px 1px rgba($black, 0.4);
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
// Handle disabled
|
||||
&[disabled] {
|
||||
& + .switch-decorator:after,
|
||||
&:checked + .switch-decorator:after {
|
||||
background-color: #BDBDBD;
|
||||
+ .switch-decorator::after,
|
||||
&:checked + .switch-decorator::after {
|
||||
background-color: #bdbdbd;
|
||||
}
|
||||
}
|
||||
|
||||
& + .switch-decorator:active:after,
|
||||
&[disabled] + .switch-decorator:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
+ .switch-decorator:active::after,
|
||||
&[disabled] + .switch-decorator:active::after {
|
||||
box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($black, 0.1);
|
||||
}
|
||||
|
||||
// Ripple off and disabled
|
||||
&:checked + .switch-decorator:after {
|
||||
&:checked + .switch-decorator::after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
& label input[type=checkbox]:checked {
|
||||
& + .switch-decorator {
|
||||
background-color: rgba($brand-primary, (50/100)); // Switch bg on
|
||||
label input[type=checkbox]:checked {
|
||||
+ .switch-decorator {
|
||||
background-color: rgba($brand-primary, (50 / 100)); // Switch bg on
|
||||
}
|
||||
|
||||
& + .switch-decorator:after {
|
||||
+ .switch-decorator::after {
|
||||
background-color: $brand-primary; // Handle on
|
||||
}
|
||||
|
||||
& + .switch-decorator:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
|
||||
+ .switch-decorator:active::after {
|
||||
box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($brand-primary, (10 / 100)); // Ripple on
|
||||
}
|
||||
}
|
||||
}
|
||||
27
scss/_tabs.scss
Normal file
27
scss/_tabs.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
.nav-tabs {
|
||||
background: $brand-primary;
|
||||
> li {
|
||||
> a {
|
||||
margin: 0;
|
||||
color: $white;
|
||||
border: 0;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
font-weight: 500;
|
||||
color: $white !important;
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
&.disabled > a, &.disabled > a:hover {
|
||||
color: rgba($white, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
|
||||
|
||||
// by default, assume light-theme, no need for a marker class.
|
||||
|
||||
// this is mostly a marker class, add it to something like the body or container. Subordinates will look for this marker - see buttons
|
||||
.theme-dark {
|
||||
|
||||
// foo
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
@import 'colors';
|
||||
@import "variables/colors";
|
||||
|
||||
// Typography elements FIXME: review to see if we actually need these
|
||||
$mdb-text-color-light: rgba(255, 255, 255, 0.84) !default; //hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default;
|
||||
$mdb-text-color-primary: rgba(0, 0, 0, 0.87) !default;
|
||||
$mdb-text-color-light: rgba($white, 0.84) !default; //hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default;
|
||||
$mdb-text-color-primary: rgba($black, 0.87) !default;
|
||||
$mdb-font-weight-base: 400;
|
||||
$icon-color: rgba(0, 0, 0, 0.5) !default;
|
||||
$icon-color: rgba($black, 0.5) !default;
|
||||
|
||||
|
||||
// redefine ? TODO: do we need this mdb variant? This is used as $body-color
|
||||
|
|
@ -13,13 +13,13 @@ $gray-dark: $mdb-text-color-primary;
|
|||
//---
|
||||
// Customized BS variables
|
||||
$enable-flex: true;
|
||||
@import 'variables/body';
|
||||
@import 'variables/brand';
|
||||
@import 'variables/buttons';
|
||||
@import 'variables/code';
|
||||
@import 'variables/forms';
|
||||
@import 'variables/state';
|
||||
@import 'variables/type';
|
||||
@import "variables/body";
|
||||
@import "variables/brand";
|
||||
@import "variables/buttons";
|
||||
@import "variables/code";
|
||||
@import "variables/forms";
|
||||
@import "variables/state";
|
||||
@import "variables/type";
|
||||
|
||||
|
||||
$border-radius-base: 2px !default;
|
||||
|
|
@ -30,7 +30,7 @@ $border-radius-small: 1px !default;
|
|||
// Bootstrap Material Design variables start with mdb-
|
||||
$mdb-brand-inverse: $indigo !default;
|
||||
|
||||
/* ANIMATION */
|
||||
// ANIMATION
|
||||
$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
|
|
@ -45,7 +45,7 @@ $contrast-factor: 40% !default;
|
|||
// --------------------
|
||||
// inputs
|
||||
//$mdb-input-placeholder-color: #BDBDBD !default;
|
||||
$mdb-input-underline-color: #D2D2D2 !default;
|
||||
$mdb-input-underline-color: #d2d2d2 !default;
|
||||
$mdb-label-static-size-ratio: 75 / 100 !default;
|
||||
$mdb-help-block-size-ratio: 75 / 100 !default;
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ $mdb-checkbox-size: 20px !default;
|
|||
$mdb-checkbox-animation-ripple: 500ms !default;
|
||||
$mdb-checkbox-animation-check: 0.3s !default;
|
||||
$mdb-checkbox-checked-color: #4caf50 !default;
|
||||
$mdb-checkbox-label-color: rgba(0, 0, 0, .54) !default;
|
||||
$mdb-checkbox-label-color: rgba($black, .54) !default;
|
||||
$mdb-checkbox-border-color: $mdb-checkbox-label-color !default;
|
||||
|
||||
// Popovers and Popups
|
||||
|
|
@ -114,7 +114,7 @@ $mdb-btn-fab-font-size: 24px !default;
|
|||
$mdb-btn-icon-size: 32px !default;
|
||||
$mdb-btn-icon-size-mini: 24px !default;
|
||||
|
||||
/* SHADOWS */
|
||||
// SHADOWS
|
||||
$mdb-shadow-key-umbra-opacity: 0.2 !default;
|
||||
$mdb-shadow-key-penumbra-opacity: 0.14 !default;
|
||||
$mdb-shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
2
scss/bootstrap-material-design.scss
vendored
2
scss/bootstrap-material-design.scss
vendored
|
|
@ -1,3 +1,3 @@
|
|||
// IMPORTANT: For use of source and variable overrides, import the following file directly, *NOT* this one.
|
||||
// This file primarily exists to create the static css distribution.
|
||||
@import "includes/bootstrap-material-design";
|
||||
@import "core";
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
// This is the main scss file, provided as an underscored file so that variable contexts remain in-tact when importing from the source.
|
||||
@import 'variables';
|
||||
|
||||
// FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350
|
||||
@import 'bootstrap';
|
||||
|
||||
@import 'mixins';
|
||||
|
||||
@import 'reboot';
|
||||
@import 'buttons';
|
||||
@import 'checkboxes';
|
||||
@import 'switch';
|
||||
@import 'radios';
|
||||
@import 'forms';
|
||||
@import 'input-group';
|
||||
@import 'lists';
|
||||
@import 'navbar';
|
||||
@import 'alerts';
|
||||
@import 'progress';
|
||||
@import 'type';
|
||||
@import 'tabs';
|
||||
@import 'popups';
|
||||
@import 'cards';
|
||||
@import 'dialogs';
|
||||
@import 'dividers';
|
||||
@import 'themes';
|
||||
|
||||
@import 'ripples';
|
||||
|
||||
@import 'plugins';
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
/*!
|
||||
* Bootstrap v4.0.0-alpha (http://getbootstrap.com)
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// Core variables and mixins
|
||||
@import "../../bower_components/bootstrap/scss/variables";
|
||||
@import "../../bower_components/bootstrap/scss/mixins";
|
||||
|
||||
// Reset and dependencies
|
||||
@import "../../bower_components/bootstrap/scss/normalize";
|
||||
@import "../../bower_components/bootstrap/scss/print";
|
||||
|
||||
// Core CSS
|
||||
@import "../../bower_components/bootstrap/scss/reboot";
|
||||
@import "../../bower_components/bootstrap/scss/type";
|
||||
@import "../../bower_components/bootstrap/scss/images";
|
||||
@import "../../bower_components/bootstrap/scss/code";
|
||||
@import "../../bower_components/bootstrap/scss/grid";
|
||||
@import "../../bower_components/bootstrap/scss/tables";
|
||||
@import "../../bower_components/bootstrap/scss/forms";
|
||||
@import "../../bower_components/bootstrap/scss/buttons";
|
||||
|
||||
// Components
|
||||
@import "../../bower_components/bootstrap/scss/animation";
|
||||
@import "../../bower_components/bootstrap/scss/dropdown";
|
||||
@import "../../bower_components/bootstrap/scss/button-group";
|
||||
@import "../../bower_components/bootstrap/scss/input-group";
|
||||
@import "../../bower_components/bootstrap/scss/custom-forms";
|
||||
@import "../../bower_components/bootstrap/scss/nav";
|
||||
@import "../../bower_components/bootstrap/scss/navbar";
|
||||
@import "../../bower_components/bootstrap/scss/card";
|
||||
@import "../../bower_components/bootstrap/scss/breadcrumb";
|
||||
@import "../../bower_components/bootstrap/scss/pagination";
|
||||
@import "../../bower_components/bootstrap/scss/pager";
|
||||
@import "../../bower_components/bootstrap/scss/labels";
|
||||
@import "../../bower_components/bootstrap/scss/jumbotron";
|
||||
@import "../../bower_components/bootstrap/scss/alert";
|
||||
@import "../../bower_components/bootstrap/scss/progress";
|
||||
@import "../../bower_components/bootstrap/scss/media";
|
||||
@import "../../bower_components/bootstrap/scss/list-group";
|
||||
@import "../../bower_components/bootstrap/scss/responsive-embed";
|
||||
@import "../../bower_components/bootstrap/scss/close";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "../../bower_components/bootstrap/scss/modal";
|
||||
@import "../../bower_components/bootstrap/scss/tooltip";
|
||||
@import "../../bower_components/bootstrap/scss/popover";
|
||||
@import "../../bower_components/bootstrap/scss/carousel";
|
||||
|
||||
// Utility classes
|
||||
@import "../../bower_components/bootstrap/scss/utilities";
|
||||
@import "../../bower_components/bootstrap/scss/utilities-background";
|
||||
@import "../../bower_components/bootstrap/scss/utilities-spacing";
|
||||
@import "../../bower_components/bootstrap/scss/utilities-responsive";
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
|
||||
|
||||
.card {
|
||||
|
||||
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.card-height-indicator {
|
||||
margin-top: 100%;
|
||||
}
|
||||
.card-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/**************************************************************************/
|
||||
|
||||
|
||||
border-radius: $border-radius-base;
|
||||
color: $mdb-card-body-text;
|
||||
background: $mdb-card-body-background;
|
||||
|
||||
@include shadow-z-2();
|
||||
|
||||
.card-image {
|
||||
height: 60%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-image-headline {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: $mdb-card-image-headline;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
height: 30%;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
height: 10%;
|
||||
padding: 18px;
|
||||
button {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
width: auto;
|
||||
&:first-child {
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
|
||||
|
||||
hr {
|
||||
&.on-dark {
|
||||
color: lighten($black, 10%);
|
||||
}
|
||||
|
||||
&.on-light {
|
||||
color: lighten($white, 10%);
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 0.75),
|
||||
(min--moz-device-pixel-ratio: 0.75),
|
||||
(-o-device-pixel-ratio: 3/4),
|
||||
(min-device-pixel-ratio: 0.75),
|
||||
(min-resolution: 0.75dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
height:0.75px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1),
|
||||
(min--moz-device-pixel-ratio: 1),
|
||||
(-o-device-pixel-ratio: 1),
|
||||
(min-device-pixel-ratio: 1),
|
||||
(min-resolution: 1dppx),
|
||||
(min-resolution: 160dpi) {
|
||||
height:1px;
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.33),
|
||||
(min--moz-device-pixel-ratio: 1.33),
|
||||
(-o-device-pixel-ratio: 133/100),
|
||||
(min-device-pixel-ratio: 1.33),
|
||||
(min-resolution: 1.33dppx),
|
||||
(min-resolution: 213dpi) {
|
||||
height:1.333px;
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 1.5),
|
||||
(min--moz-device-pixel-ratio: 1.5),
|
||||
(-o-device-pixel-ratio: 3/2),
|
||||
(min-device-pixel-ratio: 1.5),
|
||||
(min-resolution: 1.5dppx),
|
||||
(min-resolution: 240dpi) {
|
||||
height:1.5px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2),
|
||||
(min--moz-device-pixel-ratio: 2),
|
||||
(-o-device-pixel-ratio: 2/1),
|
||||
(min-device-pixel-ratio: 2),
|
||||
(min-resolution: 2dppx),
|
||||
(min-resolution: 380dpi) {
|
||||
height:2px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 3),
|
||||
(min--moz-device-pixel-ratio: 3),
|
||||
(-o-device-pixel-ratio: 3/1),
|
||||
(min-device-pixel-ratio: 3),
|
||||
(min-resolution: 3dppx),
|
||||
(min-resolution: 480dpi) {
|
||||
height:3px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 4),
|
||||
(min--moz-device-pixel-ratio: 4),
|
||||
(-o-device-pixel-ratio: 4/1),
|
||||
(min-device-pixel-ratio: 3),
|
||||
(min-resolution: 4dppx),
|
||||
(min-resolution: 640dpi) {
|
||||
height:4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
|
||||
|
||||
.label {
|
||||
border-radius: 1px;
|
||||
@include variations(unquote(""), background-color, $grey);
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
|
||||
|
||||
// External plugins
|
||||
@import 'plugins/_plugin-snackbarjs';
|
||||
@import 'plugins/_plugin-nouislider';
|
||||
@import 'plugins/_plugin-selectize';
|
||||
@import 'plugins/_plugin-dropdownjs';
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
|
||||
|
||||
.progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: #c8c8c8;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
@include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
|
||||
|
||||
.nav-tabs {
|
||||
background: $brand-primary;
|
||||
> li {
|
||||
> a {
|
||||
color: #FFFFFF;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
& > a, & > a:hover, & > a:focus {
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
&.disabled > a, &.disabled > a:hover {
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
// Placeholder text
|
||||
@mixin material-placeholder() {
|
||||
&::-moz-placeholder {@content; } // Firefox
|
||||
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
@mixin shadow-z-1(){
|
||||
box-shadow:
|
||||
0 1px 6px 0 rgba(0, 0, 0, 0.12),
|
||||
0 1px 6px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@mixin shadow-z-1-hover(){
|
||||
box-shadow:
|
||||
0 5px 11px 0 rgba(0, 0, 0, 0.18),
|
||||
0 4px 15px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@mixin shadow-z-2(){
|
||||
box-shadow:
|
||||
0 8px 17px 0 rgba(0, 0, 0, 0.2),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-3(){
|
||||
box-shadow:
|
||||
0 12px 15px 0 rgba(0, 0, 0, 0.24),
|
||||
0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-4(){
|
||||
box-shadow:
|
||||
0 16px 28px 0 rgba(0, 0, 0, 0.22),
|
||||
0 25px 55px 0 rgba(0, 0, 0, 0.21);
|
||||
}
|
||||
|
||||
@mixin shadow-z-5(){
|
||||
box-shadow:
|
||||
0 27px 24px 0 rgba(0, 0, 0, 0.2),
|
||||
0 40px 77px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
|
||||
/* Shadows (from mdl http://www.getmdl.io/) */
|
||||
|
||||
// Focus shadow mixin.
|
||||
@mixin focus-shadow(){
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp(){
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
|
||||
}
|
||||
@mixin shadow-3dp(){
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 3px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
|
||||
0 1px 8px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
|
||||
}
|
||||
@mixin shadow-4dp(){
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 1px 10px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 2px 4px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-6dp(){
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 1px 18px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 3px 5px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
@mixin shadow-8dp(){
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp(){
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-24dp(){
|
||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
|
||||
0 11px 15px -7px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 24px 38px 3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
|
||||
|
||||
.dropdownjs:after {
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
font-size: 25px;
|
||||
position: absolute;
|
||||
content: "\e8ac";
|
||||
font-family: "Material-Design-Icons";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
pointer-events: none;
|
||||
color: #757575;
|
||||
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
|
||||
|
||||
.noUi-target,
|
||||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.noUi-origin {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.noUi-handle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-stacking .noUi-handle {
|
||||
z-index: 10;
|
||||
}
|
||||
//.noUi-stacking + .noUi-origin {
|
||||
// *z-index: -1;
|
||||
//} WARNING: Property with star prefix found. Checks for the star property hack (targets IE6/7) (star-property-hack) Browsers: All
|
||||
.noUi-state-tap .noUi-origin {
|
||||
transition: left 0.3s, top 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
}
|
||||
.noUi-horizontal {
|
||||
height: 10px;
|
||||
}
|
||||
.noUi-handle {
|
||||
box-sizing: border-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
cursor: ew-resize;
|
||||
border-radius: 100%;
|
||||
transition: all 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
margin-left: 5px;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.noUi-horizontal.noUi-extended {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.noUi-horizontal.noUi-extended .noUi-origin {
|
||||
right: -15px;
|
||||
}
|
||||
.noUi-background {
|
||||
height: 2px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.noUi-origin {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: 2px;
|
||||
background: #c8c8c8;
|
||||
&[style^="left: 0"] .noUi-handle {
|
||||
background-color: #fff;
|
||||
border: 2px solid #c8c8c8;
|
||||
&.noUi-active {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noUi-target {
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
.noUi-horizontal {
|
||||
height: 2px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.noUi-vertical {
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
margin: 0 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.noUi-handle.noUi-active {
|
||||
transform: scale3d(2.5, 2.5, 1);
|
||||
}
|
||||
[disabled].noUi-slider{
|
||||
opacity: 0.5;
|
||||
}
|
||||
[disabled] .noUi-handle {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.slider {
|
||||
background: #c8c8c8;
|
||||
}
|
||||
|
||||
.slider {
|
||||
@include variations(unquote(".slider"), unquote(".noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(".slider"), unquote(" .noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(".slider"), unquote(" .noUi-handle"), background-color, $brand-primary);
|
||||
@include variations(unquote(".slider"), unquote(" .noUi-handle"), border-color, $brand-primary);
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
|
||||
|
||||
// Support for Selectize plugin
|
||||
// http://brianreavis.github.io/selectize.js/
|
||||
|
||||
.selectize-control.single, .selectize-control.multi {
|
||||
padding: 0;
|
||||
.selectize-input, .selectize-input.input-active {
|
||||
|
||||
cursor: text;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
.has-items {
|
||||
padding: 0;
|
||||
}
|
||||
&:after {
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
font-size: 7px;
|
||||
content: "\e894";
|
||||
font-family: "Material-Design-Icons";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
input {
|
||||
font-size: 14px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
&.label-floating-fix input {
|
||||
opacity: 0;
|
||||
}
|
||||
> div, > .item {
|
||||
display: inline-block;
|
||||
margin: 0 8px 3px 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
&:after {
|
||||
content: ",";
|
||||
}
|
||||
&:last-of-type:after {
|
||||
content: "";
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.selectize-dropdown {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
border: 0;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
height: auto;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
border-radius: $border-radius-base;
|
||||
padding: 0;
|
||||
margin-top: 3px;
|
||||
.active {
|
||||
background-color: inherit;
|
||||
}
|
||||
.highlight {
|
||||
background-color: #d5d8ff;
|
||||
}
|
||||
.selected, .selected.active {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
[data-selectable], .optgroup-header {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.dropdown-active ~ .selectize-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
|
||||
|
||||
// Support for SnackbarJS plugin
|
||||
// https://github.com/FezVrasta/snackbarjs
|
||||
|
||||
.snackbar {
|
||||
// Style
|
||||
background-color: #323232;
|
||||
color: $mdb-text-color-light;
|
||||
font-size: 14px;
|
||||
border-radius: $border-radius-base;
|
||||
@include shadow-z-1;
|
||||
|
||||
// Animation
|
||||
height: 0;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transform: translateY(200%);
|
||||
}
|
||||
|
||||
.snackbar.snackbar-opened {
|
||||
// Style
|
||||
padding: 14px 15px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
// Animation
|
||||
height: auto;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
// Variations
|
||||
.snackbar.toast {
|
||||
border-radius: 200px;
|
||||
}
|
||||
10
scss/mixins/_inputs.scss
Normal file
10
scss/mixins/_inputs.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// Placeholder text
|
||||
@mixin material-placeholder() {
|
||||
&::placeholder {
|
||||
@content;
|
||||
}
|
||||
// Firefox
|
||||
//&::-moz-placeholder {@content; } // Firefox
|
||||
//&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
||||
//&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
||||
}
|
||||
78
scss/mixins/_shadows.scss
Normal file
78
scss/mixins/_shadows.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
@mixin shadow-z-1() {
|
||||
box-shadow: 0 1px 6px 0 rgba($black, 0.12),
|
||||
0 1px 6px 0 rgba($black, 0.12);
|
||||
}
|
||||
|
||||
@mixin shadow-z-1-hover() {
|
||||
box-shadow: 0 5px 11px 0 rgba($black, 0.18),
|
||||
0 4px 15px 0 rgba($black, 0.15);
|
||||
}
|
||||
|
||||
@mixin shadow-z-2() {
|
||||
box-shadow: 0 8px 17px 0 rgba($black, 0.2),
|
||||
0 6px 20px 0 rgba($black, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-3() {
|
||||
box-shadow: 0 12px 15px 0 rgba($black, 0.24),
|
||||
0 17px 50px 0 rgba($black, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-4() {
|
||||
box-shadow: 0 16px 28px 0 rgba($black, 0.22),
|
||||
0 25px 55px 0 rgba($black, 0.21);
|
||||
}
|
||||
|
||||
@mixin shadow-z-5() {
|
||||
box-shadow: 0 27px 24px 0 rgba($black, 0.2),
|
||||
0 40px 77px 0 rgba($black, 0.22);
|
||||
}
|
||||
|
||||
// Shadows (from mdl http://www.getmdl.io/)
|
||||
|
||||
// Focus shadow mixin.
|
||||
@mixin focus-shadow() {
|
||||
box-shadow: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36);
|
||||
}
|
||||
|
||||
@mixin shadow-2dp() {
|
||||
box-shadow: 0 2px 2px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 1px -2px rgba($black, $mdb-shadow-key-umbra-opacity),
|
||||
0 1px 5px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-3dp() {
|
||||
box-shadow: 0 3px 4px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 3px -2px rgba($black, $mdb-shadow-key-umbra-opacity),
|
||||
0 1px 8px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-4dp() {
|
||||
box-shadow: 0 4px 5px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 1px 10px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 2px 4px -1px rgba($black, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-6dp() {
|
||||
box-shadow: 0 6px 10px 0 rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 1px 18px 0 rgba($black, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 3px 5px -1px rgba($black, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-8dp() {
|
||||
box-shadow: 0 8px 10px 1px rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 3px 14px 2px rgba($black, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 5px 5px -3px rgba($black, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-16dp() {
|
||||
box-shadow: 0 16px 24px 2px rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 6px 30px 5px rgba($black, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 8px 10px -5px rgba($black, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
||||
@mixin shadow-24dp() {
|
||||
box-shadow: 0 9px 46px 8px rgba($black, $mdb-shadow-key-penumbra-opacity),
|
||||
0 11px 15px -7px rgba($black, $mdb-shadow-ambient-shadow-opacity),
|
||||
0 24px 38px 3px rgba($black, $mdb-shadow-key-umbra-opacity);
|
||||
}
|
||||
|
|
@ -10,10 +10,10 @@
|
|||
// Deprecated in Compass 0.13
|
||||
@warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
|
||||
}
|
||||
|
||||
@if $color == null {
|
||||
@return null;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
$color-brightness: brightness($color);
|
||||
$dark-text-brightness: brightness($dark);
|
||||
$light-text-brightness: brightness($light);
|
||||
|
|
@ -24,8 +24,7 @@
|
|||
@function brightness($color) {
|
||||
@if type-of($color) == color {
|
||||
@return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
@return unquote("brightness(#{$color})");
|
||||
}
|
||||
}
|
||||
18
scss/plugins/_plugin-dropdownjs.scss
Normal file
18
scss/plugins/_plugin-dropdownjs.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
//.dropdownjs:after {
|
||||
// right: 5px;
|
||||
// top: 3px;
|
||||
// font-size: 25px;
|
||||
// position: absolute;
|
||||
// content: "\e8ac";
|
||||
// font-family: "Material-Design-Icons";
|
||||
// speak: none;
|
||||
// font-style: normal;
|
||||
// font-weight: normal;
|
||||
// font-variant: normal;
|
||||
// text-transform: none;
|
||||
// line-height: 1;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
// pointer-events: none;
|
||||
// color: #757575;
|
||||
//}
|
||||
130
scss/plugins/_plugin-nouislider.scss
Normal file
130
scss/plugins/_plugin-nouislider.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
//
|
||||
//.noUi-target,
|
||||
//.noUi-target * {
|
||||
// -webkit-touch-callout: none;
|
||||
// -ms-touch-action: none;
|
||||
// user-select: none;
|
||||
// box-sizing: border-box;
|
||||
//}
|
||||
//
|
||||
//.noUi-base {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: relative;
|
||||
//}
|
||||
//
|
||||
//.noUi-origin {
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
//}
|
||||
//
|
||||
//.noUi-handle {
|
||||
// position: relative;
|
||||
// z-index: 1;
|
||||
// box-sizing: border-box;
|
||||
//}
|
||||
//
|
||||
//.noUi-stacking .noUi-handle {
|
||||
// z-index: 10;
|
||||
//}
|
||||
//
|
||||
////.noUi-stacking + .noUi-origin {
|
||||
//// *z-index: -1;
|
||||
////} WARNING: Property with star prefix found. Checks for the star property hack (targets IE6/7) (star-property-hack) Browsers: All
|
||||
//.noUi-state-tap .noUi-origin {
|
||||
// transition: left 0.3s, top 0.3s;
|
||||
//}
|
||||
//
|
||||
//.noUi-state-drag * {
|
||||
// cursor: inherit !important;
|
||||
//}
|
||||
//
|
||||
//.noUi-horizontal {
|
||||
// height: 10px;
|
||||
//}
|
||||
//
|
||||
//.noUi-handle {
|
||||
// box-sizing: border-box;
|
||||
// width: 12px;
|
||||
// height: 12px;
|
||||
// left: -10px;
|
||||
// top: -5px;
|
||||
// cursor: ew-resize;
|
||||
// border-radius: 100%;
|
||||
// transition: all 0.2s ease-out;
|
||||
// border: 1px solid;
|
||||
//}
|
||||
//
|
||||
//.noUi-vertical .noUi-handle {
|
||||
// margin-left: 5px;
|
||||
// cursor: ns-resize;
|
||||
//}
|
||||
//
|
||||
//.noUi-horizontal.noUi-extended {
|
||||
// padding: 0 15px;
|
||||
//}
|
||||
//
|
||||
//.noUi-horizontal.noUi-extended .noUi-origin {
|
||||
// right: -15px;
|
||||
//}
|
||||
//
|
||||
//.noUi-background {
|
||||
// height: 2px;
|
||||
// margin: 20px 0;
|
||||
//}
|
||||
//
|
||||
//.noUi-origin {
|
||||
// margin: 0;
|
||||
// border-radius: 0;
|
||||
// height: 2px;
|
||||
// background: #c8c8c8;
|
||||
// &[style^="left: 0"] .noUi-handle {
|
||||
// background-color: #fff;
|
||||
// border: 2px solid #c8c8c8;
|
||||
// &.noUi-active {
|
||||
// border-width: 1px;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.noUi-target {
|
||||
// border-radius: $border-radius-base;
|
||||
//}
|
||||
//
|
||||
//.noUi-horizontal {
|
||||
// height: 2px;
|
||||
// margin: 15px 0;
|
||||
//}
|
||||
//
|
||||
//.noUi-vertical {
|
||||
// height: 100%;
|
||||
// width: 2px;
|
||||
// margin: 0 15px;
|
||||
// display: inline-block;
|
||||
//}
|
||||
//
|
||||
//.noUi-handle.noUi-active {
|
||||
// transform: scale3d(2.5, 2.5, 1);
|
||||
//}
|
||||
//
|
||||
//[disabled].noUi-slider {
|
||||
// opacity: 0.5;
|
||||
//}
|
||||
//
|
||||
//[disabled] .noUi-handle {
|
||||
// cursor: not-allowed;
|
||||
//}
|
||||
//
|
||||
//.slider {
|
||||
// background: #c8c8c8;
|
||||
//}
|
||||
//
|
||||
//.slider {
|
||||
// @include variations(unquote(".slider"), unquote(".noUi-connect"), background-color, $brand-primary);
|
||||
// @include variations(unquote(".slider"), unquote(" .noUi-connect"), background-color, $brand-primary);
|
||||
// @include variations(unquote(".slider"), unquote(" .noUi-handle"), background-color, $brand-primary);
|
||||
// @include variations(unquote(".slider"), unquote(" .noUi-handle"), border-color, $brand-primary);
|
||||
//}
|
||||
91
scss/plugins/_plugin-selectize.scss
Normal file
91
scss/plugins/_plugin-selectize.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
//// Support for Selectize plugin
|
||||
//// http://brianreavis.github.io/selectize.js/
|
||||
//
|
||||
//.selectize-control.single, .selectize-control.multi {
|
||||
// padding: 0;
|
||||
// .selectize-input, .selectize-input.input-active {
|
||||
//
|
||||
// cursor: text;
|
||||
// background: transparent;
|
||||
// box-shadow: none;
|
||||
// border: 0;
|
||||
// padding: 0;
|
||||
// height: 100%;
|
||||
// font-size: 14px;
|
||||
// line-height: 30px;
|
||||
// .has-items {
|
||||
// padding: 0;
|
||||
// }
|
||||
// &:after {
|
||||
// right: 5px;
|
||||
// position: absolute;
|
||||
// font-size: 7px;
|
||||
// content: "\e894";
|
||||
// font-family: "Material-Design-Icons";
|
||||
// speak: none;
|
||||
// font-style: normal;
|
||||
// font-weight: normal;
|
||||
// font-variant: normal;
|
||||
// text-transform: none;
|
||||
// line-height: 4;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// -moz-osx-font-smoothing: grayscale;
|
||||
// }
|
||||
// input {
|
||||
// font-size: 14px;
|
||||
// outline: 0;
|
||||
// border: 0;
|
||||
// background: transparent;
|
||||
// }
|
||||
// &.label-floating-fix input {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// > div, > .item {
|
||||
// display: inline-block;
|
||||
// margin: 0 8px 3px 0;
|
||||
// padding: 0;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// &:after {
|
||||
// content: ",";
|
||||
// }
|
||||
// &:last-of-type:after {
|
||||
// content: "";
|
||||
// }
|
||||
// &.active {
|
||||
// font-weight: bold;
|
||||
// background: transparent;
|
||||
// border: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .selectize-dropdown {
|
||||
// position: absolute;
|
||||
// z-index: 1000;
|
||||
// border: 0;
|
||||
// width: 100% !important;
|
||||
// left: 0 !important;
|
||||
// height: auto;
|
||||
// background-color: #FFF;
|
||||
// box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24);
|
||||
// border-radius: $border-radius-base;
|
||||
// padding: 0;
|
||||
// margin-top: 3px;
|
||||
// .active {
|
||||
// background-color: inherit;
|
||||
// }
|
||||
// .highlight {
|
||||
// background-color: #d5d8ff;
|
||||
// }
|
||||
// .selected, .selected.active {
|
||||
// background-color: #EEEEEE;
|
||||
// }
|
||||
// [data-selectable], .optgroup-header {
|
||||
// padding: 10px 20px;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
// .dropdown-active ~ .selectize-dropdown {
|
||||
// display: block;
|
||||
// }
|
||||
//}
|
||||
32
scss/plugins/_plugin-snackbarjs.scss
Normal file
32
scss/plugins/_plugin-snackbarjs.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
//// Support for SnackbarJS plugin
|
||||
//// https://github.com/FezVrasta/snackbarjs
|
||||
//
|
||||
//.snackbar {
|
||||
// // Style
|
||||
// background-color: #323232;
|
||||
// color: $mdb-text-color-light;
|
||||
// font-size: 14px;
|
||||
// border-radius: $border-radius-base;
|
||||
// @include shadow-z-1;
|
||||
//
|
||||
// // Animation
|
||||
// height: 0;
|
||||
// transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||
// transform: translateY(200%);
|
||||
//}
|
||||
//
|
||||
//.snackbar.snackbar-opened {
|
||||
// // Style
|
||||
// padding: 14px 15px;
|
||||
// margin-bottom: 20px;
|
||||
//
|
||||
// // Animation
|
||||
// height: auto;
|
||||
// transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
// transform: none;
|
||||
//}
|
||||
//
|
||||
//// Variations
|
||||
//.snackbar.toast {
|
||||
// border-radius: 200px;
|
||||
//}
|
||||
|
|
@ -33,10 +33,10 @@
|
|||
// "red-700": (name: "red", color: $red-700, number: "-700"),
|
||||
// "red-800": (name: "red", color: $red-800, number: "-800"),
|
||||
// "red-900": (name: "red", color: $red-900, number: "-900"),
|
||||
// "red-A100": (name: "red", color: $red-A100, number: "-A100"),
|
||||
// "red-A200": (name: "red", color: $red-A200, number: "-A200"),
|
||||
// "red-A400": (name: "red", color: $red-A400, number: "-A400"),
|
||||
// "red-A700": (name: "red", color: $red-A700, number: "-A700"),
|
||||
// "red-a100": (name: "red", color: $red-a100, number: "-a100"),
|
||||
// "red-a200": (name: "red", color: $red-a200, number: "-a200"),
|
||||
// "red-a400": (name: "red", color: $red-a400, number: "-a400"),
|
||||
// "red-a700": (name: "red", color: $red-a700, number: "-a700"),
|
||||
// "red": (name: "red", color: $red, number: ""),
|
||||
// "pink-50": (name: "pink", color: $pink-50, number: "-50"),
|
||||
// "pink-100": (name: "pink", color: $pink-100, number: "-100"),
|
||||
|
|
@ -48,10 +48,10 @@
|
|||
// "pink-700": (name: "pink", color: $pink-700, number: "-700"),
|
||||
// "pink-800": (name: "pink", color: $pink-800, number: "-800"),
|
||||
// "pink-900": (name: "pink", color: $pink-900, number: "-900"),
|
||||
// "pink-A100": (name: "pink", color: $pink-A100, number: "-A100"),
|
||||
// "pink-A200": (name: "pink", color: $pink-A200, number: "-A200"),
|
||||
// "pink-A400": (name: "pink", color: $pink-A400, number: "-A400"),
|
||||
// "pink-A700": (name: "pink", color: $pink-A700, number: "-A700"),
|
||||
// "pink-a100": (name: "pink", color: $pink-a100, number: "-a100"),
|
||||
// "pink-a200": (name: "pink", color: $pink-a200, number: "-a200"),
|
||||
// "pink-a400": (name: "pink", color: $pink-a400, number: "-a400"),
|
||||
// "pink-a700": (name: "pink", color: $pink-a700, number: "-a700"),
|
||||
// "pink": (name: "pink", color: $pink, number: ""),
|
||||
// "purple-50": (name: "purple", color: $purple-50, number: "-50"),
|
||||
// "purple-100": (name: "purple", color: $purple-100, number: "-100"),
|
||||
|
|
@ -63,10 +63,10 @@
|
|||
// "purple-700": (name: "purple", color: $purple-700, number: "-700"),
|
||||
// "purple-800": (name: "purple", color: $purple-800, number: "-800"),
|
||||
// "purple-900": (name: "purple", color: $purple-900, number: "-900"),
|
||||
// "purple-A100": (name: "purple", color: $purple-A100, number: "-A100"),
|
||||
// "purple-A200": (name: "purple", color: $purple-A200, number: "-A200"),
|
||||
// "purple-A400": (name: "purple", color: $purple-A400, number: "-A400"),
|
||||
// "purple-A700": (name: "purple", color: $purple-A700, number: "-A700"),
|
||||
// "purple-a100": (name: "purple", color: $purple-a100, number: "-a100"),
|
||||
// "purple-a200": (name: "purple", color: $purple-a200, number: "-a200"),
|
||||
// "purple-a400": (name: "purple", color: $purple-a400, number: "-a400"),
|
||||
// "purple-a700": (name: "purple", color: $purple-a700, number: "-a700"),
|
||||
// "purple": (name: "purple", color: $purple, number: ""),
|
||||
// "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"),
|
||||
// "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"),
|
||||
|
|
@ -78,10 +78,10 @@
|
|||
// "deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"),
|
||||
// "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"),
|
||||
// "deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"),
|
||||
// "deep-purple-A100": (name: "deep-purple", color: $deep-purple-A100, number: "-A100"),
|
||||
// "deep-purple-A200": (name: "deep-purple", color: $deep-purple-A200, number: "-A200"),
|
||||
// "deep-purple-A400": (name: "deep-purple", color: $deep-purple-A400, number: "-A400"),
|
||||
// "deep-purple-A700": (name: "deep-purple", color: $deep-purple-A700, number: "-A700"),
|
||||
// "deep-purple-a100": (name: "deep-purple", color: $deep-purple-a100, number: "-a100"),
|
||||
// "deep-purple-a200": (name: "deep-purple", color: $deep-purple-a200, number: "-a200"),
|
||||
// "deep-purple-a400": (name: "deep-purple", color: $deep-purple-a400, number: "-a400"),
|
||||
// "deep-purple-a700": (name: "deep-purple", color: $deep-purple-a700, number: "-a700"),
|
||||
// "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""),
|
||||
// "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"),
|
||||
// "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"),
|
||||
|
|
@ -93,10 +93,10 @@
|
|||
// "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"),
|
||||
// "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"),
|
||||
// "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"),
|
||||
// "indigo-A100": (name: "indigo", color: $indigo-A100, number: "-A100"),
|
||||
// "indigo-A200": (name: "indigo", color: $indigo-A200, number: "-A200"),
|
||||
// "indigo-A400": (name: "indigo", color: $indigo-A400, number: "-A400"),
|
||||
// "indigo-A700": (name: "indigo", color: $indigo-A700, number: "-A700"),
|
||||
// "indigo-a100": (name: "indigo", color: $indigo-a100, number: "-a100"),
|
||||
// "indigo-a200": (name: "indigo", color: $indigo-a200, number: "-a200"),
|
||||
// "indigo-a400": (name: "indigo", color: $indigo-a400, number: "-a400"),
|
||||
// "indigo-a700": (name: "indigo", color: $indigo-a700, number: "-a700"),
|
||||
// "indigo": (name: "indigo", color: $indigo, number: ""),
|
||||
// "blue-50": (name: "blue", color: $blue-50, number: "-50"),
|
||||
// "blue-100": (name: "blue", color: $blue-100, number: "-100"),
|
||||
|
|
@ -108,10 +108,10 @@
|
|||
// "blue-700": (name: "blue", color: $blue-700, number: "-700"),
|
||||
// "blue-800": (name: "blue", color: $blue-800, number: "-800"),
|
||||
// "blue-900": (name: "blue", color: $blue-900, number: "-900"),
|
||||
// "blue-A100": (name: "blue", color: $blue-A100, number: "-A100"),
|
||||
// "blue-A200": (name: "blue", color: $blue-A200, number: "-A200"),
|
||||
// "blue-A400": (name: "blue", color: $blue-A400, number: "-A400"),
|
||||
// "blue-A700": (name: "blue", color: $blue-A700, number: "-A700"),
|
||||
// "blue-a100": (name: "blue", color: $blue-a100, number: "-a100"),
|
||||
// "blue-a200": (name: "blue", color: $blue-a200, number: "-a200"),
|
||||
// "blue-a400": (name: "blue", color: $blue-a400, number: "-a400"),
|
||||
// "blue-a700": (name: "blue", color: $blue-a700, number: "-a700"),
|
||||
// "blue": (name: "blue", color: $blue, number: ""),
|
||||
// "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"),
|
||||
// "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"),
|
||||
|
|
@ -123,10 +123,10 @@
|
|||
// "light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"),
|
||||
// "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"),
|
||||
// "light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"),
|
||||
// "light-blue-A100": (name: "light-blue", color: $light-blue-A100, number: "-A100"),
|
||||
// "light-blue-A200": (name: "light-blue", color: $light-blue-A200, number: "-A200"),
|
||||
// "light-blue-A400": (name: "light-blue", color: $light-blue-A400, number: "-A400"),
|
||||
// "light-blue-A700": (name: "light-blue", color: $light-blue-A700, number: "-A700"),
|
||||
// "light-blue-a100": (name: "light-blue", color: $light-blue-a100, number: "-a100"),
|
||||
// "light-blue-a200": (name: "light-blue", color: $light-blue-a200, number: "-a200"),
|
||||
// "light-blue-a400": (name: "light-blue", color: $light-blue-a400, number: "-a400"),
|
||||
// "light-blue-a700": (name: "light-blue", color: $light-blue-a700, number: "-a700"),
|
||||
// "light-blue": (name: "light-blue", color: $light-blue, number: ""),
|
||||
// "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"),
|
||||
// "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"),
|
||||
|
|
@ -138,10 +138,10 @@
|
|||
// "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"),
|
||||
// "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"),
|
||||
// "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"),
|
||||
// "cyan-A100": (name: "cyan", color: $cyan-A100, number: "-A100"),
|
||||
// "cyan-A200": (name: "cyan", color: $cyan-A200, number: "-A200"),
|
||||
// "cyan-A400": (name: "cyan", color: $cyan-A400, number: "-A400"),
|
||||
// "cyan-A700": (name: "cyan", color: $cyan-A700, number: "-A700"),
|
||||
// "cyan-a100": (name: "cyan", color: $cyan-a100, number: "-a100"),
|
||||
// "cyan-a200": (name: "cyan", color: $cyan-a200, number: "-a200"),
|
||||
// "cyan-a400": (name: "cyan", color: $cyan-a400, number: "-a400"),
|
||||
// "cyan-a700": (name: "cyan", color: $cyan-a700, number: "-a700"),
|
||||
// "cyan": (name: "cyan", color: $cyan, number: ""),
|
||||
// "teal-50": (name: "teal", color: $teal-50, number: "-50"),
|
||||
// "teal-100": (name: "teal", color: $teal-100, number: "-100"),
|
||||
|
|
@ -153,10 +153,10 @@
|
|||
// "teal-700": (name: "teal", color: $teal-700, number: "-700"),
|
||||
// "teal-800": (name: "teal", color: $teal-800, number: "-800"),
|
||||
// "teal-900": (name: "teal", color: $teal-900, number: "-900"),
|
||||
// "teal-A100": (name: "teal", color: $teal-A100, number: "-A100"),
|
||||
// "teal-A200": (name: "teal", color: $teal-A200, number: "-A200"),
|
||||
// "teal-A400": (name: "teal", color: $teal-A400, number: "-A400"),
|
||||
// "teal-A700": (name: "teal", color: $teal-A700, number: "-A700"),
|
||||
// "teal-a100": (name: "teal", color: $teal-a100, number: "-a100"),
|
||||
// "teal-a200": (name: "teal", color: $teal-a200, number: "-a200"),
|
||||
// "teal-a400": (name: "teal", color: $teal-a400, number: "-a400"),
|
||||
// "teal-a700": (name: "teal", color: $teal-a700, number: "-a700"),
|
||||
// "teal": (name: "teal", color: $teal, number: ""),
|
||||
// "green-50": (name: "green", color: $green-50, number: "-50"),
|
||||
// "green-100": (name: "green", color: $green-100, number: "-100"),
|
||||
|
|
@ -168,10 +168,10 @@
|
|||
// "green-700": (name: "green", color: $green-700, number: "-700"),
|
||||
// "green-800": (name: "green", color: $green-800, number: "-800"),
|
||||
// "green-900": (name: "green", color: $green-900, number: "-900"),
|
||||
// "green-A100": (name: "green", color: $green-A100, number: "-A100"),
|
||||
// "green-A200": (name: "green", color: $green-A200, number: "-A200"),
|
||||
// "green-A400": (name: "green", color: $green-A400, number: "-A400"),
|
||||
// "green-A700": (name: "green", color: $green-A700, number: "-A700"),
|
||||
// "green-a100": (name: "green", color: $green-a100, number: "-a100"),
|
||||
// "green-a200": (name: "green", color: $green-a200, number: "-a200"),
|
||||
// "green-a400": (name: "green", color: $green-a400, number: "-a400"),
|
||||
// "green-a700": (name: "green", color: $green-a700, number: "-a700"),
|
||||
// "green": (name: "green", color: $green, number: ""),
|
||||
// "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"),
|
||||
// "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"),
|
||||
|
|
@ -183,10 +183,10 @@
|
|||
// "light-green-700": (name: "light-green", color: $light-green-700, number: "-700"),
|
||||
// "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"),
|
||||
// "light-green-900": (name: "light-green", color: $light-green-900, number: "-900"),
|
||||
// "light-green-A100": (name: "light-green", color: $light-green-A100, number: "-A100"),
|
||||
// "light-green-A200": (name: "light-green", color: $light-green-A200, number: "-A200"),
|
||||
// "light-green-A400": (name: "light-green", color: $light-green-A400, number: "-A400"),
|
||||
// "light-green-A700": (name: "light-green", color: $light-green-A700, number: "-A700"),
|
||||
// "light-green-a100": (name: "light-green", color: $light-green-a100, number: "-a100"),
|
||||
// "light-green-a200": (name: "light-green", color: $light-green-a200, number: "-a200"),
|
||||
// "light-green-a400": (name: "light-green", color: $light-green-a400, number: "-a400"),
|
||||
// "light-green-a700": (name: "light-green", color: $light-green-a700, number: "-a700"),
|
||||
// "light-green": (name: "light-green", color: $light-green, number: ""),
|
||||
// "lime-50": (name: "lime", color: $lime-50, number: "-50"),
|
||||
// "lime-100": (name: "lime", color: $lime-100, number: "-100"),
|
||||
|
|
@ -198,10 +198,10 @@
|
|||
// "lime-700": (name: "lime", color: $lime-700, number: "-700"),
|
||||
// "lime-800": (name: "lime", color: $lime-800, number: "-800"),
|
||||
// "lime-900": (name: "lime", color: $lime-900, number: "-900"),
|
||||
// "lime-A100": (name: "lime", color: $lime-A100, number: "-A100"),
|
||||
// "lime-A200": (name: "lime", color: $lime-A200, number: "-A200"),
|
||||
// "lime-A400": (name: "lime", color: $lime-A400, number: "-A400"),
|
||||
// "lime-A700": (name: "lime", color: $lime-A700, number: "-A700"),
|
||||
// "lime-a100": (name: "lime", color: $lime-a100, number: "-a100"),
|
||||
// "lime-a200": (name: "lime", color: $lime-a200, number: "-a200"),
|
||||
// "lime-a400": (name: "lime", color: $lime-a400, number: "-a400"),
|
||||
// "lime-a700": (name: "lime", color: $lime-a700, number: "-a700"),
|
||||
// "lime": (name: "lime", color: $lime, number: ""),
|
||||
// "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"),
|
||||
// "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"),
|
||||
|
|
@ -213,10 +213,10 @@
|
|||
// "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"),
|
||||
// "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"),
|
||||
// "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"),
|
||||
// "yellow-A100": (name: "yellow", color: $yellow-A100, number: "-A100"),
|
||||
// "yellow-A200": (name: "yellow", color: $yellow-A200, number: "-A200"),
|
||||
// "yellow-A400": (name: "yellow", color: $yellow-A400, number: "-A400"),
|
||||
// "yellow-A700": (name: "yellow", color: $yellow-A700, number: "-A700"),
|
||||
// "yellow-a100": (name: "yellow", color: $yellow-a100, number: "-a100"),
|
||||
// "yellow-a200": (name: "yellow", color: $yellow-a200, number: "-a200"),
|
||||
// "yellow-a400": (name: "yellow", color: $yellow-a400, number: "-a400"),
|
||||
// "yellow-a700": (name: "yellow", color: $yellow-a700, number: "-a700"),
|
||||
// "yellow": (name: "yellow", color: $yellow, number: ""),
|
||||
// "amber-50": (name: "amber", color: $amber-50, number: "-50"),
|
||||
// "amber-100": (name: "amber", color: $amber-100, number: "-100"),
|
||||
|
|
@ -228,10 +228,10 @@
|
|||
// "amber-700": (name: "amber", color: $amber-700, number: "-700"),
|
||||
// "amber-800": (name: "amber", color: $amber-800, number: "-800"),
|
||||
// "amber-900": (name: "amber", color: $amber-900, number: "-900"),
|
||||
// "amber-A100": (name: "amber", color: $amber-A100, number: "-A100"),
|
||||
// "amber-A200": (name: "amber", color: $amber-A200, number: "-A200"),
|
||||
// "amber-A400": (name: "amber", color: $amber-A400, number: "-A400"),
|
||||
// "amber-A700": (name: "amber", color: $amber-A700, number: "-A700"),
|
||||
// "amber-a100": (name: "amber", color: $amber-a100, number: "-a100"),
|
||||
// "amber-a200": (name: "amber", color: $amber-a200, number: "-a200"),
|
||||
// "amber-a400": (name: "amber", color: $amber-a400, number: "-a400"),
|
||||
// "amber-a700": (name: "amber", color: $amber-a700, number: "-a700"),
|
||||
// "amber": (name: "amber", color: $amber, number: ""),
|
||||
// "orange-50": (name: "orange", color: $orange-50, number: "-50"),
|
||||
// "orange-100": (name: "orange", color: $orange-100, number: "-100"),
|
||||
|
|
@ -243,10 +243,10 @@
|
|||
// "orange-700": (name: "orange", color: $orange-700, number: "-700"),
|
||||
// "orange-800": (name: "orange", color: $orange-800, number: "-800"),
|
||||
// "orange-900": (name: "orange", color: $orange-900, number: "-900"),
|
||||
// "orange-A100": (name: "orange", color: $orange-A100, number: "-A100"),
|
||||
// "orange-A200": (name: "orange", color: $orange-A200, number: "-A200"),
|
||||
// "orange-A400": (name: "orange", color: $orange-A400, number: "-A400"),
|
||||
// "orange-A700": (name: "orange", color: $orange-A700, number: "-A700"),
|
||||
// "orange-a100": (name: "orange", color: $orange-a100, number: "-a100"),
|
||||
// "orange-a200": (name: "orange", color: $orange-a200, number: "-a200"),
|
||||
// "orange-a400": (name: "orange", color: $orange-a400, number: "-a400"),
|
||||
// "orange-a700": (name: "orange", color: $orange-a700, number: "-a700"),
|
||||
// "orange": (name: "orange", color: $orange, number: ""),
|
||||
// "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"),
|
||||
// "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"),
|
||||
|
|
@ -258,10 +258,10 @@
|
|||
// "deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"),
|
||||
// "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"),
|
||||
// "deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"),
|
||||
// "deep-orange-A100": (name: "deep-orange", color: $deep-orange-A100, number: "-A100"),
|
||||
// "deep-orange-A200": (name: "deep-orange", color: $deep-orange-A200, number: "-A200"),
|
||||
// "deep-orange-A400": (name: "deep-orange", color: $deep-orange-A400, number: "-A400"),
|
||||
// "deep-orange-A700": (name: "deep-orange", color: $deep-orange-A700, number: "-A700"),
|
||||
// "deep-orange-a100": (name: "deep-orange", color: $deep-orange-a100, number: "-a100"),
|
||||
// "deep-orange-a200": (name: "deep-orange", color: $deep-orange-a200, number: "-a200"),
|
||||
// "deep-orange-a400": (name: "deep-orange", color: $deep-orange-a400, number: "-a400"),
|
||||
// "deep-orange-a700": (name: "deep-orange", color: $deep-orange-a700, number: "-a700"),
|
||||
// "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""),
|
||||
// "brown-50": (name: "brown", color: $brown-50, number: "-50"),
|
||||
// "brown-100": (name: "brown", color: $brown-100, number: "-100"),
|
||||
|
|
@ -273,10 +273,10 @@
|
|||
// "brown-700": (name: "brown", color: $brown-700, number: "-700"),
|
||||
// "brown-800": (name: "brown", color: $brown-800, number: "-800"),
|
||||
// "brown-900": (name: "brown", color: $brown-900, number: "-900"),
|
||||
// "brown-A100": (name: "brown", color: $brown-A100, number: "-A100"),
|
||||
// "brown-A200": (name: "brown", color: $brown-A200, number: "-A200"),
|
||||
// "brown-A400": (name: "brown", color: $brown-A400, number: "-A400"),
|
||||
// "brown-A700": (name: "brown", color: $brown-A700, number: "-A700"),
|
||||
// "brown-a100": (name: "brown", color: $brown-a100, number: "-a100"),
|
||||
// "brown-a200": (name: "brown", color: $brown-a200, number: "-a200"),
|
||||
// "brown-a400": (name: "brown", color: $brown-a400, number: "-a400"),
|
||||
// "brown-a700": (name: "brown", color: $brown-a700, number: "-a700"),
|
||||
// "brown": (name: "brown", color: $brown, number: ""),
|
||||
// "grey-50": (name: "grey", color: $grey-50, number: "-50"),
|
||||
// "grey-100": (name: "grey", color: $grey-100, number: "-100"),
|
||||
|
|
@ -288,10 +288,10 @@
|
|||
// "grey-700": (name: "grey", color: $grey-700, number: "-700"),
|
||||
// "grey-800": (name: "grey", color: $grey-800, number: "-800"),
|
||||
// "grey-900": (name: "grey", color: $grey-900, number: "-900"),
|
||||
// "grey-A100": (name: "grey", color: $grey-A100, number: "-A100"),
|
||||
// "grey-A200": (name: "grey", color: $grey-A200, number: "-A200"),
|
||||
// "grey-A400": (name: "grey", color: $grey-A400, number: "-A400"),
|
||||
// "grey-A700": (name: "grey", color: $grey-A700, number: "-A700"),
|
||||
// "grey-a100": (name: "grey", color: $grey-a100, number: "-a100"),
|
||||
// "grey-a200": (name: "grey", color: $grey-a200, number: "-a200"),
|
||||
// "grey-a400": (name: "grey", color: $grey-a400, number: "-a400"),
|
||||
// "grey-a700": (name: "grey", color: $grey-a700, number: "-a700"),
|
||||
// "grey": (name: "grey", color: $grey, number: ""),
|
||||
// "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"),
|
||||
// "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"),
|
||||
|
|
@ -303,9 +303,9 @@
|
|||
// "blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"),
|
||||
// "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"),
|
||||
// "blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"),
|
||||
// "blue-grey-A100": (name: "blue-grey", color: $blue-grey-A100, number: "-A100"),
|
||||
// "blue-grey-A200": (name: "blue-grey", color: $blue-grey-A200, number: "-A200"),
|
||||
// "blue-grey-A400": (name: "blue-grey", color: $blue-grey-A400, number: "-A400"),
|
||||
// "blue-grey-A700": (name: "blue-grey", color: $blue-grey-A700, number: "-A700"),
|
||||
// "blue-grey-a100": (name: "blue-grey", color: $blue-grey-a100, number: "-a100"),
|
||||
// "blue-grey-a200": (name: "blue-grey", color: $blue-grey-a200, number: "-a200"),
|
||||
// "blue-grey-a400": (name: "blue-grey", color: $blue-grey-a400, number: "-a400"),
|
||||
// "blue-grey-a700": (name: "blue-grey", color: $blue-grey-a700, number: "-a700"),
|
||||
// "blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
|
||||
//);
|
||||
|
|
@ -1,39 +1,34 @@
|
|||
//
|
||||
//To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
|
||||
//
|
||||
//Then, run this script to get the list@mixin (function(){
|
||||
// var colors = {}, main = {};
|
||||
// $(".color-group")@mixin each(function(){
|
||||
// var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
|
||||
// colors[color] = {};
|
||||
//
|
||||
// $(this)@mixin find(".color").not(".main-color").each(function(){
|
||||
// var shade = $(this).find(".shade").text().trim(),
|
||||
// hex = $(this).find(".hex").text().trim();
|
||||
//
|
||||
// colors[color][shade] = hex;
|
||||
// });
|
||||
// main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
|
||||
//
|
||||
// });
|
||||
// var LESS = "";
|
||||
// $@mixin each(colors, function(name, shades){
|
||||
// LESS += "\n\n";
|
||||
// $@mixin each(shades, function(shade, hex){
|
||||
// LESS += "$" + name + "-" + shade + ": " + hex + ";\n" !default;
|
||||
// });
|
||||
// if (main[name]) {
|
||||
// LESS += "$" + name + ": " + main[name] + ";\n" !default;
|
||||
// }
|
||||
// });
|
||||
// console.log(LESS);
|
||||
//})();
|
||||
|
||||
|
||||
/*
|
||||
|
||||
To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
|
||||
|
||||
Then, run this script to get the list@mixin (function(){
|
||||
var colors = {}, main = {};
|
||||
$(".color-group")@mixin each(function(){
|
||||
var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
|
||||
colors[color] = {};
|
||||
|
||||
$(this)@mixin find(".color").not(".main-color").each(function(){
|
||||
var shade = $(this).find(".shade").text().trim(),
|
||||
hex = $(this).find(".hex").text().trim();
|
||||
|
||||
colors[color][shade] = hex;
|
||||
});
|
||||
main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
|
||||
|
||||
});
|
||||
var LESS = "";
|
||||
$@mixin each(colors, function(name, shades){
|
||||
LESS += "\n\n";
|
||||
$@mixin each(shades, function(shade, hex){
|
||||
LESS += "$" + name + "-" + shade + ": " + hex + ";\n" !default;
|
||||
});
|
||||
if (main[name]) {
|
||||
LESS += "$" + name + ": " + main[name] + ";\n" !default;
|
||||
}
|
||||
});
|
||||
console.log(LESS);
|
||||
})();
|
||||
|
||||
|
||||
*/
|
||||
$red-50: #ffebee !default;
|
||||
$red-100: #ffcdd2 !default;
|
||||
$red-200: #ef9a9a !default;
|
||||
|
|
@ -44,10 +39,10 @@ $red-600: #e53935 !default;
|
|||
$red-700: #d32f2f !default;
|
||||
$red-800: #c62828 !default;
|
||||
$red-900: #b71c1c !default;
|
||||
$red-A100: #ff8a80 !default;
|
||||
$red-A200: #ff5252 !default;
|
||||
$red-A400: #ff1744 !default;
|
||||
$red-A700: #d50000 !default;
|
||||
$red-a100: #ff8a80 !default;
|
||||
$red-a200: #ff5252 !default;
|
||||
$red-a400: #ff1744 !default;
|
||||
$red-a700: #d50000 !default;
|
||||
$red: $red-500 !default;
|
||||
|
||||
|
||||
|
|
@ -61,10 +56,10 @@ $pink-600: #d81b60 !default;
|
|||
$pink-700: #c2185b !default;
|
||||
$pink-800: #ad1457 !default;
|
||||
$pink-900: #880e4f !default;
|
||||
$pink-A100: #ff80ab !default;
|
||||
$pink-A200: #ff4081 !default;
|
||||
$pink-A400: #f50057 !default;
|
||||
$pink-A700: #c51162 !default;
|
||||
$pink-a100: #ff80ab !default;
|
||||
$pink-a200: #ff4081 !default;
|
||||
$pink-a400: #f50057 !default;
|
||||
$pink-a700: #c51162 !default;
|
||||
$pink: $pink-500 !default;
|
||||
|
||||
|
||||
|
|
@ -78,10 +73,10 @@ $purple-600: #8e24aa !default;
|
|||
$purple-700: #7b1fa2 !default;
|
||||
$purple-800: #6a1b9a !default;
|
||||
$purple-900: #4a148c !default;
|
||||
$purple-A100: #ea80fc !default;
|
||||
$purple-A200: #e040fb !default;
|
||||
$purple-A400: #d500f9 !default;
|
||||
$purple-A700: #aa00ff !default;
|
||||
$purple-a100: #ea80fc !default;
|
||||
$purple-a200: #e040fb !default;
|
||||
$purple-a400: #d500f9 !default;
|
||||
$purple-a700: #a0f !default;
|
||||
$purple: $purple-500 !default;
|
||||
|
||||
|
||||
|
|
@ -95,10 +90,10 @@ $deep-purple-600: #5e35b1 !default;
|
|||
$deep-purple-700: #512da8 !default;
|
||||
$deep-purple-800: #4527a0 !default;
|
||||
$deep-purple-900: #311b92 !default;
|
||||
$deep-purple-A100: #b388ff !default;
|
||||
$deep-purple-A200: #7c4dff !default;
|
||||
$deep-purple-A400: #651fff !default;
|
||||
$deep-purple-A700: #6200ea !default;
|
||||
$deep-purple-a100: #b388ff !default;
|
||||
$deep-purple-a200: #7c4dff !default;
|
||||
$deep-purple-a400: #651fff !default;
|
||||
$deep-purple-a700: #6200ea !default;
|
||||
$deep-purple: $deep-purple-500 !default;
|
||||
|
||||
|
||||
|
|
@ -112,10 +107,10 @@ $indigo-600: #3949ab !default;
|
|||
$indigo-700: #303f9f !default;
|
||||
$indigo-800: #283593 !default;
|
||||
$indigo-900: #1a237e !default;
|
||||
$indigo-A100: #8c9eff !default;
|
||||
$indigo-A200: #536dfe !default;
|
||||
$indigo-A400: #3d5afe !default;
|
||||
$indigo-A700: #304ffe !default;
|
||||
$indigo-a100: #8c9eff !default;
|
||||
$indigo-a200: #536dfe !default;
|
||||
$indigo-a400: #3d5afe !default;
|
||||
$indigo-a700: #304ffe !default;
|
||||
$indigo: $indigo-500 !default;
|
||||
|
||||
|
||||
|
|
@ -129,10 +124,10 @@ $blue-600: #1e88e5 !default;
|
|||
$blue-700: #1976d2 !default;
|
||||
$blue-800: #1565c0 !default;
|
||||
$blue-900: #0d47a1 !default;
|
||||
$blue-A100: #82b1ff !default;
|
||||
$blue-A200: #448aff !default;
|
||||
$blue-A400: #2979ff !default;
|
||||
$blue-A700: #2962ff !default;
|
||||
$blue-a100: #82b1ff !default;
|
||||
$blue-a200: #448aff !default;
|
||||
$blue-a400: #2979ff !default;
|
||||
$blue-a700: #2962ff !default;
|
||||
$blue: $blue-500 !default;
|
||||
|
||||
|
||||
|
|
@ -146,10 +141,10 @@ $light-blue-600: #039be5 !default;
|
|||
$light-blue-700: #0288d1 !default;
|
||||
$light-blue-800: #0277bd !default;
|
||||
$light-blue-900: #01579b !default;
|
||||
$light-blue-A100: #80d8ff !default;
|
||||
$light-blue-A200: #40c4ff !default;
|
||||
$light-blue-A400: #00b0ff !default;
|
||||
$light-blue-A700: #0091ea !default;
|
||||
$light-blue-a100: #80d8ff !default;
|
||||
$light-blue-a200: #40c4ff !default;
|
||||
$light-blue-a400: #00b0ff !default;
|
||||
$light-blue-a700: #0091ea !default;
|
||||
$light-blue: $light-blue-500 !default;
|
||||
|
||||
|
||||
|
|
@ -163,10 +158,10 @@ $cyan-600: #00acc1 !default;
|
|||
$cyan-700: #0097a7 !default;
|
||||
$cyan-800: #00838f !default;
|
||||
$cyan-900: #006064 !default;
|
||||
$cyan-A100: #84ffff !default;
|
||||
$cyan-A200: #18ffff !default;
|
||||
$cyan-A400: #00e5ff !default;
|
||||
$cyan-A700: #00b8d4 !default;
|
||||
$cyan-a100: #84ffff !default;
|
||||
$cyan-a200: #18ffff !default;
|
||||
$cyan-a400: #00e5ff !default;
|
||||
$cyan-a700: #00b8d4 !default;
|
||||
$cyan: $cyan-500 !default;
|
||||
|
||||
|
||||
|
|
@ -180,10 +175,10 @@ $teal-600: #00897b !default;
|
|||
$teal-700: #00796b !default;
|
||||
$teal-800: #00695c !default;
|
||||
$teal-900: #004d40 !default;
|
||||
$teal-A100: #a7ffeb !default;
|
||||
$teal-A200: #64ffda !default;
|
||||
$teal-A400: #1de9b6 !default;
|
||||
$teal-A700: #00bfa5 !default;
|
||||
$teal-a100: #a7ffeb !default;
|
||||
$teal-a200: #64ffda !default;
|
||||
$teal-a400: #1de9b6 !default;
|
||||
$teal-a700: #00bfa5 !default;
|
||||
$teal: $teal-500 !default;
|
||||
|
||||
|
||||
|
|
@ -197,10 +192,10 @@ $green-600: #43a047 !default;
|
|||
$green-700: #388e3c !default;
|
||||
$green-800: #2e7d32 !default;
|
||||
$green-900: #1b5e20 !default;
|
||||
$green-A100: #b9f6ca !default;
|
||||
$green-A200: #69f0ae !default;
|
||||
$green-A400: #00e676 !default;
|
||||
$green-A700: #00c853 !default;
|
||||
$green-a100: #b9f6ca !default;
|
||||
$green-a200: #69f0ae !default;
|
||||
$green-a400: #00e676 !default;
|
||||
$green-a700: #00c853 !default;
|
||||
$green: $green-500 !default;
|
||||
|
||||
|
||||
|
|
@ -214,10 +209,10 @@ $light-green-600: #7cb342 !default;
|
|||
$light-green-700: #689f38 !default;
|
||||
$light-green-800: #558b2f !default;
|
||||
$light-green-900: #33691e !default;
|
||||
$light-green-A100: #ccff90 !default;
|
||||
$light-green-A200: #b2ff59 !default;
|
||||
$light-green-A400: #76ff03 !default;
|
||||
$light-green-A700: #64dd17 !default;
|
||||
$light-green-a100: #ccff90 !default;
|
||||
$light-green-a200: #b2ff59 !default;
|
||||
$light-green-a400: #76ff03 !default;
|
||||
$light-green-a700: #64dd17 !default;
|
||||
$light-green: $light-green-500 !default;
|
||||
|
||||
|
||||
|
|
@ -231,10 +226,10 @@ $lime-600: #c0ca33 !default;
|
|||
$lime-700: #afb42b !default;
|
||||
$lime-800: #9e9d24 !default;
|
||||
$lime-900: #827717 !default;
|
||||
$lime-A100: #f4ff81 !default;
|
||||
$lime-A200: #eeff41 !default;
|
||||
$lime-A400: #c6ff00 !default;
|
||||
$lime-A700: #aeea00 !default;
|
||||
$lime-a100: #f4ff81 !default;
|
||||
$lime-a200: #eeff41 !default;
|
||||
$lime-a400: #c6ff00 !default;
|
||||
$lime-a700: #aeea00 !default;
|
||||
$lime: $lime-500 !default;
|
||||
|
||||
|
||||
|
|
@ -248,10 +243,10 @@ $yellow-600: #fdd835 !default;
|
|||
$yellow-700: #fbc02d !default;
|
||||
$yellow-800: #f9a825 !default;
|
||||
$yellow-900: #f57f17 !default;
|
||||
$yellow-A100: #ffff8d !default;
|
||||
$yellow-A200: #ffff00 !default;
|
||||
$yellow-A400: #ffea00 !default;
|
||||
$yellow-A700: #ffd600 !default;
|
||||
$yellow-a100: #ffff8d !default;
|
||||
$yellow-a200: #ff0 !default;
|
||||
$yellow-a400: #ffea00 !default;
|
||||
$yellow-a700: #ffd600 !default;
|
||||
$yellow: $yellow-500 !default;
|
||||
|
||||
|
||||
|
|
@ -265,10 +260,10 @@ $amber-600: #ffb300 !default;
|
|||
$amber-700: #ffa000 !default;
|
||||
$amber-800: #ff8f00 !default;
|
||||
$amber-900: #ff6f00 !default;
|
||||
$amber-A100: #ffe57f !default;
|
||||
$amber-A200: #ffd740 !default;
|
||||
$amber-A400: #ffc400 !default;
|
||||
$amber-A700: #ffab00 !default;
|
||||
$amber-a100: #ffe57f !default;
|
||||
$amber-a200: #ffd740 !default;
|
||||
$amber-a400: #ffc400 !default;
|
||||
$amber-a700: #ffab00 !default;
|
||||
$amber: $amber-500 !default;
|
||||
|
||||
|
||||
|
|
@ -282,10 +277,10 @@ $orange-600: #fb8c00 !default;
|
|||
$orange-700: #f57c00 !default;
|
||||
$orange-800: #ef6c00 !default;
|
||||
$orange-900: #e65100 !default;
|
||||
$orange-A100: #ffd180 !default;
|
||||
$orange-A200: #ffab40 !default;
|
||||
$orange-A400: #ff9100 !default;
|
||||
$orange-A700: #ff6d00 !default;
|
||||
$orange-a100: #ffd180 !default;
|
||||
$orange-a200: #ffab40 !default;
|
||||
$orange-a400: #ff9100 !default;
|
||||
$orange-a700: #ff6d00 !default;
|
||||
$orange: $orange-500 !default;
|
||||
|
||||
|
||||
|
|
@ -299,10 +294,10 @@ $deep-orange-600: #f4511e !default;
|
|||
$deep-orange-700: #e64a19 !default;
|
||||
$deep-orange-800: #d84315 !default;
|
||||
$deep-orange-900: #bf360c !default;
|
||||
$deep-orange-A100: #ff9e80 !default;
|
||||
$deep-orange-A200: #ff6e40 !default;
|
||||
$deep-orange-A400: #ff3d00 !default;
|
||||
$deep-orange-A700: #dd2c00 !default;
|
||||
$deep-orange-a100: #ff9e80 !default;
|
||||
$deep-orange-a200: #ff6e40 !default;
|
||||
$deep-orange-a400: #ff3d00 !default;
|
||||
$deep-orange-a700: #dd2c00 !default;
|
||||
$deep-orange: $deep-orange-500 !default;
|
||||
|
||||
|
||||
|
|
@ -316,16 +311,16 @@ $brown-600: #6d4c41 !default;
|
|||
$brown-700: #5d4037 !default;
|
||||
$brown-800: #4e342e !default;
|
||||
$brown-900: #3e2723 !default;
|
||||
$brown-A100: #d7ccc8 !default;
|
||||
$brown-A200: #bcaaa4 !default;
|
||||
$brown-A400: #8d6e63 !default;
|
||||
$brown-A700: #5d4037 !default;
|
||||
$brown-a100: #d7ccc8 !default;
|
||||
$brown-a200: #bcaaa4 !default;
|
||||
$brown-a400: #8d6e63 !default;
|
||||
$brown-a700: #5d4037 !default;
|
||||
$brown: $brown-500 !default;
|
||||
|
||||
|
||||
$grey-50: #fafafa !default;
|
||||
$grey-100: #f5f5f5 !default;
|
||||
$grey-200: #eeeeee !default;
|
||||
$grey-200: #eee !default;
|
||||
$grey-300: #e0e0e0 !default;
|
||||
$grey-400: #bdbdbd !default;
|
||||
$grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default;
|
||||
|
|
@ -333,10 +328,10 @@ $grey-600: #757575 !default;
|
|||
$grey-700: #616161 !default;
|
||||
$grey-800: #424242 !default;
|
||||
$grey-900: #212121 !default;
|
||||
$grey-A100: #f5f5f5 !default;
|
||||
$grey-A200: #eeeeee !default;
|
||||
$grey-A400: #bdbdbd !default;
|
||||
$grey-A700: #616161 !default;
|
||||
$grey-a100: #f5f5f5 !default;
|
||||
$grey-a200: #eee !default;
|
||||
$grey-a400: #bdbdbd !default;
|
||||
$grey-a700: #616161 !default;
|
||||
$grey: $grey-500 !default;
|
||||
|
||||
|
||||
|
|
@ -350,12 +345,12 @@ $blue-grey-600: #546e7a !default;
|
|||
$blue-grey-700: #455a64 !default;
|
||||
$blue-grey-800: #37474f !default;
|
||||
$blue-grey-900: #263238 !default;
|
||||
$blue-grey-A100: #cfd8dc !default;
|
||||
$blue-grey-A200: #b0bec5 !default;
|
||||
$blue-grey-A400: #78909c !default;
|
||||
$blue-grey-A700: #455a64 !default;
|
||||
$blue-grey-a100: #cfd8dc !default;
|
||||
$blue-grey-a200: #b0bec5 !default;
|
||||
$blue-grey-a400: #78909c !default;
|
||||
$blue-grey-a700: #455a64 !default;
|
||||
$blue-grey: $blue-grey-500 !default;
|
||||
|
||||
|
||||
$black: #000000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
|
||||
$white: #ffffff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
|
||||
$black: #000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
|
||||
$white: #fff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
|
||||
|
|
@ -3,8 +3,8 @@
|
|||
//$input-padding-x: .75rem !default;
|
||||
//$input-padding-y: .375rem !default;
|
||||
//
|
||||
$input-bg: rgba(0, 0, 0, 0) !default; // #fff !default;
|
||||
$input-bg-disabled: rgba(0, 0, 0, 0) !default; // $gray-lighter !default;
|
||||
$input-bg: rgba($black, 0) !default; // #fff !default;
|
||||
$input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default;
|
||||
//
|
||||
//$input-color: $gray !default;
|
||||
//$input-border-color: #ccc !default;
|
||||
|
|
@ -18,7 +18,7 @@ $input-border-radius: 0 !default; // $border-radius !default;
|
|||
//$input-border-focus: #66afe9 !default;
|
||||
$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default;
|
||||
//
|
||||
$input-color-placeholder: #BDBDBD !default; // #999 !default;
|
||||
$input-color-placeholder: #bdbdbd !default; // #999 !default;
|
||||
//
|
||||
//$input-padding-x-sm: .75rem !default;
|
||||
//$input-padding-y-sm: .275rem !default;
|
||||
Loading…
Reference in New Issue
Block a user