// must be broken out for reuse - webkit selector breaks firefox @mixin label-static($label-top, $static-font-size, $static-line-height) { label { top: $label-top; left: 0; // must repeat because the selector above is more specific than the general label sizing font-size: $static-font-size; line-height: $static-line-height; } } @mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size) { .form-control { @include mdb-input-placeholder { font-size: $placeholder-font-size; line-height: $line-height; } // // // 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; } // generic labels used anywhere in the form (not control-label) .checkbox label, .radio label, label { font-size: $placeholder-font-size; line-height: $line-height; } // smaller focused or static size label { font-size: $static-font-size; line-height: $static-line-height; //margin: 16px 0 0 0; // std and lg } .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-form-color($label-color, $border-color) { // This may or may not be already in the context of an mdb-form-group depending on if it is // default or comes from a validation state // Use the BS provided mixin for the bulk of the color @include form-control-validation($label-color); label { color: $label-color; } // Set the border and box shadow on specific inputs to match .form-control { border-color: $border-color; @include mdb-input-placeholder { color: $label-color; } } // Set validation states also for addons .input-group-addon { border-color: $border-color; } } @mixin mdb-form-control-validation($name, $color) { // e.g. has-danger &.has-#{$name} { // override BS and keep the border-color normal/grey so that overlayed focus animation draws attention .form-control { border-color: $input-border-color; } &.is-focused { // on focus set borders and labels to the validation color @include mdb-form-color($color, $color); // underline animation color on focus .mdb-form-control-decorator { &::before, &::after { @include gradient-vertical($color, $input-border-color); } } } } } @mixin mdb-form-group-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $context: null) { $static-font-size: ($mdb-label-static-size-ratio * $font-size) !default; $static-line-height: ($mdb-label-static-size-ratio * $line-height) !default; $label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default; $label-top: $label-as-placeholder-top - ($font-size + $vertical-padding) !default; $help-font-size: ($mdb-help-size-ratio * $font-size) !default; $help-line-height: ($mdb-help-size-ratio * $line-height) !default; @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} context: #{$context} "; // this is outside a form-group @if not $context { @include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size); } @else { // this is inside 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, $line-height, $static-font-size, $static-line-height, $help-font-size); // 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); // placeholder positioning &.label-floating, &.label-placeholder { label, label { @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; //line-height: $line-height; } } // static, focused, or autofill floating labels &.label-static, &.label-floating.is-focused, &.label-floating:not(.is-empty) { @include label-static($label-top, $static-font-size, $static-line-height); } // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 &.label-floating input.form-control:-webkit-autofill ~ label { @include label-static($label-top, $static-font-size, $static-line-height); } } } @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; } } } //// Placeholder text @mixin mdb-input-placeholder() { &::placeholder { @content; } }