diff --git a/docs/material-design/test.md b/docs/material-design/test.md index 84e5f655..2fd99e3d 100644 --- a/docs/material-design/test.md +++ b/docs/material-design/test.md @@ -7,7 +7,12 @@ group: material-design {% example html %}
- + + + We'll never share your email with anyone else. +
+
+ We'll never share your email with anyone else.
diff --git a/scss/_forms.scss b/scss/_forms.scss index 40593a7a..c2a5d455 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -93,13 +93,10 @@ position: relative; // ----- - // Labels with form-group signalled state + // Labels // // Reference http://www.google.com/design/spec/components/text-fields.html // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section - //&.mdb-label-static, - //&.mdb-label-placeholder, - //&.mdb-label-floating { label[class^='mdb-label'], label[class*=' mdb-label'] { position: absolute; @@ -117,16 +114,16 @@ } // default floating size/location with an mdb-form-group - @include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default"); + @include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default"); // sm floating size/location //&.mdb-form-group-sm { - // @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm"); + // @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm"); //} // //// lg floating size/location //&.mdb-form-group-lg { - // @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg"); + // @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg"); //} } diff --git a/scss/_variables.scss b/scss/_variables.scss index 351f5487..ccf4c49b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -55,12 +55,17 @@ $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 // ////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +$mdb-form-line-height: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec. + $mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder $mdb-label-top-margin-base: 1rem !default; // +$mdb-form-line-height-lg: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec. $mdb-label-as-placeholder-shim-lg: 0 !default; // -4px // manual adjustment of label top when positioned as placeholder $mdb-label-top-margin-lg: 1rem !default; // 16px // +$mdb-form-line-height-sm: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec. $mdb-label-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder $mdb-label-top-margin-sm: .75rem !default; // 12px diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 15e984f6..65188130 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -49,23 +49,20 @@ // must be broken out for reuse - webkit selector breaks firefox -@mixin mdb-label-static($label-top, $static-font-size, $static-line-height) { +@mixin mdb-label-static($label-top, $static-font-size) { 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; + // must repeat because the previous (more generic) selectors + font-size: $static-font-size; } -@mixin mdb-form-size-variant($font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim, $form-group-context: null) { +@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $label-as-placeholder-shim, $form-group-context: null) { $static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size); - $static-line-height: ($mdb-mdb-label-static-size-ratio * $line-height); - $label-as-placeholder-top: ($vertical-padding + $label-as-placeholder-shim); // -1 * - $label-top: $label-as-placeholder-top - ($font-size + $vertical-padding); + $label-as-placeholder-top: ($variant-padding-y + $label-as-placeholder-shim); // -1 * + $label-top: $label-as-placeholder-top - ($font-size + $variant-padding-y); $help-font-size: ($mdb-help-size-ratio * $font-size); - $help-line-height: ($mdb-help-size-ratio * $line-height); @debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; @@ -75,9 +72,17 @@ //Padding below input text (including divider): 16dp //Padding below text divider: 8dp + // 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, + .mdb-help, + input::placeholder { + line-height: $variant-line-height; + } - // 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 - //@include label-size-variant($font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-font-size); + // 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 + //@include label-size-variant($font-size, $vertical-padding, $variant-line-height, $static-font-size, $static-line-height, $help-font-size); .form-control { // // // margin-bottom must be specified to give help-block vertical space. @@ -87,7 +92,7 @@ input::placeholder { font-size: $font-size; - line-height: $line-height; + //line-height: $variant-line-height; } // generic labels used anywhere in the form @@ -95,24 +100,21 @@ .radio label, label { font-size: $font-size; - line-height: $line-height; } // smaller focused or static size //label[class^='mdb-label'], //label[class*=' mdb-label'] { // //font-size: $static-font-size; - // //line-height: $static-line-height; // //margin: 16px 0 0 0; // std and lg //} // floating/placeholder default .mdb-label-floating, .mdb-label-placeholder { - @debug "top: #{$label-as-placeholder-top}"; + //@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; } // floating focused/filled will look like static @@ -121,13 +123,13 @@ &.is-filled, .is-filled { .mdb-label-floating { - @include mdb-label-static($label-top, $static-font-size, $static-line-height); + @include mdb-label-static($label-top, $static-font-size); } } // static .mdb-label-static { - @include mdb-label-static($label-top, $static-font-size, $static-line-height); + @include mdb-label-static($label-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 diff --git a/scss/variables/bootstrap/_forms.scss b/scss/variables/bootstrap/_forms.scss index 6613d74c..993856df 100644 --- a/scss/variables/bootstrap/_forms.scss +++ b/scss/variables/bootstrap/_forms.scss @@ -21,7 +21,7 @@ $input-color-placeholder: $mdb-label-color !default; // #999 !default; $input-padding-x: 0 !default; // .75rem !default; -$input-padding-y: .4375rem !default; // $mdb-input-padding-y: 7px // .375rem !default; +$input-padding-y: .4375rem !default; // spec 8px // .375rem !default; $input-padding-x-sm: 0 !default; // .75rem !default; $input-padding-y-sm: .1875 !default; // 3px //.275rem !default;