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

nesting selectors for better readability and removing unused code

Browse Source
This commit is contained in:
TJ 2016-05-08 12:24:16 +05:30
parent eb92b726e4
commit d1041d959b
3 changed files with 25 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
less/_checkboxes.less
View File

@ -30,6 +30,7 @@ label.checkbox-inline {
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome) &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block; display: block;
position: absolute; position: absolute;
top:-5px;
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0, 0, 0, .84); background-color: rgba(0, 0, 0, .84);
@ -78,28 +79,32 @@ label.checkbox-inline {
opacity: 0.2; opacity: 0.2;
} }
&:focus:checked{ &:focus{
& + .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){ &:checked{
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOff 500ms; 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
}
} }
& + .checkbox-material .check:before {
animation: checkbox-off @mdb-checkbox-animation-check forwards; &:not(:checked) {
} & + .checkbox-material:before {
& + .checkbox-material .check:after { animation: rippleOff 500ms;
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck }
& + .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
}
} }
} }
@ -120,26 +125,10 @@ 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;
}
& + .checkbox-material:before {
//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
}
}
&:not(:checked) {
& + .checkbox-material:before {
//animation: rippleOff 500ms;
}
& + .checkbox-material .check:after {
//animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
} }
} }
} }
@ -158,30 +147,6 @@ label.checkbox-inline {
} }
} }
// 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 {
.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 { @keyframes checkbox-on {
0% { 0% {
box-shadow: box-shadow:

9
less/_radios.less
View File

@ -91,15 +91,6 @@
} }
} }
// Prevent ripple effect on page load - removed for supporting animation without .form-group
/*.is-focused {
.radio, label.radio-inline {
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
}
}*/
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;

4
scripts/material.js
View File

@ -165,10 +165,6 @@
var validate = this.options.validate; var validate = this.options.validate;
$(document) $(document)
/* 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) { .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");