diff --git a/docs/material-design/forms.md b/docs/material-design/forms.md index d3bd205a..1292238d 100644 --- a/docs/material-design/forms.md +++ b/docs/material-design/forms.md @@ -19,7 +19,7 @@ Form controls flavored by Material Design for Bootstrap customizations such as `
- We'll never share your email with anyone else. + We'll never share your email with anyone else.
diff --git a/scss/_checkboxes.scss b/scss/_checkboxes.scss index 5a02714a..ad1ff400 100644 --- a/scss/_checkboxes.scss +++ b/scss/_checkboxes.scss @@ -6,7 +6,7 @@ label.checkbox-inline, padding-left: 0; // Reset for Bootstrap rule cursor: pointer; - @include mdb-label-color-toggle-focus(); + @include mdb-label-color-inner-focus(); // Hide native checkbox input[type=checkbox] { diff --git a/scss/_forms.scss b/scss/_forms.scss index 68b7328e..962ffce4 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,3 +1,4 @@ + @include mdb-form-color($mdb-label-color, $input-border-color); @include mdb-form-control-validation(warning, $brand-warning); @include mdb-form-control-validation(danger, $brand-danger); @@ -53,6 +54,22 @@ } // End: Focus underline animation ================================= +// Help blocks (not in v4) +// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good. +// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions? +// +.mdb-help { + position: absolute; + display: none; + font-size: 80%; + font-weight: normal; + @extend .text-muted; + + .mdb-form-group.is-focused & { + display: block; + } +} + // ----- // Labels with mdb-form-group signalled state // @@ -79,9 +96,8 @@ } // hint to browser for optimization - // TODO: evaluate effectiveness - looking for community feedback &.label-floating label.control-label { - will-change: left, top, contents; + will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback } // hide label-placeholders when the field is not empty @@ -91,30 +107,26 @@ } } - // Help blocks (not in v4) - position: absolute approach - uses no vertical space, text wrapping - not so good. - //.help-block { - // position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur - // display: none; - //} - - // mdb-form-group is-focused display &.is-focused { - - label, + label, // this is a control-label, but often times (too often) not marked as such so work around bad markup label.control-label { color: $brand-primary; + + label { // inner label + color: $mdb-label-color-inner-focus; + } } &.label-placeholder { label, label.control-label { - //color: $mdb-input-placeholder-color; + color: $mdb-label-color; } } - //.help-block { - // display: block; - //} + .mdb-help { + color: $mdb-label-color-inner-focus; + } } } diff --git a/scss/_radios.scss b/scss/_radios.scss index de5dfc35..13bddc9b 100644 --- a/scss/_radios.scss +++ b/scss/_radios.scss @@ -20,7 +20,7 @@ label.radio-inline, position: relative; padding-left: 45px; - @include mdb-label-color-toggle-focus(); + @include mdb-label-color-inner-focus(); cursor: pointer; diff --git a/scss/_switch.scss b/scss/_switch.scss index a1ed89db..dbd55345 100644 --- a/scss/_switch.scss +++ b/scss/_switch.scss @@ -5,7 +5,7 @@ } label { cursor: pointer; - @include mdb-label-color-toggle-focus(); + @include mdb-label-color-inner-focus(); // Hide original checkbox input[type=checkbox] { diff --git a/scss/_variables.scss b/scss/_variables.scss index e9ae1f2f..afc39dac 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,10 +1,18 @@ @import "variables/colors"; -$mdb-text-color-primary: rgba($black, 0.87) !default; -$mdb-text-color-light: rgba($white, 0.84) !default; // redefine ? TODO: do we need this mdb variant? This is used as $body-color -$gray-dark: $mdb-text-color-primary; +$gray-light: rgba($black, 0.26) !default; +$gray: rgba($black, .54) !default; +$gray-dark: rgba($black, 0.87) !default; + +$mdb-text-color-light: rgba($white, 0.84) !default; +$mdb-text-color-primary: $gray-dark !default; + + +$mdb-label-color: $gray-light !default; +$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary + //--- // Customized BS variables @@ -46,8 +54,6 @@ $contrast-factor: 40% !default; // inputs //$mdb-input-placeholder-color: #BDBDBD !default; -$mdb-label-color: rgba($black, 0.26) !default; -$mdb-label-color-toggle-focus: rgba($black, .54) !default; //$mdb-input-underline-color: #d2d2d2 !default; @@ -82,7 +88,7 @@ $mdb-checkbox-size: 20px !default; $mdb-checkbox-animation-ripple: 500ms !default; $mdb-checkbox-animation-check: 0.3s !default; $mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default; -$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default; +$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default; // Popovers and Popups $mdb-popover-background: rgba(101, 101, 101, 0.9) !default; @@ -92,7 +98,7 @@ $mdb-popover-color: #ececec !default; $mdb-dropdown-font-size: 16px !default; // Radio: -$mdb-radio-color-off: $mdb-label-color-toggle-focus !default; +$mdb-radio-color-off: $mdb-label-color-inner-focus !default; $mdb-radio-color-on: $brand-primary !default; // Buttons: diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 884d31ca..303d1719 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -36,16 +36,24 @@ //margin: 16px 0 0 0; // std and lg } - .help-block { - //margin-top: 0; // allow the input margin to set-off the top of the help-block - //font-size: $help-block-font-size; - } + //.mdb-help { + // margin-top: 0; // allow the input margin to set-off the top of the help-block + // font-size: $help-block-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; @@ -58,17 +66,13 @@ .input-group-addon { border-color: $border-color; } - - label { - color: $label-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 focus animation draws attention + // override BS and keep the border-color normal/grey so that overlayed focus animation draws attention .form-control { border-color: $input-border-color; } @@ -140,7 +144,7 @@ } } -@mixin mdb-label-color-toggle-focus() { +@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; @@ -148,7 +152,7 @@ // on focus just darken the specific labels, do not turn them to the brand-primary &:hover, &:focus { - color: $mdb-label-color-toggle-focus; + color: $mdb-label-color-inner-focus; } // correct the above focus color for disabled items