first automated sass conversion, using grunt task 'material:sass'

This commit is contained in:
Kevin Ross 2015-11-02 14:39:13 -06:00
parent 44d14470bc
commit f397283d95
35 changed files with 2311 additions and 1614 deletions

View File

@ -2,19 +2,18 @@ module.exports = function(grunt) {
"use strict";
require("load-grunt-tasks")(grunt);
grunt.loadNpmTasks('grunt-less-to-sass');
grunt.initConfig({
// Convert from less to sass
sass: {
lessToSass: {
convert: {
files: [{
expand: true,
cwd: 'less',
src: ['*.less'],
ext: '.scss',
dest: '../sass'
dest: 'sass'
}]
}
},
@ -271,6 +270,8 @@ module.exports = function(grunt) {
});
grunt.loadNpmTasks('grunt-less-to-sass');
grunt.registerTask("default", ["material", "ripples"]);
grunt.registerTask("material", [
@ -279,7 +280,7 @@ module.exports = function(grunt) {
]);
grunt.registerTask("material:sass", [
"sass:convert"
"lessToSass:convert"
]);
grunt.registerTask("material:less", [

View File

@ -1,96 +1,23 @@
.alert {
border: 0px;
border-radius: 0;
a, .alert-link {
color: #FFFFFF;
.generic-variations(unquote(""), $darkbg-text, {
background-color: $material-color;
color: $material-text-color;
a, .alert-link {
color: $material-text-color;
}
});
&-info, &-danger, &-warning, &-success {
color: $darkbg-text;
}
&-default {
a, .alert-link {
color: $lightbg-text;
}
}
}
// Alert buttons
// --------------------------------------------------
.alert-default {
@include alert-variant(#FFFFFF);
a, .alert-link {
color: #000000;
}
}
.alert-primary {
color: #FFFFFF;
@include alert-variant($primary);
}
// Success appears as green
.alert-success {
color: #FFFFFF;
@include alert-variant($success);
}
// Info appears as blue-green
.alert-info {
color: #FFFFFF;
@include alert-variant($info);
}
// Warning appears as orange
.alert-warning {
color: #FFFFFF;
@include alert-variant($warning);
}
// Danger and error appear as red
.alert-danger {
@include alert-variant($danger);
}
// Material shades
.alert-material-red {
@include alert-variant($red)
}
.alert-material-pink {
@include alert-variant($pink);
}
.alert-material-purple {
@include alert-variant($purple);
}
.alert-material-deeppurple {
@include alert-variant($deeppurple);
}
.alert-material-indigo {
@include alert-variant($indigo);
}
.alert-material-lightblue {
@include alert-variant($lightblue);
}
.alert-material-cyan {
@include alert-variant($cyan);
}
.alert-material-teal {
@include alert-variant($teal);
}
.alert-material-lightgreen {
@include alert-variant($lightgreen);
}
.alert-material-lime {
@include alert-variant($lime);
}
.alert-material-lightyellow {
@include alert-variant($lightyellow);
}
.alert-material-orange {
@include alert-variant($orange);
}
.alert-material-deeporange {
@include alert-variant($deeporange);
}
.alert-material-grey {
@include alert-variant($grey);
}
.alert-material-bluegrey {
@include alert-variant($bluegrey);
}
.alert-material-brown {
@include alert-variant($brown);
}
.alert-material-lightgrey {
@include alert-variant($lightgrey);
}

View File

@ -1,16 +0,0 @@
// main: _material.scss
@keyframes input-highlight {
0% {
left: 20%;
width: 20%;
}
99% {
width: 0;
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}

View File

@ -1,187 +1,145 @@
@mixin btn-shadow(){
@extend .shadow-z-2;
transition: box-shadow transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@extend .shadow-z-3;
}
.btn {
position: relative;
padding: 8px 30px;
border: 0;
margin: 10px 1px;
cursor: pointer;
border-radius: 2px;
text-transform: uppercase;
text-decoration: none;
color: $darkbg-text;
&:hover {
@extend .shadow-z-5;
}
&:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
@include shadow-z-1();
}
&:active:not(.btn-link):not(.btn-flat):not(.btn-fab) {
@include shadow-z-1-hover();
}
transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important;
@include variations(unquote(".btn-flat:not(.btn-link)"), color, $lightbg-text);
@include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default);
// BTN hover effect
.generic-variations(unquote(":hover:not(.btn-link):not(.btn-flat)"), $btn-default, {
background-color: contrast($material-color, darken($material-color, 4%), lighten($material-color, 4%), $contrast-factor);
});
// BTN active effect
.generic-variations(unquote(":active:not(.btn-link):not(.btn-flat)"), $btn-default, {
background-color: contrast($material-color, darken($material-color, 6%), lighten($material-color, 6%), $contrast-factor);
});
// BTN .active effect
.generic-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, {
background-color: contrast($material-color, darken($material-color, 6%), lighten($material-color, 6%), $contrast-factor);
});
// BTN flat hover effect
.generic-variations(unquote(".btn-flat:hover:not(.btn-ink)"), $btn-default, {
background-color: rgba($material-color, (20/100));
});
}
.btn {
position: relative;
padding: 8px 30px;
border: 0;
margin: 10px 1px;
&.btn-flat {
background: none;
box-shadow: none;
font-weight: 500;
&:disabled {
color: $text-disabled !important;
}
}
cursor: pointer;
border-radius: 4px;
text-transform: uppercase;
text-decoration: none;
color: $darkbg-text;
// Size variations
&.btn-sm {
padding: 5px 20px;
}
&.btn-xs {
padding: 4px 15px;
font-size: 10px;
}
&:hover {
color: $darkbg-text;
}
&:hover:not(.btn-link) {
@extend .shadow-z-2-hover;
}
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@extend .shadow-z-3;
}
outline: none !important;
}
// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
color: $lightbg-text;
&:hover {
color: $lightbg-text;
}
}
.btn:not([class^="btn btn-"]), .btn-default {
&:hover {
background-color: rgba(255,255,255,0.5);
}
}
.btn-raised {
&.btn-raised {
@include btn-shadow();
}
}
.open > .dropdown-toggle.btn {
//.variations(#{""}, background-color, $btn-default);
}
.btn-flat {
box-shadow: none !important;
&.btn-default:hover {
background: none;
}
}
.btn-group, .btn-group-vertical {
position: relative;
border-radius: 4px;
margin: 10px 1px;
@include btn-shadow();
&.open .dropdown-toggle {
box-shadow: none;
}
&.btn-group-raised {
@include btn-shadow();
}
.btn, .btn:active, .btn-group {
box-shadow: none !important;
margin: 0;
}
.btn:active .caret { margin-left: -1px; }
}
.btn-group-flat {
box-shadow: none !important;
}
// Floating Action Button (FAB)
.btn-fab {
&.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
&, &:hover, &:active {
@include variations(unquote(""), background-color, transparent);
}
&, &:hover {
//.variations(#{""}, background-color, transparent);
@include shadow-z-1();
}
&:active {
@include shadow-z-1-hover();
}
&, .ripple-wrapper {
border-radius: 100%;
border-radius: 100%;
}
&.btn-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
&.btn-fab-mini {
width: 40px;
height: 40px;
padding: 13px 0;
font-size: 15px;
}
i {
position: relative;
top: -5px;
margin: 0 auto;
}
}
}
// Alert buttons
// --------------------------------------------------
// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default)
.btn-link, .btn:not([class*="btn-"]), .btn-default {
color: $lightbg-text;
&:hover {
color: $lightbg-text;
}
}
.btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) {
&:hover, &.active {
background-color: rgba(255,255,255,0.5);
}
}
.open > .dropdown-toggle.btn {
@include variations(unquote(""), background-color, $btn-default);
}
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: 0;
}
.btn-group, .btn-group-vertical {
position: relative;
border-radius: 2px;
margin: 10px 1px;
.btn-default {
@include button-variant($btn-default);
@include btn-shadow();
&.open .dropdown-toggle {
box-shadow: none;
}
&.btn-group-raised {
@include btn-shadow();
}
.btn, .btn:active, .btn-group {
box-shadow: none !important;
margin: 0;
}
}
.btn-primary {
@include button-variant($primary);
}
// Success appears as green
.btn-success {
@include button-variant($success);
}
// Info appears as blue-green
.btn-info {
@include button-variant($info);
}
// Warning appears as orange
.btn-warning {
@include button-variant($warning);
}
// Danger and error appear as red
.btn-danger {
@include button-variant($danger);
.btn-group-flat {
box-shadow: none !important;
}
// Material shades
.btn-material-red {
@include button-variant($red)
@mixin btn-shadow(){
@include shadow-z-1();
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@include shadow-z-1-hover();
}
}
.btn-material-pink {
@include button-variant($pink);
}
.btn-material-purple {
@include button-variant($purple);
}
.btn-material-deeppurple {
@include button-variant($deeppurple);
}
.btn-material-indigo {
@include button-variant($indigo);
}
.btn-material-lightblue {
@include button-variant($lightblue);
}
.btn-material-cyan {
@include button-variant($cyan);
}
.btn-material-teal {
@include button-variant($teal);
}
.btn-material-lightgreen {
@include button-variant($lightgreen);
}
.btn-material-lime {
@include button-variant($lime);
}
.btn-material-lightyellow {
@include button-variant($lightyellow);
}
.btn-material-orange {
@include button-variant($orange);
}
.btn-material-deeporange {
@include button-variant($deeporange);
}
.btn-material-grey {
@include button-variant($grey);
}
.btn-material-bluegrey {
@include button-variant($bluegrey);
}
.btn-material-brown {
@include button-variant($brown);
}
.btn-material-lightgrey {
@include button-variant($lightgrey);
}

View File

@ -1,130 +1,66 @@
//
// Cards
// http://www.google.com/design/spec/components/cards.html#cards-usage
//
.card {
@extend .shadow-z-1;
border-radius: 2px;
margin-bottom: 20px; // Same as panel margins
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
h1, h2, h3, h4, h5, h6 {
font-weight: 100;
margin: 10px 0;
}
.card-body {
padding: 15px;
}
.card-actions {
padding: 15px;
text-transform: uppercase;
.main { font-weight: bold; }
a {
font-size: 15px;
margin: 0 15px 0 0;
&:hover {
text-decoration: none;
}
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;
}
}
/**************************************************************************/
img {
max-width:100%;
max-height:100%;
}
.card-footer {
padding: 15px;
border-top: 1px solid;
border-color: $lightgrey;
border-radius: 2px;
color: $card-body-text;
background: $card-body-background;
.icon {
font-size: 25px;
transition: ease transform 0.5s;
&:hover { text-decoration: none; transform: transform3d(0, 0, 0, -1px)}
@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: $card-image-headline;
font-size: 2em;
}
}
}
}
.card-body {
height: 30%;
padding: 18px;
}
// Alert buttons
// --------------------------------------------------
.card-default {
@include card-variant($btn-default, #000, darken($btn-default, 10%));
}
.card-primary {
@include card-variant($primary, #FFFFFF, $lightgrey);
}
// Success appears as green
.card-success {
@include card-variant($success, #FFFFFF, darken($success, 10%));
}
// Info appears as blue-green
.card-info {
@include card-variant($info, #FFFFFF, darken($info, 10%));
}
// Warning appears as orange
.card-warning {
@include card-variant($warning, #FFFFFF, lighten($warning, 10%));
}
// Danger and error appear as red
.card-danger {
@include card-variant($danger, #FFFFFF, darken($danger, 10%));
}
// Material shades
.card-material-red {
@include card-variant($red, #FFFFFF, lighten($red, 10%))
}
.card-material-pink {
@include card-variant($pink, #FFFFFF, darken($pink, 10%));
}
.card-material-purple {
@include card-variant($purple, #FFFFFF, darken($purple, 10%));
}
.card-material-deeppurple {
@include card-variant($deeppurple, #FFFFFF, lighten($deeppurple, 10%));
}
.card-material-indigo {
@include card-variant($indigo, #FFFFFF, lighten($indigo, 10%));
}
.card-material-lightblue {
@include card-variant($lightblue, #fff, darken($lightblue, 10%));
}
.card-material-cyan {
@include card-variant($cyan, #FFFFFF, darken($cyan, 10%));
}
.card-material-teal {
@include card-variant($teal, #FFFFFF, darken($teal, 10%));
}
.card-material-lightgreen {
@include card-variant($lightgreen, #FFFFFF, darken($lightgreen, 10%));
}
.card-material-lime {
@include card-variant($lime, #FFFFFF, darken($lime, 10%));
}
.card-material-lightyellow {
@include card-variant($lightyellow, darken($lightyellow, 60%), darken($lightyellow, 10%));
}
.card-material-orange {
@include card-variant($orange, #FFFFFF, darken($orange, 10%));
}
.card-material-deeporange {
@include card-variant($deeporange, #FFFFFF, darken($deeporange, 10%));
}
.card-material-grey {
@include card-variant($grey, #FFFFFF, darken($grey, 10%));
}
.card-material-bluegrey {
@include card-variant($bluegrey, #FFFFFF, darken($bluegrey, 10%));
}
.card-material-brown {
@include card-variant($brown, #FFFFFF, lighten($brown, 10%));
}
.card-material-lightgrey {
@include card-variant($lightgrey, darken(#FFFFFF, 10%), darken($lightgrey, 10%));
.card-footer {
height: 10%;
padding: 18px;
button {
margin: 0 !important;
position: relative;
bottom: 25px;
width: auto;
&:first-child {
left: -15px;
}
}
}
}

View File

@ -1,189 +1,237 @@
.form-horizontal .checkbox {
padding-top: 15px;
padding-top: 20px;
}
.checkbox {
transform: translateZ(0); // Force 3d rendering
label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
}
// Hide native checkbox
input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
&:before {
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: $checkbox-size;
width: $checkbox-size;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(2.3, 2.3, 1);
}
.check {
position: relative;
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.check:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 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 inset;
animation: checkbox-off $checkbox-animation-check forwards;
}
}
input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked + .checkbox-material .check:before {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on $checkbox-animation-check forwards;
}
input[type=checkbox]:not(:checked) + .checkbox-material:before {
animation: rippleOff $checkbox-animation-ripple;
}
input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn $checkbox-animation-ripple;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff $checkbox-animation-ripple forwards;
}
input[type=checkbox]:checked + .checkbox-material .check:after {
animation: rippleOn $checkbox-animation-ripple forwards;
}
// Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
input[type=checkbox][disabled] + .circle {
opacity: 0.5;
}
input[type=checkbox][disabled] + .checkbox-material .check:after {
background-color: $lightbg-text;
transform: rotate(-45deg);
}
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50);
}
@keyframes checkbox-on {
0% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px;
}
50% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px 2px 0 11px;
}
100% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
}
}
@keyframes checkbox-off {
0% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px,
0 0 0 0 inset;
}
25% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px,
0 0 0 0 inset;
}
50% {
transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px,
0 0 0 0 inset;
}
51% {
transform: rotate(0deg);
label {
cursor: pointer;
padding-left: 45px;
position: relative;
span {
display: block;
position: absolute;
left: 0px;
transition-duration: 0.2s;
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: $lightbg-text;
left: -5px;
top: -15px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
}
.check:before {
display: block;
content: "";
border: 2px solid $lightbg-text;
height: 20px;
width: 20px;
transition-delay: 0.2s;
}
}
// Variations
//.variations(#{" .check"}, color, $success);
// Hide native checkbox
input[type=checkbox] { opacity: 0; }
input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked ~ .check:before {
animation: check 300ms ease-out forwards;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after {
animation: rippleOff 500ms linear forwards;
}
input[type=checkbox]:checked ~ .check:after {
animation: rippleOn 500ms linear forwards;
}
// Make animate quickly when not hover
&:not(:hover) input[type=checkbox] ~ .check {
&:before, &:after {
animation-duration: 1ms;
}
}
// Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .check:before {
opacity: 0.5;
}
input[type=checkbox][disabled] ~ .check:after {
background-color: $lightbg-text;
transform: rotate(-45deg);
}
//.variations(#{" input[type=checkbox]:checked ~ .check:after"}, background-color, $success);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
100% {
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
@keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

360
sass/_colors.scss Normal file
View File

@ -0,0 +1,360 @@
/*
To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
Then, run this script to get the list@mixin (function(){
var colors = {}, main = {};
$(".color-group")@mixin each(function(){
var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
colors[color] = {};
$(this)@mixin find(".color").not(".main-color").each(function(){
var shade = $(this).find(".shade").text().trim(),
hex = $(this).find(".hex").text().trim();
colors[color][shade] = hex;
});
main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
});
var LESS = "";
$@mixin each(colors, function(name, shades){
LESS += "\n\n";
$@mixin each(shades, function(shade, hex){
LESS += "$" + name + "-" + shade + ": " + hex + ";\n" !default;
});
if (main[name]) {
LESS += "$" + name + ": " + main[name] + ";\n" !default;
}
});
console.log(LESS);
})();
*/
$red-50: #ffebee !default;
$red-100: #ffcdd2 !default;
$red-200: #ef9a9a !default;
$red-300: #e57373 !default;
$red-400: #ef5350 !default;
$red-500: #f44336 !default;
$red-600: #e53935 !default;
$red-700: #d32f2f !default;
$red-800: #c62828 !default;
$red-900: #b71c1c !default;
$red-A100: #ff8a80 !default;
$red-A200: #ff5252 !default;
$red-A400: #ff1744 !default;
$red-A700: #d50000 !default;
$red: $red-500 !default;
$pink-50: #fce4ec !default;
$pink-100: #f8bbd0 !default;
$pink-200: #f48fb1 !default;
$pink-300: #f06292 !default;
$pink-400: #ec407a !default;
$pink-500: #e91e63 !default;
$pink-600: #d81b60 !default;
$pink-700: #c2185b !default;
$pink-800: #ad1457 !default;
$pink-900: #880e4f !default;
$pink-A100: #ff80ab !default;
$pink-A200: #ff4081 !default;
$pink-A400: #f50057 !default;
$pink-A700: #c51162 !default;
$pink: $pink-500 !default;
$purple-50: #f3e5f5 !default;
$purple-100: #e1bee7 !default;
$purple-200: #ce93d8 !default;
$purple-300: #ba68c8 !default;
$purple-400: #ab47bc !default;
$purple-500: #9c27b0 !default;
$purple-600: #8e24aa !default;
$purple-700: #7b1fa2 !default;
$purple-800: #6a1b9a !default;
$purple-900: #4a148c !default;
$purple-A100: #ea80fc !default;
$purple-A200: #e040fb !default;
$purple-A400: #d500f9 !default;
$purple-A700: #aa00ff !default;
$purple: $purple-500 !default;
$deep-purple-50: #ede7f6 !default;
$deep-purple-100: #d1c4e9 !default;
$deep-purple-200: #b39ddb !default;
$deep-purple-300: #9575cd !default;
$deep-purple-400: #7e57c2 !default;
$deep-purple-500: #673ab7 !default;
$deep-purple-600: #5e35b1 !default;
$deep-purple-700: #512da8 !default;
$deep-purple-800: #4527a0 !default;
$deep-purple-900: #311b92 !default;
$deep-purple-A100: #b388ff !default;
$deep-purple-A200: #7c4dff !default;
$deep-purple-A400: #651fff !default;
$deep-purple-A700: #6200ea !default;
$deep-purple: $deep-purple-500 !default;
$indigo-50: #e8eaf6 !default;
$indigo-100: #c5cae9 !default;
$indigo-200: #9fa8da !default;
$indigo-300: #7986cb !default;
$indigo-400: #5c6bc0 !default;
$indigo-500: #3f51b5 !default;
$indigo-600: #3949ab !default;
$indigo-700: #303f9f !default;
$indigo-800: #283593 !default;
$indigo-900: #1a237e !default;
$indigo-A100: #8c9eff !default;
$indigo-A200: #536dfe !default;
$indigo-A400: #3d5afe !default;
$indigo-A700: #304ffe !default;
$indigo: $indigo-500 !default;
$blue-50: #e3f2fd !default;
$blue-100: #bbdefb !default;
$blue-200: #90caf9 !default;
$blue-300: #64b5f6 !default;
$blue-400: #42a5f5 !default;
$blue-500: #2196f3 !default;
$blue-600: #1e88e5 !default;
$blue-700: #1976d2 !default;
$blue-800: #1565c0 !default;
$blue-900: #0d47a1 !default;
$blue-A100: #82b1ff !default;
$blue-A200: #448aff !default;
$blue-A400: #2979ff !default;
$blue-A700: #2962ff !default;
$blue: $blue-500 !default;
$light-blue-50: #e1f5fe !default;
$light-blue-100: #b3e5fc !default;
$light-blue-200: #81d4fa !default;
$light-blue-300: #4fc3f7 !default;
$light-blue-400: #29b6f6 !default;
$light-blue-500: #03a9f4 !default;
$light-blue-600: #039be5 !default;
$light-blue-700: #0288d1 !default;
$light-blue-800: #0277bd !default;
$light-blue-900: #01579b !default;
$light-blue-A100: #80d8ff !default;
$light-blue-A200: #40c4ff !default;
$light-blue-A400: #00b0ff !default;
$light-blue-A700: #0091ea !default;
$light-blue: $light-blue-500 !default;
$cyan-50: #e0f7fa !default;
$cyan-100: #b2ebf2 !default;
$cyan-200: #80deea !default;
$cyan-300: #4dd0e1 !default;
$cyan-400: #26c6da !default;
$cyan-500: #00bcd4 !default;
$cyan-600: #00acc1 !default;
$cyan-700: #0097a7 !default;
$cyan-800: #00838f !default;
$cyan-900: #006064 !default;
$cyan-A100: #84ffff !default;
$cyan-A200: #18ffff !default;
$cyan-A400: #00e5ff !default;
$cyan-A700: #00b8d4 !default;
$cyan: $cyan-500 !default;
$teal-50: #e0f2f1 !default;
$teal-100: #b2dfdb !default;
$teal-200: #80cbc4 !default;
$teal-300: #4db6ac !default;
$teal-400: #26a69a !default;
$teal-500: #009688 !default;
$teal-600: #00897b !default;
$teal-700: #00796b !default;
$teal-800: #00695c !default;
$teal-900: #004d40 !default;
$teal-A100: #a7ffeb !default;
$teal-A200: #64ffda !default;
$teal-A400: #1de9b6 !default;
$teal-A700: #00bfa5 !default;
$teal: $teal-500 !default;
$green-50: #e8f5e9 !default;
$green-100: #c8e6c9 !default;
$green-200: #a5d6a7 !default;
$green-300: #81c784 !default;
$green-400: #66bb6a !default;
$green-500: #4caf50 !default;
$green-600: #43a047 !default;
$green-700: #388e3c !default;
$green-800: #2e7d32 !default;
$green-900: #1b5e20 !default;
$green-A100: #b9f6ca !default;
$green-A200: #69f0ae !default;
$green-A400: #00e676 !default;
$green-A700: #00c853 !default;
$green: $green-500 !default;
$light-green-50: #f1f8e9 !default;
$light-green-100: #dcedc8 !default;
$light-green-200: #c5e1a5 !default;
$light-green-300: #aed581 !default;
$light-green-400: #9ccc65 !default;
$light-green-500: #8bc34a !default;
$light-green-600: #7cb342 !default;
$light-green-700: #689f38 !default;
$light-green-800: #558b2f !default;
$light-green-900: #33691e !default;
$light-green-A100: #ccff90 !default;
$light-green-A200: #b2ff59 !default;
$light-green-A400: #76ff03 !default;
$light-green-A700: #64dd17 !default;
$light-green: $light-green-500 !default;
$lime-50: #f9fbe7 !default;
$lime-100: #f0f4c3 !default;
$lime-200: #e6ee9c !default;
$lime-300: #dce775 !default;
$lime-400: #d4e157 !default;
$lime-500: #cddc39 !default;
$lime-600: #c0ca33 !default;
$lime-700: #afb42b !default;
$lime-800: #9e9d24 !default;
$lime-900: #827717 !default;
$lime-A100: #f4ff81 !default;
$lime-A200: #eeff41 !default;
$lime-A400: #c6ff00 !default;
$lime-A700: #aeea00 !default;
$lime: $lime-500 !default;
$yellow-50: #fffde7 !default;
$yellow-100: #fff9c4 !default;
$yellow-200: #fff59d !default;
$yellow-300: #fff176 !default;
$yellow-400: #ffee58 !default;
$yellow-500: #ffeb3b !default;
$yellow-600: #fdd835 !default;
$yellow-700: #fbc02d !default;
$yellow-800: #f9a825 !default;
$yellow-900: #f57f17 !default;
$yellow-A100: #ffff8d !default;
$yellow-A200: #ffff00 !default;
$yellow-A400: #ffea00 !default;
$yellow-A700: #ffd600 !default;
$yellow: $yellow-500 !default;
$amber-50: #fff8e1 !default;
$amber-100: #ffecb3 !default;
$amber-200: #ffe082 !default;
$amber-300: #ffd54f !default;
$amber-400: #ffca28 !default;
$amber-500: #ffc107 !default;
$amber-600: #ffb300 !default;
$amber-700: #ffa000 !default;
$amber-800: #ff8f00 !default;
$amber-900: #ff6f00 !default;
$amber-A100: #ffe57f !default;
$amber-A200: #ffd740 !default;
$amber-A400: #ffc400 !default;
$amber-A700: #ffab00 !default;
$amber: $amber-500 !default;
$orange-50: #fff3e0 !default;
$orange-100: #ffe0b2 !default;
$orange-200: #ffcc80 !default;
$orange-300: #ffb74d !default;
$orange-400: #ffa726 !default;
$orange-500: #ff9800 !default;
$orange-600: #fb8c00 !default;
$orange-700: #f57c00 !default;
$orange-800: #ef6c00 !default;
$orange-900: #e65100 !default;
$orange-A100: #ffd180 !default;
$orange-A200: #ffab40 !default;
$orange-A400: #ff9100 !default;
$orange-A700: #ff6d00 !default;
$orange: $orange-500 !default;
$deep-orange-50: #fbe9e7 !default;
$deep-orange-100: #ffccbc !default;
$deep-orange-200: #ffab91 !default;
$deep-orange-300: #ff8a65 !default;
$deep-orange-400: #ff7043 !default;
$deep-orange-500: #ff5722 !default;
$deep-orange-600: #f4511e !default;
$deep-orange-700: #e64a19 !default;
$deep-orange-800: #d84315 !default;
$deep-orange-900: #bf360c !default;
$deep-orange-A100: #ff9e80 !default;
$deep-orange-A200: #ff6e40 !default;
$deep-orange-A400: #ff3d00 !default;
$deep-orange-A700: #dd2c00 !default;
$deep-orange: $deep-orange-500 !default;
$brown-50: #efebe9 !default;
$brown-100: #d7ccc8 !default;
$brown-200: #bcaaa4 !default;
$brown-300: #a1887f !default;
$brown-400: #8d6e63 !default;
$brown-500: #795548 !default;
$brown-600: #6d4c41 !default;
$brown-700: #5d4037 !default;
$brown-800: #4e342e !default;
$brown-900: #3e2723 !default;
$brown-A100: #d7ccc8 !default;
$brown-A200: #bcaaa4 !default;
$brown-A400: #8d6e63 !default;
$brown-A700: #5d4037 !default;
$brown: $brown-500 !default;
$grey-50: #fafafa !default;
$grey-100: #f5f5f5 !default;
$grey-200: #eeeeee !default;
$grey-300: #e0e0e0 !default;
$grey-400: #bdbdbd !default;
$grey-500: #9e9e9e !default;
$grey-600: #757575 !default;
$grey-700: #616161 !default;
$grey-800: #424242 !default;
$grey-900: #212121 !default;
$grey-A100: #f5f5f5 !default;
$grey-A200: #eeeeee !default;
$grey-A400: #bdbdbd !default;
$grey-A700: #616161 !default;
$grey: $grey-500 !default;
$blue-grey-50: #eceff1 !default;
$blue-grey-100: #cfd8dc !default;
$blue-grey-200: #b0bec5 !default;
$blue-grey-300: #90a4ae !default;
$blue-grey-400: #78909c !default;
$blue-grey-500: #607d8b !default;
$blue-grey-600: #546e7a !default;
$blue-grey-700: #455a64 !default;
$blue-grey-800: #37474f !default;
$blue-grey-900: #263238 !default;
$blue-grey-A100: #cfd8dc !default;
$blue-grey-A200: #b0bec5 !default;
$blue-grey-A400: #78909c !default;
$blue-grey-A700: #455a64 !default;
$blue-grey: $blue-grey-500 !default;
$black: #000000 !default;
$white: #ffffff !default;
$inverse: $indigo !default;

52
sass/_dialogs.scss Normal file
View File

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

71
sass/_dividers.scss Normal file
View File

@ -0,0 +1,71 @@
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;
}
}

View File

@ -209,7 +209,6 @@
/* Start Icons */
.mdi-action-3d-rotation:before {
content: "\e600";
}

View File

@ -1,80 +1,5 @@
.icon {}
// Navbar alternate
// --------------------------------------------------
.icon-default {
@include icon-variant($lightbg-text);
}
.icon-primary {
@include icon-variant($primary);
}
// Success appears as green
.icon-success {
@include icon-variant($success);
}
// Info appears as blue-green
.icon-info {
@include icon-variant($info);
}
// Warning appears as orange
.icon-warning {
@include icon-variant($warning);
}
// Danger and error appear as red
.icon-danger {
@include icon-variant($danger);
}
// Material shades
.icon-material-red {
@include icon-variant($red)
}
.icon-material-pink {
@include icon-variant($pink);
}
.icon-material-purple {
@include icon-variant($purple);
}
.icon-material-deeppurple {
@include icon-variant($deeppurple);
}
.icon-material-indigo {
@include icon-variant($indigo);
}
.icon-material-lightblue {
@include icon-variant($lightblue);
}
.icon-material-cyan {
@include icon-variant($cyan);
}
.icon-material-teal {
@include icon-variant($teal);
}
.icon-material-lightgreen {
@include icon-variant($lightgreen);
}
.icon-material-lime {
@include icon-variant($lime);
}
.icon-material-lightyellow {
@include icon-variant($lightyellow);
}
.icon-material-orange {
@include icon-variant($orange);
}
.icon-material-deeporange {
@include icon-variant($deeporange);
}
.icon-material-grey {
@include icon-variant($grey);
}
.icon-material-bluegrey {
@include icon-variant($bluegrey);
}
.icon-material-brown {
@include icon-variant($brown);
}
.icon-material-lightgrey {
@include icon-variant($lightgrey);
.mdi, icon {
@include variations(unquote(""), color, $lightbg-text);
line-height: inherit;
vertical-align: bottom;
}

View File

@ -1,209 +1,250 @@
fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
&, &:focus, &.focus {
&:not(textarea) {
height: 28px;
}
padding: 0;
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
background: transparent;
border-bottom: 1px solid #757575;
&:disabled {
border-style: dashed;
}
fieldset[disabled] .form-control, .form-control {
&, &:focus, &.focus {
padding: 0;
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
&:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
}
}
fieldset[disabled] .form-control, .form-control {
&:textarea {
height: 40px;
}
}
select[multiple].form-control {
&, &:focus, &.focus {
height: 85px;
}
&, &:focus, &.focus {
height: 85px;
}
}
.form-control {
border: 0;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(unquote("100% - 1px"));
background-color: transparent;
background-color: rgba(0,0,0,0);
transition: background 0s ease-out;
&::-webkit-input-placeholder {
color: $input-placeholder-color;
}
&::-moz-placeholder {
color: $input-placeholder-color;
}
&:-ms-input-placeholder {
color: $input-placeholder-color;
}
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0,0,0,0);
}
fieldset[disabled] .form-control:disabled,
.form-control-wrapper .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control-wrapper .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus:disabled,
.form-control.focus:disabled {
border: 0; // Ugly override of Bootstrap border
}
.form-control:focus, .form-control.focus {
outline: none;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
}
.form-control-wrapper {
position: relative;
position: relative;
.form-control:focus, .form-control.focus {
outline: none;
}
.floating-label {
color: $input-placeholder-color;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
.floating-label {
color: #7E7E7E;
font-size: 14px;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.2s ease all;
opacity: 0;
}
.form-control:not(.empty) ~ .floating-label {
top: -10px;
font-size: 10px;
opacity: 1;
}
.form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
color: $input-danger;
}
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
background-color: $input-default;
}
.form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input {
&:before, &:after {
background-color: $input-danger;
}
}
.form-control.empty ~ .floating-label {
opacity: 1;
}
.material-input:before {
position: absolute;
content: "";
width: 100%;
left: 0;
height: 2px;
background-color: $input-default;
bottom: -1px;
transform: scaleX(0);
transition: transform 0s;
}
.form-control:focus ~ .material-input:before, .form-control.focus ~ .material-input:before {
transform: scaleX(1);
transition: transform 0.2s ease-out;
}
.material-input:after {
content: "";
position: absolute;
height: 18px;
width: 100px;
margin-top: -1px;
top: 7px;
left: 0;
pointer-events: none;
opacity: 0.9;
transform-origin: left;
}
.input-lg ~ .material-input:after {
height: 26px;
}
textarea { resize: none; }
textarea ~ .form-control-highlight {
margin-top: -11px;
}
// Input sizes
.floating-label { // base
font-size: $font-size-base;
}
.form-control:focus ~ .floating-label,
.form-control:not(.empty) ~ .floating-label {
top: $floating-label-size-ratio * -$font-size-base;
font-size: $floating-label-size-ratio * $font-size-base;
}
/* active state */
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
animation: input-highlight 0.3s ease;
animation-fill-mode: forwards;
opacity: 0;
}
.input-sm + .floating-label { // small
font-size: $font-size-small;
top: 7px;
}
.form-control.input-sm:focus ~ .floating-label,
.form-control.input-sm:not(.empty) ~.floating-label {
top: $floating-label-size-ratio * -$font-size-small;
font-size: $floating-label-size-ratio * $font-size-small;
}
select ~ .material-input:after {
display: none;
}
.input-lg + .floating-label {
font-size: $font-size-large;
top: 10px;
}
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {
top: $floating-label-size-ratio * -$font-size-large;
font-size: $floating-label-size-ratio * $font-size-large;
}
.form-control:focus ~ .floating-label {
color: $primary;
}
.form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
color: $input-danger;
}
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
background-color: $input-default;
}
.form-control:invalid {
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
}
textarea { resize: none; }
textarea ~ .form-control-highlight {
margin-top: -11px;
}
// Hints
.hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-control:focus ~ .hint, .form-control.focus ~ .hint {
display: block;
}
select ~ .material-input:after {
display: none;
}
// Fix for OS X
select {
appearance: none;
}
}
.form-group {
&.has-warning {
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
background: $input-warning;
}
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-warning;
}
&.has-warning {
.form-control {
box-shadow: none;
}
&.has-error {
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
background: $input-danger;
}
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-danger;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-warning, $input-warning), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
&.has-success {
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
background: $input-success;
}
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-success;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-warning;
}
&.has-info {
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
background: $input-info;
}
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-info;
}
}
&.has-error {
.form-control {
box-shadow: none;
}
//.variations(#{" .material-input:before"}, background-color, $indigo);
//.variations(#{" input.form-control:focus ~ .material-input:after"}, background-color, $indigo);
//.variations(#{" input.form-control.focus ~ .material-input:after"}, background-color, $indigo);
//.variations(#{" .control-label"}, color, $lightbg-text);
//.variations(#{" input.form-control:not(.empty) ~ .floating-label"}, color, $indigo);
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-danger;
}
}
&.has-success {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-success, $input-success), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-success;
}
}
&.has-info {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-info, $input-info), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-info;
}
}
.generic-variations(unquote(" .form-control:focus"), $primary, {
background-image: linear-gradient($material-color, $material-color), linear-gradient($input-underline-color, $input-underline-color);
});
.generic-variations(unquote(" .form-control.focus"), $primary, {
background-image: linear-gradient($material-color, $material-color), linear-gradient($input-underline-color, $input-underline-color);
});
@include variations(unquote(" .control-label"), color, $lightbg-text);
@include variations(unquote(" input.form-control:focus ~ .floating-label"), color, $input-default);
}
.input-group {
.form-control-wrapper {
.form-control {
float: none;
}
margin-right: 5px;
margin-left: 5px;
bottom: -10px;
}
.input-group-addon {
border: 0;
}
.input-group-btn .btn {
border-radius: 4px;
.form-control-wrapper {
.form-control {
float: none;
}
margin-right: 5px;
margin-left: 5px;
}
.input-group-addon {
border: 0;
background: transparent;
}
.input-group-btn .btn {
border-radius: 4px;
margin: 0;
}
}
select.form-control {
border: 0;
border: 0;
box-shadow: none;
border-radius: 0;
&:focus, &.focus {
box-shadow: none;
border-radius: 0;
&:focus, &.focus {
box-shadow: none;
border-color: #757575;
}
border-color: #757575;
}
}
@mixin keyframe-input-highlight(){
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight {
@include keyframe-input-highlight()
}
// Input files (kinda hack)
.form-control-wrapper input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}

4
sass/_labels.scss Normal file
View File

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

View File

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

View File

@ -0,0 +1,160 @@
// usage: @include variations(unquote(" .check"), color, transparent);
@mixin variations($extra, $property, $default){
.generic-variations($extra, $default, {
#{$property}: $material-color !default;
});
}
@mixin background-variations($extra, $default){
.generic-variations($extra, $default, {
background-color: $material-color;
& when ($material-color = $btn-default) {
color: $lightbg-text;
}
& when not ($material-color = $btn-default) {
color: $material-text-color;
}
});
}
@mixin text-variations($extra, $default){
.generic-variations($extra, $default, {
color: $material-color;
});
}
//
// To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it.
//
// $material-color-name ---> "red", "green", "indigo" ...
// $material-color-full-name ---> "red", "green-50", "indigo-400" ...
// $material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($extra, $default, $func){
$contrast-factor: 40% !default;
// bootstrap styles
&#{$extra}, &-default#{$extra} {
$material-color-name: "default" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $default !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-black#{$extra} {
$material-color-name: "black" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $black !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-white#{$extra} {
$material-color-name: "white" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $white !default;
$material-text-color: $lightbg-text !default;
$func();
}
&-inverse#{$extra} {
$material-color-name: "inverse" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $inverse !default;
$material-text-color: contrast($inverse, $lightbg-text, $darkbg-text, $contrast-factor) !default;
$func();
}
&-primary#{$extra} {
$material-color-name: "primary" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $primary !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-success#{$extra} {
$material-color-name: "success" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $success !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-info#{$extra} {
$material-color-name: "info" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $info !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-warning#{$extra} {
$material-color-name: "warning" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $warning !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-danger#{$extra} {
$material-color-name: "danger" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $danger !default;
$material-text-color: $darkbg-text !default;
$func();
}
// given a color build multiples dephs
@mixin generic-variations-factory($material-color-name){
// given a color and its deph build css
@mixin generic-variations-factory-deep($material-color-number){
&-material-#{$material-color-name}#{$material-color-number}#{$extra} {
$material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
$material-color: $$material-color-full-name !default;
$material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
$func();
}
}
@include generic-variations-factory-deep(unquote(""));
@include generic-variations-factory-deep(unquote("-50"));
@include generic-variations-factory-deep(unquote("-100"));
@include generic-variations-factory-deep(unquote("-200"));
@include generic-variations-factory-deep(unquote("-300"));
@include generic-variations-factory-deep(unquote("-400"));
@include generic-variations-factory-deep(unquote("-500"));
@include generic-variations-factory-deep(unquote("-600"));
@include generic-variations-factory-deep(unquote("-700"));
@include generic-variations-factory-deep(unquote("-800"));
@include generic-variations-factory-deep(unquote("-900"));
@include generic-variations-factory-deep(unquote("-A100"));
@include generic-variations-factory-deep(unquote("-A200"));
@include generic-variations-factory-deep(unquote("-A400"));
@include generic-variations-factory-deep(unquote("-A700"));
}
@include generic-variations-factory(unquote("red"));
@include generic-variations-factory(unquote("pink"));
@include generic-variations-factory(unquote("purple"));
@include generic-variations-factory(unquote("deep-purple"));
@include generic-variations-factory(unquote("indigo"));
@include generic-variations-factory(unquote("blue"));
@include generic-variations-factory(unquote("light-blue"));
@include generic-variations-factory(unquote("cyan"));
@include generic-variations-factory(unquote("teal"));
@include generic-variations-factory(unquote("green"));
@include generic-variations-factory(unquote("light-green"));
@include generic-variations-factory(unquote("lime"));
@include generic-variations-factory(unquote("yellow"));
@include generic-variations-factory(unquote("amber"));
@include generic-variations-factory(unquote("orange"));
@include generic-variations-factory(unquote("deep-orange"));
@include generic-variations-factory(unquote("brown"));
@include generic-variations-factory(unquote("grey"));
@include generic-variations-factory(unquote("blue-grey"));
}
$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger") !default;

View File

@ -1,32 +1,147 @@
@mixin card-variant($background, $color, $border) {
background-color: $background;
color: $color;
// usage: @include variations(unquote(" .check"), color, transparent);
@mixin variations($extra, $property, $default){
.generic-variations($extra, $default, {
#{$property}: $material-color !default;
});
}
.card-footer, .card-header {
border-color: $border;
@mixin background-variations($extra, $default){
.generic-variations($extra, $default, {
background-color: $material-color;
& when ($material-color = $btn-default) {
color: $lightbg-text;
}
& when not ($material-color = $btn-default) {
color: $material-text-color;
}
});
}
@mixin text-variations($extra, $default){
.generic-variations($extra, $default, {
color: $material-color;
});
}
//
// To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it.
//
// $material-color-name ---> "red", "green", "indigo" ...
// $material-color-full-name ---> "red", "green-50", "indigo-400" ...
// $material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($extra, $default, $func){
$contrast-factor: 40% !default;
// bootstrap styles
&#{$extra}, &-default#{$extra} {
$material-color-name: "default" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $default !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-black#{$extra} {
$material-color-name: "black" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $black !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-white#{$extra} {
$material-color-name: "white" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $white !default;
$material-text-color: $lightbg-text !default;
$func();
}
&-inverse#{$extra} {
$material-color-name: "inverse" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $inverse !default;
$material-text-color: contrast($inverse, $lightbg-text, $darkbg-text, $contrast-factor) !default;
$func();
}
&-primary#{$extra} {
$material-color-name: "primary" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $primary !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-success#{$extra} {
$material-color-name: "success" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $success !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-info#{$extra} {
$material-color-name: "info" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $info !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-warning#{$extra} {
$material-color-name: "warning" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $warning !default;
$material-text-color: $darkbg-text !default;
$func();
}
&-danger#{$extra} {
$material-color-name: "danger" !default;
$material-color-full-name: $material-color-name !default;
$material-color: $danger !default;
$material-text-color: $darkbg-text !default;
$func();
}
a {
color: $color;
// given a color build multiples dephs
@mixin generic-variations-factory($material-color-name){
// given a color and its deph build css
@mixin generic-variations-factory-deep($material-color-number){
&-material-#{$material-color-name}#{$material-color-number}#{$extra} {
$material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default;
$material-color: $$material-color-full-name !default;
$material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default;
$func();
}
}
@include generic-variations-factory-deep(unquote(""));
}
@include generic-variations-factory(unquote("red"));
@include generic-variations-factory(unquote("pink"));
@include generic-variations-factory(unquote("purple"));
@include generic-variations-factory(unquote("deep-purple"));
@include generic-variations-factory(unquote("indigo"));
@include generic-variations-factory(unquote("blue"));
@include generic-variations-factory(unquote("light-blue"));
@include generic-variations-factory(unquote("cyan"));
@include generic-variations-factory(unquote("teal"));
@include generic-variations-factory(unquote("green"));
@include generic-variations-factory(unquote("light-green"));
@include generic-variations-factory(unquote("lime"));
@include generic-variations-factory(unquote("yellow"));
@include generic-variations-factory(unquote("amber"));
@include generic-variations-factory(unquote("orange"));
@include generic-variations-factory(unquote("deep-orange"));
@include generic-variations-factory(unquote("brown"));
@include generic-variations-factory(unquote("grey"));
@include generic-variations-factory(unquote("blue-grey"));
}
@mixin button-variant($color) {
background-color: $color;
}
@mixin alert-variant($color) {
background-color: $color;
}
@mixin progress-bar-variant($color) {
background-color: $color;
}
@mixin navbar-variant($color) {
background-color: $color;
}
@mixin icon-variant($color) {
color: $color;
}
$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger") !default;

