@mixin mdb-form-color($label-color, $label-color-focus, $border-color) { label[class^='mdb-label'], 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); label[class^='mdb-label'], label[class*=' mdb-label'] { color: $label-color-focus; } // 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); 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, $label-as-placeholder-shim, $form-group-context: null) { $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size); $label-as-placeholder-top: ($variant-padding-y + $label-as-placeholder-shim); // -1 * $label-top: $label-as-placeholder-top - ($font-size + $variant-padding-y); $help-font-size: ($mdb-help-size-ratio * $font-size); @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 // 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, .mdb-help, input::placeholder { line-height: $variant-line-height; } // 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 //@include label-size-variant($font-size, $vertical-padding, $variant-line-height, $static-font-size, $static-line-height, $help-font-size); .form-control { // // // margin-bottom must be specified to give help-block vertical space. // // $see also form-group padding-bottom (and size variants) re: collapsible margins. These work together. // margin-bottom: $vertical-padding; } input::placeholder { font-size: $font-size; //line-height: $variant-line-height; } // generic labels used anywhere in the form .checkbox label, .radio label, label { font-size: $font-size; } // smaller focused or static size //label[class^='mdb-label'], //label[class*=' mdb-label'] { // //font-size: $static-font-size; // //margin: 16px 0 0 0; // std and lg //} // floating/placeholder default .mdb-label-floating, .mdb-label-placeholder { //@debug "top: #{$label-as-placeholder-top}"; top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding //font-size: $placeholder-font-size; } // floating focused/filled will look like static &.is-focused, .is-focused, &.is-filled, .is-filled { .mdb-label-floating { @include mdb-label-static($label-top, $static-font-size); } } // static .mdb-label-static { @include mdb-label-static($label-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; } @if $form-group-context { // form-group padding-bottom // upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom, // so the form-control margin-bottom must also be expressed as form-group padding //padding-bottom: $vertical-padding; // FIXME: need to avoid top margin http://v4-alpha.getbootstrap.com/content/reboot/#approach // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned //margin: ($label-top-margin + $static-font-size) 0 0 0; // old, try padding below //padding-top: ($label-top-margin + $static-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; } } }