Ripple effect for radio and checkbox with/without formgroup (#996)

* adding ripple support for radio without form group
* adding ripple support for checkbox outside .formgroup
* nesting selectors for better readability and removing unused code
This commit is contained in:
tilwinjoy 2016-05-09 20:26:11 +05:30 committed by Kevin Ross
parent bc6bd967d0
commit 2d754b0716
3 changed files with 35 additions and 58 deletions

View File

@ -30,6 +30,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);
@ -69,7 +70,6 @@ label.checkbox-inline {
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
animation: checkbox-off;
}
}
@ -78,7 +78,36 @@ label.checkbox-inline {
&:focus + .checkbox-material .check:after {
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
@ -96,26 +125,10 @@ label.checkbox-inline {
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
}
}
}
@ -134,30 +147,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

@ -57,11 +57,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] {
@ -90,15 +91,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;
@ -110,7 +102,6 @@
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;

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");