mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-14 05:37:01 +03:00
shimmed the floating-label as placeholder to have a perfect match to the static label
This commit is contained in:
parent
9d3cd1a500
commit
9c19ca48eb
19
index.html
19
index.html
|
@ -425,6 +425,25 @@
|
||||||
<span class="help-block hint">Please enter a valid email address</span>
|
<span class="help-block hint">Please enter a valid email address</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2>Input - no labels
|
||||||
|
<small>form-group sizing</small>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="form-group form-group-sm">
|
||||||
|
<input type="email" class="form-control" placeholder="Placeholder form-group-sm">
|
||||||
|
<span class="help-block hint">Please enter a valid email address</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<input type="email" class="form-control" placeholder="Placeholder">
|
||||||
|
<span class="help-block hint">Please enter a valid email address</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group form-group-lg">
|
||||||
|
<input type="email" class="form-control" placeholder="Placeholder form-group-lg">
|
||||||
|
<span class="help-block hint">Please enter a valid email address</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2>Input -
|
<h2>Input -
|
||||||
<small>floating label feedback variants</small>
|
<small>floating label feedback variants</small>
|
||||||
|
|
|
@ -66,27 +66,42 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group-size-variant(@placeholder-font-size, @vertical-padding){
|
.form-group-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @label-as-placeholder-shim){
|
||||||
@label-as-placeholder-top: -1 * @vertical-padding;
|
|
||||||
@static-font-size: ceil((@floating-label-size-ratio * @placeholder-font-size));
|
@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-font-size: ceil((@hint-size-ratio * @placeholder-font-size));
|
||||||
|
@hint-line-height: (@hint-size-ratio * @line-height);
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
.material-placeholder({
|
.material-placeholder({
|
||||||
font-size: @placeholder-font-size;
|
font-size: @placeholder-font-size;
|
||||||
});
|
});
|
||||||
|
margin-bottom: @vertical-padding;
|
||||||
|
|
||||||
|
//border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
|
margin-top: 0px; // allow the input margin to set-off the top of the hint
|
||||||
font-size: @hint-font-size;
|
font-size: @hint-font-size;
|
||||||
|
|
||||||
|
//border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
label.control-label { // static label
|
label.control-label { // static label
|
||||||
font-size: @static-font-size; // static (smaller of the two)
|
font-size: @static-font-size; // static (smaller of the two)
|
||||||
|
line-height: @static-line-height;
|
||||||
&.floating-label {
|
&.floating-label {
|
||||||
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
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)
|
font-size: @placeholder-font-size; // as placeholder (full size)
|
||||||
|
line-height: @line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
// sizing of focused/open/labels
|
// sizing of focused/open/labels
|
||||||
|
@ -95,6 +110,7 @@
|
||||||
label.control-label.floating-label {
|
label.control-label.floating-label {
|
||||||
top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
|
top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
|
||||||
font-size: @static-font-size;
|
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
|
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
|
||||||
|
|
||||||
// default floating size/location
|
// 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
|
// sm floating size/location
|
||||||
&.form-group-sm {
|
&.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
|
// lg floating size/location
|
||||||
&.form-group-lg {
|
&.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
|
// Hints
|
||||||
|
|
|
@ -101,23 +101,25 @@
|
||||||
@md-input-line-height-base: 1.428571429; // 20/14
|
@md-input-line-height-base: 1.428571429; // 20/14
|
||||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
//** 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-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).
|
//## 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-vertical: 8px; // was 6.
|
||||||
@md-input-padding-base-horizontal: 0px; // was 12.
|
@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-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-vertical: 4px; // 5
|
||||||
@md-input-padding-small-horizontal: 0px; // 10
|
@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-vertical: 2px; // 1
|
||||||
@md-input-padding-xs-horizontal: 0px; // 5
|
@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-base: 4px;
|
||||||
@md-input-border-radius-large: 6px;
|
@md-input-border-radius-large: 6px;
|
||||||
@md-input-border-radius-small: 3px;
|
@md-input-border-radius-small: 3px;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user