fix(buttonIcon): float left icon-left, closes #515

ionic-team · Feb 10, 2014 · 38420c8 · 38420c8
1 parent 0c50fec
commit 38420c8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/scss/_button-bar.scss b/scss/_button-bar.scss
@@ -39,6 +39,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  &:before,
+  .icon:before {
+    line-height: 44px;
+  }
+
   &:first-child {
     border-radius: 2px 0px 0px 2px;
   }

diff --git a/scss/_button.scss b/scss/_button.scss
@@ -40,6 +40,7 @@
     line-height: $button-height - $button-border-width;
   }
   &.icon-left:before {
+    float: left;
     padding-right: .2em;
     padding-left: 0;
   }

diff --git a/test/button-bar.html b/test/button-bar.html
@@ -95,7 +95,14 @@ <h1 class="title">Button Bar</h1>
         </div>
       </p>
 
-      <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+      <p>
+        <div class="button-bar">
+          <a class="button icon-left ion-chevron-left button-outline">Cancel</a>
+          <a class="button icon-right ion-chevron-right button-positive">Register</a>
+        </div>
+      </p>
+
+      <p><a class="button button-secondary" href="./">All CSS Tests</a></p>
     </main>
 
   </body>

diff --git a/test/buttons.html b/test/buttons.html
@@ -443,7 +443,7 @@ <h3>button.button-block.button-full on each button and nothing on the parent</h3
       </p>
 
       <p>
-        <a class="button button-assertive" href="index.html">Homepage</a>
+        <a class="button button-assertive" href="./">All CSS Tests</a>
       </p>
 
       <hr>