mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-10-30 23:47:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

reorganized main file into _core.scss, collapsed directory structure and scss linted (first time) - should be no changes to variables or logic

Browse Source
This commit is contained in:
Kevin Ross 2015-12-07 13:34:46 -06:00
parent 8ce96b04a3
commit 1c747cf86d
59 changed files with 1023 additions and 1063 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -285,7 +285,7 @@ module.exports = function (grunt) {
config: 'scss/.scss-lint.yml', config: 'scss/.scss-lint.yml',
reporterOutput: null reporterOutput: null
}, },
src: ['scss/*.scss', '!scss/_normalize.scss'] src: ['scss/**/*.scss', '!scss/_normalize.scss']
}, },
postcss: { postcss: {

6
docs/assets/scss/docs.scss
View File

@ -29,7 +29,7 @@
// Load Bootstrap variables and mixins // Load Bootstrap variables and mixins
//@import '../../../scss/includes/variables'; //@import '../../../scss/includes/variables';
//@import '../../../scss/includes/mixins'; //@import '../../../scss/includes/mixins';
@import '../../../scss/includes/colors'; @import '../../../scss/variables/colors';
//http://www.materialpalette.com/indigo/light-blue //http://www.materialpalette.com/indigo/light-blue
$brand-primary: $indigo-500; // #3F51B5 $brand-primary: $indigo-500; // #3F51B5
@ -45,7 +45,7 @@ $brand-primary: $indigo-500; // #3F51B5
//$divider-color: #B6B6B6 //$divider-color: #B6B6B6
// Import default variables // Import default variables
@import '../../../scss/includes/variables'; @import '../../../scss/variables';
// Local docs variables or overrides // Local docs variables or overrides
$bd-purple: $brand-primary; // #563d7c; $bd-purple: $brand-primary; // #563d7c;
@ -59,7 +59,7 @@ $bd-warning: $brand-warning; // #f0ad4e;
$bd-info: $brand-info; // #5bc0de; $bd-info: $brand-info; // #5bc0de;
// Import material design configured with the above variables // Import material design configured with the above variables
@import '../../../scss/includes/bootstrap-material-design'; @import '../../../scss/core';
// Load docs components // Load docs components
@import 'booticon'; @import 'booticon';

0
scss/includes/_alerts.scss → scss/_alerts.scss
View File

48
scss/_bootstrap.scss Normal file
View 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";

70
scss/includes/_buttons.scss → scss/_buttons.scss
View File

@ -1,15 +1,13 @@
// specification: https://www.google.com/design/spec/components/buttons.html // 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-size: $mdb-btn-font-size-base;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
//line-height: 1; //line-height: 1;
letter-spacing: 0; letter-spacing: 0;
@if ($colorContrast) { @if ($color-contrast) {
opacity: 0.87; opacity: 0.87;
} }
} }
@ -18,19 +16,19 @@
// synchronized with mdl 11/23/15 // synchronized with mdl 11/23/15
.btn, .btn,
.input-group-btn .btn { .input-group-btn .btn {
border: none;
border-radius: $border-radius-base;
position: relative; position: relative;
padding: 8px 30px; padding: 8px 30px;
margin: 10px 1px; 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; 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 { &::-moz-focus-inner {
border: 0; border: 0;
@ -38,7 +36,6 @@
//--- //---
// btn-flat // btn-flat
background: transparent;
&:not(.btn-raised) { &:not(.btn-raised) {
@include variations(unquote(".btn"), unquote(""), color, $mdb-text-color-primary); @include variations(unquote(".btn"), unquote(""), color, $mdb-text-color-primary);
box-shadow: none; box-shadow: none;
@ -47,11 +44,11 @@
&:hover, &:hover,
&:focus { &:focus {
// spec: flat/light bg Hover: 20% #999999 // spec: flat/light bg Hover: 20% #999999
background-color: rgba(#999999, (20/100)); background-color: rgba(#999, (20 / 100));
.theme-dark & { .theme-dark & {
// spec: dark bg Hover: 15% #CCCCCC // 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); @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
} }
//--- //---
// btn-raised // btn-raised
&.btn-raised { &.btn-raised {
@ -95,17 +91,17 @@
&.btn-fab { &.btn-fab {
// see above for color variations // 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; 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; 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 { .ripple-container {
border-radius: 50%; border-radius: 50%;
@ -113,9 +109,9 @@
&.btn-fab-mini, &.btn-fab-mini,
.btn-group-sm & { .btn-group-sm & {
height: $mdb-btn-fab-size-mini;
min-width: $mdb-btn-fab-size-mini;
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 { &.material-icons {
top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2; top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
@ -127,9 +123,9 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 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; 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; vertical-align: middle;
} }
// Size variations // Size variations
&.btn-lg, &.btn-lg,
.btn-group-lg & { .btn-group-lg & {
@ -166,11 +161,11 @@
&.disabled, &.disabled,
&:disabled, &:disabled,
&[disabled][disabled] { &[disabled][disabled] {
// spec: light theme: Disabled text: 26% #000000 // spec: light theme: Disabled text: 26% $black
color: rgba(#000000, (26/100)); color: rgba($black, (26 / 100));
.theme-dark & { .theme-dark & {
// spec: dark theme: Disabled text: 30% #FFFFFF // spec: dark theme: Disabled text: 30% $white
color: rgba(#FFFFFF, (30/100)); color: rgba($white, (30 / 100));
} }
// flat buttons lose transparency // flat buttons lose transparency
@ -197,14 +192,13 @@
//border-radius: 2px; //border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
&.open { &.open {
.dropdown-toggle { .dropdown-toggle {
//box-shadow: none; //box-shadow: none;
} }
& > .dropdown-toggle.btn { > .dropdown-toggle.btn {
@include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color); @include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color);
} }
} }
@ -217,7 +211,7 @@
@include shadow-2dp(); @include shadow-2dp();
} }
& .btn + .btn, .btn + .btn,
.btn, .btn,
.btn:active, .btn:active,
.btn-group { .btn-group {

66
scss/_cards.scss Normal file
View 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;
// }
// }
// }
//}

94
scss/includes/_checkboxes.scss → scss/_checkboxes.scss
View File

@ -3,60 +3,59 @@ label.checkbox,
label.checkbox-inline, label.checkbox-inline,
.checkbox label, .checkbox label,
.checkbox-inline label { .checkbox-inline label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule padding-left: 0; // Reset for Bootstrap rule
color: $mdb-checkbox-label-color; color: $mdb-checkbox-label-color;
cursor: pointer;
// Hide native checkbox // Hide native checkbox
input[type=checkbox] { input[type=checkbox] {
opacity: 0;
position: absolute; position: absolute;
margin: 0; left: 0;
z-index: -1; z-index: -1;
width: 0; width: 0;
height: 0; height: 0;
margin: 0;
overflow: hidden; overflow: hidden;
left: 0;
pointer-events: none; pointer-events: none;
opacity: 0;
} }
.checkbox-decorator { .checkbox-decorator {
vertical-align: middle;
position: relative; position: relative;
top: 3px; top: 3px;
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome) vertical-align: middle;
display: block; &::before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
position: absolute; position: absolute;
left: 0; left: 0;
content: "";
background-color: rgba(0, 0, 0, .84);
height: $mdb-checkbox-size;
width: $mdb-checkbox-size;
border-radius: 100%;
z-index: 1; z-index: 1;
opacity: 0; display: block;
width: $mdb-checkbox-size;
height: $mdb-checkbox-size;
margin: 0; margin: 0;
content: "";
background-color: rgba($black, .84);
border-radius: 100%;
opacity: 0;
transform: scale3d(2.3, 2.3, 1); transform: scale3d(2.3, 2.3, 1);
} }
.check { .check {
position: relative; position: relative;
z-index: 1;
display: inline-block; display: inline-block;
width: $mdb-checkbox-size; width: $mdb-checkbox-size;
height: $mdb-checkbox-size; height: $mdb-checkbox-size;
border: $border-radius-base solid $mdb-checkbox-border-color;
overflow: hidden; overflow: hidden;
z-index: 1; border: $border-radius-base solid $mdb-checkbox-border-color;
} }
.check:before { .check::before {
position: absolute; position: absolute;
content: "";
transform: rotate(45deg);
display: block; display: block;
margin-top: -4px;
margin-left: 6px;
width: 0; width: 0;
height: 0; height: 0;
margin-top: -4px;
margin-left: 6px;
content: "";
box-shadow: 0 0 0 0, box-shadow: 0 0 0 0,
0 0 0 0, 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, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
transform: rotate(45deg);
animation: checkbox-off $mdb-checkbox-animation-check forwards; animation: checkbox-off $mdb-checkbox-animation-check forwards;
} }
} }
input[type=checkbox] { input[type=checkbox] {
&:focus + .checkbox-decorator .check:after { &:focus + .checkbox-decorator .check::after {
opacity: 0.2; opacity: 0.2;
} }
&:checked { &:checked {
// FIXME: once working - combine further to reduce code // FIXME: once working - combine further to reduce code
& + .checkbox-decorator .check { + .checkbox-decorator .check {
color: $mdb-checkbox-checked-color; color: $mdb-checkbox-checked-color;
border-color: $mdb-checkbox-checked-color; border-color: $mdb-checkbox-checked-color;
} }
& + .checkbox-decorator .check:before { + .checkbox-decorator .check::before {
color: $mdb-checkbox-checked-color; color: $mdb-checkbox-checked-color;
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 032px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px; 20px -12px 0 11px;
animation: checkbox-on $mdb-checkbox-animation-check forwards; animation: checkbox-on $mdb-checkbox-animation-check forwards;
} }
& + .checkbox-decorator:before { + .checkbox-decorator::before {
animation: rippleOn $mdb-checkbox-animation-ripple; 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 //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 animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
} }
} }
&:not(:checked) { &:not(:checked) {
& + .checkbox-decorator:before { + .checkbox-decorator::before {
animation: rippleOff $mdb-checkbox-animation-ripple; 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 animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
} }
@ -118,12 +118,12 @@ label.checkbox-inline,
// Style for disabled inputs // Style for disabled inputs
fieldset[disabled] &, fieldset[disabled] &,
fieldset[disabled] & input[type=checkbox], 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]:not(:checked) ~ .checkbox-decorator .check,
input[type=checkbox][disabled] + .radio-decorator { input[type=checkbox][disabled] + .radio-decorator {
opacity: 0.5; 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; background-color: $mdb-text-color-primary;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
@ -134,7 +134,7 @@ label.checkbox-inline,
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 0 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
15px 2px 0 11px; 15px 2px 0 11px;
} }
@ -142,7 +142,7 @@ label.checkbox-inline,
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 0 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px 2px 0 11px; 20px 2px 0 11px;
} }
@ -150,7 +150,7 @@ label.checkbox-inline,
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 0 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px; 20px -12px 0 11px;
} }
@ -161,7 +161,7 @@ label.checkbox-inline,
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 0 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px, 20px -12px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
@ -171,52 +171,52 @@ label.checkbox-inline,
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 0 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px, 20px -12px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
} }
50% { 50% {
transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0; width: 0;
height: 0; height: 0;
margin-top: -4px;
margin-left: 6px;
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 0 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
15px 2px 0 11px, 15px 2px 0 11px,
0 0 0 0 inset; 0 0 0 0 inset;
transform: rotate(45deg);
} }
51% { 51% {
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: -2px;
margin-left: -2px;
box-shadow: 0 0 0 0, 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, 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% { 100% {
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-top: -2px;
margin-left: -2px;
box-shadow: 0 0 0 0, 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, 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
View 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
View 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;
}
}

6
scss/includes/_dropdown.scss → scss/_dropdown.scss
View File

@ -1,15 +1,15 @@
.dropdown-menu { .dropdown-menu {
border: 0; 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 { .divider {
background-color: rgba(229, 229, 229, 0.12); background-color: rgba(229, 229, 229, 0.12);
} }
li { li {
overflow: hidden;
position: relative; position: relative;
overflow: hidden;
a:hover { a:hover {
background-color: transparent;
color: $brand-primary; color: $brand-primary;
background-color: transparent;
} }
} }
} }

27
scss/includes/_forms.scss → scss/_forms.scss
View File

@ -1,7 +1,7 @@
// label variations // label variations
.label { .label {
border-radius: $border-radius-small; 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 // must be broken out for reuse - webkit selector breaks firefox
@ -67,7 +67,7 @@
&.is-focused .form-control { &.is-focused .form-control {
background-image: linear-gradient($color, $color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); 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; background-color: $color;
} }
} }
@ -91,10 +91,8 @@
// this is outside a form-group // this is outside a form-group
@if not $parent { @if not $parent {
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size); @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 // 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} { #{$parent} {
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size); @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 // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control //, //.mdb-form-group .form-control,
//.mdb-form-group .form-control .form-control {
{
border: 0;
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); 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-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px); background-position: center bottom, center calc(100% - 1px);
background-size: 0 2px, 100% 1px;
border: 0;
transition: background 0s ease-out; transition: background 0s ease-out;
//float: none; // why? //float: none; // why?
@ -153,11 +150,11 @@
//} //}
.mdb-form-group.is-focused & { .mdb-form-group.is-focused & {
outline: none;
background-size: 100% 2px, 100% 1px; background-size: 100% 2px, 100% 1px;
outline: none;
transition-duration: 0.3s; transition-duration: 0.3s;
.text-input-decorator:after { .text-input-decorator::after {
background-color: $brand-primary; background-color: $brand-primary;
} }
} }
@ -165,7 +162,7 @@
//&[readonly], //&[readonly],
//&[disabled], //&[disabled],
//fieldset[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], &[disabled],
@ -246,7 +243,7 @@
textarea { textarea {
//resize: none; //resize: none;
& ~ .form-control-highlight { ~ .form-control-highlight {
//margin-top: -11px; //margin-top: -11px;
} }
} }
@ -254,7 +251,7 @@
select { select {
//appearance: none; // Fix for OS X //appearance: none; // Fix for OS X
& ~ .text-input-decorator:after { ~ .text-input-decorator::after {
//display: none; //display: none;
} }
} }

0
scss/includes/_input-group.scss → scss/_input-group.scss
View File

56
scss/includes/_lists.scss → scss/_lists.scss
View File

@ -1,17 +1,15 @@
.list-group { .list-group {
border-radius: 0; border-radius: 0;
.list-group-item { .list-group-item {
background-color: transparent; padding: 0 16px;
overflow: hidden; overflow: hidden;
background-color: transparent;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
padding: 0 16px;
&.baseline { &.baseline {
border-bottom: 1px solid #cecece; border-bottom: 1px solid #cecece;
&:last-child { &:last-child {
border-bottom: none; border-bottom: 0;
} }
} }
.row-picture, .row-action-primary { .row-picture, .row-action-primary {
@ -24,25 +22,22 @@
height: 56px; height: 56px;
} }
img { img {
background: rgba(0,0,0,0.1);
padding: 1px; padding: 1px;
background: rgba($black, 0.1);
&.radio-decorator { &.radio-decorator {
border-radius: 100%; border-radius: 100%;
} }
} }
i { i {
background: rgba(0,0,0,0.25);
border-radius: 100%;
text-align: center;
line-height: 56px;
font-size: 20px; font-size: 20px;
color: white; line-height: 56px;
color: $white;
text-align: center;
background: rgba($black, 0.25);
border-radius: 100%;
} }
label { label {
margin-left: 7px; margin: 5px -7px -5px 7px;
margin-right: -7px;
margin-top: 5px;
margin-bottom: -5px;
.checkbox-decorator { .checkbox-decorator {
left: -10px; left: -10px;
} }
@ -54,51 +49,52 @@
min-height: 66px; min-height: 66px;
.action-secondary { .action-secondary {
position: absolute; position: absolute;
right: 16px;
top: 16px; top: 16px;
right: 16px;
i { i {
font-size: 20px; font-size: 20px;
color: rgba(0,0,0,0.25); color: rgba($black, 0.25);
cursor: pointer; cursor: pointer;
} }
} }
.action-secondary ~ * { .action-secondary ~ * {
max-width: unquote("calc(100% - 30px)"); max-width: unquote("calc(100% - 30px)");
} }
.least-content { .least-content {
position: absolute; position: absolute;
right: 16px;
top: 0; top: 0;
color: rgba(0,0,0,0.54); right: 16px;
font-size: 14px; font-size: 14px;
color: rgba($black, 0.54);
} }
} }
.list-group-item-heading { .list-group-item-heading {
color: rgba(0, 0, 0, 0.77);
font-size: 20px; font-size: 20px;
line-height: 29px; line-height: 29px;
color: rgba($black, 0.77);
} }
} }
.list-group-item.active { .list-group-item.active {
&:hover, &:focus { &:hover, &:focus {
background: rgba(0,0,0,.15); background: rgba($black, .15);
outline: 10px solid rgba(0,0,0,.15); outline: 10px solid rgba($black, .15);
} }
.list-group-item-heading, .list-group-item-text { .list-group-item-heading, .list-group-item-text {
color: $mdb-text-color-primary; color: $mdb-text-color-primary;
} }
} }
.list-group-separator { .list-group-separator {
clear: both;
overflow: hidden;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
&:before { overflow: hidden;
content: ""; clear: both;
width: unquote("calc(100% - 90px)"); &::before {
border-bottom: 1px solid rgba(0,0,0,0.1);
float: right; float: right;
width: unquote("calc(100% - 90px)");
content: "";
border-bottom: 1px solid rgba($black, 0.1);
} }
} }
} }

0
scss/includes/_mixins.scss → scss/_mixins.scss
View File

33
scss/includes/_dialogs.scss → scss/_modal.scss
View File

@ -1,47 +1,39 @@
// //
// Modals // Modals
// Material Design element Dialogs // Material Design element Dialogs
// -------------------------------------------------- // --------------------------------------------------
.modal-content { .modal-content {
@include shadow-z-5(); @include shadow-z-5();
border: 0;
border-radius: $border-radius-base; border-radius: $border-radius-base;
border: none;
// Modal header // Modal header
// Top section of the modal w/ title and dismiss // Top section of the modal w/ title and dismiss
.modal-header { .modal-header {
border-bottom: none; padding: 24px 24px 0;
padding-top: 24px; border-bottom: 0;
padding-right: 24px;
padding-bottom: 0;
padding-left: 24px;
} }
// Modal body // Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer) // Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body { .modal-body {
padding-top: 24px; padding: 24px 24px 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
} }
// Footer (for actions) // Footer (for actions)
.modal-footer { .modal-footer {
border-top: none;
padding: 7px; padding: 7px;
border-top: 0;
button { button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto; width: auto;
padding-right: 16px;
padding-left: 16px;
margin: 0;
&.pull-left { &.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative; position: relative;
left: -5px; left: -5px;
padding-right: 5px;
padding-left: 5px;
} }
} }
button+button { button + button {
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
@ -49,6 +41,7 @@
padding-top: 0; padding-top: 0;
} }
} }
.modal-backdrop { .modal-backdrop {
background: rgba(0,0,0,0.3); background: rgba($black, 0.3);
} }

2
scss/includes/_navbar.scss → scss/_navbar.scss
View File

@ -37,7 +37,7 @@
// &:hover, // &:hover,
// &:focus { // &:focus {
// color: inherit; // color: inherit;
// background-color: rgba(255, 255, 255, 0.1); // background-color: rgba($white, 0.1);
// } // }
// } // }
// > .disabled > a { // > .disabled > a {

5
scss/_plugins.scss Normal file
View File

@ -0,0 +1,5 @@
// External plugins
@import "plugins/plugin-snackbarjs";
@import "plugins/plugin-nouislider";
@import "plugins/plugin-selectize";
@import "plugins/plugin-dropdownjs";

5
scss/includes/_popups.scss → scss/_popover.scss
View File

@ -1,10 +1,9 @@
.popover, .tooltip-inner { .popover, .tooltip-inner {
color: $mdb-popover-color;
line-height: 1em; line-height: 1em;
color: $mdb-popover-color;
background: $mdb-popover-background; background: $mdb-popover-background;
border: none; border: 0;
border-radius: $border-radius-base; border-radius: $border-radius-base;
@include shadow-z-1(); @include shadow-z-1();
} }

11
scss/_progress.scss Normal file
View 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);
}
}

48
scss/includes/_radios.scss → scss/_radios.scss
View File

@ -1,14 +1,14 @@
@mixin radio-color($color, $opacity) { @mixin radio-color($color, $opacity) {
& ~ .check, ~ .check,
& ~ .radio-decorator { ~ .radio-decorator {
opacity: $opacity; opacity: $opacity;
} }
& ~ .check { ~ .check {
background-color: $color; background-color: $color;
} }
& ~ .radio-decorator { ~ .radio-decorator {
border-color: $color; border-color: $color;
} }
} }
@ -17,59 +17,59 @@ label.radio,
label.radio-inline, label.radio-inline,
.radio label, .radio label,
.radio-inline label { .radio-inline label {
cursor: pointer;
padding-left: 45px;
position: relative; position: relative;
padding-left: 45px;
color: $mdb-radio-label-color; color: $mdb-radio-label-color;
cursor: pointer;
span { span {
display: block;
position: absolute; position: absolute;
left: 10px;
top: 2px; top: 2px;
left: 10px;
display: block;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.radio-decorator { .radio-decorator {
border: 2px solid $mdb-radio-color-off;
height: 15px;
width: 15px; width: 15px;
height: 15px;
border: 2px solid $mdb-radio-color-off;
border-radius: 100%; border-radius: 100%;
} }
.check { .check {
display: inline-block; display: inline-block;
height: 15px;
width: 15px; width: 15px;
border-radius: 100%; height: 15px;
background-color: $mdb-radio-color-on; background-color: $mdb-radio-color-on;
border-radius: 100%;
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
.check:after { .check::after {
display: block;
position: absolute; position: absolute;
top: -18px;
left: -18px;
z-index: 1;
display: block;
width: 50px;
height: 50px;
margin: 0;
content: ""; content: "";
background-color: $mdb-text-color-primary; background-color: $mdb-text-color-primary;
left: -18px;
top: -18px;
height: 50px;
width: 50px;
border-radius: 100%; border-radius: 100%;
z-index: 1;
opacity: 0; opacity: 0;
margin: 0;
transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1);
} }
input[type=radio]:not(:checked) ~ .check:after { input[type=radio]:not(:checked) ~ .check::after {
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check::after {
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
input[type=radio] { input[type=radio] {
opacity: 0;
height: 0;
width: 0; width: 0;
height: 0;
overflow: hidden; overflow: hidden;
opacity: 0;
&:checked { &:checked {
@include radio-color($mdb-radio-color-on, 1); @include radio-color($mdb-radio-color-on, 1);

2
scss/includes/_reboot.scss → scss/_reboot.scss
View File

@ -4,7 +4,7 @@ body {
//// Prevent highlight on mobile //// 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; // -webkit-tap-highlight-color: transparent;
// &:focus { // &:focus {
// outline: 0; // outline: 0;

16
scss/includes/_ripples.scss → scss/_ripples.scss
View File

@ -1,4 +1,3 @@
// marker class (used as a selector for one-off elements to decorate) // marker class (used as a selector for one-off elements to decorate)
.ripple { .ripple {
position: relative; position: relative;
@ -12,31 +11,30 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
border-radius: inherit;
pointer-events: none; pointer-events: none;
border-radius: inherit;
.ripple-decorator { .ripple-decorator {
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left: -10px;
margin-top: -10px; margin-top: -10px;
margin-left: -10px;
pointer-events: none;
background-color: rgba($black, 0.05);
border-radius: 100%; border-radius: 100%;
background-color: #000; // fallback color opacity: 0;
background-color: rgba(0, 0, 0, 0.05);
transform: scale(1); transform: scale(1);
transform-origin: 50%; transform-origin: 50%;
opacity: 0;
pointer-events: none;
&.ripple-on { &.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; 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 { &.ripple-out {
transition: opacity 0.1s linear 0s !important;
opacity: 0; opacity: 0;
transition: opacity 0.1s linear 0s !important;
} }
} }
} }

52
scss/includes/_switch.scss → scss/_switch.scss
View File

@ -1,78 +1,76 @@
.switch { .switch {
vertical-align: middle; vertical-align: middle;
&, label, input, .switch-decorator { &, label, input, .switch-decorator {
user-select: none; user-select: none;
} }
label { label {
cursor: pointer;
color: $mdb-switch-label-color; color: $mdb-switch-label-color;
cursor: pointer;
// Hide original checkbox // Hide original checkbox
input[type=checkbox] { input[type=checkbox] {
opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
opacity: 0;
} }
// Switch bg off and disabled // Switch bg off and disabled
.switch-decorator, .switch-decorator,
input[type=checkbox][disabled] + .switch-decorator { input[type=checkbox][disabled] + .switch-decorator {
content: "";
display: inline-block; display: inline-block;
width: 30px; width: 30px;
height: 15px; height: 15px;
margin-right: 15px;
vertical-align: middle;
content: "";
background-color: rgba(80, 80, 80, 0.7); background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px; border-radius: 15px;
margin-right: 15px;
transition: background 0.3s ease; transition: background 0.3s ease;
vertical-align: middle;
} }
// Handle off // Handle off
.switch-decorator:after { .switch-decorator::after {
content: ""; position: relative;
top: -2px;
left: -5px;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: #F1F1F1; content: "";
background-color: #f1f1f1;
border-radius: 20px; border-radius: 20px;
position: relative; box-shadow: 0 1px 3px 1px rgba($black, 0.4);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2px;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
} }
input[type=checkbox] { input[type=checkbox] {
// Handle disabled // Handle disabled
&[disabled] { &[disabled] {
& + .switch-decorator:after, + .switch-decorator::after,
&:checked + .switch-decorator:after { &:checked + .switch-decorator::after {
background-color: #BDBDBD; background-color: #bdbdbd;
} }
} }
& + .switch-decorator:active:after, + .switch-decorator:active::after,
&[disabled] + .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); box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($black, 0.1);
} }
// Ripple off and disabled // Ripple off and disabled
&:checked + .switch-decorator:after { &:checked + .switch-decorator::after {
left: 15px; left: 15px;
} }
} }
& label input[type=checkbox]:checked { label input[type=checkbox]:checked {
& + .switch-decorator { + .switch-decorator {
background-color: rgba($brand-primary, (50/100)); // Switch bg on background-color: rgba($brand-primary, (50 / 100)); // Switch bg on
} }
& + .switch-decorator:after { + .switch-decorator::after {
background-color: $brand-primary; // Handle on background-color: $brand-primary; // Handle on
} }
& + .switch-decorator:active:after { + .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 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
View 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);
}
}
}

4
scss/includes/_themes.scss → scss/_themes.scss
View File

@ -1,8 +1,6 @@
// by default, assume light-theme, no need for a marker class. // 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 // 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 { .theme-dark {
// foo
} }

0
scss/includes/_type.scss → scss/_type.scss
View File

30
scss/includes/_variables.scss → scss/_variables.scss
View File

@ -1,10 +1,10 @@
@import 'colors'; @import "variables/colors";
// Typography elements FIXME: review to see if we actually need these // 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-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(0, 0, 0, 0.87) !default; $mdb-text-color-primary: rgba($black, 0.87) !default;
$mdb-font-weight-base: 400; $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 // 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 // Customized BS variables
$enable-flex: true; $enable-flex: true;
@import 'variables/body'; @import "variables/body";
@import 'variables/brand'; @import "variables/brand";
@import 'variables/buttons'; @import "variables/buttons";
@import 'variables/code'; @import "variables/code";
@import 'variables/forms'; @import "variables/forms";
@import 'variables/state'; @import "variables/state";
@import 'variables/type'; @import "variables/type";
$border-radius-base: 2px !default; $border-radius-base: 2px !default;
@ -30,7 +30,7 @@ $border-radius-small: 1px !default;
// Bootstrap Material Design variables start with mdb- // Bootstrap Material Design variables start with mdb-
$mdb-brand-inverse: $indigo !default; $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-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-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; $mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
@ -45,7 +45,7 @@ $contrast-factor: 40% !default;
// -------------------- // --------------------
// inputs // inputs
//$mdb-input-placeholder-color: #BDBDBD !default; //$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-label-static-size-ratio: 75 / 100 !default;
$mdb-help-block-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-ripple: 500ms !default;
$mdb-checkbox-animation-check: 0.3s !default; $mdb-checkbox-animation-check: 0.3s !default;
$mdb-checkbox-checked-color: #4caf50 !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; $mdb-checkbox-border-color: $mdb-checkbox-label-color !default;
// Popovers and Popups // Popovers and Popups
@ -114,7 +114,7 @@ $mdb-btn-fab-font-size: 24px !default;
$mdb-btn-icon-size: 32px !default; $mdb-btn-icon-size: 32px !default;
$mdb-btn-icon-size-mini: 24px !default; $mdb-btn-icon-size-mini: 24px !default;
/* SHADOWS */ // SHADOWS
$mdb-shadow-key-umbra-opacity: 0.2 !default; $mdb-shadow-key-umbra-opacity: 0.2 !default;
$mdb-shadow-key-penumbra-opacity: 0.14 !default; $mdb-shadow-key-penumbra-opacity: 0.14 !default;
$mdb-shadow-ambient-shadow-opacity: 0.12 !default; $mdb-shadow-ambient-shadow-opacity: 0.12 !default;

2
scss/bootstrap-material-design.scss vendored
View File

@ -1,3 +1,3 @@
// IMPORTANT: For use of source and variable overrides, import the following file directly, *NOT* this one. // 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. // This file primarily exists to create the static css distribution.
@import "includes/bootstrap-material-design"; @import "core";

30
scss/includes/_bootstrap-material-design.scss
View File

@ -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';

56
scss/includes/_bootstrap.scss
View File

@ -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";

68
scss/includes/_cards.scss
View File

@ -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;
}
}
}
}

73
scss/includes/_dividers.scss
View File

@ -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;
}
}

6
scss/includes/_labels.scss
View File

@ -1,6 +0,0 @@
.label {
border-radius: 1px;
@include variations(unquote(""), background-color, $grey);
}

7
scss/includes/_plugins.scss
View File

@ -1,7 +0,0 @@
// External plugins
@import 'plugins/_plugin-snackbarjs';
@import 'plugins/_plugin-nouislider';
@import 'plugins/_plugin-selectize';
@import 'plugins/_plugin-dropdownjs';

12
scss/includes/_progress.scss
View File

@ -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);
}
}

26
scss/includes/_tabs.scss
View File

@ -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);
}
}
}

6
scss/includes/mixins/_inputs.scss
View File

@ -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
}

81
scss/includes/mixins/_shadows.scss
View File

@ -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);
}

21
scss/includes/plugins/_plugin-dropdownjs.scss
View File

@ -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;
}

112
scss/includes/plugins/_plugin-nouislider.scss
View File

@ -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);
}

93
scss/includes/plugins/_plugin-selectize.scss
View File

@ -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;
}
}

34
scss/includes/plugins/_plugin-snackbarjs.scss
View File

@ -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
View 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
View 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);
}

