refactor(buttons): fix styles

src/app/@theme/components/header/header.component.ts

@@ -11,9 +11,9 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
       <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
       <span class="logo" (click)="goToHome()">NgX&nbsp;<a>Admin</a></span>
       <div class="theme-buttons">
-        <button class="btn btn-hero btn-primary" (click)="selectCosmicTheme()">Cosmic</button>
+        <button class="btn btn-hero-primary" (click)="selectCosmicTheme()">Cosmic</button>
-        <button class="btn btn-hero btn-warning" (click)="selectLightTheme()">Light</button>
+        <button class="btn btn-hero-warning" (click)="selectLightTheme()">Light</button>
-        <button class="btn btn-hero btn-info" (click)="selectDefaultTheme()">Default</button>
+        <button class="btn btn-hero-info" (click)="selectDefaultTheme()">Default</button>
       </div>
     </div>
 

src/app/pages/ui-features/buttons/buttons.component.scss

@@ -1,9 +1,271 @@
-:host /deep/ {
+@import '~@nga/theme/styles_new/all';
-  display: block;
-  font-size: 1rem;
 
-  .btn-demo {
+@mixin btn-bg($background) {
-    width: 180px;
+  background-color: $background;
-    height: 48px;
+}
+
+@include nga-install-component() {
+
+  $btn-component-size: 50px;
+  $btn-component-bd-radius: 12px;
+
+  /deep/ {
+    .btn-demo {
+      width: 180px;
+      height: 48px;
+    }
+
+    .states-container .state-container {
+      display: flex;
+
+      .state-value {
+        width: $btn-component-size;
+        height: $btn-component-size;
+        border-radius: $btn-component-bd-radius;
+        margin-bottom: 16px;
+      }
+
+      .state-details {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 17px;
+        height: $btn-component-size;
+      }
+
+      .state-details .header {
+        color: white;
+      }
+
+      .state-details .subheader {
+        font-size: 0.875rem;
+        line-height: 1rem;
+        font-weight: 300;
+      }
+    }
+
+    .example-container {
+      padding-right: 0;
+    }
+
+    .example-container .container-title {
+      font-family: nga-theme(font-secondary);
+      margin-bottom: 14px;
+    }
+
+    .example-container .container-btn {
+      margin-bottom: 24px;
+    }
+
+    .hero-buttons {
+
+      .example-container .states-container.primary-container {
+        .gradient {
+          @include primary-gradient();
+        }
+
+        .glow {
+          @include primary-glow();
+        }
+
+        .bevel-border {
+          @include primary-bevel();
+        }
+
+        .shadow {
+          @include shadow();
+        }
+      }
+
+      .example-container .states-container.warning-container {
+        .gradient {
+          @include warning-gradient();
+        }
+
+        .glow {
+          @include warning-glow();
+        }
+
+        .bevel-border {
+          @include warning-bevel();
+        }
+
+        .shadow {
+          @include shadow();
+        }
+      }
+
+      .example-container .states-container.success-container {
+        .gradient {
+          @include success-gradient();
+        }
+
+        .glow {
+          @include success-glow();
+        }
+
+        .bevel-border {
+          @include success-bevel();
+        }
+
+        .shadow {
+          @include shadow();
+        }
+      }
+
+      .example-container .states-container.info-container {
+        .gradient {
+          @include info-gradient();
+        }
+
+        .glow {
+          @include info-glow();
+        }
+
+        .bevel-border {
+          @include info-bevel();
+        }
+
+        .shadow {
+          @include shadow();
+        }
+      }
+
+      .example-container .states-container.danger-container {
+        .gradient {
+          @include danger-gradient();
+        }
+
+        .glow {
+          @include danger-glow();
+        }
+
+        .bevel-border {
+          @include danger-bevel();
+        }
+
+        .shadow {
+          @include shadow();
+        }
+      }
+
+      .example-container .states-container.secondary-container {
+        .border {
+          color: nga-theme(btn-secondary-color);
+          border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
+        }
+
+        .glow {
+          @include secondary-glow();
+        }
+
+        .bevel-border {
+          @include secondary-bevel();
+        }
+
+        .shadow {
+          @include shadow();
+        }
+      }
+    }
+
+    .default-buttons {
+      .example-container .states-container.primary-container {
+        .original {
+          @include btn-bg(nga-theme(btn-primary-bg));
+        }
+
+        .hover {
+          @include primary-hover();
+        }
+
+        .active {
+          @include primary-active();
+        }
+      }
+
+      .example-container .states-container.warning-container {
+        .original {
+          @include btn-bg(nga-theme(btn-warning-bg));
+        }
+
+        .hover {
+          @include warning-hover();
+        }
+
+        .active {
+          @include warning-active();
+        }
+      }
+
+      .example-container .states-container.success-container {
+        .original {
+          @include btn-bg(nga-theme(btn-success-bg));
+        }
+
+        .hover {
+          @include success-hover();
+        }
+
+        .active {
+          @include success-active();
+        }
+      }
+
+      .example-container .states-container.info-container {
+        .original {
+          @include btn-bg(nga-theme(btn-info-bg));
+        }
+
+        .hover {
+          @include info-hover();
+        }
+
+        .active {
+          @include info-active();
+        }
+      }
+
+      .example-container .states-container.danger-container {
+        .original {
+          @include btn-bg(nga-theme(btn-danger-bg));
+        }
+
+        .hover {
+          @include danger-hover();
+        }
+
+        .active {
+          @include danger-active();
+        }
+      }
+
+      .example-container .states-container.secondary-container {
+        .original {
+          @include btn-bg(nga-theme(btn-secondary-border));
+        }
+
+        .hover {
+          @include secondary-hover();
+        }
+
+        .active {
+          @include secondary-active();
+        }
+      }
+    }
+
+    .actions-groups {
+      display: flex !important;
+
+      .container-title {
+        font-family: nga-theme(font-secondary);
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        color: white;
+      }
+    }
   }
 }

src/app/pages/ui-features/buttons/default-buttons/default-buttons.component.ts

@@ -9,7 +9,7 @@ export class DefaultButtonsComponent {
   buttons = [{
     class: 'btn-primary',
     container: 'primary-container',
-    containerTitle: 'Prymary Button',
+    containerTitle: 'Primary Button',
     title: 'Primary',
     default: '#7659ff',
   }, {

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html

@@ -7,7 +7,7 @@
           <span>{{ hb.title }}</span>
         </div>
         <div class="container-btn">
-          <button class="btn {{ hb.class }} btn-hero btn-demo">{{ hb.buttonTitle }}</button>
+          <button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
         </div>
         <div class="states-container {{ hb.container }}">
           <div class="state-container" *ngIf="hb.border">

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss

@@ -1,221 +0,0 @@
-@import '~@nga/theme/styles_new/all';
-
-@mixin btn-component($bevel-bd, $glow, $shadow) {
-  .bevel-border {
-    box-shadow: 0 3px 0 0 $bevel-bd;
-  }
-
-  .shadow {
-    box-shadow: 0 4px 10px 0 $shadow;
-  }
-
-  .glow {
-    box-shadow: 0 2px 12px 0 $glow;
-  }
-}
-
-@mixin btn-bg($background) {
-  background-color: $background;
-}
-
-@include nga-install-component() {
-
-  $btn-component-size: 50px;
-  $btn-component-bd-radius: 12px;
-
-  .states-container .state-container {
-    display: flex;
-
-    .state-value {
-      width: $btn-component-size;
-      height: $btn-component-size;
-      border-radius: $btn-component-bd-radius;
-      margin-bottom: 16px;
-    }
-
-    .state-details {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin-left: 17px;
-      height: $btn-component-size;
-    }
-
-    .state-details .header {
-      color: white;
-    }
-
-    .state-details .subheader {
-      font-size: 0.875rem;
-      line-height: 1rem;
-      font-weight: 300;
-    }
-  }
-
-  .example-container {
-    padding-right: 0;
-  }
-
-  .example-container .container-title {
-    font-family: nga-theme(font-secondary);
-    margin-bottom: 14px;
-  }
-
-  .example-container .container-btn {
-    margin-bottom: 24px;
-  }
-
-  .hero-buttons {
-
-    .example-container .states-container.primary-container {
-      .gradient {
-        @include primary-gradient();
-      }
-
-      @include btn-component(nga-theme(btn-primary-bevel-bd), nga-theme(btn-primary-glow), nga-theme(btn-primary-shadow));
-    }
-
-    .example-container .states-container.warning-container {
-      .gradient {
-        @include warning-gradient();
-      }
-
-      @include btn-component(nga-theme(btn-warning-bevel-bd), nga-theme(btn-warning-glow), nga-theme(btn-warning-shadow));
-    }
-
-    .example-container .states-container.success-container {
-      .gradient {
-        @include success-gradient();
-      }
-
-      @include btn-component(nga-theme(btn-success-bevel-bd), nga-theme(btn-success-glow), nga-theme(btn-success-shadow));
-    }
-
-    .example-container .states-container.info-container {
-      .gradient {
-        @include info-gradient();
-      }
-
-      @include btn-component(nga-theme(btn-info-bevel-bd), nga-theme(btn-info-glow), nga-theme(btn-info-shadow));
-    }
-
-    .example-container .states-container.danger-container {
-      .gradient {
-        @include danger-gradient();
-      }
-
-      @include btn-component(nga-theme(btn-danger-bevel-bd), nga-theme(btn-danger-glow), nga-theme(btn-danger-shadow));
-    }
-
-    .example-container .states-container.secondary-container {
-      .border {
-        color: nga-theme(btn-secondary-color);
-        border: nga-theme(btn-secondary-border-width) solid nga-theme(btn-secondary-border);
-      }
-
-      @include btn-component(nga-theme(btn-secondary-bevel-bd), nga-theme(btn-secondary-glow), nga-theme(btn-secondary-shadow));
-    }
-  }
-
-  .default-buttons {
-    $btn-component-size: 50px;
-    $btn-component-bd-radius: 12px;
-
-    .example-container .states-container.primary-container {
-      .original {
-        @include btn-bg(nga-theme(btn-primary-bg));
-      }
-
-      .hover {
-        @include btn-bg(nga-theme(btn-primary-bg-hover-focus));
-      }
-
-      .active {
-        @include btn-bg(nga-theme(btn-primary-bg-active));
-      }
-    }
-
-    .example-container .states-container.warning-container {
-      .original {
-        @include btn-bg(nga-theme(btn-warning-bg));
-      }
-
-      .hover {
-        @include btn-bg(nga-theme(btn-warning-bg-hover-focus));
-      }
-
-      .active {
-        @include btn-bg(nga-theme(btn-warning-bg-active));
-      }
-    }
-
-    .example-container .states-container.success-container {
-      .original {
-        @include btn-bg(nga-theme(btn-success-bg));
-      }
-
-      .hover {
-        @include btn-bg(nga-theme(btn-success-bg-hover-focus));
-      }
-
-      .active {
-        @include btn-bg(nga-theme(btn-success-bg-active));
-      }
-    }
-
-    .example-container .states-container.info-container {
-      .original {
-        @include btn-bg(nga-theme(btn-info-bg));
-      }
-
-      .hover {
-        @include btn-bg(nga-theme(btn-info-bg-hover-focus));
-      }
-
-      .active {
-        @include btn-bg(nga-theme(btn-info-bg-active));
-      }
-    }
-
-    .example-container .states-container.danger-container {
-      .original {
-        @include btn-bg(nga-theme(btn-danger-bg));
-      }
-
-      .hover {
-        @include btn-bg(nga-theme(btn-danger-bg-hover-focus));
-      }
-
-      .active {
-        @include btn-bg(nga-theme(btn-danger-bg-active));
-      }
-    }
-
-    .example-container .states-container.secondary-container {
-      .original {
-        @include btn-bg(nga-theme(btn-secondary-border));
-      }
-
-      .hover {
-        @include btn-bg(nga-theme(btn-secondary-bg-hover-focus));
-      }
-
-      .active {
-        @include btn-bg(nga-theme(btn-secondary-bg-active));
-      }
-    }
-  }
-
-  .actions-groups {
-    display: flex !important;
-
-    .container-title {
-      font-family: nga-theme(font-secondary);
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      justify-content: center;
-      color: white;
-    }
-  }
-}

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts

@@ -2,13 +2,12 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'ngx-hero-buttons',
-  styleUrls: ['./hero-buttons.component.scss'],
   templateUrl: './hero-buttons.component.html',
 })
 export class HeroButtonComponent {
 
   heroButtons = [{
-    class: 'btn-primary',
+    class: 'btn-hero-primary',
     container: 'primary-container',
     title: 'Primary Button',
     buttonTitle: 'Primary',
@@ -17,7 +16,7 @@ export class HeroButtonComponent {
     shadow: 'rgba (6, 7, 64, 0.5)',
     glow: 'rgba (137, 66, 254, 0.8)',
   }, {
-    class: 'btn-warning',
+    class: 'btn-hero-warning',
     container: 'warning-container',
     title: 'Warning Button',
     buttonTitle: 'Warning',
@@ -26,7 +25,7 @@ export class HeroButtonComponent {
     shadow: 'rgba (33, 7, 77, 0.5)',
     glow: 'rgba (255, 193, 38, 0.6)',
   }, {
-    class: 'btn-success',
+    class: 'btn-hero-success',
     container: 'success-container',
     title: 'Success Button',
     buttonTitle: 'Success',
@@ -35,7 +34,7 @@ export class HeroButtonComponent {
     shadow: 'rgba (33, 7, 77, 0.5)',
     glow: 'rgba (35, 255, 181, 0.6)',
   }, {
-    class: 'btn-info',
+    class: 'btn-hero-info',
     container: 'info-container',
     title: 'Info Button',
     buttonTitle: 'Info',
@@ -44,7 +43,7 @@ export class HeroButtonComponent {
     shadow: 'rgba (33, 7, 77, 0.5)',
     glow: 'rgba (0, 136, 255, 0.7)',
   }, {
-    class: 'btn-danger',
+    class: 'btn-hero-danger',
     container: 'danger-container',
     title: 'Danger Button',
     buttonTitle: 'Danger',
@@ -53,7 +52,7 @@ export class HeroButtonComponent {
     shadow: 'rgba (33, 7, 77, 0.5)',
     glow: 'rgba (255, 73, 184, 0.8)',
   }, {
-    class: 'btn-secondary',
+    class: 'btn-hero-secondary',
     container: 'secondary-container',
     title: 'Ghost Button',
     buttonTitle: 'Ghost',