mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 00:00:41 +03:00
reuse mdb-toggle-color all in one place
This commit is contained in:
parent
0a489cf35d
commit
d80aee2371
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -20,8 +20,6 @@ label.radio-inline,
|
|||
position: relative;
|
||||
padding-left: 45px;
|
||||
|
||||
@include mdb-label-color-inner-focus();
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
@include mdb-label-color-inner-focus();
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user