mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 10:04:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
FezVrasta 2015-03-13 14:40:30 +01:00
commit 2ec73932f5
29 changed files with 2966 additions and 2898 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -15,6 +15,7 @@
- Added color variations on toggles - Added color variations on toggles
- Improved shadows to better fit Material Design specs - Improved shadows to better fit Material Design specs
- Improved hover state of buttons - 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 ## v 0.2.1

2
Gruntfile.js
View File

@ -215,7 +215,7 @@ module.exports = function(grunt) {
}, },
less: { less: {
files:["less/**/*.less"], files:["less/**/*.less"],
tasks: ["default"] tasks: ["material:less"]
}, },
livereload: { livereload: {
options: { options: {

4709
dist/css/material-fullpalette.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

407
dist/css/material.css vendored
View File

@ -3584,66 +3584,57 @@ body .jumbotron-material-blue-grey,
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }
.checkbox {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.checkbox label { .checkbox label {
padding-left: 10px;
cursor: pointer; 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; position: relative;
top: 3px;
} }
.checkbox label span { .checkbox .checkbox-material:before {
display: block;
position: absolute;
left: 0px;
transition-duration: 0.2s;
}
.checkbox label .ripple {
display: block; display: block;
position: absolute; position: absolute;
left: 0;
content: ""; content: "";
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
left: -8px; height: 20px;
top: -11px; width: 20px;
height: 50px;
width: 50px;
border-radius: 100%; border-radius: 100%;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
margin: 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 { .checkbox .checkbox-material .check {
-webkit-animation: rippleOff 500ms; position: relative;
animation: rippleOff 500ms;
}
.checkbox label input[type=checkbox]:checked ~ .ripple {
-webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.checkbox label .check {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid; border: 2px solid;
border-radius: 2px; border-radius: 2px;
overflow: hidden; 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; z-index: 1;
opacity: 0;
margin: 0;
} }
.checkbox label .check:before { .checkbox .checkbox-material .check:before {
position: absolute; position: absolute;
content: ""; content: "";
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
@ -3655,302 +3646,302 @@ body .jumbotron-material-blue-grey,
width: 0; width: 0;
height: 0; height: 0;
box-shadow: 0 0 0 0, box-shadow: 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0 0 0 0 inset;
-webkit-animation: checkbox-off 0.3s linear forwards; -webkit-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s linear forwards; animation: checkbox-off 0.3s forwards;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0;
}
.checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2; 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; 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; -webkit-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s linear forwards; animation: checkbox-on 0.3s forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms linear forwards; -webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms linear forwards; animation: rippleOff 500ms;
} }
.checkbox input[type=checkbox]:checked ~ .check:after { .checkbox input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms linear forwards; -webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms linear forwards; animation: rippleOn 500ms;
} }
.checkbox:not(:hover) input[type=checkbox] ~ .check:before, .checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
.checkbox:not(:hover) input[type=checkbox] ~ .check:after { -webkit-animation: rippleOff 500ms forwards;
-webkit-animation-duration: 1ms; animation: rippleOff 500ms forwards;
animation-duration: 1ms;
} }
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before, .checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
.checkbox input[type=checkbox][disabled] ~ .circle { -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; 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); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.checkbox input[type=checkbox]:checked ~ .check:after, .checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
.checkbox-default input[type=checkbox]:checked ~ .check:after { .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #0f9d58; background-color: #0f9d58;
} }
.checkbox-black input[type=checkbox]:checked ~ .check:after { .checkbox-black input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #000000; background-color: #000000;
} }
.checkbox-white input[type=checkbox]:checked ~ .check:after { .checkbox-white input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #ffffff; background-color: #ffffff;
} }
.checkbox-inverse input[type=checkbox]:checked ~ .check:after { .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #3f51b5; background-color: #3f51b5;
} }
.checkbox-primary input[type=checkbox]:checked ~ .check:after { .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #009587; background-color: #009587;
} }
.checkbox-success input[type=checkbox]:checked ~ .check:after { .checkbox-success input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #0f9d58; background-color: #0f9d58;
} }
.checkbox-info input[type=checkbox]:checked ~ .check:after { .checkbox-info input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #03a9f4; background-color: #03a9f4;
} }
.checkbox-warning input[type=checkbox]:checked ~ .check:after { .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #ff5722; background-color: #ff5722;
} }
.checkbox-danger input[type=checkbox]:checked ~ .check:after { .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #f44336; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; background-color: #607d8b;
} }
.checkbox input[type=checkbox]:checked ~ .check:before, .checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before { .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
color: #4caf50; color: #4caf50;
} }
.checkbox-black input[type=checkbox]:checked ~ .check:before { .checkbox-black input[type=checkbox]:checked + .checkbox-material .check:before {
color: #000000; color: #000000;
} }
.checkbox-white input[type=checkbox]:checked ~ .check:before { .checkbox-white input[type=checkbox]:checked + .checkbox-material .check:before {
color: #ffffff; color: #ffffff;
} }
.checkbox-inverse input[type=checkbox]:checked ~ .check:before { .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:before {
color: #3f51b5; color: #3f51b5;
} }
.checkbox-primary input[type=checkbox]:checked ~ .check:before { .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:before {
color: #009587; color: #009587;
} }
.checkbox-success input[type=checkbox]:checked ~ .check:before { .checkbox-success input[type=checkbox]:checked + .checkbox-material .check:before {
color: #0f9d58; color: #0f9d58;
} }
.checkbox-info input[type=checkbox]:checked ~ .check:before { .checkbox-info input[type=checkbox]:checked + .checkbox-material .check:before {
color: #03a9f4; color: #03a9f4;
} }
.checkbox-warning input[type=checkbox]:checked ~ .check:before { .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:before {
color: #ff5722; color: #ff5722;
} }
.checkbox-danger input[type=checkbox]:checked ~ .check:before { .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:before {
color: #f44336; color: #f44336;
} }
.checkbox-material-red input[type=checkbox]:checked ~ .check:before { .checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:before {
color: #f44336; color: #f44336;
} }
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before { .checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:before {
color: #e91e63; color: #e91e63;
} }
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before { .checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:before {
color: #9c27b0; 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; color: #673ab7;
} }
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before { .checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:before {
color: #3f51b5; color: #3f51b5;
} }
.checkbox-material-blue input[type=checkbox]:checked ~ .check:before { .checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:before {
color: #2196f3; 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; color: #03a9f4;
} }
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before { .checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:before {
color: #00bcd4; color: #00bcd4;
} }
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before { .checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:before {
color: #009688; color: #009688;
} }
.checkbox-material-green input[type=checkbox]:checked ~ .check:before { .checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:before {
color: #4caf50; 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; color: #8bc34a;
} }
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before { .checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:before {
color: #cddc39; color: #cddc39;
} }
.checkbox-material-yellow input[type=checkbox]:checked ~ .check:before { .checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:before {
color: #ffeb3b; color: #ffeb3b;
} }
.checkbox-material-amber input[type=checkbox]:checked ~ .check:before { .checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:before {
color: #ffc107; color: #ffc107;
} }
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before { .checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:before {
color: #ff9800; 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; color: #ff5722;
} }
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before { .checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:before {
color: #795548; color: #795548;
} }
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before { .checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:before {
color: #9e9e9e; 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; color: #607d8b;
} }
.checkbox input[type=checkbox]:checked ~ .check, .checkbox input[type=checkbox]:checked + .checkbox-material .check,
.checkbox-default input[type=checkbox]:checked ~ .check { .checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
color: #4caf50; color: #4caf50;
} }
.checkbox-black input[type=checkbox]:checked ~ .check { .checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
color: #000000; color: #000000;
} }
.checkbox-white input[type=checkbox]:checked ~ .check { .checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
color: #ffffff; color: #ffffff;
} }
.checkbox-inverse input[type=checkbox]:checked ~ .check { .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
color: #3f51b5; color: #3f51b5;
} }
.checkbox-primary input[type=checkbox]:checked ~ .check { .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
color: #009587; color: #009587;
} }
.checkbox-success input[type=checkbox]:checked ~ .check { .checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
color: #0f9d58; color: #0f9d58;
} }
.checkbox-info input[type=checkbox]:checked ~ .check { .checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
color: #03a9f4; color: #03a9f4;
} }
.checkbox-warning input[type=checkbox]:checked ~ .check { .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
color: #ff5722; color: #ff5722;
} }
.checkbox-danger input[type=checkbox]:checked ~ .check { .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
color: #f44336; color: #f44336;
} }
.checkbox-material-red input[type=checkbox]:checked ~ .check { .checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check {
color: #f44336; color: #f44336;
} }
.checkbox-material-pink input[type=checkbox]:checked ~ .check { .checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check {
color: #e91e63; color: #e91e63;
} }
.checkbox-material-purple input[type=checkbox]:checked ~ .check { .checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check {
color: #9c27b0; color: #9c27b0;
} }
.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check { .checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check {
color: #673ab7; color: #673ab7;
} }
.checkbox-material-indigo input[type=checkbox]:checked ~ .check { .checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check {
color: #3f51b5; color: #3f51b5;
} }
.checkbox-material-blue input[type=checkbox]:checked ~ .check { .checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check {
color: #2196f3; color: #2196f3;
} }
.checkbox-material-light-blue input[type=checkbox]:checked ~ .check { .checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check {
color: #03a9f4; color: #03a9f4;
} }
.checkbox-material-cyan input[type=checkbox]:checked ~ .check { .checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check {
color: #00bcd4; color: #00bcd4;
} }
.checkbox-material-teal input[type=checkbox]:checked ~ .check { .checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check {
color: #009688; color: #009688;
} }
.checkbox-material-green input[type=checkbox]:checked ~ .check { .checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check {
color: #4caf50; color: #4caf50;
} }
.checkbox-material-light-green input[type=checkbox]:checked ~ .check { .checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check {
color: #8bc34a; color: #8bc34a;
} }
.checkbox-material-lime input[type=checkbox]:checked ~ .check { .checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check {
color: #cddc39; color: #cddc39;
} }
.checkbox-material-yellow input[type=checkbox]:checked ~ .check { .checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check {
color: #ffeb3b; color: #ffeb3b;
} }
.checkbox-material-amber input[type=checkbox]:checked ~ .check { .checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check {
color: #ffc107; color: #ffc107;
} }
.checkbox-material-orange input[type=checkbox]:checked ~ .check { .checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check {
color: #ff9800; color: #ff9800;
} }
.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check { .checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check {
color: #ff5722; color: #ff5722;
} }
.checkbox-material-brown input[type=checkbox]:checked ~ .check { .checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check {
color: #795548; color: #795548;
} }
.checkbox-material-grey input[type=checkbox]:checked ~ .check { .checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check {
color: #9e9e9e; color: #9e9e9e;
} }
.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check { .checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check {
color: #607d8b; color: #607d8b;
} }
@-webkit-keyframes checkbox-on { @-webkit-keyframes checkbox-on {
@ -3999,12 +3990,12 @@ body .jumbotron-material-blue-grey,
width: 20px; width: 20px;
height: 20px; height: 20px;
box-shadow: 0 0 0 0, box-shadow: 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 10px inset; 0px 0px 0 10px inset;
} }
100% { 100% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -4014,12 +4005,12 @@ body .jumbotron-material-blue-grey,
width: 20px; width: 20px;
height: 20px; height: 20px;
box-shadow: 0 0 0 0, box-shadow: 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
} }
} }
@keyframes checkbox-off { @keyframes checkbox-off {
@ -4046,12 +4037,12 @@ body .jumbotron-material-blue-grey,
width: 20px; width: 20px;
height: 20px; height: 20px;
box-shadow: 0 0 0 0, box-shadow: 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 10px inset; 0px 0px 0 10px inset;
} }
100% { 100% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -4061,12 +4052,12 @@ body .jumbotron-material-blue-grey,
width: 20px; width: 20px;
height: 20px; height: 20px;
box-shadow: 0 0 0 0, box-shadow: 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
} }
} }
@-webkit-keyframes rippleOn { @-webkit-keyframes rippleOn {
@ -4342,88 +4333,88 @@ body .jumbotron-material-blue-grey,
} }
.togglebutton label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after, .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .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 { .form-horizontal .radio {
margin-bottom: 10px; margin-bottom: 10px;
@ -5328,6 +5319,10 @@ legend {
margin-top: 5px; margin-top: 5px;
margin-bottom: -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 { .list-group .list-group-item .row-content {
display: inline-block; display: inline-block;
width: calc(100% - 92px); width: calc(100% - 92px);

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

BIN
dist/fonts/RobotoDraftBold.woff vendored Normal file
View File

Binary file not shown.

BIN
dist/fonts/RobotoDraftBold.woff2 vendored Normal file
View File

Binary file not shown.

BIN
dist/fonts/RobotoDraftItalic.woff vendored Normal file
View File

Binary file not shown.

BIN
dist/fonts/RobotoDraftItalic.woff2 vendored Normal file
View File

Binary file not shown.

BIN
dist/fonts/RobotoDraftMedium.woff vendored Normal file
View File

Binary file not shown.

BIN
dist/fonts/RobotoDraftMedium.woff2 vendored Normal file
View File

Binary file not shown.

BIN
dist/fonts/RobotoDraftRegular.woff vendored Normal file
View File

Binary file not shown.

BIN
dist/fonts/RobotoDraftRegular.woff2 vendored Normal file
View File

Binary file not shown.

2
dist/js/material.js vendored
View File

@ -48,7 +48,7 @@
$((selector) ? selector : this.options.checkboxElements) $((selector) ? selector : this.options.checkboxElements)
.filter(":notmdproc") .filter(":notmdproc")
.data("mdproc", true) .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) { "togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes

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

@ -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 //# sourceMappingURL=material.min.js.map

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

@ -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":"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"}

83
index.html
View File

@ -144,6 +144,7 @@
<nav class="col-xs-3 menu"> <nav class="col-xs-3 menu">
<ul> <ul>
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li> <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><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="#material-colors">Material Colors</li>
<li class="withripple" data-target="#checkbox">Checkbox</li> <li class="withripple" data-target="#checkbox">Checkbox</li>
@ -233,6 +234,87 @@
<pre><code>bower install bootstrap-material-design</code></pre> <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>
<div class="well page" id="checkbox"> <div class="well page" id="checkbox">
<h1 class="header">Checkbox</h1> <h1 class="header">Checkbox</h1>
@ -329,6 +411,7 @@
} }
#checkbox .sample2 .checkbox { #checkbox .sample2 .checkbox {
float: right; float: right;
margin: 0;
} }
</style> </style>
</div> </div>

442
less/_checkboxes.less
View File

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

185
less/_lists.less
View File

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

2
less/_togglebutton.less
View File

@ -62,6 +62,6 @@
.variations(~" label input[type=checkbox]:first-of-type:checked + .toggle:after", background-color, @primary); .variations(~" label input[type=checkbox]:first-of-type:checked + .toggle:after", background-color, @primary);
// Ripple on // Ripple on
.generic-variations(~" label input[type=checkbox]:first-of-type:checked ~ .toggle:active:after", @primary, { .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%);
}); });
} }

5
less/_variables.less
View File

@ -86,3 +86,8 @@
@text-disabled: #a8a8a8; @text-disabled: #a8a8a8;
@background-disabled: #eaeaea; @background-disabled: #eaeaea;
// Checkboxes
@checkbox-size: 20px;
@checkbox-animation-ripple: 500ms;
@checkbox-animation-check: 0.3s;

4
package.json
View File

@ -26,6 +26,10 @@
"framework" "framework"
], ],
"homepage": "https://github.com/FezVrasta/bootstrap-material-design", "homepage": "https://github.com/FezVrasta/bootstrap-material-design",
"dependencies": {
"bootstrap": ">=3.0",
"jquery": ">=1.9.1"
},
"devDependencies": { "devDependencies": {
"bootstrap": ">=3.0", "bootstrap": ">=3.0",
"grunt": "^0.4.5", "grunt": "^0.4.5",

2
scripts/material.js
View File

@ -48,7 +48,7 @@
$((selector) ? selector : this.options.checkboxElements) $((selector) ? selector : this.options.checkboxElements)
.filter(":notmdproc") .filter(":notmdproc")
.data("mdproc", true) .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) { "togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes

2
scripts/ripples.js
View File

@ -51,7 +51,7 @@
* Verify if the user is just touching on a device and return if so * Verify if the user is just touching on a device and return if so
*/ */
if(self.isTouch() && event.type === "mousedown") { if(self.isTouch() && event.type === "mousedown") {
return false; return;
} }