View File

@ -1,286 +1,217 @@
.navbar {
background-color: $navbar-default-bg;
border: 0;
border-radius: 0;
background-color: $primary;
border: $zero;
border-radius: $zero;
.navbar-brand {
position: relative;
height: 60px;
line-height: 30px;
color: $navbar-brand-color;
&:hover,
&:focus {
color: $navbar-brand-color;
background-color: transparent;
.navbar-brand {
position: relative;
height: 60px;
line-height: 30px;
color: inherit;
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
.navbar-text {
color: inherit;
margin-top: 20px;
margin-bottom: 20px;
}
.navbar-nav {
> li > a {
color: inherit;
padding-top: 20px;
padding-bottom: 20px;
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: inherit;
background-color: rgba(255, 255, 255, 0.1);
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: inherit;
background-color: transparent;
opacity: 0.9;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border: $zero;
&:hover,
&:focus {
background-color: transparent;
}
.icon-bar {
background-color: inherit;
border: 1px solid;
}
}
.navbar-default .navbar-toggle,
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.navbar-collapse,
.navbar-form {
border-color: rgba(0,0,0,0.1);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: transparent;
color: inherit;
}
}
@media (max-width: 767px) {
.navbar-text {
color: inherit;
margin-top: 15px;
margin-bottom: 15px;
}
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border: $zero;
color: inherit;
}
.divider {
border-bottom: 1px solid;
opacity: 0.08;
}
}
.navbar-text {
color: $navbar-color;
margin-top: 20px;
margin-bottom: 20px;
}
.navbar-nav {
> li > a {
color: $navbar-link-color;
padding-top: 20px;
padding-bottom: 20px;
&:hover,
&:focus {
color: $navbar-link-hover-color;
background-color: $navbar-link-hover-bg;
}
color: inherit;
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-link-active-color;
background-color: $navbar-link-active-bg;
}
&,
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-link-disabled-color;
background-color: $navbar-link-disabled-bg;
}
&,
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: $navbar-toggle-border-color;
.navbar-link {
color: inherit;
&:hover {
color: inherit;
}
}
.btn-link {
color: inherit;
&:hover,
&:focus {
color: inherit;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: inherit;
}
}
}
.navbar-form {
margin-top: 16px;
.form-control-wrapper .form-control, .form-control {
border-color: inherit;
color: inherit;
}
.form-control-wrapper {
.material-input:before, input:focus ~ .material-input:after {
background-color: inherit;
}
}
}
.generic-variations(unquote(".navbar"), $primary, {
background-color: $material-color;
color: $material-text-color;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
color: $material-text-color;
}
.dropdown-menu {
border-radius: $dropdown-radius;
li > a {
font-size: $dropdown-font-size;
padding: 13px 16px;
&:hover,
&:focus {
background-color: $navbar-toggle-hover-bg;
color: $material-color;
background-color: $grey-200;
}
.icon-bar {
background-color: $navbar-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: rgba(0,0,0,0.1);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: $navbar-link-active-bg;
color: $navbar-link-active-color;
}
}
@media (max-width: 767px) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border: 0;
color: darken($navbar-link-color, 17%)
}
.divider {
background-color: $navbar-border;
}
> li > a {
color: $navbar-link-color;
&:hover,
&:focus {
color: $navbar-link-hover-color;
background-color: $navbar-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-link-active-color;
background-color: $navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-link-disabled-color;
background-color: $navbar-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: $navbar-link-color;
&:hover {
color: $navbar-link-hover-color;
}
}
.navbar-link {
color: $navbar-link-color;
}
.active > a {
&:hover,
&:focus {
color: $navbar-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: $navbar-link-disabled-color;
}
color: $material-text-color;
}
background-color: $material-color;
color: $material-text-color;
}
}
});
&-inverse {
background-color: $indigo;
}
@media (max-width: 1199px) {
.navbar-brand {
height: 50px;
padding: 10px 15px;
}
.navbar-form {
margin-top: 16px;
.form-control-wrapper .form-control, .form-control {
border-color: $navbar-border;
color: $navbar-border;
}
.form-control-wrapper {
.material-input:before, input:focus ~ .material-input:after {
background-color: $navbar-border;
}
}
::-webkit-input-placeholder { color: $navbar-border; }
:-moz-placeholder { color: $navbar-border; };
::-moz-placeholder { color: $navbar-border; };
:-ms-input-placeholder { color: $navbar-border; };
}
}
.navbar-inverse {
background-color: $navbar-inverse-bg;
margin-top: 10px;
}
.navbar-white {
background-color: #FFF;
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
color: $lightbg-text;
}
.navbar-nav {
& > li > a {
color: $lightbg-text;
&:hover,
&:focus {
color: $lightbg-text;
background-color: $navbar-link-hover-bg;
}
}
& > .active > a {
&,
&:hover,
&:focus {
color: $lightbg-text;
background-color: $navbar-link-active-bg;
}
}
& > .disabled > a {
&,
&:hover,
&:focus {
color: $lightbg-text;
background-color: $navbar-link-disabled-bg;
}
}
& > .open > a {
&,
&:hover,
&:focus {
background-color: $navbar-link-active-bg;
color: $lightbg-text;
}
}
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
// Navbar alternate
// --------------------------------------------------
.navbar-default {
@include navbar-variant($primary);
}
}
.navbar-primary {
@include navbar-variant($primary);
}
// Success appears as green
.navbar-success {
@include navbar-variant($success);
}
// Info appears as blue-green
.navbar-info {
@include navbar-variant($info);
}
// Warning appears as orange
.navbar-warning {
@include navbar-variant($warning);
}
// Danger and error appear as red
.navbar-danger {
@include navbar-variant($danger);
}
// Material shades
.navbar-material-red {
@include navbar-variant($red)
}
.navbar-material-pink {
@include navbar-variant($pink);
}
.navbar-material-purple {
@include navbar-variant($purple);
}
.navbar-material-deeppurple {
@include navbar-variant($deeppurple);
}
.navbar-material-indigo {
@include navbar-variant($indigo);
}
.navbar-material-lightblue {
@include navbar-variant($lightblue);
}
.navbar-material-cyan {
@include navbar-variant($cyan);
}
.navbar-material-teal {
@include navbar-variant($teal);
}
.navbar-material-lightgreen {
@include navbar-variant($lightgreen);
}
.navbar-material-lime {
@include navbar-variant($lime);
}
.navbar-material-lightyellow {
@include navbar-variant($lightyellow);
}
.navbar-material-orange {
@include navbar-variant($orange);
}
.navbar-material-deeporange {
@include navbar-variant($deeporange);
}
.navbar-material-grey {
@include navbar-variant($grey);
}
.navbar-material-bluegrey {
@include navbar-variant($bluegrey);
}
.navbar-material-brown {
@include navbar-variant($brown);
}
.navbar-material-lightgrey {
@include navbar-variant($lightgrey);
}

21
sass/_panels.scss Normal file
View File

@ -0,0 +1,21 @@
.panel {
border-radius: 2px;
border: 0;
@include variations(unquote(" > .panel-heading"), background-color, $grey-200);
.shadow-z-1;
}
[class*="panel-"] > .panel-heading {
color: $darkbg-text;
border: 0;
}
.panel-default, .panel:not([class*="panel-"]) {
> .panel-heading {
color: $lightbg-text;
}
}
.panel-footer {
background-color: $grey-200;
}

View File

@ -0,0 +1,19 @@
.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;
}

View File

@ -37,12 +37,20 @@
.noUi-horizontal {
height: 10px;
}
.noUi-horizontal .noUi-handle {
.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;
@ -70,18 +78,18 @@
.noUi-target {
border-radius: 2px;
}
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal {
height: 2px;
margin: 15px 0;
}
.noUi-horizontal .noUi-handle.noUi-active {
transform: scale(2.5);
.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;
@ -95,8 +103,8 @@
}
.slider {
//.variations(#{".noUi-connect"}, background-color, $primary);
//.variations(#{" .noUi-connect"}, background-color, $primary);
//.variations(#{" .noUi-handle"}, background-color, $primary);
//.variations(#{" .noUi-handle"}, border-color, $primary);
@include variations(unquote(".noUi-connect"), background-color, $primary);
@include variations(unquote(" .noUi-connect"), background-color, $primary);
@include variations(unquote(" .noUi-handle"), background-color, $primary);
@include variations(unquote(" .noUi-handle"), border-color, $primary);
}

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: 0px;
border: 0px;
background: transparent;
}
&.floating-label-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: 2px;
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;
}
}

View File

@ -7,7 +7,7 @@
color: $darkbg-text;
font-size: 14px;
border-radius: 2px;
@extend .shadow-z-1;
.shadow-z-1;
// Animation
height: 0;

View File

@ -1,25 +1,18 @@
.popover, .tooltip-inner {
background: #323232;
color: #FFF;
border-radius: 2px;
color: $popover-color;
line-height: 1em;
background: $popover-background;
border: none;
border-radius: $material-border-radius;
@include shadow-z-1();
}
.tooltip, .tooltip.in {
opacity: 1;
opacity: 1;
}
.popover, .tooltip {
&.left .arrow:after, &.left .tooltip-arrow {
border-left-color: #323232;
}
&.right .arrow:after, &.right .tooltip-arrow {
border-right-color: #323232;
}
&.top .arrow:after, &.top .tooltip-arrow {
border-top-color: #323232;
}
&.bottom .arrow:after, &.bottom .tooltip-arrow {
border-bottom-color: #323232;
}
.arrow, .tooltip-arrow {
display: none;
}
}

View File

@ -5,85 +5,6 @@
background: #c8c8c8;
.progress-bar {
box-shadow: none;
@include variations(unquote(""), background-color, $primary);
}
// Alert buttons
// --------------------------------------------------
.progress-bar-default {
@include progress-bar-variant($primary);
}
.progress-bar-primary {
@include progress-bar-variant($primary);
}
// Success appears as green
.progress-bar-success {
@include progress-bar-variant($success);
}
// Info appears as blue-green
.progress-bar-info {
@include progress-bar-variant($info);
}
// Warning appears as orange
.progress-bar-warning {
@include progress-bar-variant($warning);
}
// Danger and error appear as red
.progress-bar-danger {
@include progress-bar-variant($danger);
}
// Material shades
.progress-bar-material-red {
@include progress-bar-variant($red)
}
.progress-bar-material-pink {
@include progress-bar-variant($pink);
}
.progress-bar-material-purple {
@include progress-bar-variant($purple);
}
.progress-bar-material-deeppurple {
@include progress-bar-variant($deeppurple);
}
.progress-bar-material-indigo {
@include progress-bar-variant($indigo);
}
.progress-bar-material-lightblue {
@include progress-bar-variant($lightblue);
}
.progress-bar-material-cyan {
@include progress-bar-variant($cyan);
}
.progress-bar-material-teal {
@include progress-bar-variant($teal);
}
.progress-bar-material-lightgreen {
@include progress-bar-variant($lightgreen);
}
.progress-bar-material-lime {
@include progress-bar-variant($lime);
}
.progress-bar-material-lightyellow {
@include progress-bar-variant($lightyellow);
}
.progress-bar-material-orange {
@include progress-bar-variant($orange);
}
.progress-bar-material-deeporange {
@include progress-bar-variant($deeporange);
}
.progress-bar-material-grey {
@include progress-bar-variant($grey);
}
.progress-bar-material-bluegrey {
@include progress-bar-variant($bluegrey);
}
.progress-bar-material-brown {
@include progress-bar-variant($brown);
}
.progress-bar-material-lightgrey {
@include progress-bar-variant($lightgrey);
}
}

