refactor(@theme): refactor styles structure

src/app/@theme/layouts/base-header/base-header.component.scss

@@ -45,9 +45,14 @@
 
     .logo {
       font-size: 1.7rem;
+      font-weight: bold;
       text-decoration: none;
       transition: all 0.2s ease;
       cursor: pointer;
+
+      a {
+        font-weight: normal;
+      }
     }
   }
 

src/app/@theme/layouts/base-header/base-header.component.ts

@@ -9,7 +9,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
   template: `
     <div class="left">
       <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
-      <span class="logo" (click)="goToHome()">NgX &nbsp; <a>Admin</a></span>
+      <span class="logo" (click)="goToHome()">NgX&nbsp;<a>Admin</a></span>
       <button (click)="switchTheme()">Switch Theme!</button>
     </div>
     <div class="right">

src/app/@theme/styles/gorgeous/gorgeous.theme.scss

@@ -1,116 +1,10 @@
 @import '../components';
 @import 'gorgeous.variables';
+
 @import '~@nga/theme/styles/themes/nga.theme.default';
+@import 'nga-redefines/redefines';
 
 @include nga-theme('gorgeous') {
-  $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
+  @include nga-theme-redefines();
-
-  * {
-    transition: all 0.1s;
-  }
-
-  a {
-    @include hover-focus-active {
-      color: $nga-color-secondary !important;
-      text-decoration: none;
-    }
-  }
-
-  nga-layout-header > nav {
-    box-shadow: $layout-shadow;
-
-    i:hover {
-      color: $nga-color-secondary;
-    }
-
-    .left {
-      color: $nga-color-inverse;
-
-      a {
-        color: $nga-color-inverse !important;
-
-        &:hover {
-          color: $nga-color-secondary !important;
-        }
-      }
-    }
-
-    .right i {
-      color: #7d85b2;
-
-      &:hover {
-        color: $nga-color-secondary;
-      }
-    }
-  }
-
-  nga-sidebar {
-    z-index: 1;
-    background: transparent;
-
-    .scrollable {
-      box-shadow: $layout-shadow;
-      margin-top: $nga-layout-padding;
-      border-top-right-radius: $nga-radius;
-    }
-
-    ul li {
-      &:first-child {
-        a {
-          background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
-          box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
-          margin: 1rem;
-          border-radius: $nga-radius;
-          height: 3.5rem;
-        }
-      }
-
-      a {
-        display: flex;
-        align-items: center;
-
-        transition: all 0.2s ease;
-        padding: 0.375rem 0 0.375rem 1rem;
-        color: $nga-color-inverse;
-
-        &.active {
-          color: $nga-color-inverse !important;
-          background: $nga-background;
-          font-weight: bold;
-        }
-
-        i {
-          font-size: 2rem;
-          margin-right: 1.25rem;
-
-          &:first-child {
-            display: flex;
-            justify-content: center;
-          }
-        }
-      }
-    }
-  }
-
-  nga-layout-footer > nav {
-    $footer-text: #7d85b2;
-    $footer-link: $nga-color-secondary;
-
-    border: none !important;
-    padding: 1.25rem;
-    box-shadow: $layout-shadow;
-
-    .created-by {
-      color: #7d85b2;
-
-      a {
-        color: #7d85b2 !important;
-
-        &:hover {
-          color: $nga-color-secondary !important;
-        }
-      }
-    }
-  }
   @include custom-components-theme();
 }

src/app/@theme/styles/gorgeous/nga-redefines/_nga-layout.scss

@@ -0,0 +1,72 @@
+@mixin nga-layout-redefines {
+  $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
+
+  /deep/ .layout {
+    a {
+      @include hover-focus-active {
+        color: $nga-color-secondary !important;
+        text-decoration: none;
+      }
+    }
+
+    nga-layout-header > nav {
+      box-shadow: $layout-shadow;
+
+      i:hover {
+        color: $nga-color-secondary;
+      }
+
+      .left {
+        color: $nga-color-inverse;
+
+        a {
+          color: $nga-color-inverse !important;
+
+          &:hover {
+            color: $nga-color-secondary !important;
+          }
+        }
+      }
+
+      .right i {
+        color: #7d85b2;
+
+        &:hover {
+          color: $nga-color-secondary;
+        }
+      }
+    }
+
+    nga-sidebar {
+      z-index: 1;
+      background: transparent;
+
+      .scrollable {
+        box-shadow: $layout-shadow;
+        margin-top: $nga-layout-padding;
+        border-top-right-radius: $nga-radius;
+      }
+    }
+
+    nga-layout-footer > nav {
+      $footer-text: #7d85b2;
+      $footer-link: $nga-color-secondary;
+
+      border: none !important;
+      padding: 1.25rem;
+      box-shadow: $layout-shadow;
+
+      .created-by {
+        color: #7d85b2;
+
+        a {
+          color: #7d85b2 !important;
+
+          &:hover {
+            color: $nga-color-secondary !important;
+          }
+        }
+      }
+    }
+  }
+}

src/app/@theme/styles/gorgeous/nga-redefines/_nga-menu.scss

@@ -0,0 +1,46 @@
+@mixin nga-menu-redefines {
+  /deep/ nga-menu {
+    ul li {
+      &:first-child {
+        a {
+          background-image: linear-gradient(to right, #664dd9, #9d52f2) !important;
+          box-shadow: 0 0 12px 0 rgba(128, 51, 255, 0.35) !important;
+          margin: 1rem;
+          border-radius: $nga-radius;
+          height: 3.5rem;
+          color: $nga-color-inverse;
+        }
+      }
+
+      a,
+      & > span.menu-group {
+        display: flex;
+        align-items: center;
+
+        transition: all 0.2s ease;
+        padding: 0.375rem 0 0.375rem 1rem;
+        color: $nga-color-secondary;
+
+        &.active {
+          background: $nga-background;
+          font-weight: bold;
+        }
+
+        i {
+          font-size: 2rem;
+          margin-right: 1.25rem;
+
+          &:first-child {
+            display: flex;
+            justify-content: center;
+          }
+        }
+      }
+
+      & > span.menu-group {
+        color: $nga-color-inverse;
+        font-size: 1rem;
+      }
+    }
+  }
+}

src/app/@theme/styles/gorgeous/nga-redefines/redefines.scss

@@ -0,0 +1,7 @@
+@import 'nga-layout';
+@import 'nga-menu';
+
+@mixin nga-theme-redefines {
+  @include nga-layout-redefines();
+  @include nga-menu-redefines();
+}

src/app/@theme/styles/pure/nga-redefines/_nga-layout.scss

@@ -0,0 +1,27 @@
+@mixin nga-layout-redefines {
+  $layout-border-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+
+  /deep/ .layout {
+    a, i {
+      @include hover-focus-active {
+        color: $nga-color-secondary !important;
+        text-decoration: none;
+      }
+    }
+
+    nga-layout-header > nav {
+      box-shadow: $layout-border-shadow;
+    }
+
+    nga-sidebar {
+      z-index: 1;
+      box-shadow: $layout-border-shadow;
+    }
+
+    nga-layout-footer > nav {
+      box-shadow: $layout-border-shadow;
+      border: none !important;
+      padding: 1.25rem;
+    }
+  }
+}

src/app/@theme/styles/pure/nga-redefines/_nga-menu.scss

@@ -0,0 +1,39 @@
+@mixin nga-menu-redefines {
+  /deep/ nga-menu {
+    ul li {
+      transition: all 0.2s ease;
+
+      &:first-child {
+        margin-top: 3rem;
+      }
+
+      a, & > span.menu-group {
+        display: flex;
+        align-items: center;
+        padding: 0.375rem 0 0.375rem 1rem;
+        color: $nga-color-inverse;
+
+        &.active {
+          color: $nga-color-inverse !important;
+          background: $nga-background;
+          font-weight: bold;
+        }
+
+        i {
+          font-size: 2rem;
+          margin-right: 1.25rem;
+
+          &:first-child {
+            display: flex;
+            justify-content: center;
+          }
+        }
+      }
+
+      & > span.menu-group {
+        opacity: 0.8;
+        font-size: 1rem;
+      }
+    }
+  }
+}

src/app/@theme/styles/pure/nga-redefines/redefines.scss

@@ -0,0 +1,7 @@
+@import 'nga-layout';
+@import 'nga-menu';
+
+@mixin nga-theme-redefines {
+  @include nga-layout-redefines();
+  @include nga-menu-redefines();
+}

src/app/@theme/styles/pure/pure.theme.scss

@@ -1,66 +1,10 @@
-@import '../components';
 @import 'pure.variables';
+@import '../components';
+@import 'nga-redefines/redefines';
 
 @import '~@nga/theme/styles/themes/nga.theme.default';
 
 @include nga-theme('pure') {
-  $layout-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+  @include nga-theme-redefines();
-
-  * {
-    transition: all 0.1s;
-  }
-
-  a, i {
-    @include hover-focus-active {
-      color: $nga-color-secondary !important;
-      text-decoration: none;
-    }
-  }
-
-  nga-layout-header > nav {
-    box-shadow: $layout-shadow;
-  }
-
-  nga-sidebar {
-    z-index: 1;
-    box-shadow: $layout-shadow;
-
-    ul li {
-      &:first-child {
-        margin-top: 3rem;
-      }
-
-      a {
-        display: flex;
-        align-items: center;
-
-        transition: all 0.2s ease;
-        padding: 0.375rem 0 0.375rem 1rem;
-        color: $nga-color-inverse;
-
-        &.active {
-          color: $nga-color-inverse !important;
-          background: $nga-background;
-          font-weight: bold;
-        }
-
-        i {
-          font-size: 2rem;
-          margin-right: 1.25rem;
-
-          &:first-child {
-            display: flex;
-            justify-content: center;
-          }
-        }
-      }
-    }
-  }
-
-  nga-layout-footer > nav {
-    box-shadow: $layout-shadow;
-    border: none !important;
-    padding: 1.25rem;
-  }
   @include custom-components-theme();
 }

src/app/pages/pages-menu.ts

@@ -10,7 +10,7 @@ export const menuItems: List<NgaMenuItem> = List([
     home: true,
   },
   {
-    title: 'Features',
+    title: 'FEATURES',
     group: true,
   },
   {