Merge branch 'master' into gh-pages

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

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

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: {

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

349
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);
@ -3660,297 +3651,297 @@ body .jumbotron-material-blue-grey,
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 {
@ -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);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
dist/fonts/RobotoDraftBold.woff vendored Normal file

Binary file not shown.

BIN
dist/fonts/RobotoDraftBold.woff2 vendored Normal file

Binary file not shown.

BIN
dist/fonts/RobotoDraftItalic.woff vendored Normal file

Binary file not shown.

BIN
dist/fonts/RobotoDraftItalic.woff2 vendored Normal file

Binary file not shown.

BIN
dist/fonts/RobotoDraftMedium.woff vendored Normal file

Binary file not shown.

BIN
dist/fonts/RobotoDraftMedium.woff2 vendored Normal file

Binary file not shown.

BIN
dist/fonts/RobotoDraftRegular.woff vendored Normal file

Binary file not shown.

BIN
dist/fonts/RobotoDraftRegular.woff2 vendored Normal 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

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

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

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>

View File

@ -2,63 +2,53 @@
padding-top: 20px; padding-top: 20px;
} }
.checkbox { .checkbox {
transform: translateZ(0); // Force 3d rendering
label { label {
padding-left: 10px;
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 {
// 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; display: block;
position: absolute; position: absolute;
left: 0;
content: ""; content: "";
background-color: rgba(0,0,0,.84); background-color: rgba(0,0,0,.84);
left: -8px; height: @checkbox-size;
top: -11px; width: @checkbox-size;
height: 50px;
width: 50px;
border-radius: 100%; border-radius: 100%;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
margin: 0; margin: 0;
} transform: scale(2.3);
input[type=checkbox]:not(:checked) ~ .ripple {
animation: rippleOff 500ms;
}
input[type=checkbox]:checked ~ .ripple {
animation: rippleOn 500ms;
} }
.check { .check {
position: relative;
display: inline-block; display: inline-block;
width: 20px; width: @checkbox-size;
height: 20px; height: @checkbox-size;
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;
}
.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; z-index: 1;
opacity: 0;
margin: 0;
} }
.check:before { .check:before {
position: absolute; position: absolute;
@ -76,23 +66,15 @@
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;
animation: checkbox-off 0.3s linear forwards; animation: checkbox-off @checkbox-animation-check forwards;
} }
} }
input[type=checkbox]:focus + .checkbox-material .check:after {
// Hide native checkbox
input[type=checkbox] { opacity: 0; }
input[type=checkbox]:focus ~ .check:after {
opacity: 0.2; opacity: 0.2;
} }
input[type=checkbox]:checked + .checkbox-material .check:before {
input[type=checkbox]:checked ~ .check {
}
input[type=checkbox]:checked ~ .check:before {
box-shadow: box-shadow:
0 0 0 10px, 0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
@ -100,37 +82,37 @@
0px 32px 0 20px, 0px 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px; 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 // Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after { input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff 500ms linear forwards; animation: rippleOff @checkbox-animation-ripple 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]: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);
} }

View File

@ -41,6 +41,9 @@
margin-right: -7px; margin-right: -7px;
margin-top: 5px; margin-top: 5px;
margin-bottom: -5px; margin-bottom: -5px;
.checkbox-material {
left: -10px;
}
} }
} }
.row-content { .row-content {

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%);
}); });
} }

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;

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",

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

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;
} }