View File

@ -1,95 +1,100 @@
.form-horizontal .radio {
margin-bottom: 10px;
margin-bottom: 10px;
}
.radio {
label {
cursor: pointer;
padding-left: 45px;
position: relative;
span {
display: block;
position: absolute;
left: 10px;
top: 2px;
transition-duration: 0.2s;
}
.circle {
border: 2px solid $lightbg-text;
height: 15px;
width: 15px;
border-radius: 100%;
}
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: $radio-default;
transform: scale(0);
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: $lightbg-text;
left: -18px;
top: -18px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale(1.5);
}
input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
label {
cursor: pointer;
padding-left: 45px;
position: relative;
span {
display: block;
position: absolute;
left: 10px;
top: 2px;
transition-duration: 0.2s;
}
//.variations(#{" input[type=radio]:checked ~ .check"}, background-color, $radio-default);
//.variations(#{" input[type=radio]:checked ~ .circle"}, border-color, $radio-default);
input[type=radio][disabled] ~ .check,
input[type=radio][disabled] ~ .circle {
opacity: 0.5;
.circle {
border: 2px solid $lightbg-text;
height: 15px;
width: 15px;
border-radius: 100%;
}
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: $radio-default;
transform: scale3d(0, 0, 0);
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: $lightbg-text;
left: -18px;
top: -18px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(1.5, 1.5, 1);
}
input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
input[type=radio] { display: none; }
input[type=radio]:checked ~ .check {
transform: scale(0.55);
}
input[type=radio][disabled] ~ .circle {
border-color: $lightbg-text;
}
input[type=radio][disabled] ~ .check {
background-color: $lightbg-text;
}
}
@include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $radio-default);
@include variations(unquote(" input[type=radio]:checked ~ .circle"), border-color, $radio-default);
input[type=radio][disabled] ~ .check,
input[type=radio][disabled] ~ .circle {
opacity: 0.5;
}
input[type=radio] {
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
}
input[type=radio]:checked ~ .check {
transform: scale3d(0.55, 0.55, 1);
}
input[type=radio][disabled] ~ .circle {
border-color: $lightbg-text;
}
input[type=radio][disabled] ~ .check {
background-color: $lightbg-text;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

View File

@ -1,28 +1,35 @@
.shadow-z-1 {
box-shadow: 0 1px 3px rgba(0,0,0, .12),
0 1px 2px rgba(0,0,0, .24) ;
box-shadow:
0 1px 6px 0 rgba(0, 0, 0, 0.12),
0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
.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);
}
.shadow-z-2 {
box-shadow: 0 3px 6px rgba(0,0,0, .16),
0 3px 6px rgba(0,0,0, .23) ;
}
.shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0,0,0, .20),
0 3px 6px rgba(0,0,0, .28) ;
box-shadow:
0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.shadow-z-3 {
box-shadow: 0 10px 20px rgba(0,0,0, .19),
0 6px 6px rgba(0,0,0, .23) ;
box-shadow:
0 12px 15px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.shadow-z-4 {
box-shadow: 0 14px 28px rgba(0,0,0, .25),
0 10px 10px rgba(0,0,0, .22) ;
box-shadow:
0 16px 28px 0 rgba(0, 0, 0, 0.22),
0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
.shadow-z-5 {
box-shadow: 0 19px 38px rgba(0,0,0, .30),
0 15px 12px rgba(0,0,0, .22) ;
box-shadow:
0 27px 24px 0 rgba(0, 0, 0, 0.2),
0 40px 77px 0 rgba(0, 0, 0, 0.22);
}

View File

@ -1,17 +1,17 @@
.nav-tabs {
background: $navbar-default-bg;
background: $primary;
> li {
> a {
color: #FFFFFF;
border: 0;
margin: 0;
&:hover {
background: transparent;
background-color: transparent;
border: 0;
}
}
&.active > a, &.active > a:hover, &.open > a, &.open > a:hover {
background: transparent !important;
& > a, & > a:hover, & > a:focus {
background-color: transparent !important;
border: 0 !important;
color: #FFFFFF !important;
font-weight: 500;

67
sass/_togglebutton.scss Normal file
View File

@ -0,0 +1,67 @@
.togglebutton {
vertical-align: middle;
&, label, input, .toggle {
user-select: none;
}
label {
font-weight: 400;
cursor: pointer;
// Hide original checkbox
input[type=checkbox] {
opacity: 0;
width: 0;
height:0;
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled] + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
}
// Handle off
.toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
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;
}
// Handle disabled
input[type=checkbox][disabled] + .toggle:after,
input[type=checkbox][disabled]:checked + .toggle:after{
background-color: #BDBDBD;
}
// Ripple off and disabled
input[type=checkbox] + .toggle:active:after,
input[type=checkbox][disabled] + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
input[type=checkbox]:checked + .toggle:after {
left: 15px;
}
}
// Switch bg on
.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, {
background-color: rgba($material-color, (50/100));
});
// Handle on
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
// Ripple on
.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary, {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100));
});
}

