Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-21 07:24:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(app): add mock pages and some header feats

Browse source
This commit is contained in:
tibing 2017-04-18 15:27:37 +03:00
parent 2cb6bf99e0
commit 58c9114ff9
20 changed files with 201 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss
View file

@ -4,18 +4,61 @@
nga-layout-header > nav {
justify-content: space-between;
.logo {
font-size: 1.7rem;
color: $nga-color-primary;
text-decoration: none;
transition: all 0.2s ease;
div {
display: flex;
align-items: center;
}
span {
color: $nga-color-secondary;
.left {
> * {
padding: 0 1.25rem;
border-right: 1px solid rgba($nga-color-default, 0.2);
&:first-child {
padding-left: 0;
}
&:last-child {
border: none;
}
}
&:hover span {
color: $nga-color-primary;
i.menu-collapse {
font-size: 2.8rem;
&:hover {
cursor: pointer;
color: $nga-color-secondary;
}
}
.logo {
font-size: 1.7rem;
text-decoration: none;
transition: all 0.2s ease;
span {
color: $nga-color-secondary;
}
&:hover span {
color: $nga-color-default;
}
}
}
.right {
> * {
padding: 0 1.25rem;
border-left: 1px solid rgba($nga-color-primary, 0.2);
&:first-child {
border: none;
}
&:last-child {
padding-left: 0;
}
}
}
}

19
src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts
View file

@ -9,6 +9,7 @@
* */
import { Component } from '@angular/core';
import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
@Component({
selector: 'one-coll-layout',
@ -16,10 +17,16 @@ import { Component } from '@angular/core';
template: `
<nga-layout>
<nga-layout-header fixed>
<a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
<div class="left">
<i class="menu-collapse ion ion-navicon" (click)="toggleSidebar()"></i>
<a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
</div>
<div class="right">
</div>
</nga-layout-header>
<nga-sidebar left>
<nga-sidebar>
<nga-sidebar-content>
<ng-content select="nga-menu"></ng-content>
</nga-sidebar-content>
@ -29,10 +36,16 @@ import { Component } from '@angular/core';
<ng-content select="router-outlet"></ng-content>
</nga-layout-column>
<nga-layout-footer>
<nga-layout-footer fixed>
</nga-layout-footer>
</nga-layout>
`,
})
export class OneCollLayoutComponent {
constructor(private sidebarService: NgaSidebarService) {
}
toggleSidebar() {
this.sidebarService.toggle(true);
}
}

34
src/app/@theme/styles/pure/pure.custom.scss
View file

@ -1,34 +0,0 @@
: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;
}
}
}

52
src/app/@theme/styles/pure/pure.redefines.scss
View file

@ -1,15 +1,18 @@
@import '~@nga/theme/styles/themes/nga.theme.default';
$nga-color-primary: #7d85b2;
$nga-color-default: #edf1f7;
$nga-color-primary: #edf1f7;
$nga-color-default: #7d85b2;
$nga-color-secondary: #b5bbd5;
$nga-background: white;
$nga-layout-background: $nga-color-default;
$nga-layout-background: $nga-color-primary;
$nga-layout-foreground: $nga-color-default;
$nga-header-height: 4.725rem;
$nga-header-background: $nga-background;
$nga-header-foreground: $nga-color-default;
$nga-header-padding: 1.25rem;
$nga-footer-height: $nga-header-height;
$nga-footer-background: $nga-background;
@ -18,3 +21,46 @@ $nga-user-picture-background: $nga-color-default;
$nga-sidebar-background: $nga-background;
$nga-sidebar-width: 16.25rem;
: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 {
display: flex;
align-items: center;
transition: all 0.2s ease;
padding: .375rem 0 .375rem 1rem;
&:hover {
background: $nga-color-primary;
color: $nga-color-default;
}
&.active {
font-weight: bold;
color: $nga-color-default;
background: $nga-color-primary;
}
i {
font-size: 2rem;
margin-right: 1.25rem;
}
}
}
nga-layout-footer > nav {
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
border: none !important;
}
}
}

1
src/app/@theme/styles/pure/pure.theme.scss
View file

@ -1,6 +1,5 @@
@import '~@nga/theme/styles/themes/nga.theme.default';
@import 'pure.redefines';
@import 'pure.custom';
@include nga-theme();