From 6fe593295d913abb536702e525b4724eb1c74628 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Wed, 26 Jul 2017 20:39:12 +0300
Subject: [PATCH] feat(sidebar): sidebar button styles

---
 .../layouts/one-column/one-column.layout.scss | 47 +++++++++++++++++--
 .../layouts/one-column/one-column.layout.ts   |  6 ++-
 src/app/@theme/styles/variables.scss          |  3 ++
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/src/app/@theme/layouts/one-column/one-column.layout.scss b/src/app/@theme/layouts/one-column/one-column.layout.scss
index c2432a2e..1cda072c 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@@ -6,18 +6,55 @@
 
     margin-top: nga-theme(sidebar-header-gap);
 
-    /deep/ .scrollable {
+    /deep/ .main-container {
       height: calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)})!important;
       border-top-right-radius: 0.75rem;
     }
 
+    /deep/ nga-sidebar-header {
+      padding-bottom: 0.5rem;
+      text-align: center;
+    }
+
     background: transparent;
 
     .main-btn {
-      display: block;
-      padding: 1rem 3rem;
-      margin-left: auto;
-      margin-right: auto;
+      padding: 0.75rem 2.5rem;
+      margin-top: -2rem;
+      font-weight: bold;
+      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
+
+      i {
+        font-size: 2rem;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      }
+      span {
+        padding-left: 0.25rem;
+      }
+
+      i, span {
+        vertical-align: middle;
+      }
+    }
+
+    &.compacted {
+
+      /deep/ nga-sidebar-header {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      .main-btn {
+        width: 46px;
+        height: 44px;
+        padding: 0;
+        border-radius: 5px;
+        transition: none;
+
+        span {
+          display: none;
+        }
+      }
     }
   }
 }
diff --git a/src/app/@theme/layouts/one-column/one-column.layout.ts b/src/app/@theme/layouts/one-column/one-column.layout.ts
index a5ae397d..33290faf 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.ts
+++ b/src/app/@theme/layouts/one-column/one-column.layout.ts
@@ -11,7 +11,11 @@ import { Component } from '@angular/core';
       </nga-layout-header>
 
       <nga-sidebar responsive>
-        <button class="btn btn-hero-success main-btn"><i class="ion ion-social-github-outline"></i> Support Us</button>
+        <nga-sidebar-header>
+          <button class="btn btn-hero-success main-btn">
+            <i class="ion ion-social-github"></i> <span>Support Us</span>
+          </button>
+        </nga-sidebar-header>
         <ng-content select="nga-menu"></ng-content>
       </nga-sidebar>
 
diff --git a/src/app/@theme/styles/variables.scss b/src/app/@theme/styles/variables.scss
index ee2f4f36..16bc07c2 100644
--- a/src/app/@theme/styles/variables.scss
+++ b/src/app/@theme/styles/variables.scss
@@ -9,14 +9,17 @@ $nga-enabled-themes: (default, light, cosmic);
 $nga-themes: nga-register-theme((
  // app wise variables for each theme
   sidebar-header-gap: 2rem,
+  sidebar-header-height: initial,
 ), default, default);
 
 $nga-themes: nga-register-theme((
   // app wise variables for each theme
   sidebar-header-gap: 2rem,
+  sidebar-header-height: initial,
 ), cosmic, cosmic);
 
 $nga-themes: nga-register-theme((
   // app wise variables for each theme
   sidebar-header-gap: 2rem,
+  sidebar-header-height: initial,
 ), light, light);