mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-26 03:24:05 +03:00
improved material checkboxes (CHANGED MARKUP)
This commit is contained in:
FezVrasta
parent
627f24c272
commit
a0e4a91984
|
|
@ -215,7 +215,7 @@ module.exports = function(grunt) {
|
|||
},
|
||||
less: {
|
||||
files:["less/**/*.less"],
|
||||
tasks: ["default"]
|
||||
tasks: ["material:less"]
|
||||
},
|
||||
livereload: {
|
||||
options: {
|
||||
|
|
|
|||
3999
dist/css/material-fullpalette.css
vendored
3999
dist/css/material-fullpalette.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material-fullpalette.css.map
vendored
2
dist/css/material-fullpalette.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
2
dist/css/material-fullpalette.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css.map
vendored
2
dist/css/material-fullpalette.min.css.map
vendored
File diff suppressed because one or more lines are too long
285
dist/css/material.css
vendored
285
dist/css/material.css
vendored
|
|
@ -3584,66 +3584,55 @@ body .jumbotron-material-blue-grey,
|
|||
.form-horizontal .checkbox {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.checkbox label {
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.checkbox label span {
|
||||
display: block;
|
||||
.checkbox input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
transition-duration: 0.2s;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.checkbox label .ripple {
|
||||
.checkbox .checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
.checkbox .checkbox-material:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
left: -8px;
|
||||
top: -11px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
-webkit-transform: scale(2.3);
|
||||
-ms-transform: scale(2.3);
|
||||
transform: scale(2.3);
|
||||
}
|
||||
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:checked ~ .ripple {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.checkbox label .check {
|
||||
.checkbox .checkbox-material .check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: -3px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.checkbox label .check:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
left: -5px;
|
||||
top: -15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.checkbox label .check:before {
|
||||
.checkbox .checkbox-material .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
|
|
@ -3660,297 +3649,297 @@ body .jumbotron-material-blue-grey,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
-webkit-animation: checkbox-off 0.3s linear forwards;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
0 0 0 0 inset;
|
||||
-webkit-animation: checkbox-off 0.3s forwards;
|
||||
animation: checkbox-off 0.3s forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
opacity: 0;
|
||||
}
|
||||
.checkbox input[type=checkbox]:focus ~ .check:after {
|
||||
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
|
||||
-webkit-animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
-webkit-animation: checkbox-on 0.3s forwards;
|
||||
animation: checkbox-on 0.3s forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms linear forwards;
|
||||
animation: rippleOn 500ms linear forwards;
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material:before {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.checkbox:not(:hover) input[type=checkbox] ~ .check:before,
|
||||
.checkbox:not(:hover) input[type=checkbox] ~ .check:after {
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOff 500ms forwards;
|
||||
animation: rippleOff 500ms forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
.checkbox input[type=checkbox][disabled] ~ .circle {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOn 500ms forwards;
|
||||
animation: rippleOn 500ms forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
.checkbox input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled] ~ .check:after {
|
||||
.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after,
|
||||
.checkbox-default input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #009587;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check:after {
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:before,
|
||||
.checkbox-default input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #009587;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #0f9d58;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check:before {
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #607d8b;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check,
|
||||
.checkbox-default input[type=checkbox]:checked ~ .check {
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #009587;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #0f9d58;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked ~ .check {
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #607d8b;
|
||||
}
|
||||
@-webkit-keyframes checkbox-on {
|
||||
|
|
|
|||
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/js/material.js
vendored
2
dist/js/material.js
vendored
|
|
@ -48,7 +48,7 @@
|
|||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
.after("<span class=checkbox-material><span class=check></span></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(a(this).attr("data-hint")||b.hasClass("floating-label")){if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&"undefined"!=typeof b[0].checkValidity&&b[0].checkValidity()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&a(document).arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
|
||||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(a(this).attr("data-hint")||b.hasClass("floating-label")){if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()&&"undefined"!=typeof b[0].checkValidity&&b[0].checkValidity()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input").not("[type=file]");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})},init:function(){a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&this.input(),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&this.autofill(),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&a(document).arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&a(document).arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&a(document).arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&a(document).arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&a(document).arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
|
||||
//# sourceMappingURL=material.min.js.map
|
||||
2
dist/js/material.min.js.map
vendored
2
dist/js/material.min.js.map
vendored
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","fn","jQuery"],"mappings":"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"}
|
||||
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","not","init","fn","jQuery"],"mappings":"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"}
|
||||
|
|
@ -411,6 +411,7 @@
|
|||
}
|
||||
#checkbox .sample2 .checkbox {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,63 +2,51 @@
|
|||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
transform: translateZ(0); // Force 3d rendering
|
||||
label {
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// 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;
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.ripple {
|
||||
top: 3px;
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
left: -8px;
|
||||
top: -11px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
height: @checkbox-size;
|
||||
width: @checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) ~ .ripple {
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
input[type=checkbox]:checked ~ .ripple {
|
||||
animation: rippleOn 500ms;
|
||||
transform: scale(2.3);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: -3px;
|
||||
margin-right: 11px;
|
||||
}
|
||||
.check:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: @lightbg-text;
|
||||
left: -5px;
|
||||
top: -15px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
|
|
@ -76,23 +64,15 @@
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] { opacity: 0; }
|
||||
|
||||
|
||||
input[type=checkbox]:focus ~ .check:after {
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .check {
|
||||
}
|
||||
input[type=checkbox]:checked ~ .check:before {
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
|
|
@ -100,37 +80,37 @@
|
|||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on @checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff @checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn @checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
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
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
input[type=checkbox][disabled] ~ .circle {
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] ~ .check:after {
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: @lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked ~ .check:before", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked ~ .check", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -86,3 +86,8 @@
|
|||
|
||||
@text-disabled: #a8a8a8;
|
||||
@background-disabled: #eaeaea;
|
||||
|
||||
// Checkboxes
|
||||
@checkbox-size: 20px;
|
||||
@checkbox-animation-ripple: 500ms;
|
||||
@checkbox-animation-check: 0.3s;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
.after("<span class=checkbox-material><span class=check></span></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user