This commit is contained in:
Kevin Ross 2016-05-09 10:37:53 -05:00
parent 2d754b0716
commit b0d3d00017
9 changed files with 91 additions and 132 deletions

View File

@ -859,6 +859,7 @@ label.checkbox-inline .checkbox-material {
label.checkbox-inline .checkbox-material:before {
display: block;
position: absolute;
top: -5px;
left: 0;
content: "";
background-color: rgba(0, 0, 0, 0.84);
@ -909,14 +910,47 @@ label.checkbox-inline .checkbox-material .check:before {
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
-webkit-animation: checkbox-off;
-o-animation: checkbox-off;
animation: checkbox-off;
}
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2;
}
.checkbox input[type=checkbox]:focus:checked + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:before {
-webkit-animation: checkbox-on 0.3s forwards;
-o-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards;
-o-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards;
-o-animation: rippleOff 500ms forwards;
animation: rippleOff 500ms forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check {
color: #009688;
@ -927,33 +961,6 @@ label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:b
color: #009688;
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 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 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s forwards;
-o-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn;
-o-animation: rippleOn;
animation: rippleOn;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards;
-o-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff;
-o-animation: rippleOff;
animation: rippleOff;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards;
-o-animation: rippleOff 500ms forwards;
animation: rippleOff 500ms forwards;
}
fieldset[disabled] .checkbox,
fieldset[disabled] label.checkbox-inline,
@ -975,24 +982,6 @@ label.checkbox-inline input[type=checkbox][disabled] + .checkbox-material .check
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.is-focused .checkbox .checkbox-material .check:before,
.is-focused label.checkbox-inline .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards;
}
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before,
.is-focused label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.is-focused .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before,
.is-focused label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
@-webkit-keyframes checkbox-on {
0% {
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
@ -1426,17 +1415,17 @@ label.radio-inline .check:after {
-webkit-transform: scale3d(1.5, 1.5, 1);
transform: scale3d(1.5, 1.5, 1);
}
.radio input[type=radio]:not(:checked) ~ .check:after,
label.radio-inline input[type=radio]:not(:checked) ~ .check:after {
.radio input[type=radio]:focus:not(:checked) ~ .check:after,
label.radio-inline input[type=radio]:focus:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.radio input[type=radio]:checked ~ .check:after,
label.radio-inline input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn;
-o-animation: rippleOn;
animation: rippleOn;
.radio input[type=radio]:focus:checked ~ .check:after,
label.radio-inline input[type=radio]:focus:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.radio input[type=radio],
label.radio-inline input[type=radio] {
@ -1492,12 +1481,6 @@ label.radio-inline input[type=radio][disabled] ~ .circle {
.theme-dark label.radio-inline input[type=radio][disabled] ~ .circle {
border-color: #ffffff;
}
.is-focused .radio input[type=radio]:checked ~ .check:after,
.is-focused label.radio-inline input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
@keyframes rippleOn {
0% {
opacity: 0;

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

3
dist/js/material.js vendored
View File

@ -165,9 +165,6 @@
var validate = this.options.validate;
$(document)
.on("change", ".checkbox input[type=checkbox]", function () {
$(this).blur();
})
.on("keydown paste", ".form-control", function (e) {
if (_isChar(e)) {
$(this).closest(".form-group").removeClass("is-empty");

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,6 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
.form-group {
}
.checkbox label,
label.checkbox-inline {
@ -34,6 +32,7 @@ label.checkbox-inline {
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block;
position: absolute;
top:-5px;
left: 0;
content: "";
background-color: rgba(0, 0, 0, .84);
@ -73,7 +72,6 @@ label.checkbox-inline {
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
animation: checkbox-off;
}
}
@ -83,6 +81,35 @@ label.checkbox-inline {
opacity: 0.2;
}
&:focus{
&:checked{
& + .checkbox-material:before {
animation: rippleOn 500ms;
}
& + .checkbox-material .check:before {
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material .check:after {
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff 500ms;
}
& + .checkbox-material .check:before {
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
}
&:checked {
// FIXME: once working - combine further to reduce code
@ -93,32 +120,17 @@ label.checkbox-inline {
& + .checkbox-material .check:before {
color: $mdb-checkbox-checked-color;
box-shadow: 0 0 0 10px,
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material:before {
animation: rippleOn;
}
& + .checkbox-material .check:after {
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff;
}
& + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
}
@ -137,30 +149,6 @@ label.checkbox-inline {
}
}
// Prevent checkbox animation and ripple effect on page load
.is-focused {
.checkbox,
label.checkbox-inline {
.checkbox-material {
.check:before {
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
}
input[type=checkbox] {
&:checked {
& + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple;
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff $mdb-checkbox-animation-ripple;
}
}
}
}
}
@keyframes checkbox-on {
0% {
box-shadow:

View File

@ -59,11 +59,12 @@
margin: 0;
transform: scale3d(1.5, 1.5, 1);
}
input[type=radio]:not(:checked) ~ .check:after {
input[type=radio]:focus:not(:checked) ~ .check:after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
animation: rippleOn;
input[type=radio]:focus:checked ~ .check:after {
animation: rippleOn 500ms;
}
input[type=radio] {
@ -92,15 +93,6 @@
}
}
// Prevent ripple effect on page load
.is-focused {
.radio, label.radio-inline {
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -112,7 +104,6 @@
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;