mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 00:19:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

adding ripple support for checkbox outside .formgroup

Browse Source
This commit is contained in:
TJ 2016-05-07 17:12:53 +05:30
parent d42d6f20fe
commit eb92b726e4
2 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
less/_checkboxes.less
View File

@ -69,7 +69,6 @@ label.checkbox-inline {
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
animation: checkbox-off;
}
}
@ -78,7 +77,32 @@ 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
}
}
&:focus: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 +120,26 @@ label.checkbox-inline {
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on @mdb-checkbox-animation-check forwards;
//animation: checkbox-on @mdb-checkbox-animation-check forwards;
}
& + .checkbox-material:before {
animation: rippleOn;
//animation: rippleOn 500ms;
}
& + .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
//animation: rippleOn @mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff;
//animation: rippleOff 500ms;
}
& + .checkbox-material .check:after {
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
//animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
}
@ -134,8 +158,8 @@ label.checkbox-inline {
}
}
// Prevent checkbox animation and ripple effect on page load
.is-focused {
// Prevent checkbox animation and ripple effect on page load - removed in favour of supporting animation without .form-group
/*.is-focused {
.checkbox,
label.checkbox-inline {
.checkbox-material {
@ -156,7 +180,7 @@ label.checkbox-inline {
}
}
}
}
}*/
@keyframes checkbox-on {
0% {

5
scripts/material.js
View File

@ -165,9 +165,10 @@
var validate = this.options.validate;
$(document)
.on("change", ".checkbox input[type=checkbox]", function () {
/* removed in favour of supporting animation without .form-group using :focus */
/*.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");