chore(app): update @nga/theme and fix styles according to linter

This commit is contained in:
tibing 2017-04-21 17:23:44 +03:00
parent ff0e6adf60
commit f127fd37e1
31 changed files with 173 additions and 188 deletions

View file

@ -8,7 +8,7 @@
font-size: 2rem;
a {
padding: .4rem;
padding: 0.4rem;
}
}
}

View file

@ -11,7 +11,7 @@ import { Component } from '@angular/core';
<a href="https://twitter.com/akveo_inc" target="_blank" class="ion ion-social-twitter"></a>
<a href="https://www.linkedin.com/company/akveo" target="_blank" class="ion ion-social-linkedin"></a>
</div>
`
`,
})
export class BaseFooterComponent {
}

View file

@ -4,7 +4,7 @@
justify-content: space-between;
i.control-icon {
&:before {
&::before {
font-size: 2.3rem;
}
@ -47,6 +47,7 @@
font-size: 1.7rem;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
}

View file

@ -1,6 +1,6 @@
import { Component } from '@angular/core';
import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
import { NgaSidebarService, NgaMenuService } from '@nga/theme';
@Component({
selector: 'base-header',
@ -8,7 +8,7 @@ import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service
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>
<span class="logo" (click)="goToHome()">NgX &nbsp; <span>Admin</span></span>
</div>
<div class="right">
<search-input></search-input>
@ -17,13 +17,18 @@ import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service
<nga-user></nga-user>
<i class="control-icon ion ion-ios-gear-outline"></i>
</div>
`
`,
})
export class BaseHeaderComponent {
constructor(private sidebarService: NgaSidebarService) {
constructor(private sidebarService: NgaSidebarService,
private menuService: NgaMenuService) {
}
toggleSidebar() {
this.sidebarService.toggle(true);
}
goToHome() {
this.menuService.navigateHome();
}
}

View file

@ -9,9 +9,7 @@ import { Component } from '@angular/core';
</nga-layout-header>
<nga-sidebar>
<nga-sidebar-content>
<ng-content select="nga-menu"></ng-content>
</nga-sidebar-content>
<ng-content select="nga-menu"></ng-content>
</nga-sidebar>
<nga-layout-column>

View file

@ -11,7 +11,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
[class.hidden]="!isInputShown"
(blur)="hideInput()"
(input)="onInput($event)">
`
`,
})
export class SearchInputComponent {
@ViewChild('input') input: ElementRef;
@ -32,4 +32,4 @@ export class SearchInputComponent {
onInput(val: string) {
this.search.emit(val);
}
}
}

View file

@ -1,82 +0,0 @@
@import '~@nga/theme/styles/themes/nga.theme.default';
$nga-color-primary: #edf1f7;
$nga-color-default: #7d85b2;
$nga-color-secondary: #b5bbd5;
$nga-background: white;
$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;
$nga-user-picture-background: $nga-color-default;
$nga-sidebar-background: $nga-background;
$nga-sidebar-width: 16.25rem;
$nga-sidebar-width-compact: 3.45rem;
:host /deep/ {
color: $nga-color-default;
input {
color: $nga-color-default;
}
a:hover {
color: $nga-color-secondary;
text-decoration: none;
}
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;
&:first-child {
display: flex;
justify-content: center;
}
}
}
}
nga-layout-footer > nav {
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
border: none !important;
padding: 1.25rem;
}
}
}

View file

@ -0,0 +1,23 @@
$nga-color-primary: #edf1f7;
$nga-color-default: #7d85b2;
$nga-color-secondary: #b5bbd5;
$nga-background: white;
$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;
$nga-user-picture-background: $nga-color-default;
$nga-sidebar-background: $nga-background;
$nga-sidebar-width: 16.25rem;
$nga-sidebar-width-compact: 3.45rem;
$nga-sidebar-padding: 0;

View file

@ -1,6 +1,67 @@
@import '~@nga/theme/styles/themes/nga.theme.default';
@import '../components';
@import 'pure.redefines';
@import 'pure.variables';
@include nga-theme();
@include custom-components-theme();
@include nga-theme('pure') {
color: $nga-color-default;
input {
color: $nga-color-default;
}
a:hover {
color: $nga-color-secondary;
text-decoration: none;
}
nga-layout-header > nav {
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
}
nga-sidebar {
z-index: 1;
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
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;
&: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;
&:first-child {
display: flex;
justify-content: center;
}
}
}
}
}
nga-layout-footer > nav {
box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
border: none !important;
padding: 1.25rem;
}
@include custom-components-theme();
}

View file

@ -9,7 +9,7 @@ import {
NgaRouteTabsetModule,
NgaSidebarModule,
NgaMenuModule,
NgaUserModule
NgaUserModule,
} from '@nga/theme';
import { SearchInputComponent } from './search-input/search-input.component';
@ -19,7 +19,7 @@ import { BaseFooterComponent } from './layouts/base-footer/base-footer.component
const BASE_MODULES = [
CommonModule,
FormsModule,
ReactiveFormsModule
ReactiveFormsModule,
];
const NGA_MODULES = [
@ -28,13 +28,13 @@ const NGA_MODULES = [
NgaTabsetModule,
NgaRouteTabsetModule,
NgaMenuModule,
NgaUserModule
NgaUserModule,
];
const LAYOUTS = [
OneCollLayoutComponent,
BaseHeaderComponent,
BaseFooterComponent
BaseFooterComponent,
];
@NgModule({
@ -47,13 +47,13 @@ const LAYOUTS = [
...BASE_MODULES,
...NGA_MODULES,
...LAYOUTS,
SearchInputComponent
SearchInputComponent,
],
declarations: [
...LAYOUTS,
SearchInputComponent,
BaseFooterComponent
]
BaseFooterComponent,
],
})
export class ThemeModule {
}