reuse mdb-toggle-color all in one place

This commit is contained in:
Kevin Ross 2015-12-14 12:14:41 -06:00
parent 0a489cf35d
commit d80aee2371
5 changed files with 28 additions and 29 deletions

View File

@ -6,8 +6,6 @@ label.checkbox-inline,
padding-left: 0; // Reset for Bootstrap rule
cursor: pointer;
@include mdb-label-color-inner-focus();
// Hide native checkbox
input[type=checkbox] {
position: absolute;

View File

@ -71,6 +71,7 @@ form {
// -----
// State coloring: default, success, info, warning, danger
//
@include mdb-toggle-color();
@include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
.has-success {
@ -160,10 +161,7 @@ select {
// z-index: 100;
//}
// I don't think this was in use...
//legend {
// border-bottom: 0;
//}
//
//
//.form-horizontal {

View File

@ -20,8 +20,6 @@ label.radio-inline,
position: relative;
padding-left: 45px;
@include mdb-label-color-inner-focus();
cursor: pointer;
span {

View File

@ -5,7 +5,6 @@
}
label {
cursor: pointer;
@include mdb-label-color-inner-focus();
// Hide original checkbox
input[type=checkbox] {

View File

@ -1,3 +1,29 @@
@mixin mdb-toggle-color() {
.radio label,
.checkbox label,
.switch label {
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
color: $mdb-label-color;
.is-focused & {
// form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
color: $mdb-label-color;
// on focus just darken the specific labels, do not turn them to the brand-primary
&:hover,
&:focus {
color: $mdb-label-color-inner-focus;
}
// correct the above focus color for disabled items
fieldset[disabled] & {
color: $mdb-label-color;
}
}
}
}
@mixin mdb-form-color($label-color, $label-color-focus, $border-color) {
[class^='mdb-label'],
@ -132,23 +158,3 @@
font-size: $help-font-size;
}
}
@mixin mdb-label-color-inner-focus() {
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
.mdb-form-group.is-focused & {
color: $mdb-label-color;
// on focus just darken the specific labels, do not turn them to the brand-primary
&:hover,
&:focus {
color: $mdb-label-color-inner-focus;
}
// correct the above focus color for disabled items
fieldset[disabled] & {
color: $mdb-label-color;
}
}
}