mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-20 13:40:42 +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 8f541fa58c
commit 82172a4c55
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 { // set bg when checked
& + .toggle { input[type=checkbox]:checked {
+ .toggle {
background-color: fade(@brand-primary, 50%); // Switch bg on background-color: fade(@brand-primary, 50%); // Switch bg on
} }
& + .toggle:after { + .toggle:after {
background-color: @brand-primary; // Handle on 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 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 { //// Switch bg on
& + .toggle { //.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 background-color: rgba($brand-primary, (50/100)); // Switch bg on
} }
& + .toggle:after { + .toggle:after {
background-color: $brand-primary; // Handle on 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 box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
} }
} }