mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-17 06:55:30 +01:00
chore(app): update @nga/theme and fix styles according to linter
This commit is contained in:
parent
ff0e6adf60
commit
f127fd37e1
31 changed files with 173 additions and 188 deletions
|
|
@ -8,7 +8,7 @@
|
|||
font-size: 2rem;
|
||||
|
||||
a {
|
||||
padding: .4rem;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 <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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
src/app/@theme/styles/pure/_pure.variables.scss
Normal file
23
src/app/@theme/styles/pure/_pure.variables.scss
Normal 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;
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue