mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 19:39:10 +03:00
first automated sass conversion, using grunt task 'material:sass'
This commit is contained in:
Kevin Ross
parent
44d14470bc
commit
f397283d95
|
|
@ -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", [
|
||||
|
|
|
|||
|
|
@ -1,96 +1,23 @@
|
|||
.alert {
|
||||
border: 0px;
|
||||
border-radius: 0;
|
||||
|
||||
.generic-variations(unquote(""), $darkbg-text, {
|
||||
background-color: $material-color;
|
||||
color: $material-text-color;
|
||||
|
||||
a, .alert-link {
|
||||
color: #FFFFFF;
|
||||
color: $material-text-color;
|
||||
}
|
||||
});
|
||||
|
||||
&-info, &-danger, &-warning, &-success {
|
||||
color: $darkbg-text;
|
||||
}
|
||||
|
||||
|
||||
// Alert buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.alert-default {
|
||||
@include alert-variant(#FFFFFF);
|
||||
&-default {
|
||||
a, .alert-link {
|
||||
color: #000000;
|
||||
color: $lightbg-text;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,70 +1,123 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend .shadow-z-5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
border: 0;
|
||||
margin: 10px 1px;
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: $darkbg-text;
|
||||
|
||||
&:hover {
|
||||
color: $darkbg-text;
|
||||
&:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
|
||||
@include shadow-z-1();
|
||||
}
|
||||
&: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;
|
||||
&: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));
|
||||
});
|
||||
|
||||
}
|
||||
// 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 {
|
||||
&.btn-flat {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-weight: 500;
|
||||
&:disabled {
|
||||
color: $text-disabled !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-raised {
|
||||
// Size variations
|
||||
&.btn-sm {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
&.btn-xs {
|
||||
padding: 4px 15px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&.btn-raised {
|
||||
@include btn-shadow();
|
||||
}
|
||||
|
||||
.open > .dropdown-toggle.btn {
|
||||
//.variations(#{""}, background-color, $btn-default);
|
||||
&.btn-fab {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
font-size: 26px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
&, &:hover, &:active {
|
||||
@include variations(unquote(""), background-color, transparent);
|
||||
}
|
||||
&, &:hover {
|
||||
@include shadow-z-1();
|
||||
}
|
||||
&:active {
|
||||
@include shadow-z-1-hover();
|
||||
}
|
||||
&, .ripple-wrapper {
|
||||
border-radius: 100%;
|
||||
}
|
||||
&.btn-fab-mini {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 13px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
i {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
&.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 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: 4px;
|
||||
border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
|
||||
@include btn-shadow();
|
||||
|
|
@ -78,110 +131,15 @@
|
|||
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 {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
font-size: 26px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
&, &:hover {
|
||||
//.variations(#{""}, background-color, transparent);
|
||||
}
|
||||
&, .ripple-wrapper {
|
||||
border-radius: 100%;
|
||||
}
|
||||
&.btn-mini {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 13px;
|
||||
font-size: 15px;
|
||||
@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();
|
||||
}
|
||||
}
|
||||
|
||||
// Alert buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.btn-default {
|
||||
@include button-variant($btn-default);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
// Material shades
|
||||
.btn-material-red {
|
||||
@include button-variant($red)
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
|
|
|
|||
168
sass/_cards.scss
168
sass/_cards.scss
|
|
@ -1,130 +1,66 @@
|
|||
//
|
||||
// Cards
|
||||
// http://www.google.com/design/spec/components/cards.html#cards-usage
|
||||
//
|
||||
.card {
|
||||
@extend .shadow-z-1;
|
||||
|
||||
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.card-height-indicator {
|
||||
margin-top: 100%;
|
||||
}
|
||||
.card-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/**************************************************************************/
|
||||
|
||||
|
||||
border-radius: 2px;
|
||||
margin-bottom: 20px; // Same as panel margins
|
||||
color: $card-body-text;
|
||||
background: $card-body-background;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 100;
|
||||
margin: 10px 0;
|
||||
@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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
height: 30%;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 15px;
|
||||
border-top: 1px solid;
|
||||
border-color: $lightgrey;
|
||||
|
||||
.icon {
|
||||
font-size: 25px;
|
||||
transition: ease transform 0.5s;
|
||||
&:hover { text-decoration: none; transform: transform3d(0, 0, 0, -1px)}
|
||||
height: 10%;
|
||||
padding: 18px;
|
||||
button {
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
width: auto;
|
||||
&:first-child {
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 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%));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,169 +1,218 @@
|
|||
.form-horizontal .checkbox {
|
||||
padding-top: 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
transform: rotate(0deg);
|
||||
transform: translateZ(0); // Force 3d rendering
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
transition-duration: 0.2s;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
}
|
||||
.check:after {
|
||||
|
||||
// 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: $lightbg-text;
|
||||
left: -5px;
|
||||
top: -15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
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 {
|
||||
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;
|
||||
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 ~ .check:after {
|
||||
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]:checked ~ .check:before {
|
||||
animation: check 300ms ease-out 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) ~ .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;
|
||||
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) ~ .check:before {
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] ~ .check:after {
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: $lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
//.variations(#{" input[type=checkbox]:checked ~ .check:after"}, background-color, $success);
|
||||
@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 uncheck {
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
top: -3px;
|
||||
left: 17px;
|
||||
width: 10px;
|
||||
height: 21px;
|
||||
border-color: #0f9d58;
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
transform: rotate(45deg);
|
||||
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% {
|
||||
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;
|
||||
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% {
|
||||
top: 1px;
|
||||
left: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: rotate(0deg);
|
||||
border-color: #5a5a5a;
|
||||
border-left-color: #5a5a5a;
|
||||
border-top-color: #5a5a5a;
|
||||
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;
|
||||
}
|
||||
|
||||
@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;
|
||||
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% {
|
||||
top: 14px;
|
||||
left: 17px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
transform: rotate(45deg);
|
||||
border-color: #5a5a5a;
|
||||
border-left-color: #5a5a5a;
|
||||
border-top-color: #5a5a5a;
|
||||
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;
|
||||
}
|
||||
0% {
|
||||
top: 1px;
|
||||
left: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
51% {
|
||||
transform: rotate(0deg);
|
||||
border-color: #5a5a5a;
|
||||
border-left-color: #5a5a5a;
|
||||
border-top-color: #5a5a5a;
|
||||
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 rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -175,7 +224,6 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
|
|||
360
sass/_colors.scss
Normal file
360
sass/_colors.scss
Normal 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
52
sass/_dialogs.scss
Normal 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
71
sass/_dividers.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -209,7 +209,6 @@
|
|||
|
||||
/* Start Icons */
|
||||
|
||||
|
||||
.mdi-action-3d-rotation:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,149 +1,210 @@
|
|||
fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
|
||||
fieldset[disabled] .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;
|
||||
border-bottom: 1px solid #757575;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset[disabled] .form-control, .form-control {
|
||||
&:textarea {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
select[multiple].form-control {
|
||||
&, &:focus, &.focus {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
.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;
|
||||
|
||||
.floating-label {
|
||||
color: #7E7E7E;
|
||||
font-size: 14px;
|
||||
color: $input-placeholder-color;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
transition: 0.2s ease all;
|
||||
opacity: 0;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
|
||||
// Input sizes
|
||||
.floating-label { // base
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
.form-control:focus ~ .floating-label,
|
||||
.form-control:not(.empty) ~ .floating-label {
|
||||
top: -10px;
|
||||
font-size: 10px;
|
||||
opacity: 1;
|
||||
top: $floating-label-size-ratio * -$font-size-base;
|
||||
font-size: $floating-label-size-ratio * $font-size-base;
|
||||
}
|
||||
.form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: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;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
// 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;
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:not(.empty) ~ .floating-label {
|
||||
.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;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: $input-warning;
|
||||
}
|
||||
}
|
||||
&.has-error {
|
||||
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
|
||||
background: $input-danger;
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:not(.empty) ~ .floating-label {
|
||||
.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 {
|
||||
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
|
||||
background: $input-success;
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:not(.empty) ~ .floating-label {
|
||||
.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 {
|
||||
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
|
||||
background: $input-info;
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:not(.empty) ~ .floating-label {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
//.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);
|
||||
.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);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -154,13 +215,14 @@ select[multiple].form-control {
|
|||
}
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
bottom: -10px;
|
||||
}
|
||||
.input-group-addon {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.input-group-btn .btn {
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,27 +236,6 @@ select.form-control {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@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;
|
||||
|
|
|
|||
4
sass/_labels.scss
Normal file
4
sass/_labels.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.label {
|
||||
border-radius: 1px;
|
||||
@include variations(unquote(""), background-color, $grey);
|
||||
}
|
||||
|
|
@ -6,6 +6,12 @@
|
|||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0 16px;
|
||||
&.baseline {
|
||||
border-bottom: 1px solid #cecece;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.row-picture, .row-action-primary {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
|
|
@ -35,11 +41,14 @@
|
|||
margin-right: -7px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
.checkbox-material {
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row-content {
|
||||
display: inline-block;
|
||||
width: #{"calc(100% - 92px)"};
|
||||
width: unquote("calc(100% - 92px)");
|
||||
min-height: 66px;
|
||||
.action-secondary {
|
||||
position: absolute;
|
||||
|
|
@ -52,7 +61,7 @@
|
|||
}
|
||||
}
|
||||
.action-secondary ~ * {
|
||||
max-width: #{"calc(100% - 30px)"};
|
||||
max-width: unquote("calc(100% - 30px)");
|
||||
}
|
||||
.least-content {
|
||||
position: absolute;
|
||||
|
|
@ -68,6 +77,16 @@
|
|||
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;
|
||||
|
|
@ -75,7 +94,7 @@
|
|||
margin-bottom: 10px;
|
||||
&:before {
|
||||
content: "";
|
||||
width: #{"calc(100% - 90px)"};
|
||||
width: unquote("calc(100% - 90px)");
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
160
sass/_mixins-fullpalette.scss
Normal file
160
sass/_mixins-fullpalette.scss
Normal 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;
|
||||
|
|
@ -1,32 +1,147 @@
|
|||
@mixin card-variant($background, $color, $border) {
|
||||
background-color: $background;
|
||||
color: $color;
|
||||
|
||||
.card-footer, .card-header {
|
||||
border-color: $border;
|
||||
// usage: @include variations(unquote(" .check"), color, transparent);
|
||||
@mixin variations($extra, $property, $default){
|
||||
.generic-variations($extra, $default, {
|
||||
#{$property}: $material-color !default;
|
||||
});
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color;
|
||||
@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 button-variant($color) {
|
||||
background-color: $color;
|
||||
@mixin text-variations($extra, $default){
|
||||
.generic-variations($extra, $default, {
|
||||
color: $material-color;
|
||||
});
|
||||
}
|
||||
|
||||
@mixin alert-variant($color) {
|
||||
background-color: $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();
|
||||
}
|
||||
|
||||
@mixin progress-bar-variant($color) {
|
||||
background-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();
|
||||
}
|
||||
|
||||
@mixin navbar-variant($color) {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
@mixin icon-variant($color) {
|
||||
color: $color;
|
||||
@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"));
|
||||
|
||||
}
|
||||
|
||||
|
||||
$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger") !default;
|
||||
|
|
|
|||
|
|
@ -1,68 +1,75 @@
|
|||
.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;
|
||||
color: inherit;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-brand-color;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-color;
|
||||
color: inherit;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
> li > a {
|
||||
color: $navbar-link-color;
|
||||
color: inherit;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-hover-color;
|
||||
background-color: $navbar-link-hover-bg;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-active-color;
|
||||
background-color: $navbar-link-active-bg;
|
||||
color: inherit;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-disabled-color;
|
||||
background-color: $navbar-link-disabled-bg;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
.navbar-toggle {
|
||||
border-color: $navbar-toggle-border-color;
|
||||
border: $zero;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $navbar-toggle-hover-bg;
|
||||
background-color: transparent;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: $navbar-toggle-icon-bar-bg;
|
||||
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);
|
||||
|
|
@ -74,43 +81,50 @@
|
|||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $navbar-link-active-bg;
|
||||
color: $navbar-link-active-color;
|
||||
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: 0;
|
||||
color: darken($navbar-link-color, 17%)
|
||||
border: $zero;
|
||||
color: inherit;
|
||||
}
|
||||
.divider {
|
||||
background-color: $navbar-border;
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.08;
|
||||
}
|
||||
> li > a {
|
||||
color: $navbar-link-color;
|
||||
color: inherit;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-hover-color;
|
||||
background-color: $navbar-link-hover-bg;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-active-color;
|
||||
background-color: $navbar-link-active-bg;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-disabled-color;
|
||||
background-color: $navbar-link-disabled-bg;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -118,23 +132,23 @@
|
|||
}
|
||||
|
||||
.navbar-link {
|
||||
color: $navbar-link-color;
|
||||
color: inherit;
|
||||
&:hover {
|
||||
color: $navbar-link-hover-color;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
color: $navbar-link-color;
|
||||
.btn-link {
|
||||
color: inherit;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-hover-color;
|
||||
color: inherit;
|
||||
}
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $navbar-link-disabled-color;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -142,145 +156,62 @@
|
|||
.navbar-form {
|
||||
margin-top: 16px;
|
||||
.form-control-wrapper .form-control, .form-control {
|
||||
border-color: $navbar-border;
|
||||
color: $navbar-border;
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.form-control-wrapper {
|
||||
.material-input:before, input:focus ~ .material-input:after {
|
||||
background-color: $navbar-border;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
::-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;
|
||||
.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;
|
||||
}
|
||||
|
||||
.navbar-white {
|
||||
background-color: #FFF;
|
||||
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
|
||||
color: $lightbg-text;
|
||||
}
|
||||
.navbar-nav {
|
||||
& > li > a {
|
||||
color: $lightbg-text;
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: $dropdown-radius;
|
||||
li > a {
|
||||
font-size: $dropdown-font-size;
|
||||
padding: 13px 16px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $lightbg-text;
|
||||
background-color: $navbar-link-hover-bg;
|
||||
color: $material-color;
|
||||
background-color: $grey-200;
|
||||
}
|
||||
}
|
||||
& > .active > a {
|
||||
&,
|
||||
.active > a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $lightbg-text;
|
||||
background-color: $navbar-link-active-bg;
|
||||
color: $material-text-color;
|
||||
}
|
||||
background-color: $material-color;
|
||||
color: $material-text-color;
|
||||
}
|
||||
}
|
||||
& > .disabled > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $lightbg-text;
|
||||
background-color: $navbar-link-disabled-bg;
|
||||
}
|
||||
});
|
||||
|
||||
&-inverse {
|
||||
background-color: $indigo;
|
||||
}
|
||||
|
||||
& > .open > a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $navbar-link-active-bg;
|
||||
color: $lightbg-text;
|
||||
@media (max-width: 1199px) {
|
||||
|
||||
.navbar-brand {
|
||||
height: 50px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.navbar-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.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
21
sass/_panels.scss
Normal 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;
|
||||
}
|
||||
19
sass/_plugin-dropdownjs.scss
Normal file
19
sass/_plugin-dropdownjs.scss
Normal 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;
|
||||
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
91
sass/_plugin-selectize.scss
Normal file
91
sass/_plugin-selectize.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
// Support for Selectize plugin
|
||||
// http://brianreavis.github.io/selectize.js/
|
||||
|
||||
.selectize-control.single, .selectize-control.multi {
|
||||
padding: 0;
|
||||
.selectize-input, .selectize-input.input-active {
|
||||
|
||||
cursor: text;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
.has-items {
|
||||
padding: 0;
|
||||
}
|
||||
&:after {
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
font-size: 7px;
|
||||
content: "\e894";
|
||||
font-family: "Material-Design-Icons";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
input {
|
||||
font-size: 14px;
|
||||
outline: 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
color: $darkbg-text;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
@extend .shadow-z-1;
|
||||
.shadow-z-1;
|
||||
|
||||
// Animation
|
||||
height: 0;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
.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 {
|
||||
|
|
@ -10,16 +12,7 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: $radio-default;
|
||||
transform: scale(0);
|
||||
transform: scale3d(0, 0, 0);
|
||||
}
|
||||
.check:after {
|
||||
display: block;
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale(1.5);
|
||||
transform: scale3d(1.5, 1.5, 1);
|
||||
}
|
||||
input[type=radio]:not(:checked) ~ .check:after {
|
||||
animation: rippleOff 500ms;
|
||||
|
|
@ -49,17 +49,22 @@
|
|||
}
|
||||
|
||||
}
|
||||
//.variations(#{" input[type=radio]:checked ~ .check"}, background-color, $radio-default);
|
||||
//.variations(#{" input[type=radio]:checked ~ .circle"}, border-color, $radio-default);
|
||||
@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] { display: none; }
|
||||
input[type=radio] {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
input[type=radio]:checked ~ .check {
|
||||
transform: scale(0.55);
|
||||
transform: scale3d(0.55, 0.55, 1);
|
||||
}
|
||||
input[type=radio][disabled] ~ .circle {
|
||||
border-color: $lightbg-text;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
67
sass/_togglebutton.scss
Normal 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));
|
||||
});
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,66 +1,22 @@
|
|||
// main: _material.scss
|
||||
body, .container, .container-fluid {
|
||||
|
||||
.well, .well:not([class^="well well-material-"]) {
|
||||
&, .form-control {
|
||||
color: $lightbg-text;
|
||||
.well.well-sm {
|
||||
padding: 10px;
|
||||
}
|
||||
.floating-label {
|
||||
color: #7e7e7e;
|
||||
.well.well-lg {
|
||||
padding: 26px;
|
||||
}
|
||||
.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;
|
||||
@include shadow-z-2();
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
// .variations(#{""}, background-color, #FFF);
|
||||
@include variations(unquote(""), background-color, #FFF);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
sass/material-fullpalette.scss
Normal file
2
sass/material-fullpalette.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import 'material';
|
||||
@import '_mixins-fullpalette';
|
||||
|
|
@ -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";
|
||||
|
|
@ -1,64 +1,69 @@
|
|||
// 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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
@import "_lists.scss";
|
||||
@import '_lists';
|
||||
|
||||
// Navbar
|
||||
@import "_navbar.scss";
|
||||
@import '_navbar';
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
|
|
@ -70,19 +75,18 @@ legend {
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
a:hover {
|
||||
background: rgba(0,0,0,0.08);
|
||||
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 {
|
||||
|
|
@ -101,13 +105,38 @@ legend {
|
|||
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';
|
||||
|
|
|
|||
|
|
@ -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
50
sass/roboto.scss
Normal 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');
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user