From 12d18386e02f6e4ae82870ed658d5ec676b71659 Mon Sep 17 00:00:00 2001 From: Jean Merelis Date: Wed, 15 Jun 2016 09:51:21 -0300 Subject: [PATCH 1/7] fix(input): Fix floating label width Fix floating label to resize the width to use all available space --- src/components/input/input.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 2e87b0c79d3b..48197b819316 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -34,7 +34,8 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, visibility: visible; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); - + width: 133%; // 100/75 of the original space now available + .md-placeholder-required { color: $md-input-required-placeholder-color; } From d3bb9f64370453af7dc335c50be1fed8097185ab Mon Sep 17 00:00:00 2001 From: Jean Merelis Date: Wed, 15 Jun 2016 15:40:39 -0300 Subject: [PATCH 2/7] transition width --- src/components/input/input.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 48197b819316..5ea3ab56f2f9 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -34,6 +34,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, visibility: visible; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); + transition: width 0.1s ease-in-out; width: 133%; // 100/75 of the original space now available .md-placeholder-required { From 1eca9603b9d150ab3c188994692005b24b7edc6f Mon Sep 17 00:00:00 2001 From: Jean Merelis Date: Wed, 15 Jun 2016 15:54:01 -0300 Subject: [PATCH 3/7] fix transition width --- src/components/input/input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 5ea3ab56f2f9..fa0e48cf1347 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -34,7 +34,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, visibility: visible; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); - transition: width 0.1s ease-in-out; + transition: width 150ms ease-in-out; width: 133%; // 100/75 of the original space now available .md-placeholder-required { From 5d345837f667c811032309439095370ff8dd2fe4 Mon Sep 17 00:00:00 2001 From: Jean Merelis Date: Wed, 15 Jun 2016 16:37:51 -0300 Subject: [PATCH 4/7] fix transition width --- src/components/input/input.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index fa0e48cf1347..d28fb2c4b887 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -34,7 +34,6 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, visibility: visible; padding-bottom: 5px; transform: translateY(-100%) scale(0.75); - transition: width 150ms ease-in-out; width: 133%; // 100/75 of the original space now available .md-placeholder-required { @@ -122,7 +121,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 { visibility: visible; From e2deb54b8d20553afeea2e0de852444b05add32b Mon Sep 17 00:00:00 2001 From: Jean Merelis Date: Sat, 18 Jun 2016 11:40:54 -0300 Subject: [PATCH 5/7] moves the placeholder-scale-factor out into a variable --- src/components/input/input.scss | 7 +++---- src/core/style/_variables.scss | 3 +++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index d28fb2c4b887..db73066bf78d 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -2,7 +2,6 @@ @import 'mixins'; @import 'variables'; - // Placeholder colors. Required is used for the `*` star shown in the placeholder. $md-input-placeholder-color: md-color($md-foreground, hint-text); $md-input-floating-placeholder-color: md-color($md-primary); @@ -33,9 +32,9 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, @mixin md-input-placeholder-floating { visibility: visible; padding-bottom: 5px; - transform: translateY(-100%) scale(0.75); - width: 133%; // 100/75 of the original space now available - + transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor); + width: calc(100% / #{$md-input-floating-placeholder-scale-factor}); + .md-placeholder-required { color: $md-input-required-placeholder-color; } diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss index 55877597d460..3d8ca658b80e 100644 --- a/src/core/style/_variables.scss +++ b/src/core/style/_variables.scss @@ -20,6 +20,9 @@ $md-toggle-padding: 8px !default; // Width and height of input toggles $md-toggle-size: 20px !default; + +$md-input-floating-placeholder-scale-factor: 0.75 !default; + // Easing Curves // TODO(jelbourn): all of these need to be revisited From a60b3e2c778685602781e53c9dfc907d75ff2c7d Mon Sep 17 00:00:00 2001 From: Jean Merelis Date: Mon, 20 Jun 2016 22:16:04 -0300 Subject: [PATCH 6/7] move the variable to input.scss and removes calc function --- src/components/input/input.scss | 4 +++- src/core/style/_variables.scss | 3 --- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index db73066bf78d..b3e5412884ac 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -2,6 +2,8 @@ @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); $md-input-floating-placeholder-color: md-color($md-primary); @@ -33,7 +35,7 @@ $md-input-underline-disabled-background-image: linear-gradient(to right, visibility: visible; padding-bottom: 5px; transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor); - width: calc(100% / #{$md-input-floating-placeholder-scale-factor}); + width: 100% / $md-input-floating-placeholder-scale-factor; .md-placeholder-required { color: $md-input-required-placeholder-color; diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss index 3d8ca658b80e..55877597d460 100644 --- a/src/core/style/_variables.scss +++ b/src/core/style/_variables.scss @@ -20,9 +20,6 @@ $md-toggle-padding: 8px !default; // Width and height of input toggles $md-toggle-size: 20px !default; - -$md-input-floating-placeholder-scale-factor: 0.75 !default; - // Easing Curves // TODO(jelbourn): all of these need to be revisited From 8c20c1a40992a360a4e0a50873a4bafec489ae56 Mon Sep 17 00:00:00 2001 From: Jean Merelis Date: Tue, 21 Jun 2016 15:05:22 -0300 Subject: [PATCH 7/7] add overflow:hidden to the :host --- src/components/input/input.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/input/input.scss b/src/components/input/input.scss index b3e5412884ac..516cb0b45b64 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -46,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;