View File

@ -1,100 +1,104 @@
// Material Global vars
$zero: 0 !default;
// material icons path
$material-font-path: "../fonts" !default;
// Material colors palette
$red: #F44336 !default;
$pink: #E91E63 !default;
$purple: #9C27B0 !default;
$deeppurple: #673AB7 !default;
$indigo: #3F51B5 !default;
$lightblue: #03A9F4 !default;
$cyan: #00BCD4 !default;
$teal: #009688 !default;
$lightgreen: #8BC34A !default;
$lime: #CDDC39 !default;
$lightyellow: #FFEB3B !default;
$orange: #FF9800 !default;
$deeporange: #FF5722 !default;
$grey: #9E9E9E !default;
$bluegrey: #607D8B !default;
$brown: #795548 !default;
$lightgrey: #ECECEC !default;
// Bootstrap shades
$primary: #4285F4 !default;
$success: #0F9D58 !default;
$info: $lightblue !default;
$warning: $deeporange !default;
$primary: $teal !default;
$success: $green !default;
$info: $light-blue !default;
$warning: $deep-orange !default;
$danger: $red !default;
$brand-primary: $primary !default;
$brand-success: $success !default;
$brand-danger: $danger !default;
$brand-warning: $warning !default;
$brand-info: $info !default;
// Typography elements for Material
$darkbg-text: rgba(255,255,255,0.84);
$lightbg-text: rgba(0,0,0,0.84);
$icon-color: rgba(0,0,0,0.5);
$darkbg-text: rgba(255,255,255,0.84) !default;
$lightbg-text: rgba(0,0,0,0.84) !default;
$icon-color: rgba(0,0,0,0.5) !default;
// Bootstrap variables
$btn-default: #FFF;
$btn-default-text: $lightbg-text;
$body-bg: #EEEEEE !default;
$btn-primary: $primary;
$btn-primary-text: $darkbg-text;
$btn-default: transparent !default;
$btn-default-text: $lightbg-text !default;
$btn-success: $success;
$btn-success-text: $darkbg-text;
$btn-primary: $primary !default;
$btn-primary-text: $darkbg-text !default;
$btn-info: $info;
$btn-info-text: $darkbg-text;
$btn-success: $success !default;
$btn-success-text: $darkbg-text !default;
$btn-warning: $warning;
$btn-warning-text: $darkbg-text;
$btn-info: $info !default;
$btn-info-text: $darkbg-text !default;
$btn-danger: $danger;
$btn-danger-text: $darkbg-text;
$btn-warning: $warning !default;
$btn-warning-text: $darkbg-text !default;
$input-unchecked: rgba(137, 137, 137, 0.3);
$input-checked: rgba(15, 157, 88, 0.3);
$btn-danger: $danger !default;
$btn-danger-text: $darkbg-text !default;
$radio-default: $lightbg-text;
$radio-primary: $primary;
$radio-success: $success;
$radio-info: $info;
$radio-warning: $warning;
$radio-danger: $danger;
$input-unchecked: rgba(137, 137, 137, 0.3) !default;
$input-checked: rgba(15, 157, 88, 0.3) !default;
$input-danger: $danger;
$input-default: $primary;
$input-warning: $warning;
$input-success: $success;
$input-info: $info;
$radio-default: $lightbg-text !default;
$radio-primary: $primary !default;
$radio-success: $success !default;
$radio-info: $info !default;
$radio-warning: $warning !default;
$radio-danger: $danger !default;
$navbar-danger-bg: $danger;
$navbar-inverse-bg: #5264AE;
$navbar-warning-bg: $warning;
$navbar-success-bg: $success;
$navbar-info-bg: $info;
$navbar-default-bg: $primary;
$navbar-color: $darkbg-text;
$navbar-link-color: $darkbg-text;
$navbar-link-hover-color: $darkbg-text;
$navbar-link-hover-bg: transparent;
$navbar-link-active-color: $darkbg-text;
$navbar-link-active-bg: rgba(0,0,0,0.05);
$navbar-link-disabled-color: #E5E5E5;
$navbar-link-disabled-bg: transparent;
$navbar-brand-color: $darkbg-text;
$navbar-toggle-border-color: $darkbg-text;
$navbar-toggle-hover-bg: transparent;
$navbar-toggle-icon-bar-bg: $darkbg-text;
$navbar-border: $darkbg-text;
$input-danger: $danger !default;
$input-default: $primary !default;
$input-warning: $warning !default;
$input-success: $success !default;
$input-info: $info !default;
$alert-success: $success;
$alert-info: $info;
$alert-warning: $warning;
$alert-danger: $danger;
$alert-success: $success !default;
$alert-info: $info !default;
$alert-warning: $warning !default;
$alert-danger: $danger !default;
$progress-success: $success;
$progress-info: $info;
$progress-warning: $warning;
$progress-danger: $danger;
$progress-success: $success !default;
$progress-info: $info !default;
$progress-warning: $warning !default;
$progress-danger: $danger !default;
$font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
// Global Material variables
$material-border-radius: 2px !default;
$input-underline-color: #D2D2D2 !default;
// Card
$card-body-text: $lightbg-text !default;
$card-body-background: #fff !default;
$card-image-headline: #fff !default;
$text-disabled: #a8a8a8 !default;
$background-disabled: #eaeaea !default;
// Checkboxes
$checkbox-size: 20px !default;
$checkbox-animation-ripple: 500ms !default;
$checkbox-animation-check: 0.3s !default;
// Popovers and Popups
$popover-background: rgba(101, 101, 101, 0.9) !default;
$popover-color: #ececec !default;
// Inputs
$input-placeholder-color: #BDBDBD !default;
$floating-label-size-ratio: 70 / 100 !default;
// Dropdown Menu
$dropdown-radius: 2px !default;
$dropdown-font-size: 16px !default;

