mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
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:
parent
bc6bd967d0
commit
2d754b0716
|
@ -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:
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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");
|
||||
|
|
Loading…
Reference in New Issue
Block a user