mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-25 19:14:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

Resolves #766 Toggle button color variation incorrect

Browse Source
This commit is contained in:
Kevin Ross 2015-12-08 10:59:21 -06:00
parent c9898040c5
commit 0f8f7d0923
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
less/_togglebutton.less
View File

@ -64,16 +64,17 @@
}
}
& label input[type=checkbox]:checked {
& + .toggle {
// set bg when checked
input[type=checkbox]:checked {
+ .toggle {
background-color: fade(@brand-primary, 50%); // Switch bg on
}
& + .toggle:after {
+ .toggle:after {
background-color: @brand-primary; // Handle on
}
& + .toggle:active:after {
+ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@brand-primary, 10%); // Ripple on
}
}

21
sass/_togglebutton.scss
View File

@ -66,16 +66,29 @@
}
}
& label input[type=checkbox]:checked {
& + .toggle {
//// Switch bg on
//.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, {
// background-color: rgba($material-color, (50/100));
//});
//// Handle on
//.variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
//// Ripple on
//.generic-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary, {
// box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100));
//});
// set bg when checked
input[type=checkbox]:checked {
+ .toggle {
background-color: rgba($brand-primary, (50/100)); // Switch bg on
}
& + .toggle:after {
+ .toggle:after {
background-color: $brand-primary; // Handle on
}
& + .toggle:active:after {
+ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
}
}