mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-05-02 06:43:46 +03:00
normalized floating-label size variations
This commit is contained in:
parent
dab4a87ee7
commit
f564b4ff16
|
@ -113,13 +113,11 @@
|
||||||
// sizing of focused/open/labels
|
// sizing of focused/open/labels
|
||||||
&.is-focused,
|
&.is-focused,
|
||||||
&:not(.is-empty) {
|
&:not(.is-empty) {
|
||||||
label.control-label{
|
label.control-label.floating-label {
|
||||||
&.floating-label {
|
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical);
|
||||||
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
|
|
||||||
font-size: @md-input-label-font-size-base;
|
font-size: @md-input-label-font-size-base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// sm
|
// sm
|
||||||
&.form-group-sm {
|
&.form-group-sm {
|
||||||
|
@ -130,12 +128,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
label.control-label { // static label
|
label.control-label { // static label
|
||||||
font-size: @floating-label-size-ratio * @md-input-font-size-small; // static
|
font-size: @md-input-label-font-size-small; // static
|
||||||
//margin: 12px 0 0 0; // sm only
|
//margin: 12px 0 0 0; // sm only
|
||||||
&.floating-label {
|
&.floating-label {
|
||||||
font-size: @md-input-font-size-small; // as placeholder
|
font-size: @md-input-font-size-small; // as placeholder
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// sm floating size/location
|
||||||
|
&.is-focused,
|
||||||
|
&:not(.is-empty) {
|
||||||
|
label.control-label.floating-label {
|
||||||
|
top: @label-as-placeholder-top - (@md-input-label-font-size-small + @md-input-padding-small-vertical);
|
||||||
|
font-size: @md-input-label-font-size-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// lg
|
// lg
|
||||||
|
@ -152,6 +159,15 @@
|
||||||
font-size: @md-input-font-size-large; // as placeholder (never larger than size-base)
|
font-size: @md-input-font-size-large; // as placeholder (never larger than size-base)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// lg floating size/location
|
||||||
|
&.is-focused,
|
||||||
|
&:not(.is-empty) {
|
||||||
|
label.control-label.floating-label {
|
||||||
|
top: @label-as-placeholder-top - (@md-input-label-font-size-large + @md-input-padding-large-vertical);
|
||||||
|
font-size: @md-input-label-font-size-large;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hints
|
// Hints
|
||||||
|
|
|
@ -93,6 +93,8 @@
|
||||||
|
|
||||||
// size when static or floating with focus i.e. 16px
|
// size when static or floating with focus i.e. 16px
|
||||||
@md-input-label-font-size-base: @floating-label-size-ratio * @md-input-font-size-base;
|
@md-input-label-font-size-base: @floating-label-size-ratio * @md-input-font-size-base;
|
||||||
|
@md-input-label-font-size-small: @floating-label-size-ratio * @md-input-font-size-small;
|
||||||
|
@md-input-label-font-size-large: @floating-label-size-ratio * @md-input-font-size-large;
|
||||||
|
|
||||||
//** Unit-less `line-height` for use in components like buttons.
|
//** Unit-less `line-height` for use in components like buttons.
|
||||||
@md-input-line-height-base: 1.428571429; // 20/14
|
@md-input-line-height-base: 1.428571429; // 20/14
|
||||||
|
@ -103,7 +105,7 @@
|
||||||
@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-input-padding-large-vertical: 8px; // 10
|
@md-input-padding-large-vertical: 10px; // 10
|
||||||
@md-input-padding-large-horizontal: 0px; // 16
|
@md-input-padding-large-horizontal: 0px; // 16
|
||||||
|
|
||||||
@md-input-padding-small-vertical: 4px; // 5
|
@md-input-padding-small-vertical: 4px; // 5
|
||||||
|
|
Loading…
Reference in New Issue
Block a user