@mixin mdb-disabled() { fieldset[disabled][disabled] &, &.disabled, &:disabled, &[disabled] { @content } } @mixin mdb-selection-color() { .radio label, .radio-inline, .checkbox label, .checkbox-inline, .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 @include hover-focus-active() { //&:hover, //&:focus { color: $mdb-label-color-inner-focus; } // correct the above focus color for disabled items label:has(input[type=radio][disabled]), // css 4 which is unlikely to work for a while, but no other pure css way. label:has(input[type=checkbox][disabled]), // css 4 fieldset[disabled] & { &, &:hover, &:focus { color: $mdb-label-color; } } } } // Style for disabled inputs OLD, use color approach with opacity built in, see radios //fieldset[disabled] &, //fieldset[disabled] & input[type=checkbox], //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before, //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check, //input[type=checkbox][disabled] + .mdb-radio-outer-circle { // opacity: 0.5; //} } @mixin mdb-radio-color($color) { ~ .mdb-radio-inner-circle { background-color: $color; } ~ .mdb-radio-outer-circle { border-color: $color; } } @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 //margin-bottom: (1.5 * $help-font-size); } @else { // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that // any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups .radio, label.radio-inline, .checkbox, label.checkbox-inline, .switch { padding-top: $spacer-y; } } // 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; } .radio label, label.radio-inline, .checkbox label, label.checkbox-inline, .switch label { line-height: $line-height; // keep the same line height for radios and checkboxes } // 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; } }