fix(button): Tweak vertical alignment of button icons, closes #739

ionic-team · Mar 10, 2014 · 7ec0605 · 7ec0605
1 parent 24524f7
commit 7ec0605
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/scss/_button.scss b/scss/_button.scss
@@ -51,7 +51,7 @@
     padding: 0 0 $button-border-width 0;
     vertical-align: inherit;
     font-size: $button-icon-size;
-    line-height: $button-height - $button-border-width;
+    line-height: $button-height - $button-border-width + 1;
   }
   &.icon-left:before {
     float: left;
@@ -164,7 +164,7 @@
   border-color: transparent;
   background: none;
 
-  &.button:active, 
+  &.button:active,
   &.button.active {
     border-color: transparent;
     background: none;
@@ -206,8 +206,8 @@
 .button-block {
   display: block;
   clear: both;
-  
-  &:after { 
+
+  &:after {
     clear: both;
   }
 }

diff --git a/test/html/buttons.html b/test/html/buttons.html
@@ -15,7 +15,7 @@
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
     }
     </style>
-    <script src="../dist/js/ionic.bundle.js"></script>
+    <script src="../../dist/js/ionic.bundle.js"></script>
     <script>
       angular.module('ionicApp', ['ionic'])
     </script>
@@ -67,7 +67,8 @@ <h3>a.button default</h3>
           <a class="button button-assertive"><i class="icon ion-home"></i></a>
           <a class="button button-energized"><i class="icon ion-home"></i> .button-energized</a>
           <a class="button button-royal">.button-royal</a>
-          <a class="button button-dark"><i class="icon ion-home"></i> .button-dark</a>
+          <a class="button button-dark"><i class="icon ion-chevron-right"></i> .button-dark</a>
+          <a class="button button-energized icon-right ion-chevron-right">Login</a>
         </p>
 
         <hr>