fix(input): calculate icon vertical offset

This aligns the icons as prefered in the material specs. Fixes angular#5731
devversion · Jan 2, 2016 · 8cb5bfb · 8cb5bfb
1 parent 8ef798f
commit 8cb5bfb
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -19,6 +19,8 @@ $error-padding-top: ($input-error-height - $input-error-line-height) / 2;
 
 $icon-offset: 36px !default;
 
+$icon-top-offset: ($icon-offset - $input-padding-top - $input-border-width-focused) / 4;
+
 $icon-float-focused-top: -8px !default;
 
 md-input-container {
@@ -45,7 +47,7 @@ md-input-container {
 
   > md-icon {
     position: absolute;
-    top: 5px;
+    top: $icon-top-offset;
     @include rtl(left, 2px, auto);
     @include rtl(right, auto, 2px);
   }
@@ -313,7 +315,7 @@ md-input-container.md-icon-float {
   }
 
   > md-icon {
-    top: 2px;
+    top: $icon-top-offset;
     @include rtl(left, 2px, auto);
     @include rtl(right, auto, 2px);
   }