From 66261961cb6f7112eb62e7e8085b8d25b9a29517 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Wed, 29 May 2019 14:59:34 +0300
Subject: [PATCH] feat: update to 8 - comment out mixins

---
 .../components/header/header.component.scss   |   6 +-
 .../switcher/switcher.component.scss          | 224 +++++------
 .../toggle-settings-button.component.scss     | 236 +++++------
 src/app/@theme/styles/font-size.scss          |   2 +-
 src/app/@theme/styles/styles.scss             |   4 +-
 src/app/@theme/styles/themes.scss             |  33 +-
 .../hero-buttons/hero-buttons.component.scss  | 270 ++++++-------
 .../contacts/contacts.component.scss          |   2 +-
 .../electricity/electricity.component.scss    |  20 +-
 .../rooms/player/player.component.scss        |   4 +-
 .../status-card/status-card.component.scss    | 368 +++++++++---------
 .../pages/dashboard/team/team.component.scss  |   2 +-
 .../temperature-dragger.component.scss        |   8 +-
 .../temperature/temperature.component.scss    |   4 +-
 .../traffic-bar/traffic-bar.component.scss    |   2 +-
 .../news-post-placeholder.component.scss      |   2 +-
 .../hero-buttons/hero-buttons.component.scss  | 288 +++++++-------
 17 files changed, 753 insertions(+), 722 deletions(-)

diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss
index 4ac30a5a..366c9b8e 100644
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@@ -131,13 +131,13 @@
 
   @include keyframes(pulse) {
     0% {
-      box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
+      //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
     }
     20% {
-      box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
+      //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
     }
     100% {
-      box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
+      //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
     }
   }
 
