From 8127f98f3c4acc5df8ac1b24073cd50ad89acfab Mon Sep 17 00:00:00 2001
From: Lex Zhukov <lexzhukovpro@gmail.com>
Date: Thu, 20 Jul 2017 17:53:17 +0300
Subject: [PATCH] fix(ui-features): improve the icon buttons styles (#18)

---
 .../icon-buttons/icon-buttons.component.html        |  8 ++++----
 .../icon-buttons/icon-buttons.component.scss        | 13 +++++++++++++
 .../buttons/icon-buttons/icon-buttons.component.ts  |  1 +
 3 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss

diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
index 524da105..512951dc 100644
--- a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
+++ b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.html
@@ -9,11 +9,11 @@
           </button>
           <button type="button" class="btn btn-primary">Icon Button</button>
         </div>
-        <div class="btn-group">
-          <button type="button" class="btn btn-primary btn-group-icon">
-            <i class="ion-ios-gear-outline"></i>
+        <div class="btn-with-icon-example">
+          <button type="button" class="btn btn-primary btn-with-icon">
+            <i class="icon ion-ios-home-outline"></i>
+            <span>Icon Button</span>
           </button>
-          <button type="button" class="btn btn-primary">Icon Button</button>
         </div>
         <div class="icon-button-examples">
           <button type="button" class="btn btn-outline-primary btn-icon">
diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss
new file mode 100644
index 00000000..ae4bf278
--- /dev/null
+++ b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss
@@ -0,0 +1,13 @@
+nga-card-body {
+  div:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+}
+
+.btn-with-icon-example {
+  width: 100%;
+
+  .btn {
+    width: 100%;
+  }
+}
diff --git a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts
index da7b0268..6dc28644 100644
--- a/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts
+++ b/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-icon-buttons',
+  styleUrls: ['./icon-buttons.component.scss'],
   templateUrl: './icon-buttons.component.html',
 })
 export class IconButtonsComponent {