fix(input): calculate icon vertical offset

This aligns the icons as prefered in the material specs. Fixes #5731. Closes #5732.
angular · Feb 4, 2016 · 47f3700 · 47f3700
1 parent 83829a7
commit 47f3700
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
@@ -20,6 +20,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 {
@@ -46,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);
   }
@@ -316,7 +318,7 @@ md-input-container {
     }
 
     > md-icon {
-      top: 2px;
+      top: $icon-top-offset;
       @include rtl(left, 2px, auto);
       @include rtl(right, auto, 2px);
     }