mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 08:29:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge 7440848d86 into bcf137386a

Browse Source
This commit is contained in:
Nelson Omuto 2014-11-12 18:36:46 +00:00
commit 0331e44237
31 changed files with 992 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -8,3 +8,5 @@ Thumbs.db
.DS_Store .DS_Store
/node_modules/ /node_modules/
.grunt/ .grunt/
.idea
bower_components

56
Gruntfile.js
View File

@ -6,13 +6,39 @@ module.exports = function(grunt) {
grunt.initConfig({ grunt.initConfig({
less: { less: {
compileless: { material: {
options: { options: {
paths: ["less"] paths: ["less"],
sourceMap: true,
sourceMapRootpath: "/",
sourceMapFilename: "dist/css/material.css.map",
sourceMapURL: "material.css.map"
},
files: {
"dist/css/material.css": "less/material.less"
}
},
materialwfont: {
options: {
paths: ["less"],
sourceMap: true,
sourceMapRootpath: "/",
sourceMapFilename: "dist/css/material-wfont.css.map",
sourceMapURL: "material-wfont.css.map"
},
files: {
"dist/css/material-wfont.css": "less/material-wfont.less"
}
},
ripples: {
options: {
paths: ["less"],
sourceMap: true,
sourceMapRootpath: "/",
sourceMapFilename: "dist/css/ripples.css.map",
sourceMapURL: "ripples.css.map"
}, },
files: { files: {
"dist/css/material.css": "less/material.less",
"dist/css/material-wfont.css": "less/material-wfont.less",
"dist/css/ripples.css": "less/ripples.less" "dist/css/ripples.css": "less/ripples.less"
} }
} }
@ -30,6 +56,7 @@ module.exports = function(grunt) {
autoprefixer: { autoprefixer: {
options: { options: {
map: true,
browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"] browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
}, },
prefix: { prefix: {
@ -51,14 +78,6 @@ module.exports = function(grunt) {
} }
}, },
clean: {
css: [
"dist/css/material.css",
"dist/css/material-wfont.css",
"dist/css/ripples.css"
]
},
uglify: { uglify: {
minifyjs: { minifyjs: {
files: { files: {
@ -69,10 +88,16 @@ module.exports = function(grunt) {
}, },
copy: { copy: {
tpl: {
expand: true,
cwd: "dist/",
src: "**",
dest: "template/material/"
},
distjs: { distjs: {
expand: true, expand: true,
cwd: "scripts/", cwd: "scripts/",
src: "**.min.js", src: "**",
dest: "dist/js/", dest: "dist/js/",
flatten: true, flatten: true,
filter: "isFile" filter: "isFile"
@ -172,9 +197,10 @@ module.exports = function(grunt) {
}); });
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "clean", "copy"]); grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "copy"]);
//grunt.registerTask("default", ["less", "cssmin", "uglify", "copy"]);
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "clean", "copy"]); grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "copy"]);
grunt.registerTask("build", function(target) { grunt.registerTask("build", function(target) {
var buildType = "default"; var buildType = "default";

2
README.md
View File

@ -93,6 +93,8 @@ Add `.btn-raised` to a button to add a permanent shadow to it.
Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label. Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label.
Add `data-hint="some hint"` to show an hint under the input when the user focus it.
Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*): Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*):
<div class="radio/checkbox radio-primary"> <div class="radio/checkbox radio-primary">

432
dist/css/material-wfont.css vendored
View File

@ -2249,22 +2249,22 @@
content: "\e8e4"; content: "\e8e4";
} }
.shadow-z-1 { .shadow-z-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
} }
.shadow-z-2 { .shadow-z-2 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
} }
.shadow-z-2-hover { .shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.shadow-z-3 { .shadow-z-3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.shadow-z-4 { .shadow-z-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
} }
.shadow-z-5 { .shadow-z-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
} }
body { body {
background-color: #EEEEEE; background-color: #EEEEEE;
@ -2413,7 +2413,7 @@ body .jumbotron,
background-color: #fff; background-color: #fff;
padding: 19px; padding: 19px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 2px; border-radius: 2px;
border: 0; border: 0;
} }
@ -2629,10 +2629,10 @@ body .jumbotron-material-lightgrey,
outline: none !important; outline: none !important;
} }
.btn:hover:not(.btn-link):not(.btn-flat) { .btn:hover:not(.btn-link):not(.btn-flat) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn:active:not(.btn-link):not(.btn-flat) { .btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn:not(.btn-link):not(.btn-flat), .btn:not(.btn-link):not(.btn-flat),
.btn-default:not(.btn-link):not(.btn-flat) { .btn-default:not(.btn-link):not(.btn-flat) {
@ -2783,11 +2783,11 @@ body .jumbotron-material-lightgrey,
color: #a8a8a8 !important; color: #a8a8a8 !important;
} }
.btn.btn-raised { .btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn.btn-raised:active:not(.btn-link) { .btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn.btn-fab { .btn.btn-fab {
margin: 0; margin: 0;
@ -2798,7 +2798,7 @@ body .jumbotron-material-lightgrey,
} }
.btn.btn-fab, .btn.btn-fab,
.btn.btn-fab:hover { .btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
} }
.btn.btn-fab, .btn.btn-fab,
.btn.btn-fab:hover, .btn.btn-fab:hover,
@ -3001,12 +3001,12 @@ body .jumbotron-material-lightgrey,
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group:active:not(.btn-link), .btn-group:active:not(.btn-link),
.btn-group-vertical:active:not(.btn-link) { .btn-group-vertical:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn-group.open .dropdown-toggle, .btn-group.open .dropdown-toggle,
.btn-group-vertical.open .dropdown-toggle { .btn-group-vertical.open .dropdown-toggle {
@ -3014,12 +3014,12 @@ body .jumbotron-material-lightgrey,
} }
.btn-group.btn-group-raised, .btn-group.btn-group-raised,
.btn-group-vertical.btn-group-raised { .btn-group-vertical.btn-group-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group.btn-group-raised:active:not(.btn-link), .btn-group.btn-group-raised:active:not(.btn-link),
.btn-group-vertical.btn-group-raised:active:not(.btn-link) { .btn-group-vertical.btn-group-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn-group .btn, .btn-group .btn,
.btn-group-vertical .btn, .btn-group-vertical .btn,
@ -3066,10 +3066,12 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple { .checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
animation: rippleOff 500ms; -webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms;
} }
.checkbox label input[type=checkbox]:checked ~ .ripple { .checkbox label input[type=checkbox]:checked ~ .ripple {
animation: rippleOn 500ms; -webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms;
} }
.checkbox label .check { .checkbox label .check {
display: inline-block; display: inline-block;
@ -3100,7 +3102,9 @@ body .jumbotron-material-lightgrey,
.checkbox label .check:before { .checkbox label .check:before {
position: absolute; position: absolute;
content: ""; content: "";
transform: rotate(45deg); -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block; display: block;
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
@ -3113,7 +3117,8 @@ body .jumbotron-material-lightgrey,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
animation: checkbox-off 0.3s linear forwards; -webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
@ -3123,17 +3128,21 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .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; 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 0.3s linear forwards; -webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
animation: rippleOff 500ms linear forwards; -webkit-animation: rippleOff 500ms linear forwards;
animation: rippleOff 500ms linear forwards;
} }
.checkbox input[type=checkbox]:checked ~ .check:after { .checkbox input[type=checkbox]:checked ~ .check:after {
animation: rippleOn 500ms linear forwards; -webkit-animation: rippleOn 500ms linear forwards;
animation: rippleOn 500ms linear forwards;
} }
.checkbox:not(:hover) input[type=checkbox] ~ .check:before, .checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after { .checkbox:not(:hover) input[type=checkbox] ~ .check:after {
animation-duration: 1ms; -webkit-animation-duration: 1ms;
animation-duration: 1ms;
} }
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before, .checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
.checkbox input[type=checkbox][disabled] ~ .circle { .checkbox input[type=checkbox][disabled] ~ .circle {
@ -3141,7 +3150,9 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox][disabled] ~ .check:after { .checkbox input[type=checkbox][disabled] ~ .check:after {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
} }
.checkbox input[type=checkbox]:checked ~ .check:after, .checkbox input[type=checkbox]:checked ~ .check:after,
.checkbox-default input[type=checkbox]:checked ~ .check:after { .checkbox-default input[type=checkbox]:checked ~ .check:after {
@ -3353,6 +3364,17 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec; color: #ececec;
} }
@-webkit-keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; 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;
@ -3364,7 +3386,7 @@ body .jumbotron-material-lightgrey,
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; 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 { @-webkit-keyframes checkbox-off {
0% { 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; 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;
} }
@ -3372,7 +3394,8 @@ body .jumbotron-material-lightgrey,
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; 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% { 50% {
transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
width: 0px; width: 0px;
@ -3380,7 +3403,8 @@ body .jumbotron-material-lightgrey,
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; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
} }
51% { 51% {
transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
@ -3394,7 +3418,8 @@ body .jumbotron-material-lightgrey,
0px 0px 0 10px inset; 0px 0px 0 10px inset;
} }
100% { 100% {
transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
@ -3408,6 +3433,64 @@ body .jumbotron-material-lightgrey,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
} }
} }
@keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
50% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
51% {
-webkit-transform: rotate(0deg);
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 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
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;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -3419,6 +3502,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;
@ -3456,7 +3550,9 @@ body .jumbotron-material-lightgrey,
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
transform: scale(0); -webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
} }
.radio label .check:after { .radio label .check:after {
display: block; display: block;
@ -3471,13 +3567,17 @@ body .jumbotron-material-lightgrey,
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
margin: 0; margin: 0;
transform: scale(1.5); -webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
} }
.radio label input[type=radio]:not(:checked) ~ .check:after { .radio label input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms; -webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms;
} }
.radio label input[type=radio]:checked ~ .check:after { .radio label input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; -webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms;
} }
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .check,
.radio-default input[type=radio]:checked ~ .check { .radio-default input[type=radio]:checked ~ .check {
@ -3627,7 +3727,9 @@ body .jumbotron-material-lightgrey,
display: none; display: none;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check {
transform: scale(0.55); -webkit-transform: scale(0.55);
-ms-transform: scale(0.55);
transform: scale(0.55);
} }
.radio input[type=radio][disabled] ~ .circle { .radio input[type=radio][disabled] ~ .circle {
border-color: rgba(0, 0, 0, 0.84); border-color: rgba(0, 0, 0, 0.84);
@ -3706,7 +3808,6 @@ select[multiple].form-control.focus {
} }
.form-control-wrapper { .form-control-wrapper {
position: relative; position: relative;
/* active state */
} }
.form-control-wrapper .form-control:focus, .form-control-wrapper .form-control:focus,
.form-control-wrapper .form-control.focus { .form-control-wrapper .form-control.focus {
@ -3752,12 +3853,18 @@ select[multiple].form-control.focus {
height: 2px; height: 2px;
background-color: #4285f4; background-color: #4285f4;
bottom: -1px; bottom: -1px;
transform: scaleX(0); -webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: -webkit-transform 0s;
transition: transform 0s; transition: transform 0s;
} }
.form-control-wrapper .form-control:focus ~ .material-input:before, .form-control-wrapper .form-control:focus ~ .material-input:before,
.form-control-wrapper .form-control.focus ~ .material-input:before { .form-control-wrapper .form-control.focus ~ .material-input:before {
transform: scaleX(1); -webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
} }
.form-control-wrapper .material-input:after { .form-control-wrapper .material-input:after {
@ -3770,7 +3877,9 @@ select[multiple].form-control.focus {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.9; opacity: 0.9;
transform-origin: left; -webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
} }
.form-control-wrapper .input-lg ~ .material-input:after { .form-control-wrapper .input-lg ~ .material-input:after {
height: 26px; height: 26px;
@ -3783,10 +3892,21 @@ select[multiple].form-control.focus {
} }
.form-control-wrapper .form-control:focus ~ .material-input:after, .form-control-wrapper .form-control:focus ~ .material-input:after,
.form-control-wrapper .form-control.focus ~ .material-input:after { .form-control-wrapper .form-control.focus ~ .material-input:after {
animation: input-highlight 0.3s ease; -webkit-animation: input-highlight 0.3s ease;
animation-fill-mode: forwards; animation: input-highlight 0.3s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0; opacity: 0;
} }
.form-control-wrapper .hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-control-wrapper .form-control:focus ~ .hint,
.form-control-wrapper .form-control.focus ~ .hint {
display: block;
}
.form-control-wrapper select ~ .material-input:after { .form-control-wrapper select ~ .material-input:after {
display: none; display: none;
} }
@ -4202,13 +4322,31 @@ select.form-control.focus {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: #757575;
} }
@-webkit-keyframes input-highlight {
0% {
left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%);
}
99% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight { @keyframes input-highlight {
0% { 0% {
left: 20%; left: 20%;
transform: scaleX(20%); -webkit-transform: scaleX(20%);
transform: scaleX(20%);
} }
99% { 99% {
transform: scaleX(0); -webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0; left: 0;
opacity: 1; opacity: 1;
} }
@ -4542,7 +4680,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ececec; background-color: #ececec;
} }
.navbar-inverse { .navbar-inverse {
background-color: #3f51b5; background-color: #5264ae;
} }
.navbar-material-white { .navbar-material-white {
background-color: #FFF; background-color: #FFF;
@ -5024,7 +5162,7 @@ icon-material-lightgrey {
border-radius: 2px; border-radius: 2px;
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
background: #ffffff; background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
} }
.card .card-height-indicator { .card .card-height-indicator {
margin-top: 100%; margin-top: 100%;
@ -5073,7 +5211,7 @@ icon-material-lightgrey {
left: -15px; left: -15px;
} }
.modal-content { .modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
border-radius: 2px; border-radius: 2px;
border: none; border: none;
} }
@ -5110,22 +5248,186 @@ icon-material-lightgrey {
.modal-backdrop { .modal-backdrop {
display: none; display: none;
} }
.label {
border-radius: 1px;
}
.label,
.label-default {
background-color: #9e9e9e;
}
.label-primary {
background-color: #4285f4;
}
.label-success {
background-color: #0f9d58;
}
.label-info {
background-color: #03a9f4;
}
.label-warning {
background-color: #ff5722;
}
.label-danger {
background-color: #f44336;
}
.label-material-red {
background-color: #f44336;
}
.label-material-pink {
background-color: #e91e63;
}
.label-material-purple {
background-color: #9c27b0;
}
.label-material-deeppurple {
background-color: #673ab7;
}
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-lightblue {
background-color: #03a9f4;
}
.label-material-cyan {
background-color: #00bcd4;
}
.label-material-teal {
background-color: #009688;
}
.label-material-lightgreen {
background-color: #8bc34a;
}
.label-material-lime {
background-color: #cddc39;
}
.label-material-lightyellow {
background-color: #ffeb3b;
}
.label-material-orange {
background-color: #ff9800;
}
.label-material-deeporange {
background-color: #ff5722;
}
.label-material-grey {
background-color: #9e9e9e;
}
.label-material-bluegrey {
background-color: #607d8b;
}
.label-material-brown {
background-color: #795548;
}
.label-material-lightgrey {
background-color: #ececec;
}
.panel {
border-radius: 2px;
border: 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.panel > .panel-heading,
.panel-default > .panel-heading {
background-color: #ececec;
}
.panel-primary > .panel-heading {
background-color: #4285f4;
}
.panel-success > .panel-heading {
background-color: #0f9d58;
}
.panel-info > .panel-heading {
background-color: #03a9f4;
}
.panel-warning > .panel-heading {
background-color: #ff5722;
}
.panel-danger > .panel-heading {
background-color: #f44336;
}
.panel-material-red > .panel-heading {
background-color: #f44336;
}
.panel-material-pink > .panel-heading {
background-color: #e91e63;
}
.panel-material-purple > .panel-heading {
background-color: #9c27b0;
}
.panel-material-deeppurple > .panel-heading {
background-color: #673ab7;
}
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
.panel-material-cyan > .panel-heading {
background-color: #00bcd4;
}
.panel-material-teal > .panel-heading {
background-color: #009688;
}
.panel-material-lightgreen > .panel-heading {
background-color: #8bc34a;
}
.panel-material-lime > .panel-heading {
background-color: #cddc39;
}
.panel-material-lightyellow > .panel-heading {
background-color: #ffeb3b;
}
.panel-material-orange > .panel-heading {
background-color: #ff9800;
}
.panel-material-deeporange > .panel-heading {
background-color: #ff5722;
}
.panel-material-grey > .panel-heading {
background-color: #9e9e9e;
}
.panel-material-bluegrey > .panel-heading {
background-color: #607d8b;
}
.panel-material-brown > .panel-heading {
background-color: #795548;
}
.panel-material-lightgrey > .panel-heading {
background-color: #ececec;
}
[class*="panel-"] > .panel-heading {
color: rgba(255, 255, 255, 0.84);
}
.panel-default > .panel-heading,
.panel:not([class*="panel-"]) > .panel-heading {
color: rgba(0, 0, 0, 0.84);
}
.panel-footer {
background-color: #ececec;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
height: 0; height: 0;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
transform: translateY(200%); -webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%);
} }
.snackbar.snackbar-opened { .snackbar.snackbar-opened {
padding: 14px 15px; padding: 14px 15px;
margin-bottom: 20px; margin-bottom: 20px;
height: auto; height: auto;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
transform: none; -webkit-transform: none;
-ms-transform: none;
transform: none;
} }
.snackbar.toast { .snackbar.toast {
border-radius: 200px; border-radius: 200px;
@ -5134,7 +5436,10 @@ icon-material-lightgrey {
.noUi-target * { .noUi-target * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-ms-touch-action: none; -ms-touch-action: none;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box; box-sizing: border-box;
} }
.noUi-base { .noUi-base {
@ -5169,12 +5474,20 @@ icon-material-lightgrey {
.noUi-horizontal { .noUi-horizontal {
height: 10px; height: 10px;
} }
.noUi-horizontal .noUi-handle { .noUi-handle {
box-sizing: border-box; box-sizing: border-box;
width: 12px; width: 12px;
height: 12px; height: 12px;
left: -10px; left: -10px;
top: -5px; 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 { .noUi-horizontal.noUi-extended {
padding: 0 15px; padding: 0 15px;
@ -5202,18 +5515,20 @@ icon-material-lightgrey {
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: 2px;
} }
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
margin: 15px 0; margin: 15px 0;
} }
.noUi-horizontal .noUi-handle.noUi-active { .noUi-vertical {
transform: scale(2.5); height: 100%;
width: 2px;
margin: 0 15px;
display: inline-block;
}
.noUi-handle.noUi-active {
-webkit-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
} }
[disabled].noUi-slider { [disabled].noUi-slider {
opacity: 0.5; opacity: 0.5;
@ -5645,3 +5960,4 @@ icon-material-lightgrey {
.selectize-control.multi .dropdown-active ~ .selectize-dropdown { .selectize-control.multi .dropdown-active ~ .selectize-dropdown {
display: block; display: block;
} }
/*# sourceMappingURL=material-wfont.css.map */

1
dist/css/material-wfont.css.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/material-wfont.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-wfont.min.css vendored
View File

File diff suppressed because one or more lines are too long

432
dist/css/material.css vendored
View File

@ -2242,22 +2242,22 @@
content: "\e8e4"; content: "\e8e4";
} }
.shadow-z-1 { .shadow-z-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
} }
.shadow-z-2 { .shadow-z-2 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
} }
.shadow-z-2-hover { .shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.shadow-z-3 { .shadow-z-3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.shadow-z-4 { .shadow-z-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
} }
.shadow-z-5 { .shadow-z-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
} }
body { body {
background-color: #EEEEEE; background-color: #EEEEEE;
@ -2406,7 +2406,7 @@ body .jumbotron,
background-color: #fff; background-color: #fff;
padding: 19px; padding: 19px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 2px; border-radius: 2px;
border: 0; border: 0;
} }
@ -2622,10 +2622,10 @@ body .jumbotron-material-lightgrey,
outline: none !important; outline: none !important;
} }
.btn:hover:not(.btn-link):not(.btn-flat) { .btn:hover:not(.btn-link):not(.btn-flat) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn:active:not(.btn-link):not(.btn-flat) { .btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn:not(.btn-link):not(.btn-flat), .btn:not(.btn-link):not(.btn-flat),
.btn-default:not(.btn-link):not(.btn-flat) { .btn-default:not(.btn-link):not(.btn-flat) {
@ -2776,11 +2776,11 @@ body .jumbotron-material-lightgrey,
color: #a8a8a8 !important; color: #a8a8a8 !important;
} }
.btn.btn-raised { .btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn.btn-raised:active:not(.btn-link) { .btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn.btn-fab { .btn.btn-fab {
margin: 0; margin: 0;
@ -2791,7 +2791,7 @@ body .jumbotron-material-lightgrey,
} }
.btn.btn-fab, .btn.btn-fab,
.btn.btn-fab:hover { .btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
} }
.btn.btn-fab, .btn.btn-fab,
.btn.btn-fab:hover, .btn.btn-fab:hover,
@ -2994,12 +2994,12 @@ body .jumbotron-material-lightgrey,
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group:active:not(.btn-link), .btn-group:active:not(.btn-link),
.btn-group-vertical:active:not(.btn-link) { .btn-group-vertical:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn-group.open .dropdown-toggle, .btn-group.open .dropdown-toggle,
.btn-group-vertical.open .dropdown-toggle { .btn-group-vertical.open .dropdown-toggle {
@ -3007,12 +3007,12 @@ body .jumbotron-material-lightgrey,
} }
.btn-group.btn-group-raised, .btn-group.btn-group-raised,
.btn-group-vertical.btn-group-raised { .btn-group-vertical.btn-group-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group.btn-group-raised:active:not(.btn-link), .btn-group.btn-group-raised:active:not(.btn-link),
.btn-group-vertical.btn-group-raised:active:not(.btn-link) { .btn-group-vertical.btn-group-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
} }
.btn-group .btn, .btn-group .btn,
.btn-group-vertical .btn, .btn-group-vertical .btn,
@ -3059,10 +3059,12 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple { .checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
animation: rippleOff 500ms; -webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms;
} }
.checkbox label input[type=checkbox]:checked ~ .ripple { .checkbox label input[type=checkbox]:checked ~ .ripple {
animation: rippleOn 500ms; -webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms;
} }
.checkbox label .check { .checkbox label .check {
display: inline-block; display: inline-block;
@ -3093,7 +3095,9 @@ body .jumbotron-material-lightgrey,
.checkbox label .check:before { .checkbox label .check:before {
position: absolute; position: absolute;
content: ""; content: "";
transform: rotate(45deg); -webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block; display: block;
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
@ -3106,7 +3110,8 @@ body .jumbotron-material-lightgrey,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
animation: checkbox-off 0.3s linear forwards; -webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
@ -3116,17 +3121,21 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .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; 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 0.3s linear forwards; -webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
animation: rippleOff 500ms linear forwards; -webkit-animation: rippleOff 500ms linear forwards;
animation: rippleOff 500ms linear forwards;
} }
.checkbox input[type=checkbox]:checked ~ .check:after { .checkbox input[type=checkbox]:checked ~ .check:after {
animation: rippleOn 500ms linear forwards; -webkit-animation: rippleOn 500ms linear forwards;
animation: rippleOn 500ms linear forwards;
} }
.checkbox:not(:hover) input[type=checkbox] ~ .check:before, .checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after { .checkbox:not(:hover) input[type=checkbox] ~ .check:after {
animation-duration: 1ms; -webkit-animation-duration: 1ms;
animation-duration: 1ms;
} }
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before, .checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
.checkbox input[type=checkbox][disabled] ~ .circle { .checkbox input[type=checkbox][disabled] ~ .circle {
@ -3134,7 +3143,9 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox][disabled] ~ .check:after { .checkbox input[type=checkbox][disabled] ~ .check:after {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
} }
.checkbox input[type=checkbox]:checked ~ .check:after, .checkbox input[type=checkbox]:checked ~ .check:after,
.checkbox-default input[type=checkbox]:checked ~ .check:after { .checkbox-default input[type=checkbox]:checked ~ .check:after {
@ -3346,6 +3357,17 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec; color: #ececec;
} }
@-webkit-keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; 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;
@ -3357,7 +3379,7 @@ body .jumbotron-material-lightgrey,
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; 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 { @-webkit-keyframes checkbox-off {
0% { 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; 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;
} }
@ -3365,7 +3387,8 @@ body .jumbotron-material-lightgrey,
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; 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% { 50% {
transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
width: 0px; width: 0px;
@ -3373,7 +3396,8 @@ body .jumbotron-material-lightgrey,
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; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
} }
51% { 51% {
transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
@ -3387,7 +3411,8 @@ body .jumbotron-material-lightgrey,
0px 0px 0 10px inset; 0px 0px 0 10px inset;
} }
100% { 100% {
transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
@ -3401,6 +3426,64 @@ body .jumbotron-material-lightgrey,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
} }
} }
@keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
50% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
51% {
-webkit-transform: rotate(0deg);
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 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
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;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -3412,6 +3495,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;
@ -3449,7 +3543,9 @@ body .jumbotron-material-lightgrey,
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
transform: scale(0); -webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
} }
.radio label .check:after { .radio label .check:after {
display: block; display: block;
@ -3464,13 +3560,17 @@ body .jumbotron-material-lightgrey,
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
margin: 0; margin: 0;
transform: scale(1.5); -webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
} }
.radio label input[type=radio]:not(:checked) ~ .check:after { .radio label input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms; -webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms;
} }
.radio label input[type=radio]:checked ~ .check:after { .radio label input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; -webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms;
} }
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .check,
.radio-default input[type=radio]:checked ~ .check { .radio-default input[type=radio]:checked ~ .check {
@ -3620,7 +3720,9 @@ body .jumbotron-material-lightgrey,
display: none; display: none;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check {
transform: scale(0.55); -webkit-transform: scale(0.55);
-ms-transform: scale(0.55);
transform: scale(0.55);
} }
.radio input[type=radio][disabled] ~ .circle { .radio input[type=radio][disabled] ~ .circle {
border-color: rgba(0, 0, 0, 0.84); border-color: rgba(0, 0, 0, 0.84);
@ -3699,7 +3801,6 @@ select[multiple].form-control.focus {
} }
.form-control-wrapper { .form-control-wrapper {
position: relative; position: relative;
/* active state */
} }
.form-control-wrapper .form-control:focus, .form-control-wrapper .form-control:focus,
.form-control-wrapper .form-control.focus { .form-control-wrapper .form-control.focus {
@ -3745,12 +3846,18 @@ select[multiple].form-control.focus {
height: 2px; height: 2px;
background-color: #4285f4; background-color: #4285f4;
bottom: -1px; bottom: -1px;
transform: scaleX(0); -webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: -webkit-transform 0s;
transition: transform 0s; transition: transform 0s;
} }
.form-control-wrapper .form-control:focus ~ .material-input:before, .form-control-wrapper .form-control:focus ~ .material-input:before,
.form-control-wrapper .form-control.focus ~ .material-input:before { .form-control-wrapper .form-control.focus ~ .material-input:before {
transform: scaleX(1); -webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
} }
.form-control-wrapper .material-input:after { .form-control-wrapper .material-input:after {
@ -3763,7 +3870,9 @@ select[multiple].form-control.focus {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.9; opacity: 0.9;
transform-origin: left; -webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
} }
.form-control-wrapper .input-lg ~ .material-input:after { .form-control-wrapper .input-lg ~ .material-input:after {
height: 26px; height: 26px;
@ -3776,10 +3885,21 @@ select[multiple].form-control.focus {
} }
.form-control-wrapper .form-control:focus ~ .material-input:after, .form-control-wrapper .form-control:focus ~ .material-input:after,
.form-control-wrapper .form-control.focus ~ .material-input:after { .form-control-wrapper .form-control.focus ~ .material-input:after {
animation: input-highlight 0.3s ease; -webkit-animation: input-highlight 0.3s ease;
animation-fill-mode: forwards; animation: input-highlight 0.3s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0; opacity: 0;
} }
.form-control-wrapper .hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-control-wrapper .form-control:focus ~ .hint,
.form-control-wrapper .form-control.focus ~ .hint {
display: block;
}
.form-control-wrapper select ~ .material-input:after { .form-control-wrapper select ~ .material-input:after {
display: none; display: none;
} }
@ -4195,13 +4315,31 @@ select.form-control.focus {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: #757575;
} }
@-webkit-keyframes input-highlight {
0% {
left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%);
}
99% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight { @keyframes input-highlight {
0% { 0% {
left: 20%; left: 20%;
transform: scaleX(20%); -webkit-transform: scaleX(20%);
transform: scaleX(20%);
} }
99% { 99% {
transform: scaleX(0); -webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0; left: 0;
opacity: 1; opacity: 1;
} }
@ -4535,7 +4673,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ececec; background-color: #ececec;
} }
.navbar-inverse { .navbar-inverse {
background-color: #3f51b5; background-color: #5264ae;
} }
.navbar-material-white { .navbar-material-white {
background-color: #FFF; background-color: #FFF;
@ -5017,7 +5155,7 @@ icon-material-lightgrey {
border-radius: 2px; border-radius: 2px;
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
background: #ffffff; background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
} }
.card .card-height-indicator { .card .card-height-indicator {
margin-top: 100%; margin-top: 100%;
@ -5066,7 +5204,7 @@ icon-material-lightgrey {
left: -15px; left: -15px;
} }
.modal-content { .modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
border-radius: 2px; border-radius: 2px;
border: none; border: none;
} }
@ -5103,22 +5241,186 @@ icon-material-lightgrey {
.modal-backdrop { .modal-backdrop {
display: none; display: none;
} }
.label {
border-radius: 1px;
}
.label,
.label-default {
background-color: #9e9e9e;
}
.label-primary {
background-color: #4285f4;
}
.label-success {
background-color: #0f9d58;
}
.label-info {
background-color: #03a9f4;
}
.label-warning {
background-color: #ff5722;
}
.label-danger {
background-color: #f44336;
}
.label-material-red {
background-color: #f44336;
}
.label-material-pink {
background-color: #e91e63;
}
.label-material-purple {
background-color: #9c27b0;
}
.label-material-deeppurple {
background-color: #673ab7;
}
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-lightblue {
background-color: #03a9f4;
}
.label-material-cyan {
background-color: #00bcd4;
}
.label-material-teal {
background-color: #009688;
}
.label-material-lightgreen {
background-color: #8bc34a;
}
.label-material-lime {
background-color: #cddc39;
}
.label-material-lightyellow {
background-color: #ffeb3b;
}
.label-material-orange {
background-color: #ff9800;
}
.label-material-deeporange {
background-color: #ff5722;
}
.label-material-grey {
background-color: #9e9e9e;
}
.label-material-bluegrey {
background-color: #607d8b;
}
.label-material-brown {
background-color: #795548;
}
.label-material-lightgrey {
background-color: #ececec;
}
.panel {
border-radius: 2px;
border: 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.panel > .panel-heading,
.panel-default > .panel-heading {
background-color: #ececec;
}
.panel-primary > .panel-heading {
background-color: #4285f4;
}
.panel-success > .panel-heading {
background-color: #0f9d58;
}
.panel-info > .panel-heading {
background-color: #03a9f4;
}
.panel-warning > .panel-heading {
background-color: #ff5722;
}
.panel-danger > .panel-heading {
background-color: #f44336;
}
.panel-material-red > .panel-heading {
background-color: #f44336;
}
.panel-material-pink > .panel-heading {
background-color: #e91e63;
}
.panel-material-purple > .panel-heading {
background-color: #9c27b0;
}
.panel-material-deeppurple > .panel-heading {
background-color: #673ab7;
}
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
.panel-material-cyan > .panel-heading {
background-color: #00bcd4;
}
.panel-material-teal > .panel-heading {
background-color: #009688;
}
.panel-material-lightgreen > .panel-heading {
background-color: #8bc34a;
}
.panel-material-lime > .panel-heading {
background-color: #cddc39;
}
.panel-material-lightyellow > .panel-heading {
background-color: #ffeb3b;
}
.panel-material-orange > .panel-heading {
background-color: #ff9800;
}
.panel-material-deeporange > .panel-heading {
background-color: #ff5722;
}
.panel-material-grey > .panel-heading {
background-color: #9e9e9e;
}
.panel-material-bluegrey > .panel-heading {
background-color: #607d8b;
}
.panel-material-brown > .panel-heading {
background-color: #795548;
}
.panel-material-lightgrey > .panel-heading {
background-color: #ececec;
}
[class*="panel-"] > .panel-heading {
color: rgba(255, 255, 255, 0.84);
}
.panel-default > .panel-heading,
.panel:not([class*="panel-"]) > .panel-heading {
color: rgba(0, 0, 0, 0.84);
}
.panel-footer {
background-color: #ececec;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
height: 0; height: 0;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
transform: translateY(200%); -webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%);
} }
.snackbar.snackbar-opened { .snackbar.snackbar-opened {
padding: 14px 15px; padding: 14px 15px;
margin-bottom: 20px; margin-bottom: 20px;
height: auto; height: auto;
transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
transform: none; -webkit-transform: none;
-ms-transform: none;
transform: none;
} }
.snackbar.toast { .snackbar.toast {
border-radius: 200px; border-radius: 200px;
@ -5127,7 +5429,10 @@ icon-material-lightgrey {
.noUi-target * { .noUi-target * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-ms-touch-action: none; -ms-touch-action: none;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box; box-sizing: border-box;
} }
.noUi-base { .noUi-base {
@ -5162,12 +5467,20 @@ icon-material-lightgrey {
.noUi-horizontal { .noUi-horizontal {
height: 10px; height: 10px;
} }
.noUi-horizontal .noUi-handle { .noUi-handle {
box-sizing: border-box; box-sizing: border-box;
width: 12px; width: 12px;
height: 12px; height: 12px;
left: -10px; left: -10px;
top: -5px; 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 { .noUi-horizontal.noUi-extended {
padding: 0 15px; padding: 0 15px;
@ -5195,18 +5508,20 @@ icon-material-lightgrey {
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: 2px;
} }
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
margin: 15px 0; margin: 15px 0;
} }
.noUi-horizontal .noUi-handle.noUi-active { .noUi-vertical {
transform: scale(2.5); height: 100%;
width: 2px;
margin: 0 15px;
display: inline-block;
}
.noUi-handle.noUi-active {
-webkit-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
} }
[disabled].noUi-slider { [disabled].noUi-slider {
opacity: 0.5; opacity: 0.5;
@ -5638,3 +5953,4 @@ icon-material-lightgrey {
.selectize-control.multi .dropdown-active ~ .selectize-dropdown { .selectize-control.multi .dropdown-active ~ .selectize-dropdown {
display: block; display: block;
} }
/*# sourceMappingURL=material.css.map */

1
dist/css/material.css.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/material.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

40
dist/css/ripples.css vendored Normal file
View File

@ -0,0 +1,40 @@
.withripple {
position: relative;
}
.ripple-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 2px;
}
.ripple {
position: absolute;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.05);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
opacity: 0;
pointer-events: none;
}
.ripple.ripple-on {
transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1;
}
.ripple.ripple-out {
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}
/*# sourceMappingURL=ripples.css.map */

1
dist/css/ripples.css.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uCAAA;EACA,6BAAA;MAAA,yBAAA;UAAA,qBAAA;EACA,+BAAA;MAAA,2BAAA;UAAA,uBAAA;EACA,YAAA;EACA,sBAAA;ECCH;ADCD;EACI,gGAAA;EAAA,wFAAA;EACA,YAAA;ECCH;ADCD;EACI,+CAAA;EACA,YAAA;ECCH","file":"ripples.css"}

1
dist/css/ripples.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,UAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA"}

2
dist/css/ripples.min.css vendored
View File

@ -1 +1 @@
.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:2px}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0} .withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:2px}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:1}.ripple.ripple-out{transition:opacity .1s linear 0s!important;opacity:0}

13
dist/js/material.js vendored
View File

@ -55,14 +55,25 @@
var $this = $(this); var $this = $(this);
$this.wrap("<div class=form-control-wrapper></div>"); $this.wrap("<div class=form-control-wrapper></div>");
$this.after("<span class=material-input></span>"); $this.after("<span class=material-input></span>");
// Add floating label if required
if ($this.hasClass("floating-label")) { if ($this.hasClass("floating-label")) {
var placeholder = $this.attr("placeholder"); var placeholder = $this.attr("placeholder");
$this.attr("placeholder", null).removeClass("floating-label"); $this.attr("placeholder", null).removeClass("floating-label");
$this.after("<div class=floating-label>" + placeholder + "</div>"); $this.after("<div class=floating-label>" + placeholder + "</div>");
} }
// Add hint label if required
if ($this.attr("data-hint")) {
$this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
}
// Set as empty if is empty (damn I must improve this...)
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") { if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
$this.addClass("empty"); $this.addClass("empty");
} }
// Support for file input
if ($this.parent().next().is("[type=file]")) { if ($this.parent().next().is("[type=file]")) {
$this.parent().addClass("fileinput"); $this.parent().addClass("fileinput");
var $input = $this.parent().next().detach(); var $input = $this.parent().next().detach();
@ -71,7 +82,7 @@
}); });
$(document) $(document)
.on("change", ".checkbox input", function() { $(this).blur(); }) .on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
.on("keydown paste", ".form-control", function(e) { .on("keydown paste", ".form-control", function(e) {
if(_isChar(e)) { if(_isChar(e)) {
$(this).removeClass("empty"); $(this).removeClass("empty");

2
dist/js/material.min.js vendored
View File

@ -1 +1 @@
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if((null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input").each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery); !function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input").each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);

15
dist/js/ripples.js vendored
View File

@ -1,9 +1,17 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */ /* globals CustomEvent */
window.ripples = { window.ripples = {
done: false,
init : function(withRipple) { init : function(withRipple) {
"use strict"; "use strict";
if (this.done) {
return console.log("Ripples.js was already initialzied.");
}
this.done = true;
// Cross browser matches function // Cross browser matches function
function matchesSelector(domElement, selector) { function matchesSelector(domElement, selector) {
var matches = domElement.matches || var matches = domElement.matches ||
@ -67,7 +75,12 @@ window.ripples = {
var targetColor = window.getComputedStyle($el).color; var targetColor = window.getComputedStyle($el).color;
// Convert the rgb color to an rgba color with opacity set to __rippleOpacity__ // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")"); if ( targetColor.indexOf("rgba") >= 0 ) {
var alphaPosition = targetColor.lastIndexOf(",") + 1;
targetColor = targetColor.substring(0, alphaPosition) + _rippleOpacity + ")";
} else {
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
}
// Insert new ripple into ripple wrapper // Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple); $rippleWrapper.appendChild($ripple);

2
dist/js/ripples.min.js vendored
View File

@ -1 +1 @@
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.3;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend","mouseout"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend","mouseout"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}}; window.ripples={done:!1,init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}if(this.done)return console.log("Ripples.js was already initialzied.");this.done=!0;var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.3;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;if(o.indexOf("rgba")>=0){var p=o.lastIndexOf(",")+1;o=o.substring(0,p)+n+")"}else o=o.replace("rgb","rgba").replace(")",", "+n+")");f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var q=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",q.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend","mouseout"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend","mouseout"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};

33
index.html
View File

@ -5,8 +5,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap Material</title> <title>Bootstrap Material</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet"> <link href="dist/css/ripples.css" rel="stylesheet">
<link href="dist/css/material-wfont.min.css" rel="stylesheet"> <link href="dist/css/material-wfont.css" rel="stylesheet">
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet"> <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <style>
@ -1520,6 +1520,10 @@
<input class="form-control floating-label" id="focusedInput" type="text" placeholder="Write something to make the label float"> <input class="form-control floating-label" id="focusedInput" type="text" placeholder="Write something to make the label float">
</div> </div>
<div class="form-group">
<input class="form-control floating-label" id="focusedInput" type="text" placeholder="Focus to show the hint" data-hint="You should really write something here">
</div>
<div class="form-group"> <div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label> <label class="control-label" for="disabledInput">Disabled input</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled=""> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
@ -1895,9 +1899,16 @@
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1> <h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
</div> </div>
<div class="bs-component"> <div class="bs-component">
<div class="slider"></div> <div class="col-sm-6">
<div class="slider slider-success"></div> <div class="slider shor"></div>
<div class="slider slider-material-pink"></div> <div class="slider shor slider-success"></div>
<div class="slider shor slider-material-pink"></div>
</div>
<div class="col-sm-6" style="height: 150px">
<div class="slider svert"></div>
<div class="slider svert slider-success"></div>
<div class="slider svert slider-material-pink"></div>
</div>
</div> </div>
<p>Read more about <a href="http://refreshless.com/nouislider/">noUiSlider here</a>.</p> <p>Read more about <a href="http://refreshless.com/nouislider/">noUiSlider here</a>.</p>
</div> </div>
@ -2310,7 +2321,17 @@
<script> <script>
$(function() { $(function() {
$.material.init(); $.material.init();
$(".slider").noUiSlider({ $(".shor").noUiSlider({
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
$(".svert").noUiSlider({
orientation: "vertical",
start: 40, start: 40,
connect: "lower", connect: "lower",
range: { range: {

12
less/_inputs.less
View File

@ -95,13 +95,23 @@ select[multiple].form-control {
margin-top: -11px; margin-top: -11px;
} }
/* active state */ // active state
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after { .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
animation: input-highlight 0.3s ease; animation: input-highlight 0.3s ease;
animation-fill-mode: forwards; animation-fill-mode: forwards;
opacity: 0; 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 { select ~ .material-input:after {
display: none; display: none;
} }

4
less/_labels.less Normal file
View File

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

2
less/_navbar.less
View File

@ -163,7 +163,7 @@
.variations(~"", background-color, @primary); .variations(~"", background-color, @primary);
&-inverse { &-inverse {
background-color: @indigo; background-color: @navbar-inverse-bg;
} }
&-material-white { &-material-white {
background-color: #FFF; background-color: #FFF;

20
less/_panels.less Normal file
View File

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

24
less/_plugin-nouislider.less
View File

@ -37,12 +37,20 @@
.noUi-horizontal { .noUi-horizontal {
height: 10px; height: 10px;
} }
.noUi-horizontal .noUi-handle { .noUi-handle {
box-sizing: border-box; box-sizing: border-box;
width: 12px; width: 12px;
height: 12px; height: 12px;
left: -10px; left: -10px;
top: -5px; 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 { .noUi-horizontal.noUi-extended {
padding: 0 15px; padding: 0 15px;
@ -70,17 +78,17 @@
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: 2px;
} }
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
margin: 15px 0; margin: 15px 0;
} }
.noUi-horizontal .noUi-handle.noUi-active { .noUi-vertical {
height: 100%;
width: 2px;
margin: 0 15px;
display: inline-block;
}
.noUi-handle.noUi-active {
transform: scale(2.5); transform: scale(2.5);
} }
[disabled].noUi-slider{ [disabled].noUi-slider{

18
less/_shadows.less
View File

@ -1,28 +1,22 @@
.shadow-z-1 { .shadow-z-1 {
box-shadow: 0 1px 3px rgba(0,0,0, .12), box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
0 1px 2px rgba(0,0,0, .24) ;
} }
.shadow-z-2 { .shadow-z-2 {
box-shadow: 0 3px 6px rgba(0,0,0, .16), box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
0 3px 6px rgba(0,0,0, .23) ;
} }
.shadow-z-2-hover { .shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0,0,0, .20), box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
0 3px 6px rgba(0,0,0, .28) ;
} }
.shadow-z-3 { .shadow-z-3 {
box-shadow: 0 10px 20px rgba(0,0,0, .19), box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
0 6px 6px rgba(0,0,0, .23) ;
} }
.shadow-z-4 { .shadow-z-4 {
box-shadow: 0 14px 28px rgba(0,0,0, .25), box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
0 10px 10px rgba(0,0,0, .22) ;
} }
.shadow-z-5 { .shadow-z-5 {
box-shadow: 0 19px 38px rgba(0,0,0, .30), box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
0 15px 12px rgba(0,0,0, .22) ;
} }

4
less/material.less
View File

@ -99,6 +99,10 @@ legend {
@import "_dialogs.less"; @import "_dialogs.less";
@import "_labels.less";
@import "_panels.less";
// External plugins // External plugins
@import "_plugin-snackbarjs.less"; @import "_plugin-snackbarjs.less";
@import "_plugin-nouislider.less"; @import "_plugin-nouislider.less";

10
sass/_icons-material-design.scss
View File

@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: "Material-Design-Icons"; font-family: "Material-Design-Icons";
src:url("$material-font-path/Material-Design-Icons.eot?-g7cqhn"); src:url("#{$material-font-path}/Material-Design-Icons.eot?-g7cqhn");
src:url("$material-font-path/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"), src:url("#{$material-font-path}/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"),
url("$material-font-path/Material-Design-Icons.woff?-g7cqhn") format("woff"), url("#{$material-font-path}/Material-Design-Icons.woff?-g7cqhn") format("woff"),
url("$material-font-path/Material-Design-Icons.ttf?-g7cqhn") format("truetype"), url("#{$material-font-path}/Material-Design-Icons.ttf?-g7cqhn") format("truetype"),
url("$material-font-path/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg"); url("#{$material-font-path}/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }

2
sass/_navbar.scss
View File

@ -158,7 +158,7 @@
} }
.navbar-inverse { .navbar-inverse {
background-color: $indigo; background-color: $navbar-inverse-bg;
} }
.navbar-white { .navbar-white {

11
scripts/material.js
View File

@ -55,14 +55,25 @@
var $this = $(this); var $this = $(this);
$this.wrap("<div class=form-control-wrapper></div>"); $this.wrap("<div class=form-control-wrapper></div>");
$this.after("<span class=material-input></span>"); $this.after("<span class=material-input></span>");
// Add floating label if required
if ($this.hasClass("floating-label")) { if ($this.hasClass("floating-label")) {
var placeholder = $this.attr("placeholder"); var placeholder = $this.attr("placeholder");
$this.attr("placeholder", null).removeClass("floating-label"); $this.attr("placeholder", null).removeClass("floating-label");
$this.after("<div class=floating-label>" + placeholder + "</div>"); $this.after("<div class=floating-label>" + placeholder + "</div>");
} }
// Add hint label if required
if ($this.attr("data-hint")) {
$this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
}
// Set as empty if is empty (damn I must improve this...)
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") { if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
$this.addClass("empty"); $this.addClass("empty");
} }
// Support for file input
if ($this.parent().next().is("[type=file]")) { if ($this.parent().next().is("[type=file]")) {
$this.parent().addClass("fileinput"); $this.parent().addClass("fileinput");
var $input = $this.parent().next().detach(); var $input = $this.parent().next().detach();

15
scripts/ripples.js
View File

@ -1,9 +1,17 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */ /* globals CustomEvent */
window.ripples = { window.ripples = {
done: false,
init : function(withRipple) { init : function(withRipple) {
"use strict"; "use strict";
if (this.done) {
return console.log("Ripples.js was already initialzied.");
}
this.done = true;
// Cross browser matches function // Cross browser matches function
function matchesSelector(domElement, selector) { function matchesSelector(domElement, selector) {
var matches = domElement.matches || var matches = domElement.matches ||
@ -67,7 +75,12 @@ window.ripples = {
var targetColor = window.getComputedStyle($el).color; var targetColor = window.getComputedStyle($el).color;
// Convert the rgb color to an rgba color with opacity set to __rippleOpacity__ // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")"); if ( targetColor.indexOf("rgba") >= 0 ) {
var alphaPosition = targetColor.lastIndexOf(",") + 1;
targetColor = targetColor.substring(0, alphaPosition) + _rippleOpacity + ")";
} else {
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
}
// Insert new ripple into ripple wrapper // Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple); $rippleWrapper.appendChild($ripple);