diff --git a/src/app/@theme/components/switcher/switcher.component.scss b/src/app/@theme/components/switcher/switcher.component.scss
index 585f007b..1f7917fc 100644
--- a/src/app/@theme/components/switcher/switcher.component.scss
+++ b/src/app/@theme/components/switcher/switcher.component.scss
@@ -1,112 +1,112 @@
-@import '../../styles/themes';
-@import '~@nebular/bootstrap/styles/hero-buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-  .switch-label {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    margin: 0;
-
-    &.vertical {
-      flex-direction: column;
-      align-items: flex-start;
-
-      .first,
-      .second {
-        padding: 0;
-      }
-
-      .switch {
-        margin-top: 0.5em;
-      }
-    }
-
-    & > span {
-      font-size: 1.125rem;
-      font-weight: nb-theme(font-weight-bold);
-      transition: opacity 0.3s ease;
-      color: nb-theme(color-fg);
-
-      &.first {
-        @include nb-ltr(padding-right, 10px);
-        @include nb-rtl(padding-left, 10px);
-      }
-
-      &.second {
-        @include nb-ltr(padding-left, 10px);
-        @include nb-rtl(padding-right, 10px);
-      }
-
-      &.active {
-        color: nb-theme(color-fg-text);
-      }
-
-      @include nb-for-theme(cosmic) {
-        color: nb-theme(color-fg);
-
-        &.active {
-          color: nb-theme(color-white);
-        }
-      }
-
-      &:active {
-        opacity: 0.78;
-      }
-    }
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 3rem;
-    height: 1.5rem;
-    margin: 0;
-
-    input {
-      display: none;
-
-      &:checked + .slider::before {
-        @include nb-ltr(transform, translateX(1.5rem));
-        @include nb-rtl(transform, translateX(-1.5rem));
-      }
-    }
-
-    .slider {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 1.75rem;
-      background-color: nb-theme(layout-bg);
-    }
-
-    .slider::before {
-      position: absolute;
-      content: '';
-      height: 1.5rem;
-      width: 1.5rem;
-      border-radius: 50%;
-      background-color: nb-theme(color-success);
-      transition: 0.2s;
-
-      box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
-
-      @include nb-for-theme(cosmic) {
-        @include btn-hero-primary-gradient();
-      }
-
-      @include nb-for-theme(corporate) {
-        background-color: nb-theme(color-primary);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    align-items: flex-end;
-  }
-}
+//@import '../../styles/themes';
+//@import '~@nebular/bootstrap/styles/hero-buttons';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
+//@include nb-install-component() {
+//  .switch-label {
+//    display: flex;
+//    justify-content: space-between;
+//    align-items: center;
+//    cursor: pointer;
+//    margin: 0;
+//
+//    &.vertical {
+//      flex-direction: column;
+//      align-items: flex-start;
+//
+//      .first,
+//      .second {
+//        padding: 0;
+//      }
+//
+//      .switch {
+//        margin-top: 0.5em;
+//      }
+//    }
+//
+//    & > span {
+//      font-size: 1.125rem;
+//      font-weight: nb-theme(font-weight-bold);
+//      transition: opacity 0.3s ease;
+//      color: nb-theme(color-fg);
+//
+//      &.first {
+//        @include nb-ltr(padding-right, 10px);
+//        @include nb-rtl(padding-left, 10px);
+//      }
+//
+//      &.second {
+//        @include nb-ltr(padding-left, 10px);
+//        @include nb-rtl(padding-right, 10px);
+//      }
+//
+//      &.active {
+//        color: nb-theme(color-fg-text);
+//      }
+//
+//      @include nb-for-theme(cosmic) {
+//        color: nb-theme(color-fg);
+//
+//        &.active {
+//          color: nb-theme(color-white);
+//        }
+//      }
+//
+//      &:active {
+//        opacity: 0.78;
+//      }
+//    }
+//  }
+//
+//  .switch {
+//    position: relative;
+//    display: inline-block;
+//    width: 3rem;
+//    height: 1.5rem;
+//    margin: 0;
+//
+//    input {
+//      display: none;
+//
+//      &:checked + .slider::before {
+//        @include nb-ltr(transform, translateX(1.5rem));
+//        @include nb-rtl(transform, translateX(-1.5rem));
+//      }
+//    }
+//
+//    .slider {
+//      position: absolute;
+//      top: 0;
+//      left: 0;
+//      right: 0;
+//      bottom: 0;
+//      border-radius: 1.75rem;
+//      background-color: nb-theme(layout-bg);
+//    }
+//
+//    .slider::before {
+//      position: absolute;
+//      content: '';
+//      height: 1.5rem;
+//      width: 1.5rem;
+//      border-radius: 50%;
+//      background-color: nb-theme(color-success);
+//      transition: 0.2s;
+//
+//      //box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
+//
+//      @include nb-for-theme(cosmic) {
+//        @include btn-hero-primary-gradient();
+//      }
+//
+//      @include nb-for-theme(corporate) {
+//        background-color: nb-theme(color-primary);
+//      }
+//    }
+//  }
+//
+//  @include media-breakpoint-down(xs) {
+//    align-items: flex-end;
+//  }
+//}
diff --git a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
index b46d36d0..2a6f278c 100644
--- a/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
+++ b/src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
@@ -1,118 +1,118 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~@nebular/bootstrap/styles/hero-buttons';
-
-@include nb-install-component() {
-  .toggle-settings {
-    position: fixed;
-    top: 50%;
-    height: 3rem;
-    width: 3rem;
-    padding: 0;
-    text-align: center;
-    border: none;
-    transition: transform 0.3s ease, background-image 0.3s ease;
-    transform: translate(0, -50%);
-    z-index: 998;
-
-    @include nb-ltr() {
-      border-top-left-radius: nb-theme(radius);
-      border-bottom-left-radius: nb-theme(radius);
-      right: 0;
-
-      &.sidebar-end {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        right: auto;
-        border-top-right-radius: nb-theme(radius);
-        border-bottom-right-radius: nb-theme(radius);
-        left: 0;
-      }
-    }
-
-    @include nb-rtl() {
-      border-top-right-radius: nb-theme(radius);
-      border-bottom-right-radius: nb-theme(radius);
-      left: 0;
-
-      &.sidebar-end {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        left: auto;
-        border-top-left-radius: nb-theme(radius);
-        border-bottom-left-radius: nb-theme(radius);
-        right: 0;
-      }
-    }
-
-    &.expanded {
-      @include nb-ltr(transform, translate(-19rem, -50%));
-      @include nb-rtl(transform, translate(19rem, -50%));
-
-      &.sidebar-end {
-        @include nb-rtl(transform, translate(-19rem, -50%));
-        @include nb-ltr(transform, translate(19rem, -50%));
-      }
-    }
-
-    @include nb-for-theme(cosmic) {
-      box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
-      @include btn-hero-success-gradient();
-    }
-
-    @include nb-for-theme(default) {
-      border: 1px solid #d5dbe0;
-      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-      background-color: #ffffff;
-    }
-
-    @include nb-for-theme(corporate) {
-      border: 1px solid #d5dbe0;
-      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
-      color: nb-theme(color-danger);
-      background-color: #ffffff;
-    }
-
-    i {
-      font-size: 2.75rem;
-      color: #ffffff;
-      display: block;
-
-
-      @include nb-for-theme(default) {
-        color: nb-theme(color-danger);
-      }
-
-      @include nb-for-theme(corporate) {
-        color: nb-theme(color-warning);
-      }
-    }
-
-    &:not(.was-expanded) i {
-      animation-name: gear-pulse;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-    }
-
-    @keyframes gear-pulse {
-      from {
-        transform: scale3d(1, 1, 1);
-      }
-
-      50% {
-        transform: scale3d(1.2, 1.2, 1.2);
-      }
-
-      to {
-        transform: scale3d(1, 1, 1);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    .toggle-settings {
-      display: none;
-    }
-  }
-}
+//@import '../../styles/themes';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+////@import '~@nebular/bootstrap/styles/hero-buttons';
+//
+//@include nb-install-component() {
+//  .toggle-settings {
+//    position: fixed;
+//    top: 50%;
+//    height: 3rem;
+//    width: 3rem;
+//    padding: 0;
+//    text-align: center;
+//    border: none;
+//    transition: transform 0.3s ease, background-image 0.3s ease;
+//    transform: translate(0, -50%);
+//    z-index: 998;
+//
+//    @include nb-ltr() {
+//      border-top-left-radius: nb-theme(radius);
+//      border-bottom-left-radius: nb-theme(radius);
+//      right: 0;
+//
+//      &.sidebar-end {
+//        border-top-left-radius: 0;
+//        border-bottom-left-radius: 0;
+//        right: auto;
+//        border-top-right-radius: nb-theme(radius);
+//        border-bottom-right-radius: nb-theme(radius);
+//        left: 0;
+//      }
+//    }
+//
+//    @include nb-rtl() {
+//      border-top-right-radius: nb-theme(radius);
+//      border-bottom-right-radius: nb-theme(radius);
+//      left: 0;
+//
+//      &.sidebar-end {
+//        border-top-right-radius: 0;
+//        border-bottom-right-radius: 0;
+//        left: auto;
+//        border-top-left-radius: nb-theme(radius);
+//        border-bottom-left-radius: nb-theme(radius);
+//        right: 0;
+//      }
+//    }
+//
+//    &.expanded {
+//      @include nb-ltr(transform, translate(-19rem, -50%));
+//      @include nb-rtl(transform, translate(19rem, -50%));
+//
+//      &.sidebar-end {
+//        @include nb-rtl(transform, translate(-19rem, -50%));
+//        @include nb-ltr(transform, translate(19rem, -50%));
+//      }
+//    }
+//
+//    @include nb-for-theme(cosmic) {
+//      box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
+//      @include btn-hero-success-gradient();
+//    }
+//
+//    @include nb-for-theme(default) {
+//      border: 1px solid #d5dbe0;
+//      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
+//      background-color: #ffffff;
+//    }
+//
+//    @include nb-for-theme(corporate) {
+//      border: 1px solid #d5dbe0;
+//      box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
+//      color: nb-theme(color-danger);
+//      background-color: #ffffff;
+//    }
+//
+//    i {
+//      font-size: 2.75rem;
+//      color: #ffffff;
+//      display: block;
+//
+//
+//      @include nb-for-theme(default) {
+//        color: nb-theme(color-danger);
+//      }
+//
+//      @include nb-for-theme(corporate) {
+//        color: nb-theme(color-warning);
+//      }
+//    }
+//
+//    &:not(.was-expanded) i {
+//      animation-name: gear-pulse;
+//      animation-duration: 1s;
+//      animation-iteration-count: infinite;
+//    }
+//
+//    @keyframes gear-pulse {
+//      from {
+//        transform: scale3d(1, 1, 1);
+//      }
+//
+//      50% {
+//        transform: scale3d(1.2, 1.2, 1.2);
+//      }
+//
+//      to {
+//        transform: scale3d(1, 1, 1);
+//      }
+//    }
+//  }
+//
+//  @include media-breakpoint-down(sm) {
+//    .toggle-settings {
+//      display: none;
+//    }
+//  }
+//}
diff --git a/src/app/@theme/styles/font-size.scss b/src/app/@theme/styles/font-size.scss
index 055870a6..8272a704 100644
--- a/src/app/@theme/styles/font-size.scss
+++ b/src/app/@theme/styles/font-size.scss
@@ -1,3 +1,3 @@
 html {
-  font-size: 14px;
+  //font-size: 14px;
 }
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index ffa0b697..1d88d424 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -4,7 +4,7 @@
 // framework component themes (styles tied to theme variables)
 @import '~@nebular/theme/styles/globals';
 @import '~@nebular/auth/styles/all';
-@import '~@nebular/bootstrap/styles/globals';
+//@import '~@nebular/bootstrap/styles/globals';
 // ...
 
 // global app font size
@@ -19,7 +19,7 @@
   // framework global styles
   @include nb-theme-global();
   @include nb-auth-global();
-  @include nb-bootstrap-global();
+  //@include nb-bootstrap-global();
 
   // loading progress bar
   @include ngx-pace-theme();
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index cdbd4dc8..f30dc574 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -4,7 +4,7 @@
 @import '~@nebular/theme/styles/themes';
 
 // which themes you what to enable (empty to enable all)
-$nb-enabled-themes: (default, cosmic, corporate);
+$nb-enabled-themes: (default, cosmic, corporate, dark);
 
 $nb-themes: nb-register-theme((
  // app wise variables for each theme
@@ -95,3 +95,34 @@ $nb-themes: nb-register-theme((
 
   progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
 ), corporate, corporate);
+
+$nb-themes: nb-register-theme((
+  // app wise variables for each theme
+  sidebar-header-gap: 2rem,
+  sidebar-header-height: initial,
+  layout-content-width: 1400px,
+
+  font-main: Roboto,
+  font-secondary: Exo,
+
+  switcher-background: #4e41a5,
+  switcher-background-percentage: 14%,
+  drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
+
+  list-item-border-width: 1px,
+
+  slide-out-container-width: 30%,
+  slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
+  slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
+  slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
+
+  chart-panel-summary-box-shadow: none,
+  chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
+  chart-panel-summary-border-color: #332e73,
+  chart-panel-summary-border-width: 1px,
+
+  ecommerce-card-border-width: 1px,
+
+  progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
+), dark, dark);
+
diff --git a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
index d2e3cfde..e7eb8c8b 100644
--- a/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
+++ b/src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
@@ -1,135 +1,135 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding-bottom: 0;
-  }
-
-  .none {
-    position: relative;
-    transform: rotate(45deg);
-
-    &::before, &::after {
-      position: absolute;
-      content: '';
-      background: nb-theme(form-control-border-color);
-    }
-
-    &::before {
-      left: 50%;
-      top: 10%;
-      transform: translateX(-50%);
-      width: 1px;
-      height: 80%;
-    }
-
-    &::after {
-      top: 50%;
-      left: 10%;
-      transform: translateY(-50%);
-      height: 1px;
-      width: 80%;
-    }
-  }
-
-  .shadow {
-    box-shadow: nb-theme(btn-hero-shadow);
-  }
-
-  .primary-container {
-    .color {
-      background-color: nb-theme(color-primary);
-    }
-    .gradient {
-      @include btn-hero-primary-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-primary-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-primary-bevel();
-    }
-  }
-
-  .warning-container {
-    .color {
-      background-color: nb-theme(color-warning);
-    }
-    .gradient {
-      @include btn-hero-warning-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-warning-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-warning-bevel();
-    }
-  }
-
-  .success-container {
-    .color {
-      background-color: nb-theme(color-success);
-    }
-    .gradient {
-      @include btn-hero-success-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-success-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-success-bevel();
-    }
-  }
-
-  .info-container {
-    .color {
-      background-color: nb-theme(color-info);
-    }
-    .gradient {
-      @include btn-hero-info-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-info-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-info-bevel();
-    }
-  }
-
-  .danger-container {
-    .color {
-      background-color: nb-theme(color-danger);
-    }
-    .gradient {
-      @include btn-hero-danger-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-danger-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-danger-bevel();
-    }
-  }
-
-  .secondary-container {
-    .color {
-      background-color: nb-theme(btn-secondary-bg);
-    }
-    .border {
-      color: nb-theme(btn-secondary-color);
-      border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
-    }
-    .glow {
-      box-shadow: btn-hero-secondary-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-secondary-bevel();
-    }
-  }
-
-  .example-container {
-    margin-bottom: 1.5rem;
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~@nebular/bootstrap/styles/buttons';
+//
+//@include nb-install-component() {
+//
+//  nb-card-body {
+//    padding-bottom: 0;
+//  }
+//
+//  .none {
+//    position: relative;
+//    transform: rotate(45deg);
+//
+//    &::before, &::after {
+//      position: absolute;
+//      content: '';
+//      background: nb-theme(form-control-border-color);
+//    }
+//
+//    &::before {
+//      left: 50%;
+//      top: 10%;
+//      transform: translateX(-50%);
+//      width: 1px;
+//      height: 80%;
+//    }
+//
+//    &::after {
+//      top: 50%;
+//      left: 10%;
+//      transform: translateY(-50%);
+//      height: 1px;
+//      width: 80%;
+//    }
+//  }
+//
+//  .shadow {
+//    box-shadow: nb-theme(btn-hero-shadow);
+//  }
+//
+//  .primary-container {
+//    .color {
+//      background-color: nb-theme(color-primary);
+//    }
+//    .gradient {
+//      @include btn-hero-primary-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-primary-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-primary-bevel();
+//    }
+//  }
+//
+//  .warning-container {
+//    .color {
+//      background-color: nb-theme(color-warning);
+//    }
+//    .gradient {
+//      @include btn-hero-warning-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-warning-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-warning-bevel();
+//    }
+//  }
+//
+//  .success-container {
+//    .color {
+//      background-color: nb-theme(color-success);
+//    }
+//    .gradient {
+//      @include btn-hero-success-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-success-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-success-bevel();
+//    }
+//  }
+//
+//  .info-container {
+//    .color {
+//      background-color: nb-theme(color-info);
+//    }
+//    .gradient {
+//      @include btn-hero-info-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-info-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-info-bevel();
+//    }
+//  }
+//
+//  .danger-container {
+//    .color {
+//      background-color: nb-theme(color-danger);
+//    }
+//    .gradient {
+//      @include btn-hero-danger-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-danger-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-danger-bevel();
+//    }
+//  }
+//
+//  .secondary-container {
+//    .color {
+//      background-color: nb-theme(btn-secondary-bg);
+//    }
+//    .border {
+//      color: nb-theme(btn-secondary-color);
+//      border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
+//    }
+//    .glow {
+//      box-shadow: btn-hero-secondary-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-secondary-bevel();
+//    }
+//  }
+//
+//  .example-container {
+//    margin-bottom: 1.5rem;
+//  }
+//}
diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss
index 1ef1e862..511df243 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.scss
+++ b/src/app/pages/dashboard/contacts/contacts.component.scss
@@ -1,5 +1,5 @@
 @import '../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/hero-buttons';
+//@import '~@nebular/bootstrap/styles/hero-buttons';
 
 @include nb-install-component() {
   nb-tabset {
diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss
index 8b0049c7..a76fb2e2 100644
--- a/src/app/pages/dashboard/electricity/electricity.component.scss
+++ b/src/app/pages/dashboard/electricity/electricity.component.scss
@@ -3,7 +3,7 @@
 @import '~@nebular/theme/styles/global/typography/typography';
 @import '~bootstrap/scss/mixins/breakpoints';
 @import '~@nebular/theme/styles/global/breakpoints';
-@import '~@nebular/bootstrap/styles/hero-buttons';
+//@import '~@nebular/bootstrap/styles/hero-buttons';
 
 @include nb-install-component() {
 
@@ -133,7 +133,7 @@
       padding-left: 1rem;
       font-size: 0.75rem;
 
-      color: text-danger();
+      //color: text-danger();
 
       &::before {
         position: absolute;
@@ -143,15 +143,15 @@
 
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
-        border-bottom: 8px solid text-danger();
+        //border-bottom: 8px solid text-danger();
       }
 
       &.down {
-        color: text-success();
+        //color: text-success();
 
         &::before {
           top: 3px;
-          border-top: 8px solid text-success();
+          //border-top: 8px solid text-success();
           border-bottom: none;
         }
       }
@@ -240,10 +240,10 @@
       &:hover {
         &::before {
           $color-top: nb-theme(btn-success-bg);
-          $color-bottom: btn-hero-success-left-color();
+          //$color-bottom: btn-hero-success-left-color();
 
-          background-image: linear-gradient(to top, $color-top, $color-bottom);
-          box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
+          //background-image: linear-gradient(to top, $color-top, $color-bottom);
+          //box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
         }
       }
     }
@@ -269,10 +269,10 @@
 
       .delta {
         &.down {
-          color: text-primary();
+          //color: text-primary();
 
           &::before {
-            border-top: 8px solid text-primary();
+            //border-top: 8px solid text-primary();
           }
         }
       }
diff --git a/src/app/pages/dashboard/rooms/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss
index a28cd1a4..73d1e6f1 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.scss
+++ b/src/app/pages/dashboard/rooms/player/player.component.scss
@@ -204,8 +204,8 @@
           width: 1.5rem;
           height: 1.5rem;
           background-color: nb-theme(color-white);
-          box-shadow: 0 0.125rem 0.5rem 0 rgba(nb-theme(color-fg), 0.4);
-          border: solid 1px rgba(nb-theme(color-fg), 0.4);
+          //box-shadow: 0 0.125rem 0.5rem 0 rgba(nb-theme(color-fg), 0.4);
+          //border: solid 1px rgba(nb-theme(color-fg), 0.4);
           margin-top: calc(-0.875rem + 1px);
           position: relative;
           z-index: 10;
diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss
index d17829c0..c15c596e 100644
--- a/src/app/pages/dashboard/status-card/status-card.component.scss
+++ b/src/app/pages/dashboard/status-card/status-card.component.scss
@@ -1,184 +1,184 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/hero-buttons';
-
-@include nb-install-component() {
-  nb-card {
-    flex-direction: row;
-    align-items: center;
-    height: 6rem;
-    overflow: visible;
-
-    $bevel: btn-hero-bevel(nb-theme(card-bg));
-    $shadow: nb-theme(btn-hero-shadow);
-    box-shadow: $bevel, $shadow;
-
-    .icon-container {
-      height: 100%;
-      padding: 0.625rem;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 5.75rem;
-      height: 4.75rem;
-      font-size: 3.75rem;
-      border-radius: nb-theme(card-border-radius);
-      transition: width 0.4s ease;
-      transform: translate3d(0, 0, 0);
-      -webkit-transform-style: preserve-3d;
-      -webkit-backface-visibility: hidden;
-      color: nb-theme(color-white);
-
-      &.primary {
-        @include btn-hero-primary-gradient();
-        @include btn-hero-primary-bevel-glow-shadow();
-      }
-      &.success {
-        @include btn-hero-success-gradient();
-        @include btn-hero-success-bevel-glow-shadow();
-      }
-      &.info {
-        @include btn-hero-info-gradient();
-        @include btn-hero-info-bevel-glow-shadow();
-      }
-      &.warning {
-        @include btn-hero-warning-gradient();
-        @include btn-hero-warning-bevel-glow-shadow();
-      }
-      &.danger {
-        @include btn-hero-danger-gradient();
-        @include btn-hero-danger-bevel-glow-shadow();
-      }
-      &.secondary {
-        @include btn-hero-secondary-bg();
-        @include btn-hero-secondary-bevel-glow-shadow();
-        color: nb-theme(card-fg);
-      }
-
-      @include nb-for-theme(corporate) {
-        &.primary,
-        &.success,
-        &.info,
-        &.warning,
-        &.danger,
-        &.secondary {
-          box-shadow: none;
-        }
-      }
-    }
-
-    &:hover {
-      background: lighten(nb-theme(card-bg), 5%);
-
-      .icon {
-        &.primary {
-          background-image: btn-hero-primary-light-gradient();
-        }
-        &.success {
-          background-image: btn-hero-success-light-gradient();
-        }
-        &.info {
-          background-image: btn-hero-info-light-gradient();
-        }
-        &.warning {
-          background-image: btn-hero-warning-light-gradient();
-        }
-        &.danger {
-          background-image: btn-hero-danger-light-gradient();
-        }
-        &.secondary {
-          background-image: btn-hero-secondary-light-gradient();
-        }
-      }
-    }
-
-    &.off {
-      color: nb-theme(card-fg);
-
-      .icon {
-        color: nb-theme(card-fg);
-
-        &.primary, &.success, &.info, &.warning, &.danger {
-          box-shadow: none;
-          background-image: linear-gradient(to right, transparent, transparent);
-        }
-
-        &.secondary {
-          background: transparent;
-        }
-      }
-
-      .title {
-        color: nb-theme(card-fg);
-      }
-    }
-
-    .details {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      height: 100%;
-      @include nb-ltr(padding, 0 0.5rem 0 0.75rem);
-      @include nb-rtl(padding, 0 0.75rem 0 0.5rem);
-      border-left: 1px solid transparent;
-    }
-
-    .title {
-      font-family: nb-theme(font-secondary);
-      font-size: 1.25rem;
-      font-weight: nb-theme(font-weight-bold);
-      color: nb-theme(card-fg-heading);
-    }
-
-    .status {
-      font-size: 1rem;
-      font-weight: nb-theme(font-weight-light);
-      text-transform: uppercase;
-      color: nb-theme(card-fg);
-    }
-  }
-
-  @include nb-for-theme(cosmic) {
-    nb-card {
-      &.off .icon-container {
-        @include nb-ltr(border-right, 1px solid nb-theme(separator));
-        @include nb-rtl(border-left, 1px solid nb-theme(separator));
-      }
-
-      .icon-container {
-        padding: 0;
-      }
-
-      .details {
-        @include nb-ltr(padding-left, 1.25rem);
-        @include nb-rtl(padding-right, 1.25rem);
-      }
-
-      .icon {
-        width: 7rem;
-        height: 100%;
-        font-size: 4.5rem;
-        @include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius));
-        @include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0);
-      }
-
-      .title {
-        font-weight: nb-theme(font-weight-bolder);
-      }
-
-      .status {
-        font-weight: nb-theme(font-weight-light);
-      }
-    }
-  }
-
-  @include nb-for-theme(corporate) {
-    nb-card {
-      .icon-container {
-        height: auto;
-      }
-    }
-  }
-}
+//@import '../../../@theme/styles/themes';
+////@import '~@nebular/bootstrap/styles/hero-buttons';
+//
+//@include nb-install-component() {
+//  nb-card {
+//    flex-direction: row;
+//    align-items: center;
+//    height: 6rem;
+//    overflow: visible;
+//
+//    $bevel: btn-hero-bevel(nb-theme(card-bg));
+//    $shadow: nb-theme(btn-hero-shadow);
+//    box-shadow: $bevel, $shadow;
+//
+//    .icon-container {
+//      height: 100%;
+//      padding: 0.625rem;
+//    }
+//
+//    .icon {
+//      display: flex;
+//      align-items: center;
+//      justify-content: center;
+//      width: 5.75rem;
+//      height: 4.75rem;
+//      font-size: 3.75rem;
+//      border-radius: nb-theme(card-border-radius);
+//      transition: width 0.4s ease;
+//      transform: translate3d(0, 0, 0);
+//      -webkit-transform-style: preserve-3d;
+//      -webkit-backface-visibility: hidden;
+//      color: nb-theme(color-white);
+//
+//      &.primary {
+//        @include btn-hero-primary-gradient();
+//        @include btn-hero-primary-bevel-glow-shadow();
+//      }
+//      &.success {
+//        @include btn-hero-success-gradient();
+//        @include btn-hero-success-bevel-glow-shadow();
+//      }
+//      &.info {
+//        @include btn-hero-info-gradient();
+//        @include btn-hero-info-bevel-glow-shadow();
+//      }
+//      &.warning {
+//        @include btn-hero-warning-gradient();
+//        @include btn-hero-warning-bevel-glow-shadow();
+//      }
+//      &.danger {
+//        @include btn-hero-danger-gradient();
+//        @include btn-hero-danger-bevel-glow-shadow();
+//      }
+//      &.secondary {
+//        @include btn-hero-secondary-bg();
+//        @include btn-hero-secondary-bevel-glow-shadow();
+//        color: nb-theme(card-fg);
+//      }
+//
+//      @include nb-for-theme(corporate) {
+//        &.primary,
+//        &.success,
+//        &.info,
+//        &.warning,
+//        &.danger,
+//        &.secondary {
+//          box-shadow: none;
+//        }
+//      }
+//    }
+//
+//    &:hover {
+//      //background: lighten(nb-theme(card-bg), 5%);
+//
+//      .icon {
+//        &.primary {
+//          background-image: btn-hero-primary-light-gradient();
+//        }
+//        &.success {
+//          background-image: btn-hero-success-light-gradient();
+//        }
+//        &.info {
+//          background-image: btn-hero-info-light-gradient();
+//        }
+//        &.warning {
+//          background-image: btn-hero-warning-light-gradient();
+//        }
+//        &.danger {
+//          background-image: btn-hero-danger-light-gradient();
+//        }
+//        &.secondary {
+//          background-image: btn-hero-secondary-light-gradient();
+//        }
+//      }
+//    }
+//
+//    &.off {
+//      color: nb-theme(card-fg);
+//
+//      .icon {
+//        color: nb-theme(card-fg);
+//
+//        &.primary, &.success, &.info, &.warning, &.danger {
+//          box-shadow: none;
+//          background-image: linear-gradient(to right, transparent, transparent);
+//        }
+//
+//        &.secondary {
+//          background: transparent;
+//        }
+//      }
+//
+//      .title {
+//        color: nb-theme(card-fg);
+//      }
+//    }
+//
+//    .details {
+//      display: flex;
+//      flex-direction: column;
+//      justify-content: center;
+//      height: 100%;
+//      @include nb-ltr(padding, 0 0.5rem 0 0.75rem);
+//      @include nb-rtl(padding, 0 0.75rem 0 0.5rem);
+//      border-left: 1px solid transparent;
+//    }
+//
+//    .title {
+//      font-family: nb-theme(font-secondary);
+//      font-size: 1.25rem;
+//      font-weight: nb-theme(font-weight-bold);
+//      color: nb-theme(card-fg-heading);
+//    }
+//
+//    .status {
+//      font-size: 1rem;
+//      font-weight: nb-theme(font-weight-light);
+//      text-transform: uppercase;
+//      color: nb-theme(card-fg);
+//    }
+//  }
+//
+//  @include nb-for-theme(cosmic) {
+//    nb-card {
+//      &.off .icon-container {
+//        @include nb-ltr(border-right, 1px solid nb-theme(separator));
+//        @include nb-rtl(border-left, 1px solid nb-theme(separator));
+//      }
+//
+//      .icon-container {
+//        padding: 0;
+//      }
+//
+//      .details {
+//        @include nb-ltr(padding-left, 1.25rem);
+//        @include nb-rtl(padding-right, 1.25rem);
+//      }
+//
+//      .icon {
+//        width: 7rem;
+//        height: 100%;
+//        font-size: 4.5rem;
+//        @include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius));
+//        @include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0);
+//      }
+//
+//      .title {
+//        font-weight: nb-theme(font-weight-bolder);
+//      }
+//
+//      .status {
+//        font-weight: nb-theme(font-weight-light);
+//      }
+//    }
+//  }
+//
+//  @include nb-for-theme(corporate) {
+//    nb-card {
+//      .icon-container {
+//        height: auto;
+//      }
+//    }
+//  }
+//}
diff --git a/src/app/pages/dashboard/team/team.component.scss b/src/app/pages/dashboard/team/team.component.scss
index 1335d1d3..1317f3d8 100644
--- a/src/app/pages/dashboard/team/team.component.scss
+++ b/src/app/pages/dashboard/team/team.component.scss
@@ -20,7 +20,7 @@
       bottom: -2rem;
       right: 1rem;
       border-radius: 50%;
-      box-shadow: 0 4px 10px 0 rgba(nb-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nb-theme(color-fg-highlight), 0.2);
+      //box-shadow: 0 4px 10px 0 rgba(nb-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nb-theme(color-fg-highlight), 0.2);
     }
   }
 
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
index 575ed10f..e51e80d1 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
@@ -1,5 +1,5 @@
 @import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/hero-buttons';
+//@import '~@nebular/bootstrap/styles/hero-buttons';
 
 @include nb-install-component() {
   position: relative;
@@ -40,7 +40,7 @@
 
     border: 2px solid nb-theme(separator);
     @include nb-for-theme(cosmic) {
-      background-color: lighten(nb-theme(layout-bg), 2%);
+      //background-color: lighten(nb-theme(layout-bg), 2%);
       border: none;
     }
   }
@@ -65,11 +65,11 @@
     border: 2px solid nb-theme(separator);
 
     &:hover {
-      background-color: lighten(nb-theme(card-bg), 5%);
+      //background-color: lighten(nb-theme(card-bg), 5%);
     }
 
     &:active {
-      background-color: darken(nb-theme(card-bg), 5%);
+      //background-color: darken(nb-theme(card-bg), 5%);
       box-shadow: none;
     }
 
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index b2719411..c4b21669 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -119,8 +119,8 @@
     .btn-icon.active {
       color: nb-theme(color-fg-heading);
       border-color: nb-theme(color-fg-highlight);
-      box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
-      background-color: rgba(nb-theme(color-fg-highlight), 0.25);
+      //box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
+      //background-color: rgba(nb-theme(color-fg-highlight), 0.25);
     }
   }
 
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
index d4aeb55f..c74170b8 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
@@ -1,5 +1,5 @@
 @import '../../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/hero-buttons';
+//@import '~@nebular/bootstrap/styles/hero-buttons';
 @import '~@nebular/theme/styles/global/typography/typography';
 
 $traffic-bar-background-color: #d0d8e3;
diff --git a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
index 7179965a..a27db9e7 100644
--- a/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
+++ b/src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
@@ -20,6 +20,6 @@
   }
 
   [class$='placeholder'] {
-    background: rgba(nb-theme(layout-bg), 0.6);
+    //background: rgba(nb-theme(layout-bg), 0.6);
   }
 }
diff --git a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss
index 3ec8f283..9f16b1fe 100644
--- a/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss
+++ b/src/app/pages/forms/buttons/hero-buttons/hero-buttons.component.scss
@@ -1,144 +1,144 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/bootstrap/styles/buttons';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@include nb-install-component() {
-
-  nb-card-body {
-    padding-bottom: 0;
-  }
-
-  .none {
-    position: relative;
-    transform: rotate(45deg);
-
-    &::before, &::after {
-      position: absolute;
-      content: '';
-      background: nb-theme(form-control-border-color);
-    }
-
-    &::before {
-      left: 50%;
-      top: 10%;
-      transform: translateX(-50%);
-      width: 1px;
-      height: 80%;
-    }
-
-    &::after {
-      top: 50%;
-      left: 10%;
-      transform: translateY(-50%);
-      height: 1px;
-      width: 80%;
-    }
-  }
-
-  .shadow {
-    box-shadow: nb-theme(btn-hero-shadow);
-  }
-
-  .primary-container {
-    .color {
-      background-color: nb-theme(color-primary);
-    }
-    .gradient {
-      @include btn-hero-primary-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-primary-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-primary-bevel();
-    }
-  }
-
-  .warning-container {
-    .color {
-      background-color: nb-theme(color-warning);
-    }
-    .gradient {
-      @include btn-hero-warning-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-warning-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-warning-bevel();
-    }
-  }
-
-  .success-container {
-    .color {
-      background-color: nb-theme(color-success);
-    }
-    .gradient {
-      @include btn-hero-success-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-success-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-success-bevel();
-    }
-  }
-
-  .info-container {
-    .color {
-      background-color: nb-theme(color-info);
-    }
-    .gradient {
-      @include btn-hero-info-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-info-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-info-bevel();
-    }
-  }
-
-  .danger-container {
-    .color {
-      background-color: nb-theme(color-danger);
-    }
-    .gradient {
-      @include btn-hero-danger-gradient();
-    }
-    .glow {
-      box-shadow: btn-hero-danger-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-danger-bevel();
-    }
-  }
-
-  .secondary-container {
-    .color {
-      background-color: nb-theme(btn-secondary-bg);
-    }
-    .border {
-      color: nb-theme(btn-secondary-color);
-      border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
-    }
-    .glow {
-      box-shadow: btn-hero-secondary-glow();
-    }
-    .bevel {
-      box-shadow: btn-hero-secondary-bevel();
-    }
-  }
-
-  .example-container {
-    margin-bottom: 1.5rem;
-  }
-
-  @include media-breakpoint-up(xxl) {
-    .example-container {
-      flex: 0 0 20%;
-      max-width: 20%;
-    }
-  }
-}
+//@import '../../../../@theme/styles/themes';
+//@import '~@nebular/bootstrap/styles/buttons';
+//@import '~bootstrap/scss/mixins/breakpoints';
+//@import '~@nebular/theme/styles/global/breakpoints';
+//
+//@include nb-install-component() {
+//
+//  nb-card-body {
+//    padding-bottom: 0;
+//  }
+//
+//  .none {
+//    position: relative;
+//    transform: rotate(45deg);
+//
+//    &::before, &::after {
+//      position: absolute;
+//      content: '';
+//      background: nb-theme(form-control-border-color);
+//    }
+//
+//    &::before {
+//      left: 50%;
+//      top: 10%;
+//      transform: translateX(-50%);
+//      width: 1px;
+//      height: 80%;
+//    }
+//
+//    &::after {
+//      top: 50%;
+//      left: 10%;
+//      transform: translateY(-50%);
+//      height: 1px;
+//      width: 80%;
+//    }
+//  }
+//
+//  .shadow {
+//    box-shadow: nb-theme(btn-hero-shadow);
+//  }
+//
+//  .primary-container {
+//    .color {
+//      background-color: nb-theme(color-primary);
+//    }
+//    .gradient {
+//      @include btn-hero-primary-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-primary-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-primary-bevel();
+//    }
+//  }
+//
+//  .warning-container {
+//    .color {
+//      background-color: nb-theme(color-warning);
+//    }
+//    .gradient {
+//      @include btn-hero-warning-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-warning-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-warning-bevel();
+//    }
+//  }
+//
+//  .success-container {
+//    .color {
+//      background-color: nb-theme(color-success);
+//    }
+//    .gradient {
+//      @include btn-hero-success-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-success-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-success-bevel();
+//    }
+//  }
+//
+//  .info-container {
+//    .color {
+//      background-color: nb-theme(color-info);
+//    }
+//    .gradient {
+//      @include btn-hero-info-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-info-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-info-bevel();
+//    }
+//  }
+//
+//  .danger-container {
+//    .color {
+//      background-color: nb-theme(color-danger);
+//    }
+//    .gradient {
+//      @include btn-hero-danger-gradient();
+//    }
+//    .glow {
+//      box-shadow: btn-hero-danger-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-danger-bevel();
+//    }
+//  }
+//
+//  .secondary-container {
+//    .color {
+//      background-color: nb-theme(btn-secondary-bg);
+//    }
+//    .border {
+//      color: nb-theme(btn-secondary-color);
+//      border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
+//    }
+//    .glow {
+//      box-shadow: btn-hero-secondary-glow();
+//    }
+//    .bevel {
+//      box-shadow: btn-hero-secondary-bevel();
+//    }
+//  }
+//
+//  .example-container {
+//    margin-bottom: 1.5rem;
+//  }
+//
+//  @include media-breakpoint-up(xxl) {
+//    .example-container {
+//      flex: 0 0 20%;
+//      max-width: 20%;
+//    }
+//  }
+//}