From 1575b891695f2c7225d27c77d640d3ec6a541725 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 12:51:36 +0300
Subject: [PATCH 1/8] fix(button): remove bootstrap background color for
 outline buttons

---
 src/framework/bootstrap/styles/_outline-buttons.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/framework/bootstrap/styles/_outline-buttons.scss b/src/framework/bootstrap/styles/_outline-buttons.scss
index 462969912e..aa110abd7d 100644
--- a/src/framework/bootstrap/styles/_outline-buttons.scss
+++ b/src/framework/bootstrap/styles/_outline-buttons.scss
@@ -15,21 +15,25 @@
   color: nb-theme(button-outline-#{$status}-text-color);
 
   &:focus {
+    background-color: nb-theme(button-outline-background-color);
     border-color: nb-theme(button-outline-#{$status}-focus-border-color);
     color: nb-theme(button-outline-#{$status}-focus-text-color);
   }
 
   &:hover {
+    background-color: nb-theme(button-outline-background-color);
     border-color: nb-theme(button-outline-#{$status}-hover-border-color);
     color: nb-theme(button-outline-#{$status}-hover-text-color);
   }
 
   &:active {
+    background-color: nb-theme(button-outline-background-color);
     border-color: nb-theme(button-outline-#{$status}-active-border-color);
     color: nb-theme(button-outline-#{$status}-active-text-color);
   }
 
   &[disabled] {
+    background-color: nb-theme(button-outline-background-color);
     border-color: nb-theme(button-outline-#{$status}-disabled-border-color);
     color: nb-theme(button-outline-#{$status}-disabled-text-color);
   }

From 85f3a4881145b394c329381390ed2f9c04c469f8 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 12:56:21 +0300
Subject: [PATCH 2/8] fix(button): remove bootstrap text color for filled with
 active state

---
 src/framework/bootstrap/styles/_status-buttons.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/framework/bootstrap/styles/_status-buttons.scss b/src/framework/bootstrap/styles/_status-buttons.scss
index ee881500fe..22bd90fbf5 100644
--- a/src/framework/bootstrap/styles/_status-buttons.scss
+++ b/src/framework/bootstrap/styles/_status-buttons.scss
@@ -21,6 +21,7 @@
   &:active {
     background-color: nb-theme(button-filled-#{$status}-active-background-color);
     border-color: nb-theme(button-filled-#{$status}-active-border-color);
+    color: nb-theme(button-filled-#{$status}-text-color);
   }
 
   &[disabled] {

From 8c6668db2ab863a0f491fffaa03f9829b12179da Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 15:45:00 +0300
Subject: [PATCH 3/8] fix(button): button groups

---
 .../bootstrap/styles/_button-group.scss       | 167 +++++++++---------
 src/framework/bootstrap/styles/_globals.scss  |   2 +-
 .../bootstrap/bootstrap-test.component.html   |  13 ++
 3 files changed, 95 insertions(+), 87 deletions(-)

diff --git a/src/framework/bootstrap/styles/_button-group.scss b/src/framework/bootstrap/styles/_button-group.scss
index 55eb7d1671..f00832eee4 100644
--- a/src/framework/bootstrap/styles/_button-group.scss
+++ b/src/framework/bootstrap/styles/_button-group.scss
@@ -36,27 +36,27 @@
 }
 
 @mixin dropdown-primary-separator() {
-  @include dropdown-separator(nb-theme(btn-primary-active-bg));
+  @include dropdown-separator(nb-theme(button-filled-primary-active-background-color));
 }
 
 @mixin dropdown-success-separator() {
-  @include dropdown-separator(nb-theme(btn-success-active-bg));
+  @include dropdown-separator(nb-theme(button-filled-success-active-background-color));
 }
 
 @mixin dropdown-warning-separator() {
-  @include dropdown-separator(nb-theme(btn-warning-active-bg));
+  @include dropdown-separator(nb-theme(button-filled-warning-active-background-color));
 }
 
 @mixin dropdown-info-separator() {
-  @include dropdown-separator(nb-theme(btn-info-active-bg));
+  @include dropdown-separator(nb-theme(button-filled-info-active-background-color));
 }
 
 @mixin dropdown-danger-separator() {
-  @include dropdown-separator(nb-theme(btn-danger-active-bg));
+  @include dropdown-separator(nb-theme(button-filled-danger-active-background-color));
 }
 
 @mixin dropdown-secondary-separator() {
-  @include dropdown-separator(nb-theme(btn-secondary-active-bg));
+  @include dropdown-separator(nb-theme(button-filled-primary-active-background-color));
 }
 
 
@@ -88,31 +88,48 @@
     }
   }
 
+  @each $status in nb-get-statuses() {
+    .btn-group:not(.btn-divided-group) {
+      .btn.btn-outline-#{$status}.active {
+        background-color: nb-theme(button-filled-#{$status}-active-background-color);
+        border-color: nb-theme(button-filled-#{$status}-active-border-color);
+        color: nb-theme(button-filled-#{$status}-text-color);
+      }
+
+      .btn.btn-outline-#{$status}:hover,
+      .btn.btn-outline-#{$status}.hover {
+        background-color: nb-theme(button-filled-#{$status}-hover-background-color);
+        border-color: nb-theme(button-filled-#{$status}-hover-border-color);
+        color: nb-theme(button-filled-#{$status}-text-color);
+      }
+    }
+  }
+
   .btn-group:not(.btn-divided-group) > .btn:not(.dropdown-toggle) {
     &:first-child {
       @include nb-ltr() {
-        border-top-left-radius: nb-theme(btn-border-radius);
-        border-bottom-left-radius: nb-theme(btn-border-radius);
+        border-top-left-radius: nb-theme(button-rectangle-border-radius);
+        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       };
       @include nb-rtl() {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
-        border-bottom-right-radius: nb-theme(btn-border-radius);
+        border-top-right-radius: nb-theme(button-rectangle-border-radius);
+        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
       };
     }
     &:last-child {
       @include nb-ltr() {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
-        border-bottom-right-radius: nb-theme(btn-border-radius);
+        border-top-right-radius: nb-theme(button-rectangle-border-radius);
+        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
       };
       @include nb-rtl() {
-        border-top-left-radius: nb-theme(btn-border-radius);
-        border-bottom-left-radius: nb-theme(btn-border-radius);
+        border-top-left-radius: nb-theme(button-rectangle-border-radius);
+        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       };
@@ -122,21 +139,21 @@
   .btn-group.dropdown {
     & > .btn:first-of-type.dropdown-toggle {
       @include nb-ltr() {
-        border-top-left-radius: nb-theme(btn-border-radius);
+        border-top-left-radius: nb-theme(button-rectangle-border-radius);
         border-top-right-radius: 0;
       };
       @include nb-rtl() {
         border-top-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
+        border-top-right-radius: nb-theme(button-rectangle-border-radius);
       };
     }
     & > .btn:last-of-type.dropdown-toggle {
       @include nb-ltr() {
         border-top-left-radius: 0;
-        border-top-right-radius: nb-theme(btn-border-radius);
+        border-top-right-radius: nb-theme(button-rectangle-border-radius);
       };
       @include nb-rtl() {
-        border-top-left-radius: nb-theme(btn-border-radius);
+        border-top-left-radius: nb-theme(button-rectangle-border-radius);
         border-top-right-radius: 0;
       };
     }
@@ -144,21 +161,21 @@
     &:not(.show) {
       & > .btn:first-of-type.dropdown-toggle {
         @include nb-ltr() {
-          border-bottom-left-radius: nb-theme(btn-border-radius);
+          border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
           border-bottom-right-radius: 0;
         };
         @include nb-rtl() {
           border-bottom-left-radius: 0;
-          border-bottom-right-radius: nb-theme(btn-border-radius);
+          border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
         };
       }
       & > .btn:last-of-type.dropdown-toggle {
         @include nb-ltr() {
           border-bottom-left-radius: 0;
-          border-bottom-right-radius: nb-theme(btn-border-radius);
+          border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
         };
         @include nb-rtl() {
-          border-bottom-left-radius: nb-theme(btn-border-radius);
+          border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
           border-bottom-right-radius: 0;
         };
       }
@@ -173,21 +190,21 @@
   .btn-group.dropup {
     & > .btn:first-of-type.dropdown-toggle {
       @include nb-ltr() {
-        border-bottom-left-radius: nb-theme(btn-border-radius);
+        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
         border-bottom-right-radius: 0;
       };
       @include nb-rtl() {
         border-bottom-left-radius: 0;
-        border-bottom-right-radius: nb-theme(btn-border-radius);
+        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
       };
     }
     & > .btn:last-of-type.dropdown-toggle {
       @include nb-ltr() {
         border-bottom-left-radius: 0;
-        border-bottom-right-radius: nb-theme(btn-border-radius);
+        border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
       };
       @include nb-rtl() {
-        border-bottom-left-radius: nb-theme(btn-border-radius);
+        border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
         border-bottom-right-radius: 0;
       };
     }
@@ -195,21 +212,21 @@
     &:not(.show) {
       & > .btn:first-of-type.dropdown-toggle {
         @include nb-ltr() {
-          border-top-left-radius: nb-theme(btn-border-radius);
+          border-top-left-radius: nb-theme(button-rectangle-border-radius);
           border-top-right-radius: 0;
         };
         @include nb-rtl() {
           border-top-left-radius: 0;
-          border-top-right-radius: nb-theme(btn-border-radius);
+          border-top-right-radius: nb-theme(button-rectangle-border-radius);
         };
       }
       & > .btn:last-of-type.dropdown-toggle {
         @include nb-ltr() {
           border-top-left-radius: 0;
-          border-top-right-radius: nb-theme(btn-border-radius);
+          border-top-right-radius: nb-theme(button-rectangle-border-radius);
         };
         @include nb-rtl() {
-          border-top-left-radius: nb-theme(btn-border-radius);
+          border-top-left-radius: nb-theme(button-rectangle-border-radius);
           border-top-right-radius: 0;
         };
       }
@@ -227,74 +244,52 @@
   }
 
   .btn-divided-group {
-    .btn {
-      background-color: nb-theme(btn-group-bg);
-      color: nb-theme(btn-group-fg);
-    }
-
-    .btn:active,
-    .btn.active {
-      &.btn-primary,
-      &.btn-outline-primary {
-        background-color: nb-theme(btn-primary-bg);
+    @each $status in nb-get-statuses() {
+      .btn-#{$status} {
+        background-color: nb-theme(button-filled-#{$status}-background-color);
+        border-color: nb-theme(button-filled-#{$status}-border-color);
+        color: nb-theme(button-filled-#{$status}-text-color);
       }
-
-      &.btn-success,
-      &.btn-outline-success {
-        background-color: nb-theme(btn-success-bg);
-      }
-
-      &.btn-warning,
-      &.btn-outline-warning {
-        background-color: nb-theme(btn-warning-bg);
+      .btn-outline-#{$status} {
+        background-color: nb-theme(button-outline-background-color);
+        border-color: nb-theme(button-outline-#{$status}-border-color);
+        color: nb-theme(button-outline-#{$status}-text-color);
       }
 
-      &.btn-info,
-      &.btn-outline-info {
-        background-color: nb-theme(btn-info-bg);
+      .btn:active,
+      .btn.active {
+        &.btn-#{$status},
+        &.btn-outline-#{$status} {
+          background-color: nb-theme(button-filled-#{$status}-active-background-color);
+          border-color: nb-theme(button-filled-#{$status}-active-border-color);
+          color: nb-theme(button-filled-#{$status}-text-color);
+        }
       }
 
-      &.btn-danger,
-      &.btn-outline-danger {
-        background-color: nb-theme(btn-danger-bg);
+      .btn:hover,
+      .btn.hover {
+        &.btn-#{$status},
+        &.btn-outline-#{$status} {
+          background-color: nb-theme(button-filled-#{$status}-hover-background-color);
+          border-color: nb-theme(button-filled-#{$status}-hover-border-color);
+          color: nb-theme(button-filled-#{$status}-text-color);
+        }
       }
+    }
 
+    .btn:active,
+    .btn.active {
       &.btn-secondary,
       &.btn-outline-secondary {
-        border-color: nb-theme(btn-secondary-border);
+        background-color: nb-theme(button-filled-primary-active-background-color);
       }
     }
 
     .btn:hover,
     .btn.hover {
-      &.btn-primary,
-      &.btn-outline-primary {
-        @include btn-primary-hover();
-      }
-
-      &.btn-success,
-      &.btn-outline-success {
-        @include btn-success-hover();
-      }
-
-      &.btn-warning,
-      &.btn-outline-warning {
-        @include btn-warning-hover();
-      }
-
-      &.btn-info,
-      &.btn-outline-info {
-        @include btn-info-hover();
-      }
-
-      &.btn-danger,
-      &.btn-outline-danger {
-        @include btn-danger-hover();
-      }
-
       &.btn-secondary,
       &.btn-outline-secondary {
-        @include btn-secondary-hover();
+        background-color: nb-theme(button-filled-primary-hover-background-color);
       }
     }
   }
@@ -306,7 +301,7 @@
 
     .btn:not(.active):not(:hover) + .btn:not(.active):not(:hover) {
       &::before {
-        background-color: nb-theme(separator);
+        background-color: nb-theme(divider-color);
       }
     }
   }
@@ -315,15 +310,15 @@
     .btn:not(:first-child) {
       @include nb-ltr(margin-left, 0.5rem);
       @include nb-rtl(margin-right, 0.5rem);
-      border-radius: nb-theme(btn-border-radius);
+      border-radius: nb-theme(button-rectangle-border-radius);
     }
 
     .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-      border-radius: nb-theme(btn-border-radius);
+      border-radius: nb-theme(button-rectangle-border-radius);
     }
 
     .btn:not(:last-child):not(.dropdown-toggle) {
-      border-radius: nb-theme(btn-border-radius);
+      border-radius: nb-theme(button-rectangle-border-radius);
     }
   }
 
diff --git a/src/framework/bootstrap/styles/_globals.scss b/src/framework/bootstrap/styles/_globals.scss
index bbba199fb6..39ab59c61d 100644
--- a/src/framework/bootstrap/styles/_globals.scss
+++ b/src/framework/bootstrap/styles/_globals.scss
@@ -18,7 +18,7 @@
 
 @mixin nb-bootstrap-global() {
   @include nb-b-buttons-theme();
-  //@include nb-b-button-group-theme();
+  @include nb-b-button-group-theme();
   @include nb-b-dropdowns-theme();
   //@include nb-b-icon-buttons-theme();
   @include nb-b-forms-theme();
diff --git a/src/playground/without-styles/bootstrap/bootstrap-test.component.html b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
index 4380904d7c..fd718139eb 100644
--- a/src/playground/without-styles/bootstrap/bootstrap-test.component.html
+++ b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
@@ -90,6 +90,19 @@
               </label>
             </div>
           </nb-card-body>
+          <nb-card-body>
+            <div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group">
+              <label class="btn btn-outline-success active">
+                <input type="radio" [value]="1"> 1
+              </label>
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="2"> 2
+              </label>
+              <label class="btn btn-outline-success">
+                <input type="radio" [value]="3"> 3
+              </label>
+            </div>
+          </nb-card-body>
         </nb-card>
       </div>
 

From f84914fc727e497cf1d4153afd8542d48f364880 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 16:05:07 +0300
Subject: [PATCH 4/8] refactor: remove checkbox and radio examples

---
 .../bootstrap/bootstrap-test.component.html   | 38 -------------------
 1 file changed, 38 deletions(-)

diff --git a/src/playground/without-styles/bootstrap/bootstrap-test.component.html b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
index fd718139eb..956e8f92b3 100644
--- a/src/playground/without-styles/bootstrap/bootstrap-test.component.html
+++ b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
@@ -216,44 +216,6 @@
             </div>
           </nb-card-body>
         </nb-card>
-
-        <nb-card>
-          <nb-card-header>Checkboxes & Radios</nb-card-header>
-          <nb-card-body>
-            <div class="row demo-checkboxes-radio">
-              <div class="demo-checkboxes col-sm-4">
-                <div class="custom-control custom-checkbox">
-                  <input type="checkbox" class="custom-control-input" id="b-checkbox">
-                  <label class="custom-control-label" for="b-checkbox">Bootstrap Checkbox</label>
-                </div>
-              </div>
-              <div class="demo-radio col-sm-4">
-                <label class="custom-control custom-radio">
-                  <input type="radio" class="custom-control-input" name="customRadio">
-                  <span class="custom-control-indicator"></span>
-                  <span class="custom-control-description">Radio 1</span>
-                </label>
-                <label class="custom-control custom-radio">
-                  <input type="radio" class="custom-control-input" name="customRadio" checked>
-                  <span class="custom-control-indicator"></span>
-                  <span class="custom-control-description">Radio 2</span>
-                </label>
-                <label class="custom-control custom-radio">
-                  <input type="radio" class="custom-control-input" name="customRadio">
-                  <span class="custom-control-indicator"></span>
-                  <span class="custom-control-description">Radio 3</span>
-                </label>
-              </div>
-              <div class="demo-disabled-checkbox-radio col-sm-4">
-                <label class="custom-control custom-radio">
-                  <input type="radio" class="custom-control-input" disabled>
-                  <span class="custom-control-indicator"></span>
-                  <span class="custom-control-description">Disabled Radio</span>
-                </label>
-              </div>
-            </div>
-          </nb-card-body>
-        </nb-card>
       </div>
 
       <div class="col-lg-12">

From 62873ac2dce6fcbe9cec9c9c6f416948f9a6fe69 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 16:26:21 +0300
Subject: [PATCH 5/8] fix(button): icon buttons

---
 src/framework/bootstrap/styles/_globals.scss  |  2 +-
 .../bootstrap/styles/_icon-buttons.scss       | 11 ++---
 .../bootstrap/bootstrap-test.component.html   | 46 +++++++++++++++++++
 .../bootstrap/bootstrap.module.ts             |  3 +-
 4 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/framework/bootstrap/styles/_globals.scss b/src/framework/bootstrap/styles/_globals.scss
index 39ab59c61d..8226625dd7 100644
--- a/src/framework/bootstrap/styles/_globals.scss
+++ b/src/framework/bootstrap/styles/_globals.scss
@@ -20,7 +20,7 @@
   @include nb-b-buttons-theme();
   @include nb-b-button-group-theme();
   @include nb-b-dropdowns-theme();
-  //@include nb-b-icon-buttons-theme();
+  @include nb-b-icon-buttons-theme();
   @include nb-b-forms-theme();
   @include nb-b-modals-theme();
   @include nb-b-layout-theme();
diff --git a/src/framework/bootstrap/styles/_icon-buttons.scss b/src/framework/bootstrap/styles/_icon-buttons.scss
index 11a5bf28da..3c76335e81 100644
--- a/src/framework/bootstrap/styles/_icon-buttons.scss
+++ b/src/framework/bootstrap/styles/_icon-buttons.scss
@@ -7,15 +7,12 @@
 @mixin nb-b-icon-buttons-theme() {
 
   .btn-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     font-size: 1.75rem;
     padding: 0.5rem 1rem;
 
-    &:focus,
-    &.focus {
-      box-shadow: none;
+    nb-icon,
+    .icon {
+      vertical-align: middle;
     }
   }
 
@@ -29,9 +26,11 @@
       text-align: right;
     };
 
+    nb-icon,
     .icon {
       @include nb-ltr(margin-right, 1rem);
       @include nb-rtl(margin-left, 1rem);
+      vertical-align: middle;
     }
   }
 }
diff --git a/src/playground/without-styles/bootstrap/bootstrap-test.component.html b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
index 956e8f92b3..bcc3e0cf1e 100644
--- a/src/playground/without-styles/bootstrap/bootstrap-test.component.html
+++ b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
@@ -41,6 +41,52 @@
         </nb-card>
       </div>
 
+      <div class="col-lg-12">
+        <nb-card>
+          <nb-card-header>Icon buttons</nb-card-header>
+          <nb-card-body>
+            <button class="btn btn-primary btn-icon">
+              <nb-icon icon="heart-outline"></nb-icon>
+            </button>
+            <button class="btn btn-success btn-icon">
+              <nb-icon icon="heart-outline"></nb-icon>
+            </button>
+            <button class="btn btn-info btn-icon">
+              <nb-icon icon="heart-outline"></nb-icon>
+            </button>
+            <button class="btn btn-warning btn-icon">
+              <nb-icon icon="heart-outline"></nb-icon>
+            </button>
+            <button class="btn btn-danger btn-icon">
+              <nb-icon icon="heart-outline"></nb-icon>
+            </button>
+          </nb-card-body>
+        </nb-card>
+      </div>
+
+      <div class="col-lg-12">
+        <nb-card>
+          <nb-card-header>Icon buttons</nb-card-header>
+          <nb-card-body>
+            <button class="btn btn-primary btn-with-icon">
+              <nb-icon icon="heart-outline"></nb-icon> Primary
+            </button>
+            <button class="btn btn-success btn-with-icon">
+              <nb-icon icon="heart-outline"></nb-icon> Success
+            </button>
+            <button class="btn btn-info btn-with-icon">
+              <nb-icon icon="heart-outline"></nb-icon> Info
+            </button>
+            <button class="btn btn-warning btn-with-icon">
+              <nb-icon icon="heart-outline"></nb-icon> Warning
+            </button>
+            <button class="btn btn-danger btn-with-icon">
+              <nb-icon icon="heart-outline"></nb-icon> Danger
+            </button>
+          </nb-card-body>
+        </nb-card>
+      </div>
+
       <div class="col-lg-12">
         <nb-card>
           <nb-card-header>Button Group</nb-card-header>
diff --git a/src/playground/without-styles/bootstrap/bootstrap.module.ts b/src/playground/without-styles/bootstrap/bootstrap.module.ts
index 03bf26bfd2..4f38913f4a 100644
--- a/src/playground/without-styles/bootstrap/bootstrap.module.ts
+++ b/src/playground/without-styles/bootstrap/bootstrap.module.ts
@@ -5,7 +5,7 @@
  */
 
 import { NgModule } from '@angular/core';
-import { NbCardModule, NbLayoutModule } from '@nebular/theme';
+import { NbCardModule, NbLayoutModule, NbIconModule } from '@nebular/theme';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { BootstrapRoutingModule } from './bootstrap-routing.module';
@@ -18,6 +18,7 @@ import { BootstrapTestComponent } from './bootstrap-test.component';
   imports: [
     NbLayoutModule,
     NbCardModule,
+    NbIconModule,
     BootstrapRoutingModule,
     NgbModule,
   ],

From a1d0b80b0de9729b5f71ceb562b550681affaa1f Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 16:50:23 +0300
Subject: [PATCH 6/8] fix(modal): specify close button color

---
 src/framework/bootstrap/styles/_modals.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/framework/bootstrap/styles/_modals.scss b/src/framework/bootstrap/styles/_modals.scss
index 4dc652a8e0..8e7871055e 100644
--- a/src/framework/bootstrap/styles/_modals.scss
+++ b/src/framework/bootstrap/styles/_modals.scss
@@ -47,17 +47,12 @@
 
     .close {
       text-shadow: none;
-      color: nb-theme(modal-fg-heading);
+      color: nb-theme(card-header-text-color);
 
       @include nb-rtl {
         margin-left: -1rem;
         margin-right: auto;
       }
-
-
-      &:hover {
-        color: nb-theme(modal-fg-heading);
-      }
     }
   }
 

From ce40cb74e68a81ce814b3438cfb2d2e39ea47309 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 16:50:46 +0300
Subject: [PATCH 7/8] docs(bootstrap): add modal example

---
 .../bootstrap/bootstrap-test.component.html   | 24 +++++++++++++++++++
 .../bootstrap/bootstrap-test.component.ts     | 11 +++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/playground/without-styles/bootstrap/bootstrap-test.component.html b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
index bcc3e0cf1e..42fda72915 100644
--- a/src/playground/without-styles/bootstrap/bootstrap-test.component.html
+++ b/src/playground/without-styles/bootstrap/bootstrap-test.component.html
@@ -279,6 +279,30 @@
           </nb-card-body>
         </nb-card>
       </div>
+
+      <div class="col-lg-12">
+        <nb-card>
+          <nb-card-header>Modal</nb-card-header>
+          <nb-card-body>
+            <button class="btn btn-primary" (click)="openModal(modalContent)">Open modal</button>
+
+            <ng-template #modalContent let-modal>
+              <div class="modal-header">
+                <h4 class="modal-title" id="modal-basic-title">Title</h4>
+                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                Modal body
+              </div>
+              <div class="modal-footer">
+                Footer
+              </div>
+            </ng-template>
+          </nb-card-body>
+        </nb-card>
+      </div>
     </div>
 
   </nb-layout-column>
diff --git a/src/playground/without-styles/bootstrap/bootstrap-test.component.ts b/src/playground/without-styles/bootstrap/bootstrap-test.component.ts
index 96fc669918..f60f5b3faa 100644
--- a/src/playground/without-styles/bootstrap/bootstrap-test.component.ts
+++ b/src/playground/without-styles/bootstrap/bootstrap-test.component.ts
@@ -5,6 +5,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NbThemeService } from '@nebular/theme';
 
 import 'style-loader!./styles.scss';
@@ -26,10 +27,16 @@ import 'style-loader!./styles.scss';
 })
 export class BootstrapTestComponent implements OnInit {
 
-  constructor(private themeService: NbThemeService) {
-  }
+  constructor(
+    private themeService: NbThemeService,
+    private modalService: NgbModal,
+  ) {}
 
   ngOnInit() {
     this.themeService.changeTheme('default');
   }
+
+  openModal(content) {
+    this.modalService.open(content);
+  }
 }

From 2c699e8ff0f1fa566d1e8106b60201b27a087e4b Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Thu, 30 May 2019 16:52:32 +0300
Subject: [PATCH 8/8] fix(input): specify different colors for default, focus
 and hover states

---
 .../styles/_default-form-control.scss         | 40 +++++++++++++++++--
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/framework/bootstrap/styles/_default-form-control.scss b/src/framework/bootstrap/styles/_default-form-control.scss
index 66c6afd15b..37690b6290 100644
--- a/src/framework/bootstrap/styles/_default-form-control.scss
+++ b/src/framework/bootstrap/styles/_default-form-control.scss
@@ -23,25 +23,57 @@
 }
 
 @mixin form-control-success() {
-  &, &:focus {
+  & {
     border-color: nb-theme(input-success-border-color);
   }
+
+  &:focus {
+    border-color: nb-theme(input-success-focus-border-color);
+  }
+
+  &:hover {
+    border-color: nb-theme(input-success-hover-border-color);
+  }
 }
 
 @mixin form-control-info() {
-  &, &:focus {
+  & {
     border-color: nb-theme(input-info-border-color);
   }
+
+  &:focus {
+    border-color: nb-theme(input-info-focus-border-color);
+  }
+
+  &:hover {
+    border-color: nb-theme(input-info-hover-border-color);
+  }
 }
 
 @mixin form-control-danger() {
-  &, &:focus {
+  & {
     border-color: nb-theme(input-danger-border-color);
   }
+
+  &:focus {
+    border-color: nb-theme(input-danger-focus-border-color);
+  }
+
+  &:hover {
+    border-color: nb-theme(input-danger-hover-border-color);
+  }
 }
 
 @mixin form-control-warning() {
-  &, &:focus {
+  & {
     border-color: nb-theme(input-warning-border-color);
   }
+
+  &:focus {
+    border-color: nb-theme(input-warning-focus-border-color);
+  }
+
+  &:hover {
+    border-color: nb-theme(input-warning-hover-border-color);
+  }
 }