mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-27 08:29:53 +03:00
Merge 7440848d86 into bcf137386a
This commit is contained in:
Nelson Omuto
commit
0331e44237
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -8,3 +8,5 @@ Thumbs.db
|
|||
.DS_Store
|
||||
/node_modules/
|
||||
.grunt/
|
||||
.idea
|
||||
bower_components
|
||||
|
|
|
|||
56
Gruntfile.js
56
Gruntfile.js
|
|
@ -6,13 +6,39 @@ module.exports = function(grunt) {
|
|||
grunt.initConfig({
|
||||
|
||||
less: {
|
||||
compileless: {
|
||||
material: {
|
||||
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: {
|
||||
"dist/css/material.css": "less/material.less",
|
||||
"dist/css/material-wfont.css": "less/material-wfont.less",
|
||||
"dist/css/ripples.css": "less/ripples.less"
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +56,7 @@ module.exports = function(grunt) {
|
|||
|
||||
autoprefixer: {
|
||||
options: {
|
||||
map: true,
|
||||
browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
|
||||
},
|
||||
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: {
|
||||
minifyjs: {
|
||||
files: {
|
||||
|
|
@ -69,10 +88,16 @@ module.exports = function(grunt) {
|
|||
},
|
||||
|
||||
copy: {
|
||||
tpl: {
|
||||
expand: true,
|
||||
cwd: "dist/",
|
||||
src: "**",
|
||||
dest: "template/material/"
|
||||
},
|
||||
distjs: {
|
||||
expand: true,
|
||||
cwd: "scripts/",
|
||||
src: "**.min.js",
|
||||
src: "**",
|
||||
dest: "dist/js/",
|
||||
flatten: true,
|
||||
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) {
|
||||
var buildType = "default";
|
||||
|
|
|
|||
|
|
@ -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 `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*):
|
||||
|
||||
<div class="radio/checkbox radio-primary">
|
||||
|
|
|
|||
378
dist/css/material-wfont.css
vendored
378
dist/css/material-wfont.css
vendored
|
|
@ -2249,22 +2249,22 @@
|
|||
content: "\e8e4";
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
background-color: #EEEEEE;
|
||||
|
|
@ -2413,7 +2413,7 @@ body .jumbotron,
|
|||
background-color: #fff;
|
||||
padding: 19px;
|
||||
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: 0;
|
||||
}
|
||||
|
|
@ -2629,10 +2629,10 @@ body .jumbotron-material-lightgrey,
|
|||
outline: none !important;
|
||||
}
|
||||
.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) {
|
||||
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-default:not(.btn-link):not(.btn-flat) {
|
||||
|
|
@ -2783,11 +2783,11 @@ body .jumbotron-material-lightgrey,
|
|||
color: #a8a8a8 !important;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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 {
|
||||
margin: 0;
|
||||
|
|
@ -2798,7 +2798,7 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn.btn-fab,
|
||||
.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:hover,
|
||||
|
|
@ -3001,12 +3001,12 @@ body .jumbotron-material-lightgrey,
|
|||
position: relative;
|
||||
border-radius: 2px;
|
||||
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);
|
||||
}
|
||||
.btn-group: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-vertical.open .dropdown-toggle {
|
||||
|
|
@ -3014,12 +3014,12 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-group.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);
|
||||
}
|
||||
.btn-group.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-vertical .btn,
|
||||
|
|
@ -3066,9 +3066,11 @@ body .jumbotron-material-lightgrey,
|
|||
margin: 0;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:checked ~ .ripple {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.checkbox label .check {
|
||||
|
|
@ -3100,6 +3102,8 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox label .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
|
|
@ -3113,6 +3117,7 @@ body .jumbotron-material-lightgrey,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
-webkit-animation: checkbox-off 0.3s linear forwards;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
|
|
@ -3123,16 +3128,20 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.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;
|
||||
-webkit-animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after {
|
||||
-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:after {
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
|
|
@ -3141,6 +3150,8 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.checkbox input[type=checkbox][disabled] ~ .check:after {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after,
|
||||
|
|
@ -3353,6 +3364,17 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
|
||||
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 {
|
||||
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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
@keyframes checkbox-off {
|
||||
@-webkit-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;
|
||||
}
|
||||
|
|
@ -3372,6 +3394,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, 0 0 0 0 inset;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
|
|
@ -3380,6 +3403,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, 15px 2px 0 11px, 0 0 0 0 inset;
|
||||
}
|
||||
51% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -3394,6 +3418,7 @@ body .jumbotron-material-lightgrey,
|
|||
0px 0px 0 10px inset;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -3408,6 +3433,64 @@ body .jumbotron-material-lightgrey,
|
|||
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 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -3419,6 +3502,17 @@ body .jumbotron-material-lightgrey,
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -3456,6 +3550,8 @@ body .jumbotron-material-lightgrey,
|
|||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.radio label .check:after {
|
||||
|
|
@ -3471,12 +3567,16 @@ body .jumbotron-material-lightgrey,
|
|||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
-webkit-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.radio label input[type=radio]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.radio label input[type=radio]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check,
|
||||
|
|
@ -3627,6 +3727,8 @@ body .jumbotron-material-lightgrey,
|
|||
display: none;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check {
|
||||
-webkit-transform: scale(0.55);
|
||||
-ms-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
.radio input[type=radio][disabled] ~ .circle {
|
||||
|
|
@ -3706,7 +3808,6 @@ select[multiple].form-control.focus {
|
|||
}
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
/* active state */
|
||||
}
|
||||
.form-control-wrapper .form-control:focus,
|
||||
.form-control-wrapper .form-control.focus {
|
||||
|
|
@ -3752,12 +3853,18 @@ select[multiple].form-control.focus {
|
|||
height: 2px;
|
||||
background-color: #4285f4;
|
||||
bottom: -1px;
|
||||
-webkit-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
transition: -webkit-transform 0s;
|
||||
transition: transform 0s;
|
||||
}
|
||||
.form-control-wrapper .form-control:focus ~ .material-input:before,
|
||||
.form-control-wrapper .form-control.focus ~ .material-input:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
transition: -webkit-transform 0.2s ease-out;
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
.form-control-wrapper .material-input:after {
|
||||
|
|
@ -3770,6 +3877,8 @@ select[multiple].form-control.focus {
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
-webkit-transform-origin: left;
|
||||
-ms-transform-origin: left;
|
||||
transform-origin: left;
|
||||
}
|
||||
.form-control-wrapper .input-lg ~ .material-input:after {
|
||||
|
|
@ -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 {
|
||||
-webkit-animation: input-highlight 0.3s ease;
|
||||
animation: input-highlight 0.3s ease;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4202,12 +4322,30 @@ select.form-control.focus {
|
|||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
}
|
||||
@keyframes input-highlight {
|
||||
@-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 {
|
||||
0% {
|
||||
left: 20%;
|
||||
-webkit-transform: scaleX(20%);
|
||||
transform: scaleX(20%);
|
||||
}
|
||||
99% {
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
|
|
@ -4542,7 +4680,7 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
background-color: #ececec;
|
||||
}
|
||||
.navbar-inverse {
|
||||
background-color: #3f51b5;
|
||||
background-color: #5264ae;
|
||||
}
|
||||
.navbar-material-white {
|
||||
background-color: #FFF;
|
||||
|
|
@ -5024,7 +5162,7 @@ icon-material-lightgrey {
|
|||
border-radius: 2px;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
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 {
|
||||
margin-top: 100%;
|
||||
|
|
@ -5073,7 +5211,7 @@ icon-material-lightgrey {
|
|||
left: -15px;
|
||||
}
|
||||
.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: none;
|
||||
}
|
||||
|
|
@ -5110,21 +5248,185 @@ icon-material-lightgrey {
|
|||
.modal-backdrop {
|
||||
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 {
|
||||
background-color: #323232;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
font-size: 14px;
|
||||
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;
|
||||
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;
|
||||
-webkit-transform: translateY(200%);
|
||||
-ms-transform: translateY(200%);
|
||||
transform: translateY(200%);
|
||||
}
|
||||
.snackbar.snackbar-opened {
|
||||
padding: 14px 15px;
|
||||
margin-bottom: 20px;
|
||||
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;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.snackbar.toast {
|
||||
|
|
@ -5134,6 +5436,9 @@ icon-material-lightgrey {
|
|||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -5169,12 +5474,20 @@ icon-material-lightgrey {
|
|||
.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;
|
||||
|
|
@ -5202,17 +5515,19 @@ icon-material-lightgrey {
|
|||
.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 {
|
||||
.noUi-vertical {
|
||||
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 {
|
||||
|
|
@ -5645,3 +5960,4 @@ icon-material-lightgrey {
|
|||
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
|
||||
display: block;
|
||||
}
|
||||
/*# sourceMappingURL=material-wfont.css.map */
|
||||
1
dist/css/material-wfont.css.map
vendored
Normal file
1
dist/css/material-wfont.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/material-wfont.map
vendored
Normal file
1
dist/css/material-wfont.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/css/material-wfont.min.css
vendored
2
dist/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
378
dist/css/material.css
vendored
378
dist/css/material.css
vendored
|
|
@ -2242,22 +2242,22 @@
|
|||
content: "\e8e4";
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
background-color: #EEEEEE;
|
||||
|
|
@ -2406,7 +2406,7 @@ body .jumbotron,
|
|||
background-color: #fff;
|
||||
padding: 19px;
|
||||
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: 0;
|
||||
}
|
||||
|
|
@ -2622,10 +2622,10 @@ body .jumbotron-material-lightgrey,
|
|||
outline: none !important;
|
||||
}
|
||||
.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) {
|
||||
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-default:not(.btn-link):not(.btn-flat) {
|
||||
|
|
@ -2776,11 +2776,11 @@ body .jumbotron-material-lightgrey,
|
|||
color: #a8a8a8 !important;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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 {
|
||||
margin: 0;
|
||||
|
|
@ -2791,7 +2791,7 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn.btn-fab,
|
||||
.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:hover,
|
||||
|
|
@ -2994,12 +2994,12 @@ body .jumbotron-material-lightgrey,
|
|||
position: relative;
|
||||
border-radius: 2px;
|
||||
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);
|
||||
}
|
||||
.btn-group: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-vertical.open .dropdown-toggle {
|
||||
|
|
@ -3007,12 +3007,12 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-group.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);
|
||||
}
|
||||
.btn-group.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-vertical .btn,
|
||||
|
|
@ -3059,9 +3059,11 @@ body .jumbotron-material-lightgrey,
|
|||
margin: 0;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:checked ~ .ripple {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.checkbox label .check {
|
||||
|
|
@ -3093,6 +3095,8 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox label .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
|
|
@ -3106,6 +3110,7 @@ body .jumbotron-material-lightgrey,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
-webkit-animation: checkbox-off 0.3s linear forwards;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
|
|
@ -3116,16 +3121,20 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.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;
|
||||
-webkit-animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after {
|
||||
-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:after {
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
|
|
@ -3134,6 +3143,8 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.checkbox input[type=checkbox][disabled] ~ .check:after {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after,
|
||||
|
|
@ -3346,6 +3357,17 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
|
||||
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 {
|
||||
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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
@keyframes checkbox-off {
|
||||
@-webkit-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;
|
||||
}
|
||||
|
|
@ -3365,6 +3387,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, 0 0 0 0 inset;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
|
|
@ -3373,6 +3396,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, 15px 2px 0 11px, 0 0 0 0 inset;
|
||||
}
|
||||
51% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -3387,6 +3411,7 @@ body .jumbotron-material-lightgrey,
|
|||
0px 0px 0 10px inset;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -3401,6 +3426,64 @@ body .jumbotron-material-lightgrey,
|
|||
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 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -3412,6 +3495,17 @@ body .jumbotron-material-lightgrey,
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -3449,6 +3543,8 @@ body .jumbotron-material-lightgrey,
|
|||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.radio label .check:after {
|
||||
|
|
@ -3464,12 +3560,16 @@ body .jumbotron-material-lightgrey,
|
|||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
-webkit-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.radio label input[type=radio]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.radio label input[type=radio]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check,
|
||||
|
|
@ -3620,6 +3720,8 @@ body .jumbotron-material-lightgrey,
|
|||
display: none;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check {
|
||||
-webkit-transform: scale(0.55);
|
||||
-ms-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
.radio input[type=radio][disabled] ~ .circle {
|
||||
|
|
@ -3699,7 +3801,6 @@ select[multiple].form-control.focus {
|
|||
}
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
/* active state */
|
||||
}
|
||||
.form-control-wrapper .form-control:focus,
|
||||
.form-control-wrapper .form-control.focus {
|
||||
|
|
@ -3745,12 +3846,18 @@ select[multiple].form-control.focus {
|
|||
height: 2px;
|
||||
background-color: #4285f4;
|
||||
bottom: -1px;
|
||||
-webkit-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
transition: -webkit-transform 0s;
|
||||
transition: transform 0s;
|
||||
}
|
||||
.form-control-wrapper .form-control:focus ~ .material-input:before,
|
||||
.form-control-wrapper .form-control.focus ~ .material-input:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
transition: -webkit-transform 0.2s ease-out;
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
.form-control-wrapper .material-input:after {
|
||||
|
|
@ -3763,6 +3870,8 @@ select[multiple].form-control.focus {
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
-webkit-transform-origin: left;
|
||||
-ms-transform-origin: left;
|
||||
transform-origin: left;
|
||||
}
|
||||
.form-control-wrapper .input-lg ~ .material-input:after {
|
||||
|
|
@ -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 {
|
||||
-webkit-animation: input-highlight 0.3s ease;
|
||||
animation: input-highlight 0.3s ease;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4195,12 +4315,30 @@ select.form-control.focus {
|
|||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
}
|
||||
@keyframes input-highlight {
|
||||
@-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 {
|
||||
0% {
|
||||
left: 20%;
|
||||
-webkit-transform: scaleX(20%);
|
||||
transform: scaleX(20%);
|
||||
}
|
||||
99% {
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
|
|
@ -4535,7 +4673,7 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
background-color: #ececec;
|
||||
}
|
||||
.navbar-inverse {
|
||||
background-color: #3f51b5;
|
||||
background-color: #5264ae;
|
||||
}
|
||||
.navbar-material-white {
|
||||
background-color: #FFF;
|
||||
|
|
@ -5017,7 +5155,7 @@ icon-material-lightgrey {
|
|||
border-radius: 2px;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
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 {
|
||||
margin-top: 100%;
|
||||
|
|
@ -5066,7 +5204,7 @@ icon-material-lightgrey {
|
|||
left: -15px;
|
||||
}
|
||||
.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: none;
|
||||
}
|
||||
|
|
@ -5103,21 +5241,185 @@ icon-material-lightgrey {
|
|||
.modal-backdrop {
|
||||
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 {
|
||||
background-color: #323232;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
font-size: 14px;
|
||||
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;
|
||||
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;
|
||||
-webkit-transform: translateY(200%);
|
||||
-ms-transform: translateY(200%);
|
||||
transform: translateY(200%);
|
||||
}
|
||||
.snackbar.snackbar-opened {
|
||||
padding: 14px 15px;
|
||||
margin-bottom: 20px;
|
||||
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;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.snackbar.toast {
|
||||
|
|
@ -5127,6 +5429,9 @@ icon-material-lightgrey {
|
|||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -5162,12 +5467,20 @@ icon-material-lightgrey {
|
|||
.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;
|
||||
|
|
@ -5195,17 +5508,19 @@ icon-material-lightgrey {
|
|||
.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 {
|
||||
.noUi-vertical {
|
||||
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 {
|
||||
|
|
@ -5638,3 +5953,4 @@ icon-material-lightgrey {
|
|||
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
|
||||
display: block;
|
||||
}
|
||||
/*# sourceMappingURL=material.css.map */
|
||||
1
dist/css/material.css.map
vendored
Normal file
1
dist/css/material.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/css/material.map
vendored
Normal file
1
dist/css/material.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
40
dist/css/ripples.css
vendored
Normal file
40
dist/css/ripples.css
vendored
Normal 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
1
dist/css/ripples.css.map
vendored
Normal 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
1
dist/css/ripples.map
vendored
Normal 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
2
dist/css/ripples.min.css
vendored
|
|
@ -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
13
dist/js/material.js
vendored
|
|
@ -55,14 +55,25 @@
|
|||
var $this = $(this);
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
|
||||
// Add floating label if required
|
||||
if ($this.hasClass("floating-label")) {
|
||||
var placeholder = $this.attr("placeholder");
|
||||
$this.attr("placeholder", null).removeClass("floating-label");
|
||||
$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() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
|
||||
// Support for file input
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
|
|
@ -71,7 +82,7 @@
|
|||
});
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input", function() { $(this).blur(); })
|
||||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -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);
|
||||
13
dist/js/ripples.js
vendored
13
dist/js/ripples.js
vendored
|
|
@ -1,9 +1,17 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals CustomEvent */
|
||||
window.ripples = {
|
||||
done: false,
|
||||
init : function(withRipple) {
|
||||
"use strict";
|
||||
|
||||
if (this.done) {
|
||||
return console.log("Ripples.js was already initialzied.");
|
||||
}
|
||||
|
||||
this.done = true;
|
||||
|
||||
|
||||
// Cross browser matches function
|
||||
function matchesSelector(domElement, selector) {
|
||||
var matches = domElement.matches ||
|
||||
|
|
@ -67,7 +75,12 @@ window.ripples = {
|
|||
var targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
// Convert the rgb color to an rgba color with opacity set to __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
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
|
|
|||
2
dist/js/ripples.min.js
vendored
2
dist/js/ripples.min.js
vendored
|
|
@ -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
33
index.html
|
|
@ -5,8 +5,8 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Bootstrap Material</title>
|
||||
<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/material-wfont.min.css" rel="stylesheet">
|
||||
<link href="dist/css/ripples.css" rel="stylesheet">
|
||||
<link href="dist/css/material-wfont.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">
|
||||
<style>
|
||||
|
|
@ -1520,6 +1520,10 @@
|
|||
<input class="form-control floating-label" id="focusedInput" type="text" placeholder="Write something to make the label float">
|
||||
</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">
|
||||
<label class="control-label" for="disabledInput">Disabled input</label>
|
||||
<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>
|
||||
</div>
|
||||
<div class="bs-component">
|
||||
<div class="slider"></div>
|
||||
<div class="slider slider-success"></div>
|
||||
<div class="slider slider-material-pink"></div>
|
||||
<div class="col-sm-6">
|
||||
<div class="slider shor"></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>
|
||||
<p>Read more about <a href="http://refreshless.com/nouislider/">noUiSlider here</a>.</p>
|
||||
</div>
|
||||
|
|
@ -2310,7 +2321,17 @@
|
|||
<script>
|
||||
$(function() {
|
||||
$.material.init();
|
||||
$(".slider").noUiSlider({
|
||||
$(".shor").noUiSlider({
|
||||
start: 40,
|
||||
connect: "lower",
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
$(".svert").noUiSlider({
|
||||
orientation: "vertical",
|
||||
start: 40,
|
||||
connect: "lower",
|
||||
range: {
|
||||
|
|
|
|||
|
|
@ -95,13 +95,23 @@ select[multiple].form-control {
|
|||
margin-top: -11px;
|
||||
}
|
||||
|
||||
/* active state */
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
4
less/_labels.less
Normal file
4
less/_labels.less
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.label {
|
||||
border-radius: 1px;
|
||||
.variations(~"", background-color, @grey);
|
||||
}
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
|
||||
.variations(~"", background-color, @primary);
|
||||
&-inverse {
|
||||
background-color: @indigo;
|
||||
background-color: @navbar-inverse-bg;
|
||||
}
|
||||
&-material-white {
|
||||
background-color: #FFF;
|
||||
|
|
|
|||
20
less/_panels.less
Normal file
20
less/_panels.less
Normal 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;
|
||||
}
|
||||
|
|
@ -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,17 +78,17 @@
|
|||
.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 {
|
||||
.noUi-vertical {
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
margin: 0 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
.noUi-handle.noUi-active {
|
||||
transform: scale(2.5);
|
||||
}
|
||||
[disabled].noUi-slider{
|
||||
|
|
|
|||
|
|
@ -1,28 +1,22 @@
|
|||
.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 rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.shadow-z-2 {
|
||||
box-shadow: 0 3px 6px rgba(0,0,0, .16),
|
||||
0 3px 6px rgba(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 {
|
||||
box-shadow: 0 3px 6px rgba(0,0,0, .20),
|
||||
0 3px 6px rgba(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 {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0, .19),
|
||||
0 6px 6px rgba(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 {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0, .25),
|
||||
0 10px 10px rgba(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 {
|
||||
box-shadow: 0 19px 38px rgba(0,0,0, .30),
|
||||
0 15px 12px rgba(0,0,0, .22) ;
|
||||
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,6 +99,10 @@ legend {
|
|||
|
||||
@import "_dialogs.less";
|
||||
|
||||
@import "_labels.less";
|
||||
|
||||
@import "_panels.less";
|
||||
|
||||
// External plugins
|
||||
@import "_plugin-snackbarjs.less";
|
||||
@import "_plugin-nouislider.less";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@font-face {
|
||||
font-family: "Material-Design-Icons";
|
||||
src:url("$material-font-path/Material-Design-Icons.eot?-g7cqhn");
|
||||
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.ttf?-g7cqhn") format("truetype"),
|
||||
url("$material-font-path/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
|
||||
src:url("#{$material-font-path}/Material-Design-Icons.eot?-g7cqhn");
|
||||
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.ttf?-g7cqhn") format("truetype"),
|
||||
url("#{$material-font-path}/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: $indigo;
|
||||
background-color: $navbar-inverse-bg;
|
||||
}
|
||||
|
||||
.navbar-white {
|
||||
|
|
|
|||
|
|
@ -55,14 +55,25 @@
|
|||
var $this = $(this);
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
|
||||
// Add floating label if required
|
||||
if ($this.hasClass("floating-label")) {
|
||||
var placeholder = $this.attr("placeholder");
|
||||
$this.attr("placeholder", null).removeClass("floating-label");
|
||||
$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() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
|
||||
// Support for file input
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,17 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals CustomEvent */
|
||||
window.ripples = {
|
||||
done: false,
|
||||
init : function(withRipple) {
|
||||
"use strict";
|
||||
|
||||
if (this.done) {
|
||||
return console.log("Ripples.js was already initialzied.");
|
||||
}
|
||||
|
||||
this.done = true;
|
||||
|
||||
|
||||
// Cross browser matches function
|
||||
function matchesSelector(domElement, selector) {
|
||||
var matches = domElement.matches ||
|
||||
|
|
@ -67,7 +75,12 @@ window.ripples = {
|
|||
var targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
// Convert the rgb color to an rgba color with opacity set to __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
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user