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

refactor(@theme): refactor style system

Browse source
This commit is contained in:
tibing 2017-04-18 19:12:29 +03:00
parent e0f79206bb
commit 0992b52b24
14 changed files with 214 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/app/@theme/layouts/base-header/_base-header.component.theme.scss Normal file
View file

@ -0,0 +1,24 @@
@mixin base-header-theme() {
/deep/ base-header {
i.control-icon {
&:hover {
color: $nga-color-secondary;
}
}
.logo {
span {
color: $nga-color-secondary;
}
&:hover span {
color: $nga-color-default;
}
}
.left > *,
.right > * {
border-color: rgba($nga-color-default, 0.2);
}
}
}

64
src/app/@theme/layouts/base-header/base-header.component.scss Normal file
View file

@ -0,0 +1,64 @@
:host {
width: 100%;
display: flex;
justify-content: space-between;
i.control-icon {
&:before {
font-size: 2.3rem;
}
&:hover {
cursor: pointer;
}
}
div {
display: flex;
align-items: center;
}
.left {
> * {
padding: 0 1.25rem;
border-right-width: 1px;
border-right-style: solid;
&:first-child {
padding-left: 0;
}
&:last-child {
border: none;
}
}
.control-icon.ion-navicon {
font-size: 2.8rem;
}
.logo {
font-size: 1.7rem;
text-decoration: none;
transition: all 0.2s ease;
}
}
.right {
> * {
padding: 0 1.25rem;
border-left-width: 1px;
border-left-style: solid;
&:first-child {
border: none;
}
&:last-child {
padding-right: 0;
}
}
}
}

29
src/app/@theme/layouts/base-header/base-header.component.ts Normal file
View file

@ -0,0 +1,29 @@
import { Component } from '@angular/core';
import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
@Component({
selector: 'base-header',
styleUrls: ['./base-header.component.scss'],
template: `
<div class="left">
<i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
<a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
</div>
<div class="right">
<search-input></search-input>
<i class="control-icon ion ion-ios-email-outline"></i>
<i class="control-icon ion ion-ios-bell-outline"></i>
<nga-user></nga-user>
<i class="control-icon ion ion-ios-gear-outline"></i>
</div>
`
})
export class BaseHeaderComponent {
constructor(private sidebarService: NgaSidebarService) {
}
toggleSidebar() {
this.sidebarService.toggle(true);
}
}

1
src/app/@theme/layouts/index.ts
View file

@ -1 +1,2 @@
export * from './base-header/base-header.component';
export * from './one-coll-layout/one-coll.layout';

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

@ -1,76 +0,0 @@
@import '../../styles/pure/pure.redefines';
:host /deep/ {
nga-layout-header > nav {
justify-content: space-between;
i.control-icon {
font-size: 2.3rem;
&:hover {
cursor: pointer;
color: $nga-color-secondary;
}
}
div {
display: flex;
align-items: center;
}
.left {
> * {
padding: 0 1.25rem;
border-right: 1px solid rgba($nga-color-default, 0.2);
&:first-child {
padding-left: 0;
}
&:last-child {
border: none;
}
}
.control-icon.ion-navicon {
font-size: 2.8rem;
}
.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-default, 0.2);
&:first-child {
border: none;
}
&:last-child {
padding-right: 0;
}
}
}
}
nga-sidebar {
}
nga-layout-footer > nav {
}
}

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

@ -1,33 +1,11 @@
/*
* TODO
* I think we need to store our header, footer,
* sedibars and etc. separetly, each in it's own
* component.
*
* And of course we need to make this layout part
* reusable.
* */
import { Component } from '@angular/core';
import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
@Component({
selector: 'one-coll-layout',
styleUrls: ['./one-coll.layout.scss'],
template: `
<nga-layout>
<nga-layout-header fixed>
<div class="left">
<i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
<a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
</div>
<div class="right">
<i class="control-icon ion ion-ios-search"></i>
<i class="control-icon ion ion-ios-email-outline"></i>
<i class="control-icon ion ion-ios-bell-outline"></i>
<nga-user></nga-user>
<i class="control-icon ion ion-ios-gear-outline"></i>
</div>
<base-header></base-header>
</nga-layout-header>
<nga-sidebar>
@ -46,10 +24,4 @@ import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service
`,
})
export class OneCollLayoutComponent {
constructor(private sidebarService: NgaSidebarService) {
}
toggleSidebar() {
this.sidebarService.toggle(true);
}
}