Replace inline block with flex box so that hero button layout is not …

…affected by spaces in HTML
OfficeDev · Jun 8, 2016 · ece7c72 · ece7c72
1 parent 4368c31
commit ece7c72
Showing 1 changed file with 6 additions and 10 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -15,7 +15,6 @@
   background-color: $ms-color-neutralLighter;
   border: 1px solid $ms-color-neutralLighter;
   cursor: pointer;
-  display: inline-block;
   height: 32px;
   min-width: 80px;
   padding: 4px 20px 6px;
@@ -128,15 +127,13 @@
 .ms-Button.ms-Button--hero {
   background-color: transparent;
   border: 0;
-  vertical-align: top;
-  line-height: normal;
+  display: flex;
+  padding: 0;
 
   .ms-Button-icon {
     color: $ms-color-themePrimary;
-    display: inline-block;
-    font-size: $ms-font-size-s;
-    position: relative;
-    top: -8px;
+    display: block;
+    margin-right: 4px;
     text-align: center;
 
     .ms-Icon {
@@ -146,16 +143,15 @@
       line-height: 18px;
       width: 18px;
       font-size: $ms-font-size-s;
-      margin: 0;
     }
   }
 
   .ms-Button-label {
     color: $ms-color-themePrimary;
-    font-weight: $ms-font-weight-light;
     font-size: $ms-font-size-xl;
+    font-weight: $ms-font-weight-light;
+    line-height: 19px;
     position: relative;
-    top: -5px;
     text-decoration: none;
   }