mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

normalized floating-label size variations

Browse Source
This commit is contained in:
Kevin Ross 2015-11-10 15:45:15 -06:00
parent 8a9fb6bbe4
commit c4b924637c
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
less/_inputs.less
View File

@ -113,11 +113,9 @@
// sizing of focused/open/labels
&.is-focused,
&:not(.is-empty) {
label.control-label{
&.floating-label {
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;
}
label.control-label.floating-label {
top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical);
font-size: @md-input-label-font-size-base;
}
}
@ -130,12 +128,21 @@
}
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
&.floating-label {
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
@ -152,6 +159,15 @@
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

4
less/_variables.less
View File

@ -93,6 +93,8 @@
// 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-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.
@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-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-small-vertical: 4px; // 5