Merge pull request #209 from rackerlabs/fix-inline-icon-alignment

fix(hx-icon): correct alignment of <hx-icon>

Author: CITguy

docs/docs.less

@@ -120,6 +120,7 @@ min-version {
   background-color: @magenta-500;
   border-radius: 1em;
   color: @gray-0;
+  display: inline-block;
   font-size: 0.75rem;
   font-weight: 400;
   line-height: 1;

src/helix-ui/styles/components/breadcrumbs.less

@@ -23,10 +23,5 @@
     color: @gray-600;
     font-size: 0.5rem;
     margin-right: 0.5rem;
-
-    svg {
-      fill: currentColor;
-      stroke: none;
-    }
   }
 }

src/helix-ui/styles/elements/hx-disclosure.less

@@ -1,6 +1,10 @@
 hx-disclosure {
   display: inline-block;
 
+  > hx-icon.hxPrimary {
+    height: 1em;
+  }
+
   &[aria-expanded="true"] {
     .menu-icon, // DEPRECATED: Remove in v1.0.0
     > hx-icon.hxPrimary {

src/helix-ui/styles/elements/hx-icon.less

@@ -3,13 +3,14 @@ hx-icon {
   color: inherit;
   display: inline-block;
   flex-shrink: 0;
-  height: 1em;
+  height: auto;
   line-height: 1;
-  vertical-align: initial;
+  vertical-align: middle;
   width: 1em;
 
   svg {
     fill: currentColor;
+    height: 1em; // because IE
     stroke: none;
   }
 }

src/helix-ui/styles/elements/hx-tile.less

@@ -42,17 +42,15 @@ hx-tile {
 
   .hx-tile-icon {
     hx-icon {
-      height: 1.75rem;
-      width: 1.75rem;
+      font-size: 1.75rem;
     }
   }
 
   hx-icon[type="checkmark"] {
     display: none;
-    height: 1rem;
+    font-size: 1rem;
     right: 1.25rem;
     top: 1.25rem;
-    width: 1rem;
   }
 
   &.hxSubdued {