@mixin mdb-form-color($label-color, $label-color-focus, $border-color) { [class^='mdb-label'], [class*=' mdb-label'] { color: $label-color; } // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention .form-control { border-color: $input-border-color; } .is-focused, // may or may not be a form-group or mdb-form-group &.is-focused { // on focus set borders and labels to the validation color // Use the BS provided mixin for the bulk of the color @include form-control-validation($label-color); [class^='mdb-label'], [class*=' mdb-label'] { color: $label-color-focus; } .mdb-label-placeholder { color: $label-color; // keep the placeholder color } // Set the border and box shadow on specific inputs to match .form-control { border-color: $border-color; } // Set validation states also for addons .input-group-addon { border-color: $border-color; } // underline animation color on focus .mdb-form-control-decorator { &::before, &::after { //@include gradient-vertical($label-color-focus, $input-border-color); // seems to look better solid. other comments? background-color: $label-color-focus; } } .mdb-help { color: $mdb-label-color-inner-focus; } } } // must be broken out for reuse - webkit selector breaks firefox @mixin mdb-label-static($label-top, $static-font-size) { top: $label-top; left: 0; // must repeat because the previous (more generic) selectors font-size: $static-font-size; } @mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) { $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size); $help-font-size: ($mdb-help-size-ratio * $font-size); $label-static-top: $label-top-margin; $label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y; @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; //Label height: 72dp //Padding above label text: 16dp //Padding between label and input text: 8dp //Padding below input text (including divider): 16dp //Padding below text divider: 8dp @if $form-group-context { // Create a space at the top of the mdb-form-group for the label. // The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding). padding-top: ($label-top-margin + $static-font-size); // note: bottom-margin of this is determined by $spacer. @see _spacer.scss } // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space // from the default line-height of 1.5 .form-control, label, input::placeholder { line-height: $variant-line-height; } // Note: this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg input::placeholder { font-size: $font-size; } // generic labels used anywhere in the form .checkbox label, .radio label, label { font-size: $font-size; } // floating/placeholder default (no focus) .mdb-label-floating, .mdb-label-placeholder { //@debug "top: #{$label-as-placeholder-top}"; top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding } // floating focused/filled will look like static &.is-focused, .is-focused, &.is-filled, .is-filled { .mdb-label-floating { @include mdb-label-static($label-static-top, $static-font-size); } } // static .mdb-label-static { @include mdb-label-static($label-static-top, $static-font-size); } // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 //input:-webkit-autofill ~ .mdb-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary // @include mdb-label-static($label-top, $static-font-size, $static-line-height); //} .mdb-help { margin-top: 0; // allow the input margin to set-off the top of the help-block 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; } } }