mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-27 03:54:13 +03:00
Merge branch 'master' into gh-pages
This commit is contained in:
FezVrasta
commit
2ec73932f5
|
|
@ -15,6 +15,7 @@
|
|||
- Added color variations on toggles
|
||||
- Improved shadows to better fit Material Design specs
|
||||
- Improved hover state of buttons
|
||||
- Material Checkboxes now are a single inline element `.checkbox-material`, this helps when you need to vertical align them
|
||||
|
||||
## v 0.2.1
|
||||
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@ module.exports = function(grunt) {
|
|||
},
|
||||
less: {
|
||||
files:["less/**/*.less"],
|
||||
tasks: ["default"]
|
||||
tasks: ["material:less"]
|
||||
},
|
||||
livereload: {
|
||||
options: {
|
||||
|
|
|
|||
4651
dist/css/material-fullpalette.css
vendored
4651
dist/css/material-fullpalette.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material-fullpalette.css.map
vendored
2
dist/css/material-fullpalette.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
2
dist/css/material-fullpalette.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css.map
vendored
2
dist/css/material-fullpalette.min.css.map
vendored
File diff suppressed because one or more lines are too long
349
dist/css/material.css
vendored
349
dist/css/material.css
vendored
|
|
@ -3584,66 +3584,57 @@ body .jumbotron-material-blue-grey,
|
|||
.form-horizontal .checkbox {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.checkbox label {
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
padding-left: 0;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.checkbox .checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
.checkbox label span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.checkbox label .ripple {
|
||||
.checkbox .checkbox-material:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
left: -8px;
|
||||
top: -11px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
-webkit-transform: scale(2.3);
|
||||
-ms-transform: scale(2.3);
|
||||
transform: scale(2.3);
|
||||
}
|
||||
.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 {
|
||||
.checkbox .checkbox-material .check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: -3px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.checkbox label .check:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
left: -5px;
|
||||
top: -15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.checkbox label .check:before {
|
||||
.checkbox .checkbox-material .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
|
|
@ -3660,297 +3651,297 @@ body .jumbotron-material-blue-grey,
|
|||
0 0 0 0,
|
||||
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;
|
||||
0 0 0 0 inset;
|
||||
-webkit-animation: checkbox-off 0.3s forwards;
|
||||
animation: checkbox-off 0.3s forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
opacity: 0;
|
||||
}
|
||||
.checkbox input[type=checkbox]:focus ~ .check:after {
|
||||
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
|
||||
-webkit-animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
-webkit-animation: checkbox-on 0.3s forwards;
|
||||
animation: checkbox-on 0.3s forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms linear forwards;
|
||||
animation: rippleOn 500ms linear forwards;
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material:before {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.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]:not(:checked) + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOff 500ms forwards;
|
||||
animation: rippleOff 500ms forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
.checkbox input[type=checkbox][disabled] ~ .circle {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOn 500ms forwards;
|
||||
animation: rippleOn 500ms forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
.checkbox input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled] ~ .check:after {
|
||||
.checkbox input[type=checkbox][disabled] + .checkbox-material .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,
|
||||
.checkbox-default input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #009587;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:before,
|
||||
.checkbox-default input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #009587;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #0f9d58;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #607d8b;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check,
|
||||
.checkbox-default input[type=checkbox]:checked ~ .check {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #009587;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #0f9d58;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #607d8b;
|
||||
}
|
||||
@-webkit-keyframes checkbox-on {
|
||||
|
|
@ -4342,88 +4333,88 @@ body .jumbotron-material-blue-grey,
|
|||
}
|
||||
.togglebutton label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after,
|
||||
.togglebutton-default label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(0, 149, 135, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
|
||||
}
|
||||
.togglebutton-black label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.togglebutton-white label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.togglebutton-inverse label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(63, 81, 181, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);
|
||||
}
|
||||
.togglebutton-primary label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(0, 149, 135, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
|
||||
}
|
||||
.togglebutton-success label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(15, 157, 88, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(15, 157, 88, 0.1);
|
||||
}
|
||||
.togglebutton-info label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(3, 169, 244, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);
|
||||
}
|
||||
.togglebutton-warning label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(255, 87, 34, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);
|
||||
}
|
||||
.togglebutton-danger label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(244, 67, 54, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(244, 67, 54, 0.1);
|
||||
}
|
||||
.togglebutton-material-red label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(244, 67, 54, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(244, 67, 54, 0.1);
|
||||
}
|
||||
.togglebutton-material-pink label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(233, 30, 99, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(233, 30, 99, 0.1);
|
||||
}
|
||||
.togglebutton-material-purple label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(156, 39, 176, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(156, 39, 176, 0.1);
|
||||
}
|
||||
.togglebutton-material-deep-purple label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(103, 58, 183, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(103, 58, 183, 0.1);
|
||||
}
|
||||
.togglebutton-material-indigo label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(63, 81, 181, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(63, 81, 181, 0.1);
|
||||
}
|
||||
.togglebutton-material-blue label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
.togglebutton-material-light-blue label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(3, 169, 244, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(3, 169, 244, 0.1);
|
||||
}
|
||||
.togglebutton-material-cyan label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(0, 188, 212, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 188, 212, 0.1);
|
||||
}
|
||||
.togglebutton-material-teal label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(0, 150, 136, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
|
||||
}
|
||||
.togglebutton-material-green label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
.togglebutton-material-light-green label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(139, 195, 74, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(139, 195, 74, 0.1);
|
||||
}
|
||||
.togglebutton-material-lime label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(205, 220, 57, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(205, 220, 57, 0.1);
|
||||
}
|
||||
.togglebutton-material-yellow label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(255, 235, 59, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 235, 59, 0.1);
|
||||
}
|
||||
.togglebutton-material-amber label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(255, 193, 7, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 193, 7, 0.1);
|
||||
}
|
||||
.togglebutton-material-orange label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(255, 152, 0, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 152, 0, 0.1);
|
||||
}
|
||||
.togglebutton-material-deep-orange label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(255, 87, 34, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(255, 87, 34, 0.1);
|
||||
}
|
||||
.togglebutton-material-brown label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(121, 85, 72, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(121, 85, 72, 0.1);
|
||||
}
|
||||
.togglebutton-material-grey label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(158, 158, 158, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(158, 158, 158, 0.1);
|
||||
}
|
||||
.togglebutton-material-blue-grey label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after {
|
||||
background-color: rgba(96, 125, 139, 0.1);
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(96, 125, 139, 0.1);
|
||||
}
|
||||
.form-horizontal .radio {
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -5328,6 +5319,10 @@ legend {
|
|||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
.list-group .list-group-item .row-picture label .checkbox-material,
|
||||
.list-group .list-group-item .row-action-primary label .checkbox-material {
|
||||
left: -10px;
|
||||
}
|
||||
.list-group .list-group-item .row-content {
|
||||
display: inline-block;
|
||||
width: calc(100% - 92px);
|
||||
|
|
|
|||
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
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
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
BIN
dist/fonts/RobotoDraftBold.woff
vendored
Normal file
BIN
dist/fonts/RobotoDraftBold.woff
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/RobotoDraftBold.woff2
vendored
Normal file
BIN
dist/fonts/RobotoDraftBold.woff2
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/RobotoDraftItalic.woff
vendored
Normal file
BIN
dist/fonts/RobotoDraftItalic.woff
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/RobotoDraftItalic.woff2
vendored
Normal file
BIN
dist/fonts/RobotoDraftItalic.woff2
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/RobotoDraftMedium.woff
vendored
Normal file
BIN
dist/fonts/RobotoDraftMedium.woff
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/RobotoDraftMedium.woff2
vendored
Normal file
BIN
dist/fonts/RobotoDraftMedium.woff2
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/RobotoDraftRegular.woff
vendored
Normal file
BIN
dist/fonts/RobotoDraftRegular.woff
vendored
Normal file
Binary file not shown.
BIN
dist/fonts/RobotoDraftRegular.woff2
vendored
Normal file
BIN
dist/fonts/RobotoDraftRegular.woff2
vendored
Normal file
Binary file not shown.
2
dist/js/material.js
vendored
2
dist/js/material.js
vendored
|
|
@ -48,7 +48,7 @@
|
|||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
.after("<span class=checkbox-material><span class=check></span></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
!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&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,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]",togglebuttonElements:".togglebutton > 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>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></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(a(this).attr("data-hint")||b.hasClass("floating-label")){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()&&"undefined"!=typeof b[0].checkValidity&&b[0].checkValidity()?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){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(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&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").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&a(document).arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(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&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,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]",togglebuttonElements:".togglebutton > 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=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></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(a(this).attr("data-hint")||b.hasClass("floating-label")){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()&&"undefined"!=typeof b[0].checkValidity&&b[0].checkValidity()?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){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(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&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").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&a(document).arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
|
||||
//# sourceMappingURL=material.min.js.map
|
||||
2
dist/js/material.min.js.map
vendored
2
dist/js/material.min.js.map
vendored
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","fn","jQuery"],"mappings":"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"}
|
||||
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","fn","jQuery"],"mappings":"CAEA,SAAUA,GAUR,QAASC,GAAQC,GACf,MAAwB,mBAAbA,GAAIC,OACN,EACsB,gBAAbD,GAAIC,OAAqBD,EAAIC,MAAQ,GAC7CD,EAAIE,UAAYF,EAAIG,UAAYH,EAAII,QAAuB,GAAbJ,EAAIC,OAA2B,GAAbD,EAAIC,OAEvE,EAdTH,EAAEO,KAAK,KAAKC,UAAY,SAASC,GAC/B,MAAIT,GAAES,GAAKC,KAAK,WACP,GAEA,GAaXV,EAAEW,UACAC,SAEEC,OAAS,EACTC,SAAW,EACXC,UAAY,EACZC,cAAgB,EAChBC,OAAS,EACTC,QAAU,EACVC,UAAY,EAEZC,aACE,sBACA,cACA,gCACA,mBACA,kCACA,eACAC,KAAK,KACPC,cAAiB,iEACjBC,iBAAoB,2CACpBC,qBAAwB,+CACxBC,cAAiB,sCAEnBV,SAAY,SAASW,GAEnB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQW,kBACtCK,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,mEAETb,aAAgB,SAASU,GAEvB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQY,sBACtCI,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,+BAETZ,MAAS,SAASS,GAEhB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQa,eACtCG,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,wDAEThB,MAAS,SAASa,GAChB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQU,eACtCM,OAAO,cACPlB,KAAK,UAAU,GACfoB,KAAM,WACL,GAAIC,GAAQ/B,EAAE2B,KAEd,IAAK3B,EAAE2B,MAAMK,KAAK,cAAiBD,EAAME,SAAS,kBAAlD,CAOA,GAJAF,EAAMG,KAAK,0CACXH,EAAMF,MAAM,sCAGRE,EAAME,SAAS,kBAAmB,CACpC,GAAIE,GAAcJ,EAAMC,KAAK,cAC7BD,GAAMC,KAAK,cAAe,MAAMI,YAAY,kBAC5CL,EAAMF,MAAM,6BAA+BM,EAAc,UAc3D,GAVIJ,EAAMC,KAAK,cACbD,EAAMF,MAAM,mBAAqBE,EAAMC,KAAK,aAAe,WAIzC,OAAhBD,EAAMM,OAAiC,aAAfN,EAAMM,OAAwC,KAAhBN,EAAMM,QAC9DN,EAAMO,SAAS,SAIbP,EAAMQ,SAASC,OAAOC,GAAG,eAAgB,CAC3CV,EAAMQ,SAASD,SAAS,YACxB,IAAII,GAASX,EAAMQ,SAASC,OAAOG,QACnCZ,GAAMF,MAAMa,OAIhB1C,EAAE4C,UACDC,GAAG,SAAU,iCAAkC,WAAa7C,EAAE2B,MAAMmB,SACpED,GAAG,gBAAiB,gBAAiB,SAASE,GAC1C9C,EAAQ8C,IACT/C,EAAE2B,MAAMS,YAAY,WAGvBS,GAAG,eAAgB,gBAAiB,WACnC,GAAId,GAAQ/B,EAAE2B,KACM,MAAhBI,EAAMM,OAAkD,mBAA1BN,GAAM,GAAGiB,eAAgCjB,EAAM,GAAGiB,gBAClFjB,EAAMO,SAAS,SAEfP,EAAMK,YAAY,WAGrBS,GAAG,QAAS,kCAAmC,WAC9C7C,EAAE2B,MAAMsB,KAAK,SAASX,SAAS,WAEhCO,GAAG,OAAQ,kCAAmC,WAC7C7C,EAAE2B,MAAMsB,KAAK,SAASb,YAAY,WAEnCS,GAAG,SAAU,8CAA+C,WAC3D,GAAIK,GAAQ,EACZlD,GAAE8B,KAAK9B,EAAE2B,MAAM,GAAGwB,MAAO,SAASC,EAAGC,GACnCH,GAASG,EAAKC,KAAO,OAEvBJ,EAAQA,EAAMK,UAAU,EAAGL,EAAMM,OAAS,GACtCN,EACFlD,EAAE2B,MAAM8B,OAAOrB,YAAY,SAE3BpC,EAAE2B,MAAM8B,OAAOnB,SAAS,SAE1BtC,EAAE2B,MAAM8B,OAAOpB,IAAIa,MAGvBpC,QAAW,SAASY,GAClB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQQ,aAAaN,WAEtDK,SAAY,WAGV,GAAIuC,GAAUC,YAAY,WACxB3D,EAAE,yBAAyB8B,KAAK,WAC1B9B,EAAE2B,MAAMU,OAASrC,EAAE2B,MAAMU,QAAUrC,EAAE2B,MAAMK,KAAK,UAClDhC,EAAE2B,MAAMiC,QAAQ,aAGnB,IAGHC,YAAW,WACTC,cAAcJ,IACb,IAEH,IAAIK,EACJ/D,GAAE4C,UACDC,GAAG,QAAS,QAAS,WACpB,GAAImB,GAAUhE,EAAE2B,MAAMsC,QAAQ,QAAQhB,KAAK,SAASiB,IAAI,cACxDH,GAAUJ,YAAY,WACpBK,EAAQlC,KAAK,WACP9B,EAAE2B,MAAMU,QAAUrC,EAAE2B,MAAMK,KAAK,UACjChC,EAAE2B,MAAMiC,QAAQ,aAGnB,OAEJf,GAAG,OAAQ,QAAS,WACnBiB,cAAcC,MAGlBI,KAAQ,WACFnE,EAAEoE,GAAGtD,SAAWa,KAAKf,QAAQE,SAC/Ba,KAAKb,UAEHa,KAAKf,QAAQC,OACfc,KAAKd,QAEHc,KAAKf,QAAQG,UACfY,KAAKZ,WAEHY,KAAKf,QAAQI,cACfW,KAAKX,eAEHW,KAAKf,QAAQK,OACfU,KAAKV,QAEHU,KAAKf,QAAQO,UACfQ,KAAKR,WAGHyB,SAAS1B,QAAUS,KAAKf,QAAQM,SAC9BlB,EAAEoE,GAAGtD,SAAWa,KAAKf,QAAQE,SAC/Bd,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQQ,YAAa,WAC3CpB,EAAEW,SAASG,QAAQd,EAAE2B,SAGrBA,KAAKf,QAAQC,OACfb,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQU,cAAe,WAC7CtB,EAAEW,SAASE,MAAMb,EAAE2B,SAGnBA,KAAKf,QAAQG,UACff,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQW,iBAAkB,WAChDvB,EAAEW,SAASI,SAASf,EAAE2B,SAGtBA,KAAKf,QAAQK,OACfjB,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQa,cAAe,WAC7CzB,EAAEW,SAASM,MAAMjB,EAAE2B,SAGnBA,KAAKf,QAAQI,cACfhB,EAAE4C,UAAU1B,OAAOS,KAAKf,QAAQY,qBAAsB,WACpDxB,EAAEW,SAASK,aAAahB,EAAE2B,aAQnC0C"}
|
||||
83
index.html
83
index.html
|
|
@ -144,6 +144,7 @@
|
|||
<nav class="col-xs-3 menu">
|
||||
<ul>
|
||||
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
|
||||
<li class="withripple" data-target="#getting-started">Getting Started</li>
|
||||
<li><a href="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
|
||||
<li class="withripple" data-target="#material-colors">Material Colors</li>
|
||||
<li class="withripple" data-target="#checkbox">Checkbox</li>
|
||||
|
|
@ -233,6 +234,87 @@
|
|||
<pre><code>bower install bootstrap-material-design</code></pre>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="well page" id="getting-started">
|
||||
<h1 class="header">Getting Started</h1>
|
||||
<h3>Download</h3>
|
||||
<hr>
|
||||
<h4>Install with NPM - Coming Soon</h4>
|
||||
<p>You can also install and manage Material Bootstrap using NPM</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
<h4>Install with Bower</h4>
|
||||
<p>You can also install and manage Material Bootstrap using Bower</p>
|
||||
<pre><code>bower install bootstrap-material-design</code></pre>
|
||||
<h4>Install with Meteor</h4>
|
||||
<p>You can also install and manage Material Bootstrap using Meteor</p>
|
||||
<pre><code>meteor add fezvrasta:bootstrap-material-design</code></pre>
|
||||
<br />
|
||||
<h3>What's included</h3>
|
||||
<hr>
|
||||
<p>Material Bootstrap is downloadable in a two forms. Material.css only supports the primary shades of the material color palette and Material-fullpalette.css supports every shade of the material color palette</p>
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Required Frameworks</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="list-group">
|
||||
<div class="list-group-item">
|
||||
<div class="row-action-primary">
|
||||
<i class="mdi-action-settings"></i>
|
||||
</div>
|
||||
<div class="row-content">
|
||||
<h4 class="list-group-item-heading">Bootstrap v3.0+</h4>
|
||||
<p class="list-group-item-text">This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to <a href="http://getbootstrap.com/getting-started/" alt="Bootstrap Docs">Get Bootstrap</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-separator"></div>
|
||||
<div class="list-group-item">
|
||||
<div class="row-action-primary">
|
||||
<i class="mdi-action-settings"></i>
|
||||
</div>
|
||||
<div class="row-content">
|
||||
<h4 class="list-group-item-heading">jQuery 1.9.1+</h4>
|
||||
<p class="list-group-item-text">All JavaScript plugins require jQuery to be included.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Bootstrap. You'll see something like this:</p>
|
||||
<!-- This code must be aligned this way to render correctly -->
|
||||
<pre><code class="language-bash" data-lang="bash">Material/
|
||||
├── css/
|
||||
│ ├── material.css
|
||||
│ ├── material.css.map
|
||||
│ ├── material.min.css
|
||||
│ ├── material.min.css.map
|
||||
│ ├── material-wfont.css
|
||||
│ ├── material-wfont.css.map
|
||||
│ ├── material-wfont.min.css
|
||||
│ ├── material-wfont.min.css.map
|
||||
│ ├── ripples
|
||||
│ ├── ripples.css.map
|
||||
│ ├── ripples.min.css
|
||||
│ ├── ripples.min.css.map
|
||||
├── js/
|
||||
│ ├── material.js
|
||||
│ ├── material.min.js
|
||||
│ ├── material.min.js.map
|
||||
│ ├── ripples.js
|
||||
│ ├── ripples.min.js
|
||||
│ ├── ripples.min.js.map
|
||||
└── fonts/
|
||||
├── Material-Design-Icons.eot
|
||||
├── Material-Design-Icons.svg
|
||||
├── Material-Design-Icons.ttf
|
||||
├── Material-Design-Icons.woff
|
||||
└── ADD REMAINING GOOGLE FONT FILES HERE
|
||||
</code>
|
||||
</pre>
|
||||
<p>Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.</p>
|
||||
<br />
|
||||
<p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p>
|
||||
<pre><code>$.material.init()</code></pre>
|
||||
</div>
|
||||
<div class="well page" id="checkbox">
|
||||
<h1 class="header">Checkbox</h1>
|
||||
|
|
@ -329,6 +411,7 @@
|
|||
}
|
||||
#checkbox .sample2 .checkbox {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,63 +2,53 @@
|
|||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
transform: translateZ(0); // Force 3d rendering
|
||||
label {
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
transition-duration: 0.2s;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
}
|
||||
.ripple {
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
left: -8px;
|
||||
top: -11px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: @checkbox-size;
|
||||
width: @checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) ~ .ripple {
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .ripple {
|
||||
animation: rippleOn 500ms;
|
||||
transform: scale(2.3);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: -3px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.check:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: @lightbg-text;
|
||||
left: -5px;
|
||||
top: -15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
|
|
@ -76,23 +66,15 @@
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] { opacity: 0; }
|
||||
|
||||
|
||||
input[type=checkbox]:focus ~ .check:after {
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .check {
|
||||
}
|
||||
input[type=checkbox]:checked ~ .check:before {
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
|
|
@ -100,37 +82,37 @@
|
|||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on @checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff @checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn @checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms linear forwards;
|
||||
}
|
||||
|
||||
// Make animate quickly when not hover
|
||||
&:not(:hover) input[type=checkbox] ~ .check {
|
||||
&:before, &:after {
|
||||
animation-duration: 1ms;
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff @checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn @checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
input[type=checkbox][disabled] ~ .circle {
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] ~ .check:after {
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: @lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked ~ .check:before", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked ~ .check", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,9 @@
|
|||
margin-right: -7px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: -5px;
|
||||
.checkbox-material {
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.row-content {
|
||||
|
|
|
|||
|
|
@ -62,6 +62,6 @@
|
|||
.variations(~" label input[type=checkbox]:first-of-type:checked + .toggle:after", background-color, @primary);
|
||||
// Ripple on
|
||||
.generic-variations(~" label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after", @primary, {
|
||||
background-color: fade(@material-color, 10%);
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px fade(@material-color, 10%);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,3 +86,8 @@
|
|||
|
||||
@text-disabled: #a8a8a8;
|
||||
@background-disabled: #eaeaea;
|
||||
|
||||
// Checkboxes
|
||||
@checkbox-size: 20px;
|
||||
@checkbox-animation-ripple: 500ms;
|
||||
@checkbox-animation-check: 0.3s;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@
|
|||
"framework"
|
||||
],
|
||||
"homepage": "https://github.com/FezVrasta/bootstrap-material-design",
|
||||
"dependencies": {
|
||||
"bootstrap": ">=3.0",
|
||||
"jquery": ">=1.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bootstrap": ">=3.0",
|
||||
"grunt": "^0.4.5",
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
.after("<span class=checkbox-material><span class=check></span></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
* Verify if the user is just touching on a device and return if so
|
||||
*/
|
||||
if(self.isTouch() && event.type === "mousedown") {
|
||||
return false;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user