feat(@theme): add base gorgeous styles

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

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'base-footer',
   styleUrls: ['./base-footer.component.scss'],
   template: `
-    <span>Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
+    <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
     <div class="socials">
       <a href="https://github.com/akveo" target="_blank" class="ion ion-social-github"></a>
       <a href="https://www.facebook.com/akveo" target="_blank" class="ion ion-social-facebook"></a>

src/app/@theme/search-input/_search-input.component.theme.scss

@@ -1,4 +1,7 @@
 @mixin search-input-theme() {
   /deep/ search-input {
+    input {
+      background: transparent;
+    }
   }
 }

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

@@ -0,0 +1,21 @@
+$nga-color-default: #2f2e66;
+$nga-color-secondary: #a1a1e6;
+$nga-color-inverse: white;
+
+$nga-foreground: $nga-color-inverse;
+$nga-background: #20274f;
+
+$nga-foreground-inverse: $nga-color-secondary;
+
+$nga-layout-padding: 2.5rem;
+
+$nga-header-height: 4.725rem;
+$nga-header-padding: 1.25rem;
+
+$nga-footer-height: $nga-header-height;
+
+$nga-sidebar-width: 16.25rem;
+$nga-sidebar-width-compact: 3.45rem;
+$nga-sidebar-padding: 0;
+
+$nga-card-background: $nga-color-default;

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

@@ -1,7 +1,116 @@
-@import '~@nga/theme/styles/themes/nga.theme.default';
 @import '../components';
 @import 'gorgeous.variables';
+@import '~@nga/theme/styles/themes/nga.theme.default';
 
 @include nga-theme('gorgeous') {
+  $layout-shadow: 0 8px 20px 0 rgba(37, 26, 75, 0.68);
+
+  * {
+    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/pure/pure.theme.scss

@@ -4,6 +4,12 @@
 @import '~@nga/theme/styles/themes/nga.theme.default';
 
 @include nga-theme('pure') {
+  $layout-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+
+  * {
+    transition: all 0.1s;
+  }
+
   a, i {
     @include hover-focus-active {
       color: $nga-color-secondary !important;
@@ -12,12 +18,12 @@
   }
 
   nga-layout-header > nav {
-    box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+    box-shadow: $layout-shadow;
   }
 
   nga-sidebar {
     z-index: 1;
-    box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+    box-shadow: $layout-shadow;
 
     ul li {
       &:first-child {
@@ -52,7 +58,7 @@
   }
 
   nga-layout-footer > nav {
-    box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+    box-shadow: $layout-shadow;
     border: none !important;
     padding: 1.25rem;
   }

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

@@ -1,2 +0,0 @@
-@import 'pure/pure.theme';
-@import 'gorgeous/gorgeous.theme';

src/app/app.component.scss

@@ -1 +0,0 @@
-@import '@theme/styles/styles';

src/app/app.component.ts

@@ -8,7 +8,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app',
   template: '<router-outlet></router-outlet>',
-  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
 }

src/app/pages/dashboard/dashboard.component.ts

@@ -3,9 +3,91 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'dashboard',
   template: `
-    <p>
+    <nga-card>
-      dashboard works!
+      <nga-card-header>Test card</nga-card-header>  
-    </p>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
+    <nga-card>
+      <nga-card-header>Test card</nga-card-header>
+      <nga-card-body>Some Body</nga-card-body>
+      <nga-card-footer>Super Footer</nga-card-footer>
+    </nga-card>
   `,
 })
 export class DashboardComponent {

src/app/pages/pages.component.ts

@@ -2,6 +2,10 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'pages',
+  styleUrls: [
+    '../@theme/styles/gorgeous/gorgeous.theme.scss',
+    '../@theme/styles/pure/pure.theme.scss',
+  ],
   template: `
     <one-coll-layout>
       <nga-menu></nga-menu>

src/app/pages/pages.module.ts

@@ -14,7 +14,7 @@ import { ComponentsComponent } from './components/components.component';
 
 @NgModule({
   imports: [
-    NgaThemeModule.forRoot({ name: 'pure' }),
+    NgaThemeModule.forRoot({ name: 'gorgeous' }),
     NgaSidebarModule.forRoot(),
     NgaMenuModule.forRoot({ items: menuItems }),
     PagesRoutingModule,