fix(button): fix icon vertical alignments for IE 10

ionic-team · May 7, 2014 · 930794c · 930794c
1 parent 98ee7ee
commit 930794c
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/scss/_button.scss b/scss/_button.scss
@@ -11,7 +11,7 @@
   position: relative;
   display: inline-block;
   margin: 0;
-  padding: 1px $button-padding 0 $button-padding;
+  padding: 0 $button-padding;
 
   min-width: ($button-padding * 3) + $button-font-size;
   min-height: $button-height + 5px;
@@ -41,6 +41,7 @@
 
   .icon {
     vertical-align: top;
+    pointer-events: none;
   }
 
   .icon:before,
@@ -51,7 +52,8 @@
     padding: 0 0 $button-border-width 0;
     vertical-align: inherit;
     font-size: $button-icon-size;
-    line-height: $button-height - $button-border-width + 1;
+    line-height: $button-height - $button-border-width;
+    pointer-events: none;
   }
   &.icon-left:before {
     float: left;
@@ -125,18 +127,19 @@
 }
 
 .button-small {
-  padding: 0 $button-small-padding;
+  padding: 2px $button-small-padding 1px;
   min-width: $button-small-height;
-  min-height: $button-small-height + 3;
+  min-height: $button-small-height + 2;
   font-size: $button-small-font-size;
-  line-height: $button-small-height - $button-border-width + 1;
+  line-height: $button-small-height - $button-border-width - 1;
 
   .icon:before,
   &.icon:before,
   &.icon-left:before,
   &.icon-right:before {
     font-size: $button-small-icon-size;
-    line-height: $button-small-height - $button-border-width - 1;
+    line-height: $button-small-icon-size + 3;
+    margin-top: 3px;
   }
 }