fix(input): calculate icon vertical offset

This aligns the icons as prefered in the material specs. Fixes angular#5731
devversion · Jan 2, 2016 · 4e4b685 · 4e4b685
1 parent 8ef798f
commit 4e4b685
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -18,6 +18,9 @@ $input-error-line-height: $input-error-font-size + 2px;
 $error-padding-top: ($input-error-height - $input-error-line-height) / 2;
 
 $icon-offset: 36px !default;
+$icon-vertical-offset: 8px;
+
+$icon-top-offset: ($icon-offset - $input-padding-top - $input-border-width-focused) / 4;
 
 $icon-float-focused-top: -8px !default;
 
@@ -45,7 +48,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 +316,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);
   }