-
+
Styling
-
diff --git a/less/_inputs.less b/less/_inputs.less
index 913248a7..4f38b484 100644
--- a/less/_inputs.less
+++ b/less/_inputs.less
@@ -66,57 +66,63 @@
}
}
-.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);
+.form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
+ @static-font-size: ceil((@label-floating-size-ratio * @placeholder-font-size));
+ @static-line-height: (@label-floating-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
+ @label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
@help-block-font-size: ceil((@help-block-size-ratio * @placeholder-font-size));
@help-block-line-height: (@help-block-size-ratio * @line-height);
+ // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
+ margin: (@label-top-margin + @static-font-size) 0 0 0;
+
.form-control {
.material-placeholder({
font-size: @placeholder-font-size;
});
- margin-bottom: @vertical-padding;
-
- //border: 1px solid;
+ margin-bottom: @vertical-padding; // must be specified to give help-block vertical space
}
+ // upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
+ // must also be expressed as form-group padding
+ padding-bottom: @vertical-padding;
+
.help-block {
margin-top: 0px; // allow the input margin to set-off the top of the help-block
font-size: @help-block-font-size;
-
- //border: 1px solid;
}
- label.control-label { // static label
- font-size: @static-font-size; // static (smaller of the two)
+ // smaller focused or static size
+ label.control-label {
+ font-size: @static-font-size;
line-height: @static-line-height;
- &.floating-label { // as placeholder (full size)
+ }
+
+ // larger labels as placeholders
+ &.label-floating,
+ &.label-placeholder {
+ label.control-label {
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;
}
-
- //border: 1px solid;
}
- // sizing of focused/open/labels
- &.is-focused,
- &:not(.is-empty) {
- 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;
+ // static or focused floating labels
+ &.label-static,
+ &.label-floating.is-focused,
+ &.label-floating:not(.is-empty) {
+ label.control-label {
+ top: @label-top;
}
}
}
.form-group {
- border: solid 1px red;
+ //border: solid 1px red;
position: relative;
// ----
@@ -134,34 +140,45 @@
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
- label.control-label { // static label
-
- // same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
- color: @input-placeholder-color;
- font-weight: normal;
- margin: 16px 0 0 0; // std and lg
-
- &.floating-label {
+ &.label-static,
+ &.label-placeholder,
+ &.label-floating {
+ label.control-label {
position: absolute;
- pointer-events: none;
left: 0px;
+ pointer-events: none;
transition: 0.3s ease all;
}
}
+
+ label.control-label {
+ // same label properties as form-group placeholder
+ color: @input-placeholder-color;
+ font-weight: normal;
+ margin: 16px 0 0 0; // std and lg
+ }
+ // hide label-placeholders when the field is not empty
+ &.label-placeholder:not(.is-empty){
+ label.control-label{
+ display: none;
+ }
+ }
+
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
+ .variations(~".is-focused.label-placeholder label.control-label", color, @input-placeholder-color); // default label color variations
// default floating size/location
- .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);
+ .form-group-size-variant(@md-input-font-size-base, @md-label-top-margin-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, @md-input-line-height-small, @md-label-as-placeholder-shim-small);
+ .form-group-size-variant(@md-input-font-size-small, @md-label-top-margin-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, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
+ .form-group-size-variant(@md-input-font-size-large, @md-label-top-margin-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
}
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
diff --git a/less/_plugin-selectize.less b/less/_plugin-selectize.less
index acde11e8..a212dad9 100644
--- a/less/_plugin-selectize.less
+++ b/less/_plugin-selectize.less
@@ -37,7 +37,7 @@
border: 0px;
background: transparent;
}
- &.floating-label-fix input {
+ &.label-floating-fix input {
opacity: 0;
}
> div, > .item {
diff --git a/less/_variables.less b/less/_variables.less
index c70f6e7a..7cc8a06d 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -84,7 +84,7 @@
// --------------------
// inputs
@input-placeholder-color: #BDBDBD;
-@floating-label-size-ratio: 75 / 100;
+@label-floating-size-ratio: 75 / 100;
@help-block-size-ratio: 75 / 100;
@input-underline-color: #D2D2D2;
@@ -93,9 +93,9 @@
@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
// size when static or floating with focus i.e. 16px
-//@md-input-label-font-size-base: ceil((@floating-label-size-ratio * @md-input-font-size-base));
-//@md-input-label-font-size-small:ceil(( @floating-label-size-ratio * @md-input-font-size-small));
-//@md-input-label-font-size-large: ceil((@floating-label-size-ratio * @md-input-font-size-large));
+//@md-input-label-font-size-base: ceil((@label-floating-size-ratio * @md-input-font-size-base));
+//@md-input-label-font-size-small:ceil(( @label-floating-size-ratio * @md-input-font-size-small));
+//@md-input-label-font-size-large: ceil((@label-floating-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
@@ -105,17 +105,20 @@
@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-vertical: 8px - 1px; // 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-label-top-margin-base: 16px;
-@md-input-padding-large-vertical: 10px; // 10
+@md-input-padding-large-vertical: 10px - 1px; // 10
@md-input-padding-large-horizontal: 0px; // 16
@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
+@md-label-top-margin-large: 16px;
-@md-input-padding-small-vertical: 4px; // 5
+@md-input-padding-small-vertical: 4px - 1px; // 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-label-top-margin-small: 12px;
@md-input-padding-xs-vertical: 2px; // 1
@md-input-padding-xs-horizontal: 0px; // 5
diff --git a/scripts/material.js b/scripts/material.js
index b99f33f9..dddd6845 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -103,7 +103,7 @@
}
});
- // Legacy - Add floating label if using old shorthand
+ // Legacy - Add label-floating if using old shorthand
if ($input.hasClass("floating-label")) {
var placeholder = $input.attr("placeholder");
$input.attr("placeholder", null).removeClass("floating-label");
@@ -112,23 +112,24 @@
if(id) {
forAttribute = "for='" + id + "'";
}
- $input.after("
");
- }
- else {
- // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
- // we need the label to be *after* the input for it to work properly. (we use these infrequently now that
- // .is-focused and .is-empty is standardized on the .form-group.
- // @see: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
- // Attach it to the same parent, regardless (not necessarily after input) which could cause problems,
- // but this is up to the user.
- var $label = $formGroup.find("label.floating-label");
- if($label.length > 0){
- var $labelParent = $label.parent(); // likely the form-group, but may not be in the case of input-groups
- $label.detach();
- $labelParent.append($label);
- //$input.after($label);
- }
+ $formGroup.addClass("label-floating");
+ $input.after("
");
}
+ //else {
+ // // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
+ // // we need the label to be *after* the input for it to work properly. (we use these infrequently now that
+ // // .is-focused and .is-empty is standardized on the .form-group.
+ // // @see: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
+ // // Attach it to the same parent, regardless (not necessarily after input) which could cause problems,
+ // // but this is up to the user.
+ // var $label = $formGroup.find("label.control-label");
+ // if($label.length > 0){
+ // var $labelParent = $label.parent(); // likely the form-group, but may not be in the case of input-groups
+ // $label.detach();
+ // $labelParent.append($label);
+ // //$input.after($label);
+ // }
+ //}
// Set as empty if is empty (damn I must improve this...)
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {