Btn | Fix icon alignment issues

Wisembly · Feb 22, 2016 · 11eea37 · 11eea37
1 parent badc6fe
commit 11eea37
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/dist/css/tapestry.css b/dist/css/tapestry.css
@@ -2306,7 +2306,11 @@ th {
 .Btn .Icon {
   display: inline-block;
   line-height: 1.57143rem;
-  vertical-align: top;
+  vertical-align: middle;
+}
+
+.Btn .Icon--s {
+  line-height: 1.17857rem;
 }
 
 .Btn + .Btn:not(.Btn--block) {

diff --git a/src/scss/components/button/_base.scss b/src/scss/components/button/_base.scss
@@ -28,7 +28,11 @@
   .Icon {
     display: inline-block;
     line-height: $base-lh;
-    vertical-align: top;
+    vertical-align: middle;
+  }
+
+  .Icon--s {
+    line-height: $lh--s;
   }
 
   + .Btn:not(.Btn--block) {

diff --git a/src/scss/components/button/button.md b/src/scss/components/button/button.md
@@ -70,6 +70,12 @@
   <i class="Btn-icon Icon Icon--like"></i>
   Button with icon
 </button>
+
+<button class="Btn Btn--s">
+  <i class="Btn-icon Icon Icon--like Icon--s"></i>
+  Button with icon
+</button>
+
 <button class="Btn has-icon">
   <i class="Btn-icon Icon Icon--like"></i>
   Button with icon