diff --git a/index.html b/index.html index ae3d683f..af7689f7 100644 --- a/index.html +++ b/index.html @@ -425,6 +425,25 @@ Please enter a valid email address +

Input - no labels + form-group sizing +

+ +
+ + Please enter a valid email address +
+ +
+ + Please enter a valid email address +
+ +
+ + Please enter a valid email address +
+

Input - floating label feedback variants diff --git a/less/_inputs.less b/less/_inputs.less index fa0974d1..fe5090ff 100644 --- a/less/_inputs.less +++ b/less/_inputs.less @@ -66,27 +66,42 @@ } } -.form-group-size-variant(@placeholder-font-size, @vertical-padding){ - @label-as-placeholder-top: -1 * @vertical-padding; +.form-group-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @label-as-placeholder-shim){ @static-font-size: ceil((@floating-label-size-ratio * @placeholder-font-size)); + @static-line-height: (@floating-label-size-ratio * @line-height); + + @label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim); + //@label-as-placeholder-top: -1 * (@line-height * @static-font-size); way too much on anything but sm + @hint-font-size: ceil((@hint-size-ratio * @placeholder-font-size)); + @hint-line-height: (@hint-size-ratio * @line-height); .form-control { .material-placeholder({ font-size: @placeholder-font-size; }); + margin-bottom: @vertical-padding; + + //border: 1px solid; } .hint { + margin-top: 0px; // allow the input margin to set-off the top of the hint font-size: @hint-font-size; + + //border: 1px solid; } label.control-label { // static label font-size: @static-font-size; // static (smaller of the two) + line-height: @static-line-height; &.floating-label { top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding font-size: @placeholder-font-size; // as placeholder (full size) + line-height: @line-height; } + + //border: 1px solid; } // sizing of focused/open/labels @@ -95,6 +110,7 @@ label.control-label.floating-label { top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding); font-size: @static-font-size; + line-height: @static-line-height; } } } @@ -135,16 +151,16 @@ .variations(~".is-focused label.control-label", color, @input-default); // focused label color variations // default floating size/location - .form-group-size-variant(@md-input-font-size-base, @md-input-padding-base-vertical); + .form-group-size-variant(@md-input-font-size-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base); // sm floating size/location &.form-group-sm { - .form-group-size-variant(@md-input-font-size-small, @md-input-padding-small-vertical); + .form-group-size-variant(@md-input-font-size-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small); } // lg floating size/location &.form-group-lg { - .form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical); + .form-group-size-variant(@md-input-font-size-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large); } // Hints diff --git a/less/_variables.less b/less/_variables.less index 8af8827d..462e0864 100644 --- a/less/_variables.less +++ b/less/_variables.less @@ -101,23 +101,25 @@ @md-input-line-height-base: 1.428571429; // 20/14 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. @md-input-line-height-computed: floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px +@md-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome +@md-input-line-height-small: 1.5; //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). @md-input-padding-base-vertical: 8px; // was 6. @md-input-padding-base-horizontal: 0px; // was 12. +@md-label-as-placeholder-shim-base: 0px; // manual adjustment of label top when positioned as placeholder @md-input-padding-large-vertical: 10px; // 10 -@md-input-padding-large-horizontal: 0px; // 16 +@md-input-padding-large-horizontal: 0px; // 16 +@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder @md-input-padding-small-vertical: 4px; // 5 @md-input-padding-small-horizontal: 0px; // 10 +@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder @md-input-padding-xs-vertical: 2px; // 1 @md-input-padding-xs-horizontal: 0px; // 5 -@md-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome -@md-input-line-height-small: 1.5; - @md-input-border-radius-base: 4px; @md-input-border-radius-large: 6px; @md-input-border-radius-small: 3px;