7
scss/includes/mixins/_utilities.scss → scss/mixins/_utilities.scss
View File

@ -10,10 +10,10 @@
// Deprecated in Compass 0.13 // Deprecated in Compass 0.13
@warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."; @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
} }
@if $color == null { @if $color == null {
@return null; @return null;
} } @else {
@else {
$color-brightness: brightness($color); $color-brightness: brightness($color);
$dark-text-brightness: brightness($dark); $dark-text-brightness: brightness($dark);
$light-text-brightness: brightness($light); $light-text-brightness: brightness($light);
@ -24,8 +24,7 @@
@function brightness($color) { @function brightness($color) {
@if type-of($color) == color { @if type-of($color) == color {
@return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%; @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
} } @else {
@else {
@return unquote("brightness(#{$color})"); @return unquote("brightness(#{$color})");
} }
} }

0
scss/includes/mixins/_variations.scss → scss/mixins/_variations.scss
View File

18
scss/plugins/_plugin-dropdownjs.scss Normal file
View 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
View 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
View 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
View 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;
//}

0
scss/includes/variables/_body.scss → scss/variables/_body.scss
View File

0
scss/includes/variables/_brand.scss → scss/variables/_brand.scss
View File

0
scss/includes/variables/_buttons.scss → scss/variables/_buttons.scss
View File

0
scss/includes/variables/_code.scss → scss/variables/_code.scss
View File

152
scss/includes/_colors-map.scss → scss/variables/_colors-map.scss
View File

@ -33,10 +33,10 @@
// "red-700": (name: "red", color: $red-700, number: "-700"), // "red-700": (name: "red", color: $red-700, number: "-700"),
// "red-800": (name: "red", color: $red-800, number: "-800"), // "red-800": (name: "red", color: $red-800, number: "-800"),
// "red-900": (name: "red", color: $red-900, number: "-900"), // "red-900": (name: "red", color: $red-900, number: "-900"),
// "red-A100": (name: "red", color: $red-A100, number: "-A100"), // "red-a100": (name: "red", color: $red-a100, number: "-a100"),
// "red-A200": (name: "red", color: $red-A200, number: "-A200"), // "red-a200": (name: "red", color: $red-a200, number: "-a200"),
// "red-A400": (name: "red", color: $red-A400, number: "-A400"), // "red-a400": (name: "red", color: $red-a400, number: "-a400"),
// "red-A700": (name: "red", color: $red-A700, number: "-A700"), // "red-a700": (name: "red", color: $red-a700, number: "-a700"),
// "red": (name: "red", color: $red, number: ""), // "red": (name: "red", color: $red, number: ""),
// "pink-50": (name: "pink", color: $pink-50, number: "-50"), // "pink-50": (name: "pink", color: $pink-50, number: "-50"),
// "pink-100": (name: "pink", color: $pink-100, number: "-100"), // "pink-100": (name: "pink", color: $pink-100, number: "-100"),
@ -48,10 +48,10 @@
// "pink-700": (name: "pink", color: $pink-700, number: "-700"), // "pink-700": (name: "pink", color: $pink-700, number: "-700"),
// "pink-800": (name: "pink", color: $pink-800, number: "-800"), // "pink-800": (name: "pink", color: $pink-800, number: "-800"),
// "pink-900": (name: "pink", color: $pink-900, number: "-900"), // "pink-900": (name: "pink", color: $pink-900, number: "-900"),
// "pink-A100": (name: "pink", color: $pink-A100, number: "-A100"), // "pink-a100": (name: "pink", color: $pink-a100, number: "-a100"),
// "pink-A200": (name: "pink", color: $pink-A200, number: "-A200"), // "pink-a200": (name: "pink", color: $pink-a200, number: "-a200"),
// "pink-A400": (name: "pink", color: $pink-A400, number: "-A400"), // "pink-a400": (name: "pink", color: $pink-a400, number: "-a400"),
// "pink-A700": (name: "pink", color: $pink-A700, number: "-A700"), // "pink-a700": (name: "pink", color: $pink-a700, number: "-a700"),
// "pink": (name: "pink", color: $pink, number: ""), // "pink": (name: "pink", color: $pink, number: ""),
// "purple-50": (name: "purple", color: $purple-50, number: "-50"), // "purple-50": (name: "purple", color: $purple-50, number: "-50"),
// "purple-100": (name: "purple", color: $purple-100, number: "-100"), // "purple-100": (name: "purple", color: $purple-100, number: "-100"),
@ -63,10 +63,10 @@
// "purple-700": (name: "purple", color: $purple-700, number: "-700"), // "purple-700": (name: "purple", color: $purple-700, number: "-700"),
// "purple-800": (name: "purple", color: $purple-800, number: "-800"), // "purple-800": (name: "purple", color: $purple-800, number: "-800"),
// "purple-900": (name: "purple", color: $purple-900, number: "-900"), // "purple-900": (name: "purple", color: $purple-900, number: "-900"),
// "purple-A100": (name: "purple", color: $purple-A100, number: "-A100"), // "purple-a100": (name: "purple", color: $purple-a100, number: "-a100"),
// "purple-A200": (name: "purple", color: $purple-A200, number: "-A200"), // "purple-a200": (name: "purple", color: $purple-a200, number: "-a200"),
// "purple-A400": (name: "purple", color: $purple-A400, number: "-A400"), // "purple-a400": (name: "purple", color: $purple-a400, number: "-a400"),
// "purple-A700": (name: "purple", color: $purple-A700, number: "-A700"), // "purple-a700": (name: "purple", color: $purple-a700, number: "-a700"),
// "purple": (name: "purple", color: $purple, number: ""), // "purple": (name: "purple", color: $purple, number: ""),
// "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"), // "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"),
// "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"), // "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-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"),
// "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"), // "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-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"),
// "deep-purple-A100": (name: "deep-purple", color: $deep-purple-A100, number: "-A100"), // "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-a200": (name: "deep-purple", color: $deep-purple-a200, number: "-a200"),
// "deep-purple-A400": (name: "deep-purple", color: $deep-purple-A400, number: "-A400"), // "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-a700": (name: "deep-purple", color: $deep-purple-a700, number: "-a700"),
// "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""), // "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""),
// "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"), // "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"),
// "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"), // "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"),
@ -93,10 +93,10 @@
// "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"), // "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"),
// "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"), // "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"),
// "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"), // "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"),
// "indigo-A100": (name: "indigo", color: $indigo-A100, number: "-A100"), // "indigo-a100": (name: "indigo", color: $indigo-a100, number: "-a100"),
// "indigo-A200": (name: "indigo", color: $indigo-A200, number: "-A200"), // "indigo-a200": (name: "indigo", color: $indigo-a200, number: "-a200"),
// "indigo-A400": (name: "indigo", color: $indigo-A400, number: "-A400"), // "indigo-a400": (name: "indigo", color: $indigo-a400, number: "-a400"),
// "indigo-A700": (name: "indigo", color: $indigo-A700, number: "-A700"), // "indigo-a700": (name: "indigo", color: $indigo-a700, number: "-a700"),
// "indigo": (name: "indigo", color: $indigo, number: ""), // "indigo": (name: "indigo", color: $indigo, number: ""),
// "blue-50": (name: "blue", color: $blue-50, number: "-50"), // "blue-50": (name: "blue", color: $blue-50, number: "-50"),
// "blue-100": (name: "blue", color: $blue-100, number: "-100"), // "blue-100": (name: "blue", color: $blue-100, number: "-100"),
@ -108,10 +108,10 @@
// "blue-700": (name: "blue", color: $blue-700, number: "-700"), // "blue-700": (name: "blue", color: $blue-700, number: "-700"),
// "blue-800": (name: "blue", color: $blue-800, number: "-800"), // "blue-800": (name: "blue", color: $blue-800, number: "-800"),
// "blue-900": (name: "blue", color: $blue-900, number: "-900"), // "blue-900": (name: "blue", color: $blue-900, number: "-900"),
// "blue-A100": (name: "blue", color: $blue-A100, number: "-A100"), // "blue-a100": (name: "blue", color: $blue-a100, number: "-a100"),
// "blue-A200": (name: "blue", color: $blue-A200, number: "-A200"), // "blue-a200": (name: "blue", color: $blue-a200, number: "-a200"),
// "blue-A400": (name: "blue", color: $blue-A400, number: "-A400"), // "blue-a400": (name: "blue", color: $blue-a400, number: "-a400"),
// "blue-A700": (name: "blue", color: $blue-A700, number: "-A700"), // "blue-a700": (name: "blue", color: $blue-a700, number: "-a700"),
// "blue": (name: "blue", color: $blue, number: ""), // "blue": (name: "blue", color: $blue, number: ""),
// "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"), // "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"),
// "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"), // "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-700": (name: "light-blue", color: $light-blue-700, number: "-700"),
// "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"), // "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-900": (name: "light-blue", color: $light-blue-900, number: "-900"),
// "light-blue-A100": (name: "light-blue", color: $light-blue-A100, number: "-A100"), // "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-a200": (name: "light-blue", color: $light-blue-a200, number: "-a200"),
// "light-blue-A400": (name: "light-blue", color: $light-blue-A400, number: "-A400"), // "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-a700": (name: "light-blue", color: $light-blue-a700, number: "-a700"),
// "light-blue": (name: "light-blue", color: $light-blue, number: ""), // "light-blue": (name: "light-blue", color: $light-blue, number: ""),
// "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"), // "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"),
// "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"), // "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"),
@ -138,10 +138,10 @@
// "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"), // "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"),
// "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"), // "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"),
// "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"), // "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"),
// "cyan-A100": (name: "cyan", color: $cyan-A100, number: "-A100"), // "cyan-a100": (name: "cyan", color: $cyan-a100, number: "-a100"),
// "cyan-A200": (name: "cyan", color: $cyan-A200, number: "-A200"), // "cyan-a200": (name: "cyan", color: $cyan-a200, number: "-a200"),
// "cyan-A400": (name: "cyan", color: $cyan-A400, number: "-A400"), // "cyan-a400": (name: "cyan", color: $cyan-a400, number: "-a400"),
// "cyan-A700": (name: "cyan", color: $cyan-A700, number: "-A700"), // "cyan-a700": (name: "cyan", color: $cyan-a700, number: "-a700"),
// "cyan": (name: "cyan", color: $cyan, number: ""), // "cyan": (name: "cyan", color: $cyan, number: ""),
// "teal-50": (name: "teal", color: $teal-50, number: "-50"), // "teal-50": (name: "teal", color: $teal-50, number: "-50"),
// "teal-100": (name: "teal", color: $teal-100, number: "-100"), // "teal-100": (name: "teal", color: $teal-100, number: "-100"),
@ -153,10 +153,10 @@
// "teal-700": (name: "teal", color: $teal-700, number: "-700"), // "teal-700": (name: "teal", color: $teal-700, number: "-700"),
// "teal-800": (name: "teal", color: $teal-800, number: "-800"), // "teal-800": (name: "teal", color: $teal-800, number: "-800"),
// "teal-900": (name: "teal", color: $teal-900, number: "-900"), // "teal-900": (name: "teal", color: $teal-900, number: "-900"),
// "teal-A100": (name: "teal", color: $teal-A100, number: "-A100"), // "teal-a100": (name: "teal", color: $teal-a100, number: "-a100"),
// "teal-A200": (name: "teal", color: $teal-A200, number: "-A200"), // "teal-a200": (name: "teal", color: $teal-a200, number: "-a200"),
// "teal-A400": (name: "teal", color: $teal-A400, number: "-A400"), // "teal-a400": (name: "teal", color: $teal-a400, number: "-a400"),
// "teal-A700": (name: "teal", color: $teal-A700, number: "-A700"), // "teal-a700": (name: "teal", color: $teal-a700, number: "-a700"),
// "teal": (name: "teal", color: $teal, number: ""), // "teal": (name: "teal", color: $teal, number: ""),
// "green-50": (name: "green", color: $green-50, number: "-50"), // "green-50": (name: "green", color: $green-50, number: "-50"),
// "green-100": (name: "green", color: $green-100, number: "-100"), // "green-100": (name: "green", color: $green-100, number: "-100"),
@ -168,10 +168,10 @@
// "green-700": (name: "green", color: $green-700, number: "-700"), // "green-700": (name: "green", color: $green-700, number: "-700"),
// "green-800": (name: "green", color: $green-800, number: "-800"), // "green-800": (name: "green", color: $green-800, number: "-800"),
// "green-900": (name: "green", color: $green-900, number: "-900"), // "green-900": (name: "green", color: $green-900, number: "-900"),
// "green-A100": (name: "green", color: $green-A100, number: "-A100"), // "green-a100": (name: "green", color: $green-a100, number: "-a100"),
// "green-A200": (name: "green", color: $green-A200, number: "-A200"), // "green-a200": (name: "green", color: $green-a200, number: "-a200"),
// "green-A400": (name: "green", color: $green-A400, number: "-A400"), // "green-a400": (name: "green", color: $green-a400, number: "-a400"),
// "green-A700": (name: "green", color: $green-A700, number: "-A700"), // "green-a700": (name: "green", color: $green-a700, number: "-a700"),
// "green": (name: "green", color: $green, number: ""), // "green": (name: "green", color: $green, number: ""),
// "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"), // "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"),
// "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"), // "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-700": (name: "light-green", color: $light-green-700, number: "-700"),
// "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"), // "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-900": (name: "light-green", color: $light-green-900, number: "-900"),
// "light-green-A100": (name: "light-green", color: $light-green-A100, number: "-A100"), // "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-a200": (name: "light-green", color: $light-green-a200, number: "-a200"),
// "light-green-A400": (name: "light-green", color: $light-green-A400, number: "-A400"), // "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-a700": (name: "light-green", color: $light-green-a700, number: "-a700"),
// "light-green": (name: "light-green", color: $light-green, number: ""), // "light-green": (name: "light-green", color: $light-green, number: ""),
// "lime-50": (name: "lime", color: $lime-50, number: "-50"), // "lime-50": (name: "lime", color: $lime-50, number: "-50"),
// "lime-100": (name: "lime", color: $lime-100, number: "-100"), // "lime-100": (name: "lime", color: $lime-100, number: "-100"),
@ -198,10 +198,10 @@
// "lime-700": (name: "lime", color: $lime-700, number: "-700"), // "lime-700": (name: "lime", color: $lime-700, number: "-700"),
// "lime-800": (name: "lime", color: $lime-800, number: "-800"), // "lime-800": (name: "lime", color: $lime-800, number: "-800"),
// "lime-900": (name: "lime", color: $lime-900, number: "-900"), // "lime-900": (name: "lime", color: $lime-900, number: "-900"),
// "lime-A100": (name: "lime", color: $lime-A100, number: "-A100"), // "lime-a100": (name: "lime", color: $lime-a100, number: "-a100"),
// "lime-A200": (name: "lime", color: $lime-A200, number: "-A200"), // "lime-a200": (name: "lime", color: $lime-a200, number: "-a200"),
// "lime-A400": (name: "lime", color: $lime-A400, number: "-A400"), // "lime-a400": (name: "lime", color: $lime-a400, number: "-a400"),
// "lime-A700": (name: "lime", color: $lime-A700, number: "-A700"), // "lime-a700": (name: "lime", color: $lime-a700, number: "-a700"),
// "lime": (name: "lime", color: $lime, number: ""), // "lime": (name: "lime", color: $lime, number: ""),
// "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"), // "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"),
// "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"), // "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"),
@ -213,10 +213,10 @@
// "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"), // "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"),
// "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"), // "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"),
// "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"), // "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"),
// "yellow-A100": (name: "yellow", color: $yellow-A100, number: "-A100"), // "yellow-a100": (name: "yellow", color: $yellow-a100, number: "-a100"),
// "yellow-A200": (name: "yellow", color: $yellow-A200, number: "-A200"), // "yellow-a200": (name: "yellow", color: $yellow-a200, number: "-a200"),
// "yellow-A400": (name: "yellow", color: $yellow-A400, number: "-A400"), // "yellow-a400": (name: "yellow", color: $yellow-a400, number: "-a400"),
// "yellow-A700": (name: "yellow", color: $yellow-A700, number: "-A700"), // "yellow-a700": (name: "yellow", color: $yellow-a700, number: "-a700"),
// "yellow": (name: "yellow", color: $yellow, number: ""), // "yellow": (name: "yellow", color: $yellow, number: ""),
// "amber-50": (name: "amber", color: $amber-50, number: "-50"), // "amber-50": (name: "amber", color: $amber-50, number: "-50"),
// "amber-100": (name: "amber", color: $amber-100, number: "-100"), // "amber-100": (name: "amber", color: $amber-100, number: "-100"),
@ -228,10 +228,10 @@
// "amber-700": (name: "amber", color: $amber-700, number: "-700"), // "amber-700": (name: "amber", color: $amber-700, number: "-700"),
// "amber-800": (name: "amber", color: $amber-800, number: "-800"), // "amber-800": (name: "amber", color: $amber-800, number: "-800"),
// "amber-900": (name: "amber", color: $amber-900, number: "-900"), // "amber-900": (name: "amber", color: $amber-900, number: "-900"),
// "amber-A100": (name: "amber", color: $amber-A100, number: "-A100"), // "amber-a100": (name: "amber", color: $amber-a100, number: "-a100"),
// "amber-A200": (name: "amber", color: $amber-A200, number: "-A200"), // "amber-a200": (name: "amber", color: $amber-a200, number: "-a200"),
// "amber-A400": (name: "amber", color: $amber-A400, number: "-A400"), // "amber-a400": (name: "amber", color: $amber-a400, number: "-a400"),
// "amber-A700": (name: "amber", color: $amber-A700, number: "-A700"), // "amber-a700": (name: "amber", color: $amber-a700, number: "-a700"),
// "amber": (name: "amber", color: $amber, number: ""), // "amber": (name: "amber", color: $amber, number: ""),
// "orange-50": (name: "orange", color: $orange-50, number: "-50"), // "orange-50": (name: "orange", color: $orange-50, number: "-50"),
// "orange-100": (name: "orange", color: $orange-100, number: "-100"), // "orange-100": (name: "orange", color: $orange-100, number: "-100"),
@ -243,10 +243,10 @@
// "orange-700": (name: "orange", color: $orange-700, number: "-700"), // "orange-700": (name: "orange", color: $orange-700, number: "-700"),
// "orange-800": (name: "orange", color: $orange-800, number: "-800"), // "orange-800": (name: "orange", color: $orange-800, number: "-800"),
// "orange-900": (name: "orange", color: $orange-900, number: "-900"), // "orange-900": (name: "orange", color: $orange-900, number: "-900"),
// "orange-A100": (name: "orange", color: $orange-A100, number: "-A100"), // "orange-a100": (name: "orange", color: $orange-a100, number: "-a100"),
// "orange-A200": (name: "orange", color: $orange-A200, number: "-A200"), // "orange-a200": (name: "orange", color: $orange-a200, number: "-a200"),
// "orange-A400": (name: "orange", color: $orange-A400, number: "-A400"), // "orange-a400": (name: "orange", color: $orange-a400, number: "-a400"),
// "orange-A700": (name: "orange", color: $orange-A700, number: "-A700"), // "orange-a700": (name: "orange", color: $orange-a700, number: "-a700"),
// "orange": (name: "orange", color: $orange, number: ""), // "orange": (name: "orange", color: $orange, number: ""),
// "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"), // "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"),
// "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"), // "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-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"),
// "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"), // "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-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"),
// "deep-orange-A100": (name: "deep-orange", color: $deep-orange-A100, number: "-A100"), // "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-a200": (name: "deep-orange", color: $deep-orange-a200, number: "-a200"),
// "deep-orange-A400": (name: "deep-orange", color: $deep-orange-A400, number: "-A400"), // "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-a700": (name: "deep-orange", color: $deep-orange-a700, number: "-a700"),
// "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""), // "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""),
// "brown-50": (name: "brown", color: $brown-50, number: "-50"), // "brown-50": (name: "brown", color: $brown-50, number: "-50"),
// "brown-100": (name: "brown", color: $brown-100, number: "-100"), // "brown-100": (name: "brown", color: $brown-100, number: "-100"),
@ -273,10 +273,10 @@
// "brown-700": (name: "brown", color: $brown-700, number: "-700"), // "brown-700": (name: "brown", color: $brown-700, number: "-700"),
// "brown-800": (name: "brown", color: $brown-800, number: "-800"), // "brown-800": (name: "brown", color: $brown-800, number: "-800"),
// "brown-900": (name: "brown", color: $brown-900, number: "-900"), // "brown-900": (name: "brown", color: $brown-900, number: "-900"),
// "brown-A100": (name: "brown", color: $brown-A100, number: "-A100"), // "brown-a100": (name: "brown", color: $brown-a100, number: "-a100"),
// "brown-A200": (name: "brown", color: $brown-A200, number: "-A200"), // "brown-a200": (name: "brown", color: $brown-a200, number: "-a200"),
// "brown-A400": (name: "brown", color: $brown-A400, number: "-A400"), // "brown-a400": (name: "brown", color: $brown-a400, number: "-a400"),
// "brown-A700": (name: "brown", color: $brown-A700, number: "-A700"), // "brown-a700": (name: "brown", color: $brown-a700, number: "-a700"),
// "brown": (name: "brown", color: $brown, number: ""), // "brown": (name: "brown", color: $brown, number: ""),
// "grey-50": (name: "grey", color: $grey-50, number: "-50"), // "grey-50": (name: "grey", color: $grey-50, number: "-50"),
// "grey-100": (name: "grey", color: $grey-100, number: "-100"), // "grey-100": (name: "grey", color: $grey-100, number: "-100"),
@ -288,10 +288,10 @@
// "grey-700": (name: "grey", color: $grey-700, number: "-700"), // "grey-700": (name: "grey", color: $grey-700, number: "-700"),
// "grey-800": (name: "grey", color: $grey-800, number: "-800"), // "grey-800": (name: "grey", color: $grey-800, number: "-800"),
// "grey-900": (name: "grey", color: $grey-900, number: "-900"), // "grey-900": (name: "grey", color: $grey-900, number: "-900"),
// "grey-A100": (name: "grey", color: $grey-A100, number: "-A100"), // "grey-a100": (name: "grey", color: $grey-a100, number: "-a100"),
// "grey-A200": (name: "grey", color: $grey-A200, number: "-A200"), // "grey-a200": (name: "grey", color: $grey-a200, number: "-a200"),
// "grey-A400": (name: "grey", color: $grey-A400, number: "-A400"), // "grey-a400": (name: "grey", color: $grey-a400, number: "-a400"),
// "grey-A700": (name: "grey", color: $grey-A700, number: "-A700"), // "grey-a700": (name: "grey", color: $grey-a700, number: "-a700"),
// "grey": (name: "grey", color: $grey, number: ""), // "grey": (name: "grey", color: $grey, number: ""),
// "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"), // "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"),
// "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"), // "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-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"),
// "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"), // "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-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"),
// "blue-grey-A100": (name: "blue-grey", color: $blue-grey-A100, number: "-A100"), // "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-a200": (name: "blue-grey", color: $blue-grey-a200, number: "-a200"),
// "blue-grey-A400": (name: "blue-grey", color: $blue-grey-A400, number: "-A400"), // "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-a700": (name: "blue-grey", color: $blue-grey-a700, number: "-a700"),
// "blue-grey": (name: "blue-grey", color: $blue-grey, number: "") // "blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
//); //);

223
scss/includes/_colors.scss → scss/variables/_colors.scss
View File

@ -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-50: #ffebee !default;
$red-100: #ffcdd2 !default; $red-100: #ffcdd2 !default;
$red-200: #ef9a9a !default; $red-200: #ef9a9a !default;
@ -44,10 +39,10 @@ $red-600: #e53935 !default;
$red-700: #d32f2f !default; $red-700: #d32f2f !default;
$red-800: #c62828 !default; $red-800: #c62828 !default;
$red-900: #b71c1c !default; $red-900: #b71c1c !default;
$red-A100: #ff8a80 !default; $red-a100: #ff8a80 !default;
$red-A200: #ff5252 !default; $red-a200: #ff5252 !default;
$red-A400: #ff1744 !default; $red-a400: #ff1744 !default;
$red-A700: #d50000 !default; $red-a700: #d50000 !default;
$red: $red-500 !default; $red: $red-500 !default;
@ -61,10 +56,10 @@ $pink-600: #d81b60 !default;
$pink-700: #c2185b !default; $pink-700: #c2185b !default;
$pink-800: #ad1457 !default; $pink-800: #ad1457 !default;
$pink-900: #880e4f !default; $pink-900: #880e4f !default;
$pink-A100: #ff80ab !default; $pink-a100: #ff80ab !default;
$pink-A200: #ff4081 !default; $pink-a200: #ff4081 !default;
$pink-A400: #f50057 !default; $pink-a400: #f50057 !default;
$pink-A700: #c51162 !default; $pink-a700: #c51162 !default;
$pink: $pink-500 !default; $pink: $pink-500 !default;
@ -78,10 +73,10 @@ $purple-600: #8e24aa !default;
$purple-700: #7b1fa2 !default; $purple-700: #7b1fa2 !default;
$purple-800: #6a1b9a !default; $purple-800: #6a1b9a !default;
$purple-900: #4a148c !default; $purple-900: #4a148c !default;
$purple-A100: #ea80fc !default; $purple-a100: #ea80fc !default;
$purple-A200: #e040fb !default; $purple-a200: #e040fb !default;
$purple-A400: #d500f9 !default; $purple-a400: #d500f9 !default;
$purple-A700: #aa00ff !default; $purple-a700: #a0f !default;
$purple: $purple-500 !default; $purple: $purple-500 !default;
@ -95,10 +90,10 @@ $deep-purple-600: #5e35b1 !default;
$deep-purple-700: #512da8 !default; $deep-purple-700: #512da8 !default;
$deep-purple-800: #4527a0 !default; $deep-purple-800: #4527a0 !default;
$deep-purple-900: #311b92 !default; $deep-purple-900: #311b92 !default;
$deep-purple-A100: #b388ff !default; $deep-purple-a100: #b388ff !default;
$deep-purple-A200: #7c4dff !default; $deep-purple-a200: #7c4dff !default;
$deep-purple-A400: #651fff !default; $deep-purple-a400: #651fff !default;
$deep-purple-A700: #6200ea !default; $deep-purple-a700: #6200ea !default;
$deep-purple: $deep-purple-500 !default; $deep-purple: $deep-purple-500 !default;
@ -112,10 +107,10 @@ $indigo-600: #3949ab !default;
$indigo-700: #303f9f !default; $indigo-700: #303f9f !default;
$indigo-800: #283593 !default; $indigo-800: #283593 !default;
$indigo-900: #1a237e !default; $indigo-900: #1a237e !default;
$indigo-A100: #8c9eff !default; $indigo-a100: #8c9eff !default;
$indigo-A200: #536dfe !default; $indigo-a200: #536dfe !default;
$indigo-A400: #3d5afe !default; $indigo-a400: #3d5afe !default;
$indigo-A700: #304ffe !default; $indigo-a700: #304ffe !default;
$indigo: $indigo-500 !default; $indigo: $indigo-500 !default;
@ -129,10 +124,10 @@ $blue-600: #1e88e5 !default;
$blue-700: #1976d2 !default; $blue-700: #1976d2 !default;
$blue-800: #1565c0 !default; $blue-800: #1565c0 !default;
$blue-900: #0d47a1 !default; $blue-900: #0d47a1 !default;
$blue-A100: #82b1ff !default; $blue-a100: #82b1ff !default;
$blue-A200: #448aff !default; $blue-a200: #448aff !default;
$blue-A400: #2979ff !default; $blue-a400: #2979ff !default;
$blue-A700: #2962ff !default; $blue-a700: #2962ff !default;
$blue: $blue-500 !default; $blue: $blue-500 !default;
@ -146,10 +141,10 @@ $light-blue-600: #039be5 !default;
$light-blue-700: #0288d1 !default; $light-blue-700: #0288d1 !default;
$light-blue-800: #0277bd !default; $light-blue-800: #0277bd !default;
$light-blue-900: #01579b !default; $light-blue-900: #01579b !default;
$light-blue-A100: #80d8ff !default; $light-blue-a100: #80d8ff !default;
$light-blue-A200: #40c4ff !default; $light-blue-a200: #40c4ff !default;
$light-blue-A400: #00b0ff !default; $light-blue-a400: #00b0ff !default;
$light-blue-A700: #0091ea !default; $light-blue-a700: #0091ea !default;
$light-blue: $light-blue-500 !default; $light-blue: $light-blue-500 !default;
@ -163,10 +158,10 @@ $cyan-600: #00acc1 !default;
$cyan-700: #0097a7 !default; $cyan-700: #0097a7 !default;
$cyan-800: #00838f !default; $cyan-800: #00838f !default;
$cyan-900: #006064 !default; $cyan-900: #006064 !default;
$cyan-A100: #84ffff !default; $cyan-a100: #84ffff !default;
$cyan-A200: #18ffff !default; $cyan-a200: #18ffff !default;
$cyan-A400: #00e5ff !default; $cyan-a400: #00e5ff !default;
$cyan-A700: #00b8d4 !default; $cyan-a700: #00b8d4 !default;
$cyan: $cyan-500 !default; $cyan: $cyan-500 !default;
@ -180,10 +175,10 @@ $teal-600: #00897b !default;
$teal-700: #00796b !default; $teal-700: #00796b !default;
$teal-800: #00695c !default; $teal-800: #00695c !default;
$teal-900: #004d40 !default; $teal-900: #004d40 !default;
$teal-A100: #a7ffeb !default; $teal-a100: #a7ffeb !default;
$teal-A200: #64ffda !default; $teal-a200: #64ffda !default;
$teal-A400: #1de9b6 !default; $teal-a400: #1de9b6 !default;
$teal-A700: #00bfa5 !default; $teal-a700: #00bfa5 !default;
$teal: $teal-500 !default; $teal: $teal-500 !default;
@ -197,10 +192,10 @@ $green-600: #43a047 !default;
$green-700: #388e3c !default; $green-700: #388e3c !default;
$green-800: #2e7d32 !default; $green-800: #2e7d32 !default;
$green-900: #1b5e20 !default; $green-900: #1b5e20 !default;
$green-A100: #b9f6ca !default; $green-a100: #b9f6ca !default;
$green-A200: #69f0ae !default; $green-a200: #69f0ae !default;
$green-A400: #00e676 !default; $green-a400: #00e676 !default;
$green-A700: #00c853 !default; $green-a700: #00c853 !default;
$green: $green-500 !default; $green: $green-500 !default;
@ -214,10 +209,10 @@ $light-green-600: #7cb342 !default;
$light-green-700: #689f38 !default; $light-green-700: #689f38 !default;
$light-green-800: #558b2f !default; $light-green-800: #558b2f !default;
$light-green-900: #33691e !default; $light-green-900: #33691e !default;
$light-green-A100: #ccff90 !default; $light-green-a100: #ccff90 !default;
$light-green-A200: #b2ff59 !default; $light-green-a200: #b2ff59 !default;
$light-green-A400: #76ff03 !default; $light-green-a400: #76ff03 !default;
$light-green-A700: #64dd17 !default; $light-green-a700: #64dd17 !default;
$light-green: $light-green-500 !default; $light-green: $light-green-500 !default;
@ -231,10 +226,10 @@ $lime-600: #c0ca33 !default;
$lime-700: #afb42b !default; $lime-700: #afb42b !default;
$lime-800: #9e9d24 !default; $lime-800: #9e9d24 !default;
$lime-900: #827717 !default; $lime-900: #827717 !default;
$lime-A100: #f4ff81 !default; $lime-a100: #f4ff81 !default;
$lime-A200: #eeff41 !default; $lime-a200: #eeff41 !default;
$lime-A400: #c6ff00 !default; $lime-a400: #c6ff00 !default;
$lime-A700: #aeea00 !default; $lime-a700: #aeea00 !default;
$lime: $lime-500 !default; $lime: $lime-500 !default;
@ -248,10 +243,10 @@ $yellow-600: #fdd835 !default;
$yellow-700: #fbc02d !default; $yellow-700: #fbc02d !default;
$yellow-800: #f9a825 !default; $yellow-800: #f9a825 !default;
$yellow-900: #f57f17 !default; $yellow-900: #f57f17 !default;
$yellow-A100: #ffff8d !default; $yellow-a100: #ffff8d !default;
$yellow-A200: #ffff00 !default; $yellow-a200: #ff0 !default;
$yellow-A400: #ffea00 !default; $yellow-a400: #ffea00 !default;
$yellow-A700: #ffd600 !default; $yellow-a700: #ffd600 !default;
$yellow: $yellow-500 !default; $yellow: $yellow-500 !default;
@ -265,10 +260,10 @@ $amber-600: #ffb300 !default;
$amber-700: #ffa000 !default; $amber-700: #ffa000 !default;
$amber-800: #ff8f00 !default; $amber-800: #ff8f00 !default;
$amber-900: #ff6f00 !default; $amber-900: #ff6f00 !default;
$amber-A100: #ffe57f !default; $amber-a100: #ffe57f !default;
$amber-A200: #ffd740 !default; $amber-a200: #ffd740 !default;
$amber-A400: #ffc400 !default; $amber-a400: #ffc400 !default;
$amber-A700: #ffab00 !default; $amber-a700: #ffab00 !default;
$amber: $amber-500 !default; $amber: $amber-500 !default;
@ -282,10 +277,10 @@ $orange-600: #fb8c00 !default;
$orange-700: #f57c00 !default; $orange-700: #f57c00 !default;
$orange-800: #ef6c00 !default; $orange-800: #ef6c00 !default;
$orange-900: #e65100 !default; $orange-900: #e65100 !default;
$orange-A100: #ffd180 !default; $orange-a100: #ffd180 !default;
$orange-A200: #ffab40 !default; $orange-a200: #ffab40 !default;
$orange-A400: #ff9100 !default; $orange-a400: #ff9100 !default;
$orange-A700: #ff6d00 !default; $orange-a700: #ff6d00 !default;
$orange: $orange-500 !default; $orange: $orange-500 !default;
@ -299,10 +294,10 @@ $deep-orange-600: #f4511e !default;
$deep-orange-700: #e64a19 !default; $deep-orange-700: #e64a19 !default;
$deep-orange-800: #d84315 !default; $deep-orange-800: #d84315 !default;
$deep-orange-900: #bf360c !default; $deep-orange-900: #bf360c !default;
$deep-orange-A100: #ff9e80 !default; $deep-orange-a100: #ff9e80 !default;
$deep-orange-A200: #ff6e40 !default; $deep-orange-a200: #ff6e40 !default;
$deep-orange-A400: #ff3d00 !default; $deep-orange-a400: #ff3d00 !default;
$deep-orange-A700: #dd2c00 !default; $deep-orange-a700: #dd2c00 !default;
$deep-orange: $deep-orange-500 !default; $deep-orange: $deep-orange-500 !default;
@ -316,16 +311,16 @@ $brown-600: #6d4c41 !default;
$brown-700: #5d4037 !default; $brown-700: #5d4037 !default;
$brown-800: #4e342e !default; $brown-800: #4e342e !default;
$brown-900: #3e2723 !default; $brown-900: #3e2723 !default;
$brown-A100: #d7ccc8 !default; $brown-a100: #d7ccc8 !default;
$brown-A200: #bcaaa4 !default; $brown-a200: #bcaaa4 !default;
$brown-A400: #8d6e63 !default; $brown-a400: #8d6e63 !default;
$brown-A700: #5d4037 !default; $brown-a700: #5d4037 !default;
$brown: $brown-500 !default; $brown: $brown-500 !default;
$grey-50: #fafafa !default; $grey-50: #fafafa !default;
$grey-100: #f5f5f5 !default; $grey-100: #f5f5f5 !default;
$grey-200: #eeeeee !default; $grey-200: #eee !default;
$grey-300: #e0e0e0 !default; $grey-300: #e0e0e0 !default;
$grey-400: #bdbdbd !default; $grey-400: #bdbdbd !default;
$grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default; $grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default;
@ -333,10 +328,10 @@ $grey-600: #757575 !default;
$grey-700: #616161 !default; $grey-700: #616161 !default;
$grey-800: #424242 !default; $grey-800: #424242 !default;
$grey-900: #212121 !default; $grey-900: #212121 !default;
$grey-A100: #f5f5f5 !default; $grey-a100: #f5f5f5 !default;
$grey-A200: #eeeeee !default; $grey-a200: #eee !default;
$grey-A400: #bdbdbd !default; $grey-a400: #bdbdbd !default;
$grey-A700: #616161 !default; $grey-a700: #616161 !default;
$grey: $grey-500 !default; $grey: $grey-500 !default;
@ -350,12 +345,12 @@ $blue-grey-600: #546e7a !default;
$blue-grey-700: #455a64 !default; $blue-grey-700: #455a64 !default;
$blue-grey-800: #37474f !default; $blue-grey-800: #37474f !default;
$blue-grey-900: #263238 !default; $blue-grey-900: #263238 !default;
$blue-grey-A100: #cfd8dc !default; $blue-grey-a100: #cfd8dc !default;
$blue-grey-A200: #b0bec5 !default; $blue-grey-a200: #b0bec5 !default;
$blue-grey-A400: #78909c !default; $blue-grey-a400: #78909c !default;
$blue-grey-A700: #455a64 !default; $blue-grey-a700: #455a64 !default;
$blue-grey: $blue-grey-500 !default; $blue-grey: $blue-grey-500 !default;
$black: #000000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%"; $black: #000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
$white: #ffffff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%"; $white: #fff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";

6
scss/includes/variables/_forms.scss → scss/variables/_forms.scss
View File

@ -3,8 +3,8 @@
//$input-padding-x: .75rem !default; //$input-padding-x: .75rem !default;
//$input-padding-y: .375rem !default; //$input-padding-y: .375rem !default;
// //
$input-bg: rgba(0, 0, 0, 0) !default; // #fff !default; $input-bg: rgba($black, 0) !default; // #fff !default;
$input-bg-disabled: rgba(0, 0, 0, 0) !default; // $gray-lighter !default; $input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default;
// //
//$input-color: $gray !default; //$input-color: $gray !default;
//$input-border-color: #ccc !default; //$input-border-color: #ccc !default;
@ -18,7 +18,7 @@ $input-border-radius: 0 !default; // $border-radius !default;
//$input-border-focus: #66afe9 !default; //$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !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-x-sm: .75rem !default;
//$input-padding-y-sm: .275rem !default; //$input-padding-y-sm: .275rem !default;

0
scss/includes/variables/_state.scss → scss/variables/_state.scss
View File

0
scss/includes/variables/_type.scss → scss/variables/_type.scss
View File