From 2cb6bf99e0381ba6d359e3a308013c894e44e7b3 Mon Sep 17 00:00:00 2001
From: tibing <parapupum@gmail.com>
Date: Mon, 17 Apr 2017 19:01:47 +0300
Subject: [PATCH] feat(theme): add base styles

---
 .angular-cli.json                             |  3 +-
 .../one-coll-layout/one-coll.layout.scss      | 21 ++++++++--
 .../one-coll-layout/one-coll.layout.ts        | 19 ++++-----
 src/app/@theme/styles/pure/pure.custom.scss   | 34 ++++++++++++++++
 .../@theme/styles/pure/pure.redefines.scss    | 20 ++++++++++
 .../pure.theme.scss}                          |  3 ++
 src/app/@theme/styles/styles.scss             |  2 +-
 src/app/pages/pages-menu.ts                   | 39 ++++++++++++++++++-
 src/styles.scss                               |  6 ---
 9 files changed, 124 insertions(+), 23 deletions(-)
 create mode 100644 src/app/@theme/styles/pure/pure.custom.scss
 create mode 100644 src/app/@theme/styles/pure/pure.redefines.scss
 rename src/app/@theme/styles/{default.theme.scss => pure/pure.theme.scss} (60%)
 delete mode 100644 src/styles.scss

diff --git a/.angular-cli.json b/.angular-cli.json
index bed839e1..160fbab6 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -22,8 +22,7 @@
         "../node_modules/normalize.css/normalize.css",
         "../node_modules/font-awesome/scss/font-awesome.scss",
         "../node_modules/ionicons/scss/ionicons.scss",
-        "../node_modules/bootstrap/scss/bootstrap.scss",
-        "styles.scss"
+        "../node_modules/bootstrap/scss/bootstrap.scss"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.js",
diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
index de6ab326..0364a5ca 100644
--- a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
+++ b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
@@ -1,14 +1,29 @@
+@import '../../styles/pure/pure.redefines';
+
 :host /deep/ {
   nga-layout-header > nav {
-    display: flex;
     justify-content: space-between;
+
+    .logo {
+      font-size: 1.7rem;
+      color: $nga-color-primary;
+      text-decoration: none;
+      transition: all 0.2s ease;
+
+      span {
+        color: $nga-color-secondary;
+      }
+
+      &:hover span {
+        color: $nga-color-primary;
+      }
+    }
   }
 
   nga-sidebar {
 
   }
 
-  nga-layout-footer {
-
+  nga-layout-footer > nav {
   }
 }
diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
index fdbb5bd3..fe91b2ba 100644
--- a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
+++ b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
@@ -16,20 +16,21 @@ import { Component } from '@angular/core';
   template: `
     <nga-layout>
       <nga-layout-header fixed>
-        <section>
-          <h1>Logo</h1>
-        </section>
-        <section>
-          <nga-user></nga-user>
-        </section> 
+        <a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
       </nga-layout-header>
-      <nga-sidebar fixed>
-        <ng-content select="nga-menu"></ng-content>
+
+      <nga-sidebar left>
+        <nga-sidebar-content>
+          <ng-content select="nga-menu"></ng-content>
+        </nga-sidebar-content>
       </nga-sidebar>
+      
       <nga-layout-column>
         <ng-content select="router-outlet"></ng-content>
       </nga-layout-column>
-      <nga-layout-footer></nga-layout-footer>
+      
+      <nga-layout-footer>
+      </nga-layout-footer>
     </nga-layout>
   `,
 })
diff --git a/src/app/@theme/styles/pure/pure.custom.scss b/src/app/@theme/styles/pure/pure.custom.scss
new file mode 100644
index 00000000..630f9820
--- /dev/null
+++ b/src/app/@theme/styles/pure/pure.custom.scss
@@ -0,0 +1,34 @@
+:host /deep/ {
+  color: $nga-color-default;
+
+  nga-layout {
+    nga-layout-header > nav {
+      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+    }
+
+    nga-sidebar {
+      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+
+      ul {
+        li a {
+          color: $nga-color-primary;
+          transition: all 0.2s ease;
+          padding: .87rem 0 .87rem 1rem;
+
+          &:hover {
+            background: $nga-color-default;
+          }
+
+          &.active {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    nga-layout-footer > nav {
+      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+      border: none !important;
+    }
+  }
+}
diff --git a/src/app/@theme/styles/pure/pure.redefines.scss b/src/app/@theme/styles/pure/pure.redefines.scss
new file mode 100644
index 00000000..995c8bc0
--- /dev/null
+++ b/src/app/@theme/styles/pure/pure.redefines.scss
@@ -0,0 +1,20 @@
+@import '~@nga/theme/styles/themes/nga.theme.default';
+
+$nga-color-primary: #7d85b2;
+$nga-color-default: #edf1f7;
+$nga-color-secondary: #b5bbd5;
+
+$nga-background: white;
+
+$nga-layout-background: $nga-color-default;
+
+$nga-header-height: 4.725rem;
+$nga-header-background: $nga-background;
+
+$nga-footer-height: $nga-header-height;
+$nga-footer-background: $nga-background;
+
+$nga-user-picture-background: $nga-color-default;
+
+$nga-sidebar-background: $nga-background;
+$nga-sidebar-width: 16.25rem;
diff --git a/src/app/@theme/styles/default.theme.scss b/src/app/@theme/styles/pure/pure.theme.scss
similarity index 60%
rename from src/app/@theme/styles/default.theme.scss
rename to src/app/@theme/styles/pure/pure.theme.scss
index e1c28651..a24d72c8 100644
--- a/src/app/@theme/styles/default.theme.scss
+++ b/src/app/@theme/styles/pure/pure.theme.scss
@@ -1,3 +1,6 @@
 @import '~@nga/theme/styles/themes/nga.theme.default';
 
+@import 'pure.redefines';
+@import 'pure.custom';
+
 @include nga-theme();
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index f925ec75..ecc98bed 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -1 +1 @@
-@import "default.theme";
\ No newline at end of file
+@import "pure/pure.theme";
\ No newline at end of file
diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
index 98e66015..1aaf4979 100644
--- a/src/app/pages/pages-menu.ts
+++ b/src/app/pages/pages-menu.ts
@@ -4,9 +4,44 @@ import { List } from 'immutable';
 
 export const menuItems: List<NgaMenuItem> = List([
   {
-    title: 'lorem ipsum 1'
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+    selected: true
   },
   {
-    title: 'lorem ipsum 2'
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+  },
+  {
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+  },
+  {
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+  },
+  {
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+  },
+  {
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+  },
+  {
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
+  },
+  {
+    title: 'Dashboard',
+    icon: 'ion ion-android-home',
+    link: '/pages/dashboard',
   }
 ]);
diff --git a/src/styles.scss b/src/styles.scss
deleted file mode 100644
index dc154bc2..00000000
--- a/src/styles.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
-/* You can add global styles to this file, and also import other style files */