mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 08:29:53 +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

42
less/_checkboxes.less
View File

@ -69,7 +69,6 @@ label.checkbox-inline {
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
animation: checkbox-off;
} }
} }
@ -79,6 +78,31 @@ label.checkbox-inline {
opacity: 0.2; 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 { &:checked {
// FIXME: once working - combine further to reduce code // FIXME: once working - combine further to reduce code
@ -96,26 +120,26 @@ label.checkbox-inline {
0px 32px 0 20px, 0px 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px; 20px -12px 0 11px;
animation: checkbox-on @mdb-checkbox-animation-check forwards; //animation: checkbox-on @mdb-checkbox-animation-check forwards;
} }
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOn; //animation: rippleOn 500ms;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
//background-color: @brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed //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) { &:not(:checked) {
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOff; //animation: rippleOff 500ms;
} }
& + .checkbox-material .check:after { & + .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 // Prevent checkbox animation and ripple effect on page load - removed in favour of supporting animation without .form-group
.is-focused { /*.is-focused {
.checkbox, .checkbox,
label.checkbox-inline { label.checkbox-inline {
.checkbox-material { .checkbox-material {
@ -156,7 +180,7 @@ label.checkbox-inline {
} }
} }
} }
} }*/
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {

5
scripts/material.js
View File

@ -165,9 +165,10 @@
var validate = this.options.validate; var validate = this.options.validate;
$(document) $(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(); $(this).blur();
}) })*/
.on("keydown paste", ".form-control", function (e) { .on("keydown paste", ".form-control", function (e) {
if (_isChar(e)) { if (_isChar(e)) {
$(this).closest(".form-group").removeClass("is-empty"); $(this).closest(".form-group").removeClass("is-empty");