diff --git a/docs/material-design/forms.md b/docs/material-design/forms.md index 1292238d..de72614e 100644 --- a/docs/material-design/forms.md +++ b/docs/material-design/forms.md @@ -13,19 +13,19 @@ Bootstrap provides several form control styles, layout options, and custom compo ## Form controls -Form controls flavored by Material Design for Bootstrap customizations such as `label-floating`. +Form controls flavored by Material Design for Bootstrap customizations such as `mdb-label-floating`. {% example html %}
-
+
We'll never share your email with anyone else.
-
+
-
+
-
+
-
+
-
+
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. @@ -107,7 +107,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a - {% markdown %}`.label-floating`{% endmarkdown %} + {% markdown %}`.mdb-label-floating`{% endmarkdown %} @@ -118,7 +118,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a - {% markdown %}`.label-static`{% endmarkdown %} + {% markdown %}`.mdb-label-static`{% endmarkdown %} @@ -129,7 +129,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a - {% markdown %}`.label-placeholder`{% endmarkdown %} + {% markdown %}`.mdb-label-placeholder`{% endmarkdown %} @@ -146,7 +146,7 @@ Below is a complete list of options supported by Material Design for Bootstrap a The `.mdb-form-group` class is usually added to the `.form-group` element. Whereas the `.form-group` adds structure to forms by providing `margin-bottom` around a label and control pairing, the only purpose of the `.mdb-form-group` is to demarcate Material Design behaviors. Decorations and size variations are intended to be specified on - this element e.g. `.label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`. + this element e.g. `.mdb-label-floating`. Focus/hover styling for the label/input is determined based on the `.mdb-form-group`. The `.mdb-form-group` is added automatically by javascript through basic discovery of the outer demarcation of the component defined by the Bootstrap standard markup. If your code is templated, you may want to add `.mdb-form-group` to the markup directly to prevent any rendering churn from the javascript determining @@ -155,11 +155,11 @@ you may need to wrap your markup in an `.mdb-form-group` to get appropriate focu {% example html %} -
+
-
+
@@ -180,11 +180,11 @@ Because of this, you may need to manually address the width and alignment of ind {% example html %} -
+
-
+
diff --git a/docs/material-design/test.md b/docs/material-design/test.md index ebe66430..dc53e2d2 100644 --- a/docs/material-design/test.md +++ b/docs/material-design/test.md @@ -6,7 +6,7 @@ group: material-design {% example html %} -
+
We'll never share your email with anyone else. diff --git a/js/src/baseInput.js b/js/src/baseInput.js index f67f1179..253913e5 100644 --- a/js/src/baseInput.js +++ b/js/src/baseInput.js @@ -38,7 +38,7 @@ const BaseInput = (($) => { // selectors: [ `.form-control-label`, // in the case of horizontal or inline forms, this will be marked - `> label` // usual case for text inputs + `> label` // usual case for text inputs, first child. Deeper would find toggle labels so don't do that. ], className: `mdb-label` }, diff --git a/js/src/bootstrapMaterialDesign.js b/js/src/bootstrapMaterialDesign.js index cf3915b0..5c5273fa 100644 --- a/js/src/bootstrapMaterialDesign.js +++ b/js/src/bootstrapMaterialDesign.js @@ -32,7 +32,7 @@ const BootstrapMaterialDesign = (($) => { global: { validate: false, mdbLabel: { - className: `mdb-label` + className: `mdb-label` // default style of label to be used if not specified in the html markup } }, ripples: { diff --git a/scss/_forms.scss b/scss/_forms.scss index a119e32d..c208b762 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,9 +1,3 @@ -@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); -@include mdb-form-control-validation(success, $brand-success); -@include mdb-form-control-validation(info, $brand-info); - // ----- // Inputs // @@ -71,12 +65,29 @@ } // ----- -// Labels with mdb-form-group signalled state +// State coloring: default, // +@include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color); + +.has-success { + @include mdb-form-color($brand-success, $brand-success, $brand-success); +} + +.has-info { + @include mdb-form-color($brand-info, $brand-info, $brand-info); +} + +.has-warning { + @include mdb-form-color($brand-warning, $brand-warning, $brand-warning); +} + +.has-danger { + @include mdb-form-color($brand-danger, $brand-danger, $brand-danger); +} + // Reference http://www.google.com/design/spec/components/text-fields.html // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section //.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations - .mdb-form-group { position: relative; @@ -85,56 +96,52 @@ // // Reference http://www.google.com/design/spec/components/text-fields.html // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section - &.label-static, - &.label-placeholder, - &.label-floating { - //> label { - // position: absolute; - // pointer-events: none; - // transition: 0.3s ease all; - // - // label { - // position: relative; - // } - //} - } - - // hint to browser for optimization - &.label-floating { - label { - will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback - } - } - - // hide label-placeholders when the field is not empty - &.label-placeholder:not(.is-empty) { - label { - display: none; - } - } + //&.mdb-label-static, + //&.mdb-label-placeholder, + //&.mdb-label-floating { + // //> label { + // // position: absolute; + // // pointer-events: none; + // // transition: 0.3s ease all; + // // + // // label { + // // position: relative; + // // } + // //} + //} + // + //// hint to browser for optimization + //&.mdb-label-floating { + // label { + // will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback + // } + //} + // + //// hide label-placeholders when the field is not empty + //&.mdb-label-placeholder:not(.is-empty) { + // label { + // display: none; + // } + //} &.is-focused { - label { - color: $brand-primary; - - label { // inner label e.g. checkbox or radio label - color: $mdb-label-color-inner-focus; - } - } - - &.label-placeholder { - label { - color: $mdb-label-color; - - label { // inner label e.g. checkbox or radio label - color: $mdb-label-color-inner-focus; - } - } - } - - .mdb-help { - color: $mdb-label-color-inner-focus; - } + //label { + // color: $brand-primary; + // + // label { // inner label e.g. checkbox or radio label + // color: $mdb-label-color-inner-focus; + // } + //} + // + //&.mdb-label-placeholder { + // label { + // color: $mdb-label-color; + // + // label { // inner label e.g. checkbox or radio label + // color: $mdb-label-color-inner-focus; + // } + // } + //} } // default floating size/location with an mdb-form-group @include mdb-form-group-size-variant($font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-y-base, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default"); diff --git a/scss/_variables.scss b/scss/_variables.scss index 74d5763a..29733ddf 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,19 +1,14 @@ @import "variables/colors"; - // redefine ? TODO: do we need this mdb variant? This is used as $body-color $gray-light: rgba($black, 0.26) !default; $gray: rgba($black, .54) !default; $gray-dark: rgba($black, 0.87) !default; +// wondering if any of these could still be refactored out, but are definitely in use. $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 $enable-flex: true; @@ -26,12 +21,15 @@ $enable-flex: true; @import "variables/bootstrap/state"; @import "variables/bootstrap/type"; +// wondering if any of these could still be refactored out, but are definitely in use. +$mdb-label-color: $gray-light !default; +$mdb-label-color-focus: $brand-primary !default; +$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary //--- // verified in use with refactoring to v4 $mdb-font-weight-base: 400; - //--- //-- unverified below here $mdb-brand-inverse: $indigo !default; @@ -54,10 +52,8 @@ $contrast-factor: 40% !default; // inputs //$mdb-input-placeholder-color: #BDBDBD !default; - - //$mdb-input-underline-color: #d2d2d2 !default; -$mdb-label-static-size-ratio: 75 / 100 !default; +$mdb-mdb-label-static-size-ratio: 75 / 100 !default; $mdb-help-size-ratio: 75 / 100 !default; // FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index abfa3d35..0c36f591 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,5 +1,5 @@ // must be broken out for reuse - webkit selector breaks firefox -@mixin label-static($label-top, $static-font-size, $static-line-height) { +@mixin mdb-label-static($label-top, $static-font-size, $static-line-height) { label { top: $label-top; left: 0; @@ -42,59 +42,53 @@ } } -@mixin mdb-form-color($label-color, $border-color) { +@mixin mdb-form-color($label-color, $label-color-focus, $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 + // override BS and keep the border-color normal/grey so that overlayed focus animation draws attention .form-control { - border-color: $border-color; - @include mdb-input-placeholder { - color: $label-color; + border-color: $input-border-color; + } + + &.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 { + color: $label-color-focus; } - } - // 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 + // Set the border and box shadow on specific inputs to match .form-control { - border-color: $input-border-color; + border-color: $border-color; + @include mdb-input-placeholder { + color: $label-color; + } } - &.is-focused { - // on focus set borders and labels to the validation color - @include mdb-form-color($color, $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($color, $input-border-color); - } + // underline animation color on focus + .mdb-form-control-decorator { + &::before, + &::after { + @include gradient-vertical($label-color, $input-border-color); } } + + .mdb-help { + color: $mdb-label-color-inner-focus; + } } } @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; + $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size) !default; + $static-line-height: ($mdb-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; @@ -122,8 +116,8 @@ //padding-top: ($label-top-margin + $static-font-size); // placeholder positioning - &.label-floating, - &.label-placeholder { + &.mdb-label-floating, + &.mdb-label-placeholder { label, label { @debug "top: #{$label-as-placeholder-top}"; @@ -134,14 +128,14 @@ } // 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); + &.mdb-label-static, + &.mdb-label-floating.is-focused, + &.mdb-label-floating:not(.is-empty) { + @include mdb-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); + &.mdb-label-floating input.form-control:-webkit-autofill ~ label { + @include mdb-label-static($label-top, $static-font-size, $static-line-height); } } } diff --git a/scss/plugins/_plugin-selectize.scss b/scss/plugins/_plugin-selectize.scss index b188cb6a..d235ee14 100644 --- a/scss/plugins/_plugin-selectize.scss +++ b/scss/plugins/_plugin-selectize.scss @@ -37,7 +37,7 @@ // border: 0; // background: transparent; // } -// &.label-floating-fix input { +// &.mdb-label-floating-fix input { // opacity: 0; // } // > div, > .item {