View File

@ -1,66 +1,22 @@
// main: _material.scss
body, .container, .container-fluid {
.well, .well:not([class^="well well-material-"]) {
&, .form-control {
color: $lightbg-text;
}
.floating-label {
color: #7e7e7e;
}
.form-control {
border-bottom-color: #7e7e7e;
&::-webkit-input-placeholder {
color: #7e7e7e;
}
&::-moz-placeholder {
color: #7e7e7e;
opacity: 1;
}
&:-ms-input-placeholder {
color: #7e7e7e;
}
}
.option, .create {
color: $lightbg-text;
}
}
[class^="well well-material-"] {
&, .form-control, .floating-label {
color: $darkbg-text;
}
.form-control {
border-bottom-color: $darkbg-text;
&::-webkit-input-placeholder {
color: $darkbg-text;
}
&::-moz-placeholder {
color: $darkbg-text;
opacity: 1;
}
&:-ms-input-placeholder {
color: $darkbg-text;
}
}
// Rule to fix selectize plugin
.option, .create {
color: $lightbg-text;
}
}
.well, .jumbotron {
background-color: #fff;
padding: 19px;
margin-bottom: 20px;
@extend .shadow-z-2;
border-radius: 2px;
border: 0;
p {
font-weight: 300;
}
// .variations(#{""}, background-color, #FFF);
.well.well-sm {
padding: 10px;
}
.well.well-lg {
padding: 26px;
}
.well, .jumbotron {
background-color: #fff;
padding: 19px;
margin-bottom: 20px;
@include shadow-z-2();
border-radius: 2px;
border: 0;
p {
font-weight: 300;
}
@include variations(unquote(""), background-color, #FFF);
}
}

View File

@ -0,0 +1,2 @@
@import 'material';
@import '_mixins-fullpalette';

View File

@ -1,8 +0,0 @@
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 100;
src: local('RobotoDraft Thin'), local('RobotoDraft-Thin'), url(https://fonts.gstatic.com/s/robotodraft/v2/hope9NW9iJ5hh8P5PM_EA2zZpt1Zv2lgqhgSPQ2HnUo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@import "material.scss";

View File

@ -1,113 +1,142 @@
// Material Theme 0.0.1
// -----------------------------------------------------
@import "_variables.scss";
@import "_mixins.scss";
@import "_shadows.scss";
@import "_icons-material-design.scss";
@import '_variables';
@import '_colors';
@import '_mixins';
@import '_icons-material-design';
body {
background-color: #EEEEEE;
&.inverse {
background: #333333;
&, .form-control {
color: $darkbg-text;
}
background-color: $body-bg;
&.inverse {
background: #333333;
&, .form-control {
color: $darkbg-text;
}
.modal,
.panel-default,
.card {
&,
.form-control {
background-color: initial;
color: initial;
}
}
}
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
h5, h6{
font-weight: 400;
}
a, a:hover, a:focus {
color: $primary;
}
// Well and Jumbotrons
@import "_welljumbo.scss";
@import '_welljumbo';
// Buttons
@import "_buttons.scss";
@import '_buttons';
// Checkboxes
@import "_checkboxes.scss";
@import '_checkboxes';
// Toggle buttons
@import '_togglebutton';
// Radios
@import "_radios.scss";
@import '_radios';
// Text inputs
@import "_inputs.scss";
@import '_inputs';
legend {
border-bottom: 0;
}
.modal-content {
@extend .shadow-z-2;
border-radius: 0;
border: 0;
.modal-header {
border-bottom: 0;
}
.modal-footer {
border-top: 0;
.btn+.btn {
margin-bottom: 10px;
}
}
border-bottom: 0;
}
// Lists
@import "_lists.scss";
@import '_lists';
// Navbar
@import "_navbar.scss";
@import '_navbar';
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background: rgba(0,0,0,0.08);
}
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background-color: transparent;
color: $primary;
}
}
@include variations(unquote(" li a:hover"), color, $primary);
}
// Alerts
@import "_alerts.scss";
@import '_alerts';
// Progress bar
@import "_progress.scss";
// Panels
@import "_cards.scss";
@import '_progress';
// Typography
.text-warning {
color: $btn-warning;
color: $btn-warning;
}
.text-primary {
color: $btn-primary;
color: $btn-primary;
}
.text-danger {
color: $btn-danger;
color: $btn-danger;
}
.text-success {
color: $btn-success;
color: $btn-success;
}
.text-info {
color: $btn-info;
color: $btn-info;
}
@import "_tabs.scss";
@import '_tabs';
@import "_popups.scss";
@import '_popups';
@import "_icons.scss";
@import '_icons';
@import '_cards';
@import '_dialogs';
@import '_labels';
@import '_panels';
@import '_dividers';
// Prevent highlight on mobile
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: 0;
}
}
// External plugins
@import "_plugin-snackbarjs.scss";
@import "_plugin-nouislider.scss";
@import '_plugin-snackbarjs';
@import '_plugin-nouislider';
@import '_plugin-selectize';
@import '_plugin-dropdownjs';
// Material shadows
// Place them on bottom of stylesheet to increase the importance of it and override other same-specificity selectors
@import '_shadows';

View File

@ -9,7 +9,8 @@
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 2px;
border-radius: inherit;
pointer-events: none;
}
.ripple {
position: absolute;
@ -26,7 +27,7 @@
}
.ripple.ripple-on {
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1;
opacity: 0.1;
}
.ripple.ripple-out {
transition: opacity 0.1s linear 0s !important;

50
sass/roboto.scss Normal file
View File

@ -0,0 +1,50 @@
@import '_variables';
@import '_colors';
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 400;
//src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');
src: local('RobotoDraft'),
local('RobotoDraft-Regular'),
local('Roboto-Regular'),
url('#{$material-font-path}/RobotoDraftRegular.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftRegular.woff') format('woff');
}
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 500;
//src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');
src: local('RobotoDraft Medium'),
local('RobotoDraft-Medium'),
local('Roboto-Medium'),
url('#{$material-font-path}/RobotoDraftMedium.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftMedium.woff') format('woff');
}
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 700;
//src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');
src: local('RobotoDraft Bold'),
local('RobotoDraft-Bold'),
local('Roboto-Bold'),
url('#{$material-font-path}/RobotoDraftBold.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftBold.woff') format('woff');
}
@font-face {
font-family: 'RobotoDraft';
font-style: italic;
font-weight: 400;
//src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');
src: local('RobotoDraft Italic'),
local('RobotoDraft-Italic'),
local('Roboto-Italic'),
url('#{$material-font-path}/RobotoDraftItalic.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftItalic.woff') format('woff');
}