diff --git a/scss/_checkboxes.scss b/scss/_checkboxes.scss index ad1ff400..e9e6a80c 100644 --- a/scss/_checkboxes.scss +++ b/scss/_checkboxes.scss @@ -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; diff --git a/scss/_forms.scss b/scss/_forms.scss index 8dd63123..1042f979 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -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 { diff --git a/scss/_radios.scss b/scss/_radios.scss index 13bddc9b..7fb8bbe2 100644 --- a/scss/_radios.scss +++ b/scss/_radios.scss @@ -20,8 +20,6 @@ label.radio-inline, position: relative; padding-left: 45px; - @include mdb-label-color-inner-focus(); - cursor: pointer; span { diff --git a/scss/_switch.scss b/scss/_switch.scss index dbd55345..8376c30c 100644 --- a/scss/_switch.scss +++ b/scss/_switch.scss @@ -5,7 +5,6 @@ } label { cursor: pointer; - @include mdb-label-color-inner-focus(); // Hide original checkbox input[type=checkbox] { diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 25982807..48747a9c 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -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; - } - } -} - -