From cf2703c91185aee05c12d1791a42d1d9b72ed431 Mon Sep 17 00:00:00 2001 From: "Jeandeson O. Merelis" Date: Tue, 21 Jun 2016 15:47:50 -0300 Subject: [PATCH] fix(input): Fix floating label width (#689) Fix floating label to resize the width to use all available space Fixes #688. --- src/components/input/input.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index b0ead9f67271..032229a2f9b3 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -2,6 +2,7 @@ @import 'mixins'; @import 'variables'; +$md-input-floating-placeholder-scale-factor: 0.75 !default; // Placeholder colors. Required is used for the `*` star shown in the placeholder. $md-input-placeholder-color: md-color($md-foreground, hint-text); @@ -33,7 +34,8 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, @mixin md-input-placeholder-floating { display: block; padding-bottom: 5px; - transform: translateY(-100%) scale(0.75); + transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor); + width: 100% / $md-input-floating-placeholder-scale-factor; .md-placeholder-required { color: $md-input-required-placeholder-color; @@ -44,6 +46,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, display: inline-block; position: relative; font-family: $md-font-family; + overflow: hidden; // To avoid problems with text-align. text-align: left; @@ -119,7 +122,8 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, transform-origin: bottom left; transition: transform $swift-ease-out-duration $swift-ease-out-timing-function, scale $swift-ease-out-duration $swift-ease-out-timing-function, - color $swift-ease-out-duration $swift-ease-out-timing-function; + color $swift-ease-out-duration $swift-ease-out-timing-function, + width $swift-ease-out-duration $swift-ease-out-timing-function; &.md-empty { display: block;