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 `
Email address
- We'll never share your email with anyone else.
+ We'll never share your email with anyone else.
Password
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