fix(button): fixed align icon inside button

positive-js · Aug 20, 2018 · 0f57a30 · 0f57a30
1 parent b1db7f5
commit 0f57a30
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
@@ -1,14 +1,12 @@
-@import '../core/theming/theming';
-@import '../core/styles/typography/typography-utils';
-
-
 @mixin _mc-button-primary-color($palette) {
     $hover-lighten: 5%;
 
     color: mc-contrast($palette, 500);
 
     border-color: mc-color($palette, 600);
-    background-image: linear-gradient(to bottom, mc-color($palette, 500), mc-color($palette, 560));
+    background:
+        mc-color($palette, 500)
+        linear-gradient(to bottom, mc-color($palette, 500), mc-color($palette, 560));
 
     &:hover,
     &.mc-hover {
@@ -171,5 +169,11 @@
             @include mc-typography-level-to-styles($config, body-strong);
         }
     }
+
+    .mc-icon-button.mc-button-wrapper {
+        .mc-icon {
+            line-height: mc-line-height($config, body);
+        }
+    }
 }
 
diff --git a/src/lib/button/button.component.ts b/src/lib/button/button.component.ts
@@ -17,8 +17,8 @@ import { McIcon } from '@ptsecurity/mosaic/icon';
 
 
 @Directive({
-    selector: 'button, a[mc-button]',
-    host: { class: 'mc-button mc-olololo' }
+    selector: 'button[mc-button], a[mc-button]',
+    host: { class: 'mc-button' }
 })
 export class McButtonCSSStyler {}
 

diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
@@ -10,26 +10,18 @@
 
 // sizes
 .mc-button_xs {
-    @extend %mc-button-base;
-
     @include mc-button-size($mc-button-padding_xs, $mc-button-line-height_xs, $mc-button-font_xs);
 }
 
 .mc-button_sm {
-    @extend %mc-button-base;
-
     @include mc-button-size($mc-button-padding_sm, $mc-button-line-height_sm, $mc-button-font_sm);
 }
 
 .mc-button_lg {
-    @extend %mc-button-base;
-
     @include mc-button-size($mc-button-padding_lg, $mc-button-line-height_lg, $mc-button-font_lg);
 }
 
 .mc-button_xl {
-    @extend %mc-button-base;
-
     @include mc-button-size($mc-button-padding_xl, $mc-button-line-height_xl, $mc-button-font_xl);
 }
 
@@ -51,6 +43,12 @@
     }
 
     .mc-button-wrapper {
+        display: flex;
+
+        .mc-icon {
+            margin: auto;
+            line-height: 20px;
+        }
 
         .mc-icon_left {
             margin-right: $mc-icon-button-icon-padding;