From 1c4c964e2550b5e18fee3bbf15694a1ce6cc35d1 Mon Sep 17 00:00:00 2001
From: Mikhail Hryb <iamfreespirit.mg@gmail.com>
Date: Mon, 18 Sep 2017 11:27:40 +0300
Subject: [PATCH] fix(buttons): buttons responsive

---
 .../action-groups.component.scss              |  6 +-
 .../buttons/buttons.component.scss            | 65 +++++++++++++++++--
 .../default-buttons.component.scss            |  5 +-
 .../hero-buttons/hero-buttons.component.scss  |  4 ++
 .../labeled-actions-group.component.scss      | 24 ++++++-
 5 files changed, 93 insertions(+), 11 deletions(-)

diff --git a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
index c26310b4..6090e3ac 100644
--- a/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
+++ b/src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
@@ -9,11 +9,15 @@
   }
 
   .action-groups-header {
-    flex: 1;
+    flex-basis: 20%;
 
     color: nb-theme(card-header-fg-heading);
     font-family: nb-theme(card-header-font-family);
     font-size: nb-theme(card-header-font-size);
     font-weight: nb-theme(card-header-font-weight);
   }
+
+  .nb-actions {
+    flex-basis: 80%;
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/buttons.component.scss b/src/app/pages/ui-features/buttons/buttons.component.scss
index c0c44c88..384b9e7f 100644
--- a/src/app/pages/ui-features/buttons/buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/buttons.component.scss
@@ -68,7 +68,12 @@
 
     .icon-buttons .icon-button-examples {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
+
+      button {
+        margin-right: 2rem;
+        min-width: 4rem;
+      }
     }
 
     .icon-buttons .icon-button-examples:not(:last-child) {
@@ -76,12 +81,58 @@
     }
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(xxxl) {
+    ngx-default-buttons /deep/ nb-card-header {
+      flex-direction: column;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
     ngx-action-groups /deep/ nb-card-body {
       flex-direction: column;
       align-items: flex-start;
       padding: 0.75rem;
 
+      .action-groups-header {
+        margin: 0 0 0.5rem 0.25rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+
+    ngx-action-groups /deep/ nb-card-body {
+
+      nb-action {
+        padding: 0.75rem;
+      }
+
+      .control-icon, .start-search {
+        font-size: 1.75rem;
+      }
+
+      .user-container {
+        font-size: 1rem;
+      }
+
+      .user-picture {
+        height: 1.75rem;
+        width: 1.75rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+
+    /deep/.icon-buttons .icon-button-examples {
+      button {
+        margin-right: 1rem;
+      }
+    }
+
+    ngx-action-groups /deep/ nb-card-body {
+
       nb-action {
         padding: 0.5rem;
       }
@@ -98,10 +149,6 @@
         height: 1.5rem;
         width: 1.5rem;
       }
-
-      .action-groups-header {
-        margin: 0 0 0.5rem 0.25rem;
-      }
     }
 
     ngx-labeled-actions-group /deep/ nb-card-body {
@@ -113,5 +160,11 @@
       flex-direction: column;
       margin-bottom: 0.5rem;
     }
+
+    ngx-block-level-buttons /deep/ {
+      .btn-primary {
+        padding: 0.75rem 1rem;
+      }
+    }
   }
 }
diff --git a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
index 7bf8512b..44671bd6 100644
--- a/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.scss
@@ -8,6 +8,7 @@
 
     span {
       flex: 1;
+      margin-bottom: 1rem;
     }
 
     .dropdown {
@@ -16,8 +17,8 @@
     }
   }
 
-  .example-container:nth-child(n + 4) {
-    margin-top: 2rem;
+  .example-container {
+    margin-bottom: 2rem;
   }
 
   .primary-container {
diff --git a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss
index 028db20e..2109df08 100644
--- a/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss
+++ b/src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss
@@ -106,4 +106,8 @@
       box-shadow: btn-hero-secondary-bevel();
     }
   }
+
+  .example-container {
+    margin-bottom: 2rem;
+  }
 }
diff --git a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
index 1b25e44f..fb69b7ba 100644
--- a/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
+++ b/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss
@@ -23,11 +23,31 @@
     }
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     nb-action {
       font-size: 0.75rem;
       i {
-        font-size: 2rem;
+        font-size: 1.5rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    nb-action {
+      font-size: 0.625rem;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    nb-action {
+      font-size: 0.5rem;
+
+      span {
+        display: none;
+      }
+
+      i {
+        margin: 0;
       }
     }
   }