fix(text-field): Update label position and shake animation (#2594)

material-components · Apr 19, 2018 · bd84694 · bd84694
1 parent 4c52589
commit bd84694
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -176,7 +176,10 @@
 
   margin-top: 12px;
   margin-bottom: 4px;
-  font-size: .813rem;
+
+  .mdc-floating-label {
+    font-size: .813rem;
+  }
 }
 
 @mixin mdc-required-text-field-label-asterisk_() {
@@ -231,7 +234,7 @@
   }
 
   .mdc-floating-label {
-    bottom: 18px;
+    bottom: 16px;
   }
 
   .mdc-text-field__icon {
@@ -382,11 +385,19 @@
 @mixin mdc-text-field-outlined-with-leading-icon_ {
   @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
+
+  @include mdc-rtl {
+    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-rtl);
+  }
 }
 
 @mixin mdc-text-field-outlined-dense-with-leading-icon_ {
   @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
+
+  @include mdc-rtl {
+    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense-rtl);
+  }
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -40,10 +40,10 @@ $mdc-textarea-disabled-background: rgba(249, 249, 249, 1);
 $mdc-text-field-border-radius: 4px !default;
 
 $mdc-text-field-box-label-position-y: 50%;
-$mdc-text-field-box-dense-label-position-y: 90%;
+$mdc-text-field-box-dense-label-position-y: 70%;
 $mdc-text-field-dense-label-scale: .923;
 $mdc-text-field-outlined-label-position-y: 130%;
-$mdc-text-field-outlined-dense-label-position-y: 145%;
+$mdc-text-field-outlined-dense-label-position-y: 110%;
 $mdc-text-field-outlined-with-leading-icon-label-position-x: 32px;
 $mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
 $mdc-text-field-textarea-label-position-y: 50%;

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -246,4 +246,6 @@
 @include mdc-floating-label-shake-keyframes(text-field-outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
 @include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
 @include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-rtl, $mdc-text-field-outlined-label-position-y, -$mdc-text-field-outlined-with-leading-icon-label-position-x);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense-rtl, $mdc-text-field-outlined-dense-label-position-y, -$mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
 @include mdc-floating-label-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);