mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-14 12:24:21 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
|
|
@ -13,11 +13,11 @@
|
|||
|
||||
a {
|
||||
padding: 0.4rem;
|
||||
color: nb-theme(color-fg);
|
||||
color: nb-theme(text-hint-color);
|
||||
transition: color ease-out 0.1s;
|
||||
|
||||
&:hover {
|
||||
color: nb-theme(color-fg-heading);
|
||||
color: nb-theme(text-basic-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-footer',
|
||||
styleUrls: ['./footer.component.scss'],
|
||||
template: `
|
||||
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
|
||||
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2019</span>
|
||||
<div class="socials">
|
||||
<a href="#" target="_blank" class="ion ion-social-github"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-facebook"></a>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,29 @@
|
|||
<div class="header-container"
|
||||
[class.left]="position === 'normal'"
|
||||
[class.right]="position === 'inverse'">
|
||||
<div class="logo-containter">
|
||||
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
|
||||
<div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
|
||||
<div class="header-container">
|
||||
<div class="logo-container">
|
||||
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
|
||||
<nb-icon icon="menu-2-outline"></nb-icon>
|
||||
</a>
|
||||
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
||||
</div>
|
||||
<ngx-theme-switcher></ngx-theme-switcher>
|
||||
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
|
||||
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
|
||||
</nb-select>
|
||||
</div>
|
||||
|
||||
<div class="header-container">
|
||||
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
|
||||
<nb-actions
|
||||
size="medium"
|
||||
[class.right]="position === 'normal'"
|
||||
[class.left]="position === 'inverse'">
|
||||
<nb-action *nbIsGranted="['view', 'user']" >
|
||||
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
|
||||
<nb-action class="control-item" icon="nb-email"></nb-action>
|
||||
<nb-actions size="small">
|
||||
|
||||
<nb-action class="control-item">
|
||||
<nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
|
||||
<nb-search type="rotate-layout"></nb-search>
|
||||
</nb-action>
|
||||
<nb-action class="control-item" icon="email-outline"></nb-action>
|
||||
<nb-action class="control-item" icon="bell-outline"></nb-action>
|
||||
<nb-action class="user-action" *nbIsGranted="['view', 'user']" >
|
||||
<nb-user [nbContextMenu]="userMenu"
|
||||
[onlyPicture]="userPictureOnly"
|
||||
[name]="user?.name"
|
||||
[picture]="user?.picture">
|
||||
</nb-user>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,30 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@import '../../styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
order: 0;
|
||||
flex-direction: row;
|
||||
}
|
||||
.right {
|
||||
order: 1;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.logo-containter {
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
|
||||
}
|
||||
|
||||
.control-item {
|
||||
display: block;
|
||||
nb-action {
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
nb-user {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::ng-deep nb-search button {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
|
|
@ -33,179 +32,38 @@
|
|||
align-items: center;
|
||||
width: auto;
|
||||
|
||||
.navigation {
|
||||
@include nb-ltr(padding-right, nb-theme(padding));
|
||||
@include nb-rtl(padding-left, nb-theme(padding));
|
||||
font-size: 2.5rem;
|
||||
.sidebar-toggle {
|
||||
@include nb-ltr(padding-right, 1.25rem);
|
||||
@include nb-rtl(padding-left, 1.25rem);
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
color: nb-theme(text-hint-color);
|
||||
nb-icon {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 nb-theme(padding);
|
||||
padding: 0 1.25rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(separator));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(separator));
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(divider-color));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(divider-color));
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
font-weight: nb-theme(font-weight-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
$menu-action-separator-color: #3f4550;
|
||||
|
||||
nb-action {
|
||||
@include nb-ltr(border-left-color, $menu-action-separator-color);
|
||||
@include nb-rtl(border-right-color, $menu-action-separator-color);
|
||||
}
|
||||
|
||||
.header-container .logo {
|
||||
@include nb-ltr(border, none);
|
||||
@include nb-rtl(border, none);
|
||||
}
|
||||
|
||||
.header-container /deep/ ngx-theme-switcher .dropdown-toggle {
|
||||
color: nb-theme(color-white);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
margin: nb-theme(layout-padding);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
ngx-layout-direction-switcher {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-settings /deep/ a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
|
||||
i {
|
||||
color: nb-theme(color-fg-highlight);
|
||||
font-size: 2.25rem;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation-name: pulse-light;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
// hack to be able to set border-radius
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
top: 52.3%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 13%;
|
||||
height: 13%;
|
||||
|
||||
animation: 3s linear infinite pulse;
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
animation-name: pulse-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pulse) {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pulse-light) {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
nb-action:not(.toggle-settings) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-settings {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
margin: 0 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-user /deep/ .user-name {
|
||||
.control-item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
|
||||
.header-container {
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ngx-theme-switcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nb-action:not(.toggle-settings) {
|
||||
.user-action {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.right /deep/ {
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,83 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
|
||||
|
||||
import { NbMenuService, NbSidebarService } from '@nebular/theme';
|
||||
import { UserData } from '../../../@core/data/users';
|
||||
import { AnalyticsService } from '../../../@core/utils';
|
||||
import { LayoutService } from '../../../@core/utils';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-header',
|
||||
styleUrls: ['./header.component.scss'],
|
||||
templateUrl: './header.component.html',
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
@Input() position = 'normal';
|
||||
export class HeaderComponent implements OnInit, OnDestroy {
|
||||
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
userPictureOnly: boolean = false;
|
||||
user: any;
|
||||
|
||||
userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
|
||||
themes = [
|
||||
{
|
||||
value: 'default',
|
||||
name: 'Light',
|
||||
},
|
||||
{
|
||||
value: 'dark',
|
||||
name: 'Dark',
|
||||
},
|
||||
{
|
||||
value: 'cosmic',
|
||||
name: 'Cosmic',
|
||||
},
|
||||
{
|
||||
value: 'corporate',
|
||||
name: 'Corporate',
|
||||
},
|
||||
];
|
||||
|
||||
currentTheme = 'default';
|
||||
|
||||
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
|
||||
|
||||
constructor(private sidebarService: NbSidebarService,
|
||||
private menuService: NbMenuService,
|
||||
private themeService: NbThemeService,
|
||||
private userService: UserData,
|
||||
private analyticsService: AnalyticsService,
|
||||
private layoutService: LayoutService) {
|
||||
private layoutService: LayoutService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.currentTheme = this.themeService.currentTheme;
|
||||
|
||||
this.userService.getUsers()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe((users: any) => this.user = users.nick);
|
||||
|
||||
const { xl } = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(
|
||||
map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl);
|
||||
|
||||
this.themeService.onThemeChange()
|
||||
.pipe(
|
||||
map(({ name }) => name),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe(themeName => this.currentTheme = themeName);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
changeTheme(themeName: string) {
|
||||
this.themeService.changeTheme(themeName);
|
||||
}
|
||||
|
||||
toggleSidebar(): boolean {
|
||||
|
|
@ -37,11 +87,8 @@ export class HeaderComponent implements OnInit {
|
|||
return false;
|
||||
}
|
||||
|
||||
goToHome() {
|
||||
navigateHome() {
|
||||
this.menuService.navigateHome();
|
||||
}
|
||||
|
||||
startSearch() {
|
||||
this.analyticsService.trackEvent('startSearch');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,3 @@ export * from './header/header.component';
|
|||
export * from './footer/footer.component';
|
||||
export * from './search-input/search-input.component';
|
||||
export * from './tiny-mce/tiny-mce.component';
|
||||
export * from './theme-settings/theme-settings.component';
|
||||
export * from './theme-switcher/theme-switcher.component';
|
||||
export * from './switcher/switcher.component';
|
||||
export * from './layout-direction-switcher/layout-direction-switcher.component';
|
||||
export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
|
||||
export * from './toggle-settings-button/toggle-settings-button.component';
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
import { Component, OnDestroy, Input } from '@angular/core';
|
||||
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-layout-direction-switcher',
|
||||
template: `
|
||||
<ngx-switcher
|
||||
[firstValue]="directions.RTL"
|
||||
[secondValue]="directions.LTR"
|
||||
[firstValueLabel]="'RTL'"
|
||||
[secondValueLabel]="'LTR'"
|
||||
[value]="currentDirection"
|
||||
(valueChange)="toggleDirection($event)"
|
||||
[vertical]="vertical"
|
||||
>
|
||||
</ngx-switcher>
|
||||
`,
|
||||
})
|
||||
export class LayoutDirectionSwitcherComponent implements OnDestroy {
|
||||
directions = NbLayoutDirection;
|
||||
currentDirection: NbLayoutDirection;
|
||||
alive = true;
|
||||
|
||||
@Input() vertical: boolean = false;
|
||||
|
||||
constructor(private directionService: NbLayoutDirectionService) {
|
||||
this.currentDirection = this.directionService.getDirection();
|
||||
|
||||
this.directionService.onDirectionChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(newDirection => this.currentDirection = newDirection);
|
||||
}
|
||||
|
||||
toggleDirection(newDirection) {
|
||||
this.directionService.setDirection(newDirection);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/deep/ search-input {
|
||||
::ng-deep search-input {
|
||||
input {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
|
|||
`,
|
||||
})
|
||||
export class SearchInputComponent {
|
||||
@ViewChild('input') input: ElementRef;
|
||||
@ViewChild('input', { static: true }) input: ElementRef;
|
||||
|
||||
@Output() search: EventEmitter<string> = new EventEmitter<string>();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,112 +0,0 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.switch-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.first,
|
||||
.second {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
transition: opacity 0.3s ease;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&.first {
|
||||
@include nb-ltr(padding-right, 10px);
|
||||
@include nb-rtl(padding-left, 10px);
|
||||
}
|
||||
|
||||
&.second {
|
||||
@include nb-ltr(padding-left, 10px);
|
||||
@include nb-rtl(padding-right, 10px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: nb-theme(color-fg-text);
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&.active {
|
||||
color: nb-theme(color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 1.5rem;
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + .slider::before {
|
||||
@include nb-ltr(transform, translateX(1.5rem));
|
||||
@include nb-rtl(transform, translateX(-1.5rem));
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 1.75rem;
|
||||
background-color: nb-theme(layout-bg);
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: nb-theme(color-success);
|
||||
transition: 0.2s;
|
||||
|
||||
box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-switcher',
|
||||
styleUrls: ['./switcher.component.scss'],
|
||||
template: `
|
||||
<label class="switch-label" [class.vertical]="vertical">
|
||||
<span class="first" [class.active]="vertical || isFirstValue()">
|
||||
{{vertical ? currentValueLabel() : firstValueLabel}}
|
||||
</span>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
*ngIf="!vertical"
|
||||
class="second"
|
||||
[class.active]="isSecondValue()"
|
||||
>
|
||||
{{secondValueLabel}}
|
||||
</span>
|
||||
</label>
|
||||
`,
|
||||
})
|
||||
export class SwitcherComponent {
|
||||
@Input() firstValue: any;
|
||||
@Input() secondValue: any;
|
||||
|
||||
@Input() firstValueLabel: string;
|
||||
@Input() secondValueLabel: string;
|
||||
|
||||
@Input() vertical: boolean;
|
||||
|
||||
@Input() value: any;
|
||||
@Output() valueChange = new EventEmitter<any>();
|
||||
|
||||
isFirstValue() {
|
||||
return this.value === this.firstValue;
|
||||
}
|
||||
|
||||
isSecondValue() {
|
||||
return this.value === this.secondValue;
|
||||
}
|
||||
|
||||
currentValueLabel() {
|
||||
return this.isFirstValue()
|
||||
? this.firstValueLabel
|
||||
: this.secondValueLabel;
|
||||
}
|
||||
|
||||
changeValue() {
|
||||
this.value = this.isFirstValue()
|
||||
? this.secondValue
|
||||
: this.firstValue;
|
||||
|
||||
this.valueChange.emit(this.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
@import '../../styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
h6 {
|
||||
margin-bottom: 0.875rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 0 0 2.575rem;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
width: 4.15rem;
|
||||
height: 4.15rem;
|
||||
border-radius: nb-theme(radius);
|
||||
background-color: nb-theme(color-white);
|
||||
border: 2px solid transparent;
|
||||
margin: 0.875rem;
|
||||
text-decoration: none;
|
||||
font-size: 2.25rem;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&.selected {
|
||||
color: nb-theme(color-success);
|
||||
border-color: nb-theme(color-success);
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
|
||||
background-color: #3e367e;
|
||||
border: 2px solid #3e367e;
|
||||
&.selected {
|
||||
color: nb-theme(link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.524rem;
|
||||
width: 12rem;
|
||||
|
||||
/deep/ ngx-switcher {
|
||||
.switch-label span {
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
&.first, &.second {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
height: 1.5em;
|
||||
width: 3em;
|
||||
|
||||
.slider::before {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
input:checked + .slider::before {
|
||||
@include nb-ltr(transform, translateX(1.5em)!important);
|
||||
@include nb-rtl(transform, translateX(-1.5em)!important);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.switch .slider {
|
||||
background-color: nb-theme(color-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { StateService } from '../../../@core/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-settings',
|
||||
styleUrls: ['./theme-settings.component.scss'],
|
||||
template: `
|
||||
<h6>LAYOUTS</h6>
|
||||
<div class="settings-row">
|
||||
<a *ngFor="let layout of layouts"
|
||||
href="#"
|
||||
[class.selected]="layout.selected"
|
||||
[attr.title]="layout.name"
|
||||
(click)="layoutSelect(layout)">
|
||||
<i [attr.class]="layout.icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h6>SIDEBAR</h6>
|
||||
<div class="settings-row">
|
||||
<a *ngFor="let sidebar of sidebars"
|
||||
href="#"
|
||||
[class.selected]="sidebar.selected"
|
||||
[attr.title]="sidebar.name"
|
||||
(click)="sidebarSelect(sidebar)">
|
||||
<i [attr.class]="sidebar.icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<div class="switcher">
|
||||
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ThemeSettingsComponent {
|
||||
|
||||
layouts = [];
|
||||
sidebars = [];
|
||||
|
||||
constructor(protected stateService: StateService) {
|
||||
this.stateService.getLayoutStates()
|
||||
.subscribe((layouts: any[]) => this.layouts = layouts);
|
||||
|
||||
this.stateService.getSidebarStates()
|
||||
.subscribe((sidebars: any[]) => this.sidebars = sidebars);
|
||||
}
|
||||
|
||||
layoutSelect(layout: any): boolean {
|
||||
this.layouts = this.layouts.map((l: any) => {
|
||||
l.selected = false;
|
||||
return l;
|
||||
});
|
||||
|
||||
layout.selected = true;
|
||||
this.stateService.setLayoutState(layout);
|
||||
return false;
|
||||
}
|
||||
|
||||
sidebarSelect(sidebars: any): boolean {
|
||||
this.sidebars = this.sidebars.map((s: any) => {
|
||||
s.selected = false;
|
||||
return s;
|
||||
});
|
||||
|
||||
sidebars.selected = true;
|
||||
this.stateService.setSidebarState(sidebars);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<div class="themes-switcher"
|
||||
[nbPopover]="switcherListComponent"
|
||||
nbPopoverPlacement="bottom"
|
||||
[nbPopoverContext]="{popover: popover}">
|
||||
<i class="nb-drops"></i>
|
||||
<span *ngIf="showTitle">Themes</span>
|
||||
</div>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~@nebular/theme/styles/core/mixins';
|
||||
@import '~@nebular/theme/styles/core/functions';
|
||||
|
||||
@include nb-install-component() {
|
||||
.themes-switcher {
|
||||
display: flex;
|
||||
font-size: 1.25rem;
|
||||
padding: 0.8rem 1.25rem;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: nb-theme(switcher-background);
|
||||
border-radius: nb-theme(radius);
|
||||
|
||||
&:hover {
|
||||
$color: nb-theme(switcher-background);
|
||||
$percentage: nb-theme(switcher-background-percentage);
|
||||
|
||||
background-color: tint($color, $percentage);
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 1.2rem;
|
||||
}
|
||||
|
||||
i {
|
||||
color: nb-theme(color-primary);
|
||||
font-size: 1.8rem;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
color: nb-theme(color-success);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-fg-highlight);
|
||||
}
|
||||
|
||||
&::before {
|
||||
// Hack for IE11, IE11 should not set background
|
||||
background: nb-theme(drops-icon-line-gadient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { Component, Input, ViewChild } from '@angular/core';
|
||||
import { NbPopoverDirective } from '@nebular/theme';
|
||||
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
|
||||
|
||||
import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-switcher',
|
||||
templateUrl: './theme-switcher.component.html',
|
||||
styleUrls: ['./theme-switcher.component.scss'],
|
||||
})
|
||||
export class ThemeSwitcherComponent {
|
||||
@ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
|
||||
|
||||
@Input() showTitle: boolean = true;
|
||||
|
||||
switcherListComponent = ThemeSwitcherListComponent;
|
||||
theme: NbJSThemeOptions;
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
@import '../../../styles/themes';
|
||||
@import '~@nebular/theme/styles/core/mixins';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
$icon-color-default: #0bbb79;
|
||||
$icon-color-cosmic: #7958fa;
|
||||
$icon-color-corporate: #a7a2be;
|
||||
|
||||
$icon-top-color-default: #01dbb5;
|
||||
$icon-top-color-cosmic: #a258fe;
|
||||
$icon-top-color-corporate: #e9e8eb;
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ .themes-switcher-list {
|
||||
padding: 1rem 2rem 1.25rem 0.5rem;
|
||||
margin: 0;
|
||||
|
||||
@include nb-ltr(text-align, start);
|
||||
@include nb-rtl(text-align, end);
|
||||
|
||||
.themes-switcher-item {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover span {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
|
||||
&.drop-icon-default {
|
||||
color: $icon-color-default;
|
||||
|
||||
// Hack for IE11, IE11 should not set background
|
||||
background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
|
||||
}
|
||||
|
||||
&.drop-icon-cosmic {
|
||||
color: $icon-color-cosmic;
|
||||
|
||||
// Hack for IE11, IE11 should not set background
|
||||
background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
|
||||
}
|
||||
|
||||
&.drop-icon-corporate {
|
||||
color: $icon-color-corporate;
|
||||
|
||||
// Hack for IE11, IE11 should not set background
|
||||
background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
|
||||
}
|
||||
|
||||
&.drop-icon-default,
|
||||
&.drop-icon-cosmic,
|
||||
&.drop-icon-corporate {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 300;
|
||||
vertical-align: super;
|
||||
padding-left: 1rem;
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
/deep/ .themes-switcher-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
|
||||
import { AnalyticsService } from '../../../../@core/utils/analytics.service';
|
||||
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-switcher-list',
|
||||
template: `
|
||||
<ul class="themes-switcher-list">
|
||||
<li class="themes-switcher-item"
|
||||
*ngFor="let theme of themes"
|
||||
(click)="onToggleTheme(theme.key)">
|
||||
<i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
|
||||
<span>{{ theme.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
`,
|
||||
styleUrls: ['./theme-switcher-list.component.scss'],
|
||||
})
|
||||
export class ThemeSwitcherListComponent {
|
||||
|
||||
@Input() popover: NbPopoverDirective;
|
||||
|
||||
theme: NbJSThemeOptions;
|
||||
|
||||
themes = [
|
||||
{
|
||||
title: 'Light',
|
||||
key: 'default',
|
||||
},
|
||||
{
|
||||
title: 'Cosmic',
|
||||
key: 'cosmic',
|
||||
},
|
||||
{
|
||||
title: 'Corporate',
|
||||
key: 'corporate',
|
||||
},
|
||||
];
|
||||
|
||||
constructor(
|
||||
private themeService: NbThemeService,
|
||||
private analyticsService: AnalyticsService,
|
||||
) {}
|
||||
|
||||
onToggleTheme(themeKey: string) {
|
||||
this.themeService.changeTheme(themeKey);
|
||||
this.analyticsService.trackEvent('switchTheme');
|
||||
this.popover.hide();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
.toggle-settings {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
transition: transform 0.3s ease, background-image 0.3s ease;
|
||||
transform: translate(0, -50%);
|
||||
z-index: 998;
|
||||
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: nb-theme(radius);
|
||||
border-bottom-left-radius: nb-theme(radius);
|
||||
right: 0;
|
||||
|
||||
&.sidebar-end {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
right: auto;
|
||||
border-top-right-radius: nb-theme(radius);
|
||||
border-bottom-right-radius: nb-theme(radius);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-rtl() {
|
||||
border-top-right-radius: nb-theme(radius);
|
||||
border-bottom-right-radius: nb-theme(radius);
|
||||
left: 0;
|
||||
|
||||
&.sidebar-end {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
left: auto;
|
||||
border-top-left-radius: nb-theme(radius);
|
||||
border-bottom-left-radius: nb-theme(radius);
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
@include nb-ltr(transform, translate(-19rem, -50%));
|
||||
@include nb-rtl(transform, translate(19rem, -50%));
|
||||
|
||||
&.sidebar-end {
|
||||
@include nb-rtl(transform, translate(-19rem, -50%));
|
||||
@include nb-ltr(transform, translate(19rem, -50%));
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
|
||||
@include btn-hero-success-gradient();
|
||||
}
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
border: 1px solid #d5dbe0;
|
||||
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border: 1px solid #d5dbe0;
|
||||
box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
|
||||
color: nb-theme(color-danger);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2.75rem;
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
color: nb-theme(color-danger);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.was-expanded) i {
|
||||
animation-name: gear-pulse;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes gear-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.toggle-settings {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NbSidebarService } from '@nebular/theme';
|
||||
import { StateService } from '../../../@core/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-toggle-settings-button',
|
||||
styleUrls: ['./toggle-settings-button.component.scss'],
|
||||
template: `
|
||||
<button class="toggle-settings"
|
||||
(click)="toggleSettings()"
|
||||
[class.expanded]="expanded"
|
||||
[class.sidebar-end]="sidebarEnd"
|
||||
[class.was-expanded]="wasExpanded"
|
||||
>
|
||||
<i class="nb-gear"></i>
|
||||
</button>
|
||||
`,
|
||||
})
|
||||
export class ToggleSettingsButtonComponent {
|
||||
|
||||
sidebarEnd = false;
|
||||
expanded = false;
|
||||
wasExpanded = false;
|
||||
|
||||
constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
|
||||
this.stateService.onSidebarState()
|
||||
.subscribe(({id}) => {
|
||||
this.sidebarEnd = id === 'end';
|
||||
});
|
||||
}
|
||||
|
||||
toggleSettings() {
|
||||
this.sidebarService.toggle(false, 'settings-sidebar');
|
||||
this.expanded = !this.expanded;
|
||||
this.wasExpanded = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
export * from './one-column/one-column.layout';
|
||||
export * from './two-columns/two-columns.layout';
|
||||
export * from './three-columns/three-columns.layout';
|
||||
export * from './sample/sample.layout';
|
||||
|
|
|
|||
|
|
@ -3,155 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background: nb-theme(layout-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: nb-theme(sidebar-header-gap);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border: 1px solid nb-theme(separator);
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .scrollable {
|
||||
@include nb-for-theme(corporate) {
|
||||
padding-top: 0;
|
||||
|
||||
.menu-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
font-weight: bold;
|
||||
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-padding-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { AfterViewInit, Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
|
||||
import { isPlatformBrowser } from '@angular/common';
|
||||
import { NbLayoutComponent } from '@nebular/theme';
|
||||
|
||||
import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-one-column-layout',
|
||||
styleUrls: ['./one-column.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
|
||||
<a href="#" class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</a>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -31,21 +27,18 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class OneColumnLayoutComponent implements OnDestroy {
|
||||
export class OneColumnLayoutComponent implements AfterViewInit {
|
||||
|
||||
private alive = true;
|
||||
@ViewChild(NbLayoutComponent, { static: false }) layout: NbLayoutComponent;
|
||||
|
||||
currentTheme: string;
|
||||
constructor(
|
||||
@Inject(PLATFORM_ID) private platformId,
|
||||
private windowModeBlockScrollService: WindowModeBlockScrollService,
|
||||
) {}
|
||||
|
||||
constructor(protected themeService: NbThemeService) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
ngAfterViewInit() {
|
||||
if (isPlatformBrowser(this.platformId)) {
|
||||
this.windowModeBlockScrollService.register(this.layout);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,182 +0,0 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 19rem;
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
@include nb-ltr(transform, translate3d(100%, 0, 0));
|
||||
@include nb-rtl(transform, translate3d(-100%, 0, 0));
|
||||
&.start {
|
||||
@include nb-ltr(transform, translate3d(-100%, 0, 0));
|
||||
@include nb-rtl(transform, translate3d(100%, 0, 0));
|
||||
}
|
||||
|
||||
&.expanded, &.expanded.start {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
/deep/ .scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 3.4rem 0.25rem;
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background: nb-theme(layout-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: nb-theme(sidebar-header-gap);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border: 1px solid nb-theme(separator);
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .scrollable {
|
||||
@include nb-for-theme(corporate) {
|
||||
padding-top: 0;
|
||||
|
||||
.menu-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
font-weight: bold;
|
||||
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ nb-menu {
|
||||
& > .menu-items {
|
||||
& > .menu-item:first-child {
|
||||
.menu-title {
|
||||
&::after {
|
||||
content: 'new';
|
||||
color: nb-theme(color-white);
|
||||
margin-left: 1rem;
|
||||
background: nb-theme(color-danger);
|
||||
padding: 0 0.5rem;
|
||||
border-radius: nb-theme(radius);
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nb-e-commerce {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
|
||||
import {
|
||||
NbMediaBreakpoint,
|
||||
NbMediaBreakpointsService,
|
||||
NbMenuItem,
|
||||
NbMenuService,
|
||||
NbSidebarService,
|
||||
NbThemeService,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { StateService } from '../../../@core/utils';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-sample-layout',
|
||||
styleUrls: ['./sample.layout.scss'],
|
||||
template: `
|
||||
<nb-layout [center]="layout.id === 'center-column'" windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar"
|
||||
tag="menu-sidebar"
|
||||
responsive
|
||||
[end]="sidebar.id === 'end'">
|
||||
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
|
||||
<a href="#" class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</a>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
<nb-layout-column class="main-content">
|
||||
<ng-content select="router-outlet"></ng-content>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-footer fixed>
|
||||
<ngx-footer></ngx-footer>
|
||||
</nb-layout-footer>
|
||||
|
||||
<nb-sidebar class="settings-sidebar"
|
||||
tag="settings-sidebar"
|
||||
state="collapsed"
|
||||
fixed
|
||||
[end]="sidebar.id !== 'end'">
|
||||
<ngx-theme-settings></ngx-theme-settings>
|
||||
</nb-sidebar>
|
||||
</nb-layout>
|
||||
<ngx-toggle-settings-button></ngx-toggle-settings-button>
|
||||
`,
|
||||
})
|
||||
export class SampleLayoutComponent implements OnDestroy {
|
||||
|
||||
subMenu: NbMenuItem[] = [
|
||||
{
|
||||
title: 'PAGE LEVEL MENU',
|
||||
group: true,
|
||||
},
|
||||
{
|
||||
title: 'Buttons',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/buttons',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/grid',
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/icons',
|
||||
},
|
||||
{
|
||||
title: 'Modals',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/modals',
|
||||
},
|
||||
{
|
||||
title: 'Typography',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/typography',
|
||||
},
|
||||
{
|
||||
title: 'Animated Searches',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/search-fields',
|
||||
},
|
||||
{
|
||||
title: 'Tabs',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/tabs',
|
||||
},
|
||||
];
|
||||
layout: any = {};
|
||||
sidebar: any = {};
|
||||
|
||||
private alive = true;
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
constructor(protected stateService: StateService,
|
||||
protected menuService: NbMenuService,
|
||||
protected themeService: NbThemeService,
|
||||
protected bpService: NbMediaBreakpointsService,
|
||||
protected sidebarService: NbSidebarService) {
|
||||
this.stateService.onLayoutState()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((layout: string) => this.layout = layout);
|
||||
|
||||
this.stateService.onSidebarState()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((sidebar: string) => {
|
||||
this.sidebar = sidebar;
|
||||
});
|
||||
|
||||
const isBp = this.bpService.getByName('is');
|
||||
this.menuService.onItemSelect()
|
||||
.pipe(
|
||||
takeWhile(() => this.alive),
|
||||
withLatestFrom(this.themeService.onMediaQueryChange()),
|
||||
delay(20),
|
||||
)
|
||||
.subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
|
||||
|
||||
if (bpTo.width <= isBp.width) {
|
||||
this.sidebarService.collapse('menu-sidebar');
|
||||
}
|
||||
});
|
||||
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,155 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background: nb-theme(layout-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: nb-theme(sidebar-header-gap);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border: 1px solid nb-theme(separator);
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .scrollable {
|
||||
@include nb-for-theme(corporate) {
|
||||
padding-top: 0;
|
||||
|
||||
.menu-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
font-weight: bold;
|
||||
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-padding-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-three-columns-layout',
|
||||
styleUrls: ['./three-columns.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
|
||||
<a href="#" class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</a>
|
||||
</nb-sidebar-header>
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -37,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class ThreeColumnsLayoutComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
constructor(protected themeService: NbThemeService) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
export class ThreeColumnsLayoutComponent {}
|
||||
|
|
|
|||
|
|
@ -3,156 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
width: $sidebar-width;
|
||||
background: nb-theme(color-bg);
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background: nb-theme(layout-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: nb-theme(sidebar-header-gap);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border: 1px solid nb-theme(separator);
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .scrollable {
|
||||
@include nb-for-theme(corporate) {
|
||||
padding-top: 0;
|
||||
|
||||
.menu-item:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
font-weight: bold;
|
||||
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-padding-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-two-columns-layout',
|
||||
styleUrls: ['./two-columns.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
|
||||
<a href="#" class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</a>
|
||||
</nb-sidebar-header>
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class TwoColumnsLayoutComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
constructor(protected themeService: NbThemeService) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
export class TwoColumnsLayoutComponent {}
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { icons } from 'eva-icons';
|
||||
|
||||
@Pipe({ name: 'eva' })
|
||||
export class EvaIconsPipe implements PipeTransform {
|
||||
|
||||
private defaultOptions = {
|
||||
height: 24,
|
||||
width: 24,
|
||||
fill: 'inherit',
|
||||
animationHover: true,
|
||||
animationInfinity: false,
|
||||
};
|
||||
|
||||
constructor(private sanitizer: DomSanitizer) {}
|
||||
|
||||
transform(icon: string,
|
||||
options: {
|
||||
height: number;
|
||||
width: number;
|
||||
fill: string;
|
||||
animationType?: string;
|
||||
animationHover?: boolean;
|
||||
animationInfinity?: boolean;
|
||||
},
|
||||
) {
|
||||
const mergedOptions = {
|
||||
...this.defaultOptions,
|
||||
...options,
|
||||
};
|
||||
const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
|
||||
const animation = animationType ?
|
||||
{ type: animationType, hover: animationHover, infinite: animationInfinity } :
|
||||
null;
|
||||
|
||||
return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
|
||||
width,
|
||||
height,
|
||||
fill,
|
||||
animation,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
|
@ -3,4 +3,3 @@ export * from './plural.pipe';
|
|||
export * from './round.pipe';
|
||||
export * from './timing.pipe';
|
||||
export * from './number-with-commas.pipe';
|
||||
export * from './eva-icons.pipe';
|
||||
|
|
|
|||
132
src/app/@theme/services/window-mode-block-scroll.service.ts
Normal file
132
src/app/@theme/services/window-mode-block-scroll.service.ts
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import { Inject, Injectable, OnDestroy } from '@angular/core';
|
||||
import { coerceCssPixelValue } from '@angular/cdk/coercion';
|
||||
import {
|
||||
NB_WINDOW,
|
||||
NbLayoutComponent,
|
||||
NbLayoutDimensions,
|
||||
NbLayoutRulerService,
|
||||
NbLayoutScrollService,
|
||||
NbViewportRulerAdapter,
|
||||
} from '@nebular/theme';
|
||||
import { filter, map, take, takeUntil } from 'rxjs/operators';
|
||||
import { fromEvent as observableFromEvent, merge, Subject } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class WindowModeBlockScrollService implements OnDestroy {
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
private blockEnabled = false;
|
||||
private unblock$ = new Subject<void>();
|
||||
|
||||
private container: HTMLElement;
|
||||
private content: HTMLElement;
|
||||
|
||||
private previousScrollPosition: { top: number, left: number };
|
||||
private previousContainerStyles: { overflowY: string };
|
||||
private previousContentStyles: { left: string, top: string, width: string, overflow: string, position: string };
|
||||
|
||||
constructor(
|
||||
private scrollService: NbLayoutScrollService,
|
||||
private viewportRuler: NbViewportRulerAdapter,
|
||||
private layout: NbLayoutRulerService,
|
||||
@Inject(NB_WINDOW) private window,
|
||||
) {}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
this.unblock$.complete();
|
||||
}
|
||||
|
||||
register(layout: NbLayoutComponent) {
|
||||
this.container = layout.scrollableContainerRef.nativeElement;
|
||||
this.content = this.container.children[0] as HTMLElement;
|
||||
|
||||
this.scrollService.onScrollableChange()
|
||||
.pipe(
|
||||
filter(() => layout.withScrollValue),
|
||||
map((scrollable: boolean) => !scrollable),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe((shouldBlock: boolean) => {
|
||||
if (shouldBlock) {
|
||||
this.blockScroll();
|
||||
} else {
|
||||
this.unblockScroll();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
blockScroll() {
|
||||
if (!this.canBeBlocked()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.previousScrollPosition = this.viewportRuler.getViewportScrollPosition();
|
||||
this.backupStyles();
|
||||
|
||||
this.container.style.overflowY = 'scroll';
|
||||
this.content.style.overflow = 'hidden';
|
||||
this.content.style.position = 'fixed';
|
||||
this.updateContentSizeAndPosition();
|
||||
|
||||
observableFromEvent(this.window, 'resize')
|
||||
.pipe(
|
||||
takeUntil(merge(this.destroy$, this.unblock$).pipe(take(1))),
|
||||
)
|
||||
.subscribe(() => this.updateContentSizeAndPosition());
|
||||
|
||||
this.blockEnabled = true;
|
||||
}
|
||||
|
||||
unblockScroll() {
|
||||
if (this.blockEnabled) {
|
||||
this.restoreStyles();
|
||||
this.scrollService.scrollTo(this.previousScrollPosition.left, this.previousScrollPosition.top);
|
||||
this.unblock$.next();
|
||||
this.blockEnabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
private canBeBlocked(): boolean {
|
||||
if (this.blockEnabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const { height: containerHeight } = this.viewportRuler.getViewportSize();
|
||||
return this.content.scrollHeight > containerHeight;
|
||||
}
|
||||
|
||||
private updateContentSizeAndPosition() {
|
||||
const { top, left } = this.container.getBoundingClientRect();
|
||||
this.content.style.left = coerceCssPixelValue(-this.previousScrollPosition.left + left);
|
||||
this.content.style.top = coerceCssPixelValue(-this.previousScrollPosition.top + top);
|
||||
this.layout.getDimensions()
|
||||
.pipe(
|
||||
map(({ clientWidth }: NbLayoutDimensions) => coerceCssPixelValue(clientWidth)),
|
||||
take(1),
|
||||
)
|
||||
.subscribe((clientWidth: string) => this.content.style.width = clientWidth);
|
||||
}
|
||||
|
||||
private backupStyles() {
|
||||
this.previousContainerStyles = { overflowY: this.container.style.overflowY };
|
||||
this.previousContentStyles = {
|
||||
overflow: this.content.style.overflow,
|
||||
position: this.content.style.position,
|
||||
left: this.content.style.left,
|
||||
top: this.content.style.top,
|
||||
width: this.content.style.width,
|
||||
};
|
||||
}
|
||||
|
||||
private restoreStyles() {
|
||||
this.container.style.overflowY = this.previousContainerStyles.overflowY;
|
||||
this.content.style.overflow = this.previousContentStyles.overflow;
|
||||
this.content.style.position = this.previousContentStyles.position;
|
||||
this.content.style.left = this.previousContentStyles.left;
|
||||
this.content.style.top = this.previousContentStyles.top;
|
||||
this.content.style.width = this.previousContentStyles.width;
|
||||
}
|
||||
}
|
||||
68
src/app/@theme/styles/_overrides.scss
Normal file
68
src/app/@theme/styles/_overrides.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
@import './themes';
|
||||
|
||||
@mixin nb-overrides() {
|
||||
// overrides bootstrap svg style
|
||||
nb-icon svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
nb-auth-block .links nb-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
nb-select.size-medium button {
|
||||
padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
|
||||
|
||||
nb-icon {
|
||||
right: 0.41rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
nb-flip-card {
|
||||
.front-container {
|
||||
-webkit-backface-visibility: visible;
|
||||
}
|
||||
.back-container {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flipped {
|
||||
.front-container {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
.back-container {
|
||||
-webkit-backface-visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-layout .layout .layout-container nb-sidebar {
|
||||
&,
|
||||
.main-container-fixed {
|
||||
top: nb-theme(header-height);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 20px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top) / 4);
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 150px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top) / 2);
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 300px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin f-window-mode ($padding-top) {
|
||||
nb-layout.window-mode nb-layout-header.fixed {
|
||||
top: $padding-top;
|
||||
}
|
||||
|
||||
nb-sidebar .main-container-fixed {
|
||||
height: calc(100vh - #{nb-theme(header-height)} - #{$padding-top}) !important;
|
||||
top: calc(#{nb-theme(header-height)} + #{$padding-top}) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -7,16 +7,14 @@
|
|||
@mixin ngx-pace-theme() {
|
||||
|
||||
.pace .pace-progress {
|
||||
background: nb-theme(color-fg-highlight);
|
||||
background: nb-theme(color-primary-default);
|
||||
}
|
||||
|
||||
.pace .pace-progress-inner {
|
||||
box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight);
|
||||
box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
|
||||
}
|
||||
|
||||
.pace .pace-activity {
|
||||
display: none;
|
||||
// border-top-color: nb-theme(color-fg-highlight);
|
||||
// border-left-color: nb-theme(color-fg-highlight);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
|
||||
|
||||
// themes - our custom or/and out of the box themes
|
||||
@import 'themes';
|
||||
|
||||
|
|
@ -5,14 +7,13 @@
|
|||
@import '~@nebular/theme/styles/globals';
|
||||
@import '~@nebular/auth/styles/all';
|
||||
@import '~@nebular/bootstrap/styles/globals';
|
||||
// ...
|
||||
|
||||
// global app font size
|
||||
@import './font-size';
|
||||
|
||||
// loading progress bar theme
|
||||
@import './pace.theme';
|
||||
|
||||
@import './overrides';
|
||||
|
||||
// install the framework and custom global styles
|
||||
@include nb-install() {
|
||||
|
||||
|
|
@ -23,4 +24,6 @@
|
|||
|
||||
// loading progress bar
|
||||
@include ngx-pace-theme();
|
||||
|
||||
@include nb-overrides();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,179 +1,226 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#73a1ff',
|
||||
success: '#5dcfe3',
|
||||
info: '#ba7fec',
|
||||
warning: '#ffa36b',
|
||||
danger: '#ff6b83',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#ffffff',
|
||||
bg2: '#f7f9fc',
|
||||
bg3: '#edf1f7',
|
||||
bg4: '#e4e9f2',
|
||||
|
||||
border: '#ffffff',
|
||||
border2: '#f7f9fc',
|
||||
border3: '#edf1f7',
|
||||
border4: '#e4e9f2',
|
||||
border5: '#c5cee0',
|
||||
|
||||
fg: '#8f9bb3',
|
||||
fgHeading: '#1a2138',
|
||||
fgText: '#1a2138',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#f7f9fc',
|
||||
separator: '#edf1f7',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#598bff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
|
||||
export const CORPORATE_THEME = {
|
||||
name: 'corporate',
|
||||
base: 'default',
|
||||
variables: {
|
||||
temperature: [
|
||||
'#ffa36b',
|
||||
'#ffa36b',
|
||||
'#ff9e7a',
|
||||
'#ff9888',
|
||||
'#ff8ea0',
|
||||
],
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: '#ffa36b',
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: '#ff8ea0',
|
||||
gradientRight: '#ffa36b',
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
colorBlack: '#ffffff',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
lineBg: '#cae6f3',
|
||||
yAxisSplitLine: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
lineBg: theme.primary,
|
||||
lineShadowBlur: '0',
|
||||
itemColor: '#bcc3cc',
|
||||
itemBorderColor: '#bcc3cc',
|
||||
itemEmphasisBorderColor: '#74a2ff',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primaryLight,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: '#ffffff',
|
||||
gradTo: '#ffffff',
|
||||
gradFrom: theme.bg,
|
||||
gradTo: theme.bg,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: '#edf0f4',
|
||||
tooltipLineColor: '#bdc4cd',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
xAxisTextColor: '#2a2a2a',
|
||||
yAxisSplitLine: '#ebeef2',
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: '#bdc4cd',
|
||||
lineGradTo: '#c0c8d1',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(255, 255, 255, 0)',
|
||||
areaGradTo: 'rgba(255, 255, 255, 0)',
|
||||
shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
|
||||
areaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
areaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#484848',
|
||||
areaColor: '#dddddd',
|
||||
areaHoverColor: '#cccccc',
|
||||
areaBorderColor: '#ebeef2',
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#b2bac2',
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: '#719efc',
|
||||
secondAnimationBarColor: '#5dcfe3',
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
splitLineStyleColor: theme.separator,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#ff8ea0',
|
||||
gradientTo: '#ffa36b',
|
||||
shadow: 'rgba(0, 0, 0, 0)',
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: '#edf0f4',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg4,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: 'rgba(113, 158, 252, 1)',
|
||||
hoveredCountryFillColor: 'rgba(199, 216, 247, 1)',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
chartAxisTextColor: '#b2bac2',
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: 'rgba(113, 158, 252, 1)',
|
||||
chartGradientFrom: 'rgba(113, 158, 252, 1)',
|
||||
chartAxisSplitLine: '#ebeef2',
|
||||
chartShadowLineColor: '#2f296b',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: 'rgba(113, 158, 252, 1)',
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: '#eceff4',
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#484848',
|
||||
axisLineColor: '#bbbbbb',
|
||||
splitLineColor: '#ebeef2',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: '#cccccc',
|
||||
textColor: '#484848',
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
|
||||
firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: 'rgba(93, 207, 227, 1)',
|
||||
secondLineGradTo: 'rgba(93, 207, 227, 1)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: 'rgba(113, 158, 252, 1)',
|
||||
thirdLineGradTo: 'rgba(113, 158, 252, 1)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||
|
|
@ -181,92 +228,91 @@ export const CORPORATE_THEME = {
|
|||
},
|
||||
|
||||
profit: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#719efc',
|
||||
firstLineGradTo: '#719efc',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#5dcfe3',
|
||||
secondLineGradTo: '#5dcfe3',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: '#e3ecfe',
|
||||
thirdLineGradTo: '#e3ecfe',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.success,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: '#719efc',
|
||||
secondItem: '#5dcfe3',
|
||||
thirdItem: '#e3ecfe',
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#73a1ff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#73a1ff',
|
||||
lineGradTo: '#73a1ff',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(146, 181, 252, 1)',
|
||||
areaGradTo: 'rgba(146, 181, 252, 1)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
|
||||
innerAreaGradTo: 'rgba(227, 236, 254, 1)',
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: '#e3ecfe',
|
||||
secondIcon: '#719efc',
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#94e2ed',
|
||||
firstPieGradientRight: '#94e2ed',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['65%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#719efc',
|
||||
secondPieGradientRight: '#719efc',
|
||||
secondPieShadowColor: '#b2cafb',
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['63%', '92%'],
|
||||
shadowOffsetX: '-4',
|
||||
shadowOffsetY: '-4',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: '#719efc',
|
||||
secondSection: '#99e5ee',
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -275,30 +321,30 @@ export const CORPORATE_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#719efc',
|
||||
firstPieGradientRight: '#719efc',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#ff9f6f',
|
||||
secondPieGradientRight: '#ff9f6f',
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ff5e83',
|
||||
thirdPieGradientRight: '#ff5e83',
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: '#e3ecfe',
|
||||
gradTo: '#e3ecfe',
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: '400',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#eef2f5',
|
||||
tooltipBorderColor: '#eef2f5',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
} as NbJSThemeOptions;
|
||||
|
|
|
|||
|
|
@ -1,272 +1,318 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#a16eff',
|
||||
success: '#00d68f',
|
||||
info: '#0095ff',
|
||||
warning: '#ffaa00',
|
||||
danger: '#ff3d71',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#323259',
|
||||
bg2: '#252547',
|
||||
bg3: '#1b1b38',
|
||||
bg4: '#13132b',
|
||||
|
||||
border: '#323259',
|
||||
border2: '#252547',
|
||||
border3: '#1b1b38',
|
||||
border4: '#13132b',
|
||||
border5: '#13132b',
|
||||
|
||||
fg: '#b4b4db',
|
||||
fgHeading: '#ffffff',
|
||||
fgText: '#ffffff',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#151a30',
|
||||
separator: '#151a30',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#b18aff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
|
||||
export const COSMIC_THEME = {
|
||||
name: 'cosmic',
|
||||
base: 'default',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: [
|
||||
'#2ec7fe',
|
||||
'#31ffad',
|
||||
'#7bff24',
|
||||
'#fff024',
|
||||
'#f7bd59',
|
||||
],
|
||||
temperature: {
|
||||
arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: '#ffffff',
|
||||
thumbBorder: '#ffffff',
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: '#7bff24',
|
||||
gradientRight: '#2ec7fe',
|
||||
shadowColor: '#19977E',
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
radius: ['70%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
colorBlack: '#000000',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
lineBg: '#d1d1ff',
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
lineBg: theme.border2,
|
||||
lineShadowBlur: '14',
|
||||
itemColor: '#BEBBFF',
|
||||
itemBorderColor: '#ffffff',
|
||||
itemEmphasisBorderColor: '#ffffff',
|
||||
shadowLineDarkBg: '#655ABD',
|
||||
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
|
||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
||||
itemColor: theme.border2,
|
||||
itemBorderColor: theme.border2,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
shadowLineDarkBg: theme.border3,
|
||||
shadowLineShadow: theme.border3,
|
||||
gradFrom: theme.bg,
|
||||
gradTo: theme.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
xAxisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
itemBorderColor: theme.border2,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#00ffaa',
|
||||
lineGradTo: '#fff835',
|
||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
lineGradFrom: theme.success,
|
||||
lineGradTo: theme.warning,
|
||||
lineShadow: theme.bg4,
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg3,
|
||||
shadowLineDarkBg: theme.bg3,
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#ffffff',
|
||||
areaColor: '#2c2961',
|
||||
areaHoverColor: '#a1a1e5',
|
||||
areaBorderColor: '#654ddb',
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#ffffff',
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: '#0088ff',
|
||||
secondAnimationBarColor: '#7659ff',
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
splitLineStyleColor: theme.border2,
|
||||
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#fc0',
|
||||
gradientTo: '#ffa100',
|
||||
shadow: '#ffb600',
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '5',
|
||||
|
||||
axisTextColor: '#a1a1e5',
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: '#525dbd',
|
||||
countryFillColor: '#4f41a6',
|
||||
countryBorderWidth: '2',
|
||||
hoveredCountryBorderColor: '#00f9a6',
|
||||
hoveredCountryFillColor: '#377aa7',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
chartAxisTextColor: '#a1a1e5',
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: '#00c7c7',
|
||||
chartGradientFrom: '#00d977',
|
||||
chartAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
chartShadowBarColor: '#2f296b',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: '#00977e',
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: '#2f296b',
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#3d3780',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: '#a1a1e5',
|
||||
splitLineColor: '#342e73',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '1',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: '#a1a1e5',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
|
||||
firstAreaGradTo: 'rgba(78, 64, 164, 1)',
|
||||
firstShadowLineDarkBg: '#018dff',
|
||||
firstAreaGradFrom: theme.bg2,
|
||||
firstAreaGradTo: theme.bg2,
|
||||
firstShadowLineDarkBg: theme.bg2,
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: '#00bece',
|
||||
secondLineGradTo: '#00da78',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
|
||||
secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
|
||||
secondShadowLineDarkBg: '#2c5a85',
|
||||
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
|
||||
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
|
||||
secondShadowLineDarkBg: theme.primary,
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: '#8069ff',
|
||||
thirdLineGradTo: '#8357ff',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
|
||||
thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
|
||||
thirdShadowLineDarkBg: '#a695ff',
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
|
||||
thirdShadowLineDarkBg: theme.success,
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: '#3d3780',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: '#a1a1e5',
|
||||
splitLineColor: '#342e73',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#00bece',
|
||||
firstLineGradTo: '#00da78',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
firstLineGradFrom: theme.bg2,
|
||||
firstLineGradTo: theme.bg2,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#8069ff',
|
||||
secondLineGradTo: '#8357ff',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: '#4e40a4',
|
||||
thirdLineGradTo: '#4e40a4',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
||||
secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
||||
thirdItem: '#4e40a4',
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg2,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#a1a1e5',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#ffffff',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
|
||||
innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
|
||||
secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#7bff24',
|
||||
firstPieGradientRight: '#2ec7fe',
|
||||
firstPieShadowColor: '#19977E',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.successLight,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#ff894a',
|
||||
secondPieGradientRight: '#ffcc10',
|
||||
secondPieShadowColor: '#cf7c1c',
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '95%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '3',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
||||
secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -275,30 +321,30 @@ export const COSMIC_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#00d77f',
|
||||
firstPieGradientRight: '#00d77f',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#7756f7',
|
||||
secondPieGradientRight: '#7756f7',
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ffca00',
|
||||
thirdPieGradientRight: '#ffca00',
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: '#ffffff',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
tooltipBorderColor: '#00d977',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
} as NbJSThemeOptions;
|
||||
|
|
|
|||
350
src/app/@theme/styles/theme.dark.ts
Normal file
350
src/app/@theme/styles/theme.dark.ts
Normal file
|
|
@ -0,0 +1,350 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#3366ff',
|
||||
success: '#00d68f',
|
||||
info: '#0095ff',
|
||||
warning: '#ffaa00',
|
||||
danger: '#ff3d71',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#222b45',
|
||||
bg2: '#1a2138',
|
||||
bg3: '#151a30',
|
||||
bg4: '#101426',
|
||||
|
||||
border: '#222b45',
|
||||
border2: '#1a2138',
|
||||
border3: '#151a30',
|
||||
border4: '#101426',
|
||||
border5: '#101426',
|
||||
|
||||
fg: '#8f9bb3',
|
||||
fgHeading: '#ffffff',
|
||||
fgText: '#ffffff',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#1b1b38',
|
||||
separator: '#1b1b38',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#598bff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
|
||||
export const DARK_THEME = {
|
||||
name: 'dark',
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
temperature: {
|
||||
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: theme.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
lineBg: theme.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: theme.bg2,
|
||||
gradTo: theme.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: theme.separator,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '0',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
radius: ['65%', '100%'],
|
||||
center: ['50%', '50%'],
|
||||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
} as NbJSThemeOptions;
|
||||
|
|
@ -1,266 +1,309 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#3366ff',
|
||||
success: '#00d68f',
|
||||
info: '#0095ff',
|
||||
warning: '#ffaa00',
|
||||
danger: '#ff3d71',
|
||||
};
|
||||
|
||||
const theme = {
|
||||
fontMain: 'Open Sans, sans-serif',
|
||||
fontSecondary: 'Raleway, sans-serif',
|
||||
|
||||
bg: '#ffffff',
|
||||
bg2: '#f7f9fc',
|
||||
bg3: '#edf1f7',
|
||||
bg4: '#e4e9f2',
|
||||
|
||||
border: '#ffffff',
|
||||
border2: '#f7f9fc',
|
||||
border3: '#edf1f7',
|
||||
border4: '#e4e9f2',
|
||||
border5: '#c5cee0',
|
||||
|
||||
fg: '#8f9bb3',
|
||||
fgHeading: '#1a2138',
|
||||
fgText: '#1a2138',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#f7f9fc',
|
||||
separator: '#edf1f7',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#598bff',
|
||||
successLight: '#2ce69b',
|
||||
infoLight: '#42aaff',
|
||||
warningLight: '#ffc94d',
|
||||
dangerLight: '#ff708d',
|
||||
};
|
||||
|
||||
export const DEFAULT_THEME = {
|
||||
name: 'default',
|
||||
base: null,
|
||||
variables: {
|
||||
...theme,
|
||||
|
||||
// Safari fix
|
||||
temperature: [
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
'#42db7d',
|
||||
],
|
||||
temperature: {
|
||||
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||
arcEmpty: theme.bg2,
|
||||
thumbBg: theme.bg2,
|
||||
thumbBorder: theme.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: '#42db7d',
|
||||
gradientRight: '#42db7d',
|
||||
gradientLeft: theme.primary,
|
||||
gradientRight: theme.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: theme.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
colorBlack: '#000000',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
lineBg: '#c0c8d1',
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
lineBg: theme.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: '#bcc3cc',
|
||||
itemBorderColor: '#bcc3cc',
|
||||
itemEmphasisBorderColor: '#42db7d',
|
||||
itemColor: theme.border4,
|
||||
itemBorderColor: theme.border4,
|
||||
itemEmphasisBorderColor: theme.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: '#ebeef2',
|
||||
gradTo: '#ebeef2',
|
||||
gradFrom: theme.bg2,
|
||||
gradTo: theme.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: theme.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
xAxisTextColor: '#2a2a2a',
|
||||
yAxisSplitLine: '#ebeef2',
|
||||
axisLineColor: theme.border3,
|
||||
xAxisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: '#42db7d',
|
||||
lineGradTo: '#42db7d',
|
||||
lineGradFrom: theme.primary,
|
||||
lineGradTo: theme.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(235, 238, 242, 0.5)',
|
||||
areaGradTo: 'rgba(235, 238, 242, 0.5)',
|
||||
areaGradFrom: theme.bg2,
|
||||
areaGradTo: theme.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#484848',
|
||||
areaColor: '#dddddd',
|
||||
areaHoverColor: '#cccccc',
|
||||
areaBorderColor: '#ebeef2',
|
||||
titleColor: theme.fgText,
|
||||
areaColor: theme.bg4,
|
||||
areaHoverColor: theme.fgHighlight,
|
||||
areaBorderColor: theme.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: '#484848',
|
||||
textColor: theme.fgText,
|
||||
|
||||
firstAnimationBarColor: '#3edd81',
|
||||
secondAnimationBarColor: '#8d7fff',
|
||||
firstAnimationBarColor: theme.primary,
|
||||
secondAnimationBarColor: theme.success,
|
||||
|
||||
splitLineStyleOpacity: '0.06',
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: '#000000',
|
||||
splitLineStyleColor: theme.separator,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: '#fc0',
|
||||
gradientTo: '#ffa100',
|
||||
shadow: '#ffb600',
|
||||
gradientFrom: theme.warningLight,
|
||||
gradientTo: theme.warning,
|
||||
shadow: theme.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
||||
countryBorderColor: theme.border4,
|
||||
countryFillColor: theme.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: '#40dc7e',
|
||||
hoveredCountryFillColor: '#c7f4d9',
|
||||
hoveredCountryBorderWidth: '3',
|
||||
hoveredCountryBorderColor: theme.primary,
|
||||
hoveredCountryFillColor: theme.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
||||
chartAxisTextColor: '#b2bac2',
|
||||
chartAxisLineColor: theme.border4,
|
||||
chartAxisTextColor: theme.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: '#3edd81',
|
||||
chartGradientFrom: '#3bddaf',
|
||||
chartAxisSplitLine: '#ebeef2',
|
||||
chartShadowLineColor: '#2f296b',
|
||||
chartGradientTo: theme.primary,
|
||||
chartGradientFrom: theme.primaryLight,
|
||||
chartAxisSplitLine: theme.separator,
|
||||
chartShadowLineColor: theme.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: '#eceff4',
|
||||
chartLineBottomShadowColor: theme.primary,
|
||||
|
||||
chartInnerLineColor: '#eceff4',
|
||||
chartInnerLineColor: theme.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#484848',
|
||||
axisLineColor: '#bbbbbb',
|
||||
splitLineColor: '#ebeef2',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.fgText,
|
||||
splitLineColor: theme.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
tooltipBackgroundColor: theme.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: '#cccccc',
|
||||
textColor: '#484848',
|
||||
axisLineColor: theme.separator,
|
||||
textColor: theme.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
|
||||
firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
|
||||
firstAreaGradFrom: theme.bg3,
|
||||
firstAreaGradTo: theme.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: 'rgba(164, 123, 255, 1)',
|
||||
secondLineGradTo: 'rgba(164, 123, 255, 1)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
|
||||
thirdLineGradTo: 'rgba(55, 220, 136, 1)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
// TODO: need design for default theme
|
||||
profit: {
|
||||
bg: '#ffffff',
|
||||
textColor: '#ffffff',
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
||||
bg: theme.bg,
|
||||
textColor: theme.fgText,
|
||||
axisLineColor: theme.border4,
|
||||
splitLineColor: theme.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
axisTextColor: theme.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: '#00bece',
|
||||
firstLineGradTo: '#00da78',
|
||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
firstLineGradFrom: theme.bg3,
|
||||
firstLineGradTo: theme.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: '#8069ff',
|
||||
secondLineGradTo: '#8357ff',
|
||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
secondLineGradFrom: theme.primary,
|
||||
secondLineGradTo: theme.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
|
||||
thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
|
||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
thirdLineGradFrom: theme.success,
|
||||
thirdLineGradTo: theme.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
||||
secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
||||
thirdItem: 'rgba(236, 242, 245, 0.8)',
|
||||
firstItem: theme.success,
|
||||
secondItem: theme.primary,
|
||||
thirdItem: theme.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: '#ebeef2',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
||||
axisLineColor: theme.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: '#b2bac2',
|
||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
||||
axisTextColor: theme.fg,
|
||||
yAxisSplitLine: theme.separator,
|
||||
|
||||
itemBorderColor: '#42db7d',
|
||||
itemBorderColor: theme.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(14, 16, 48, 0)',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
areaGradFrom: theme.primary,
|
||||
areaGradTo: theme.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
|
||||
innerAreaGradTo: 'rgba(60, 221, 156, 1)',
|
||||
innerAreaGradFrom: theme.success,
|
||||
innerAreaGradTo: theme.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
||||
secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
||||
firstIcon: theme.success,
|
||||
secondIcon: theme.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: '#8defbb',
|
||||
firstPieGradientRight: '#8defbb',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: '#ff894a',
|
||||
secondPieGradientRight: '#ffcc10',
|
||||
secondPieGradientLeft: theme.warning,
|
||||
secondPieGradientRight: theme.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
|
|
@ -268,8 +311,8 @@ export const DEFAULT_THEME = {
|
|||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
||||
secondSection: '#8defbb',
|
||||
firstSection: theme.warning,
|
||||
secondSection: theme.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
|
|
@ -278,30 +321,30 @@ export const DEFAULT_THEME = {
|
|||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: '#00d77f',
|
||||
firstPieGradientRight: '#00d77f',
|
||||
firstPieGradientLeft: theme.success,
|
||||
firstPieGradientRight: theme.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: '#7756f7',
|
||||
secondPieGradientRight: '#7756f7',
|
||||
secondPieGradientLeft: theme.primary,
|
||||
secondPieGradientRight: theme.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: '#ffca00',
|
||||
thirdPieGradientRight: '#ffca00',
|
||||
thirdPieGradientLeft: theme.warning,
|
||||
thirdPieGradientRight: theme.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
gradTo: 'rgba(188, 92, 255, 0.5)',
|
||||
gradFrom: theme.primary,
|
||||
gradTo: theme.primary,
|
||||
|
||||
tooltipTextColor: '#2a2a2a',
|
||||
tooltipFontWeight: 'bolder',
|
||||
tooltipTextColor: theme.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: '#ffffff',
|
||||
tooltipBorderColor: '#c0c8d1',
|
||||
tooltipBorderWidth: '3',
|
||||
tooltipBg: theme.bg,
|
||||
tooltipBorderColor: theme.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
};
|
||||
} as NbJSThemeOptions;
|
||||
|
|
|
|||
|
|
@ -3,95 +3,110 @@
|
|||
// @nebular out of the box themes
|
||||
@import '~@nebular/theme/styles/themes';
|
||||
|
||||
// which themes you what to enable (empty to enable all)
|
||||
$nb-enabled-themes: (default, cosmic, corporate);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
switcher-background: #ebeff5,
|
||||
switcher-background-percentage: 50%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
list-item-border-width: 1px,
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-background: #f7f9fc,
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: #ecf2f5,
|
||||
chart-panel-summary-border-color: #ebeff1,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%),
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), default, default);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
switcher-background: #4e41a5,
|
||||
switcher-background-percentage: 14%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
list-item-border-width: 1px,
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
|
||||
slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
|
||||
slide-out-background: #252547,
|
||||
slide-out-shadow-color: 2px 0 3px #29157a,
|
||||
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
|
||||
chart-panel-summary-border-color: #332e73,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), cosmic, cosmic);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
font-main: Roboto,
|
||||
font-secondary: Exo,
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
switcher-background: #2b2d34,
|
||||
switcher-background-percentage: 14%,
|
||||
drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
list-item-border-width: 1px,
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-container-width: 30%,
|
||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
||||
slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
|
||||
chart-panel-summary-box-shadow: none,
|
||||
chart-panel-summary-background-color: #f7fafb,
|
||||
chart-panel-summary-border-color: #ebeff1,
|
||||
chart-panel-summary-border-width: 1px,
|
||||
|
||||
ecommerce-card-border-width: 1px,
|
||||
|
||||
progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), corporate, corporate);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-padding-top: 2.25rem,
|
||||
layout-window-mode-padding-top: 0,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
select-min-width: 6rem,
|
||||
|
||||
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
|
||||
smart-table-bg-even: background-basic-color-2,
|
||||
smart-table-bg-active: background-basic-color-3,
|
||||
smart-table-paging-hover: transparent,
|
||||
), dark, dark);
|
||||
|
|
|
|||
|
|
@ -1,56 +1,26 @@
|
|||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbCardModule,
|
||||
NbLayoutModule,
|
||||
NbMenuModule,
|
||||
NbRouteTabsetModule,
|
||||
NbSearchModule,
|
||||
NbSidebarModule,
|
||||
NbTabsetModule,
|
||||
NbThemeModule,
|
||||
NbUserModule,
|
||||
NbCheckboxModule,
|
||||
NbPopoverModule,
|
||||
NbContextMenuModule,
|
||||
NbProgressBarModule,
|
||||
NbCalendarModule,
|
||||
NbCalendarRangeModule,
|
||||
NbStepperModule,
|
||||
NbButtonModule,
|
||||
NbInputModule,
|
||||
NbAccordionModule,
|
||||
NbDatepickerModule,
|
||||
NbDialogModule,
|
||||
NbWindowModule,
|
||||
NbListModule,
|
||||
NbToastrModule,
|
||||
NbAlertModule,
|
||||
NbSpinnerModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbChatModule,
|
||||
NbTooltipModule,
|
||||
NbCalendarKitModule,
|
||||
NbIconModule,
|
||||
NbThemeModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { NbEvaIconsModule } from '@nebular/eva-icons';
|
||||
import { NbSecurityModule } from '@nebular/security';
|
||||
|
||||
import {
|
||||
FooterComponent,
|
||||
HeaderComponent,
|
||||
SearchInputComponent,
|
||||
ThemeSettingsComponent,
|
||||
SwitcherComponent,
|
||||
LayoutDirectionSwitcherComponent,
|
||||
ThemeSwitcherComponent,
|
||||
TinyMCEComponent,
|
||||
ThemeSwitcherListComponent,
|
||||
ToggleSettingsButtonComponent,
|
||||
} from './components';
|
||||
import {
|
||||
CapitalizePipe,
|
||||
|
|
@ -58,115 +28,67 @@ import {
|
|||
RoundPipe,
|
||||
TimingPipe,
|
||||
NumberWithCommasPipe,
|
||||
EvaIconsPipe,
|
||||
} from './pipes';
|
||||
import {
|
||||
OneColumnLayoutComponent,
|
||||
SampleLayoutComponent,
|
||||
ThreeColumnsLayoutComponent,
|
||||
TwoColumnsLayoutComponent,
|
||||
} from './layouts';
|
||||
import { WindowModeBlockScrollService } from './services/window-mode-block-scroll.service';
|
||||
import { DEFAULT_THEME } from './styles/theme.default';
|
||||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
||||
import { CORPORATE_THEME } from './styles/theme.corporate';
|
||||
|
||||
const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
|
||||
import { DARK_THEME } from './styles/theme.dark';
|
||||
|
||||
const NB_MODULES = [
|
||||
NbCardModule,
|
||||
NbLayoutModule,
|
||||
NbTabsetModule,
|
||||
NbRouteTabsetModule,
|
||||
NbMenuModule,
|
||||
NbUserModule,
|
||||
NbActionsModule,
|
||||
NbSearchModule,
|
||||
NbSidebarModule,
|
||||
NbCheckboxModule,
|
||||
NbPopoverModule,
|
||||
NbContextMenuModule,
|
||||
NgbModule,
|
||||
NbSecurityModule, // *nbIsGranted directive,
|
||||
NbProgressBarModule,
|
||||
NbCalendarModule,
|
||||
NbCalendarRangeModule,
|
||||
NbStepperModule,
|
||||
NbSecurityModule,
|
||||
NbButtonModule,
|
||||
NbListModule,
|
||||
NbToastrModule,
|
||||
NbInputModule,
|
||||
NbAccordionModule,
|
||||
NbDatepickerModule,
|
||||
NbDialogModule,
|
||||
NbWindowModule,
|
||||
NbAlertModule,
|
||||
NbSpinnerModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbChatModule,
|
||||
NbTooltipModule,
|
||||
NbCalendarKitModule,
|
||||
NbIconModule,
|
||||
NbEvaIconsModule,
|
||||
];
|
||||
|
||||
const COMPONENTS = [
|
||||
SwitcherComponent,
|
||||
LayoutDirectionSwitcherComponent,
|
||||
ThemeSwitcherComponent,
|
||||
ThemeSwitcherListComponent,
|
||||
HeaderComponent,
|
||||
FooterComponent,
|
||||
SearchInputComponent,
|
||||
ThemeSettingsComponent,
|
||||
TinyMCEComponent,
|
||||
OneColumnLayoutComponent,
|
||||
SampleLayoutComponent,
|
||||
ThreeColumnsLayoutComponent,
|
||||
TwoColumnsLayoutComponent,
|
||||
ToggleSettingsButtonComponent,
|
||||
];
|
||||
|
||||
const ENTRY_COMPONENTS = [
|
||||
ThemeSwitcherListComponent,
|
||||
];
|
||||
|
||||
const PIPES = [
|
||||
CapitalizePipe,
|
||||
PluralPipe,
|
||||
RoundPipe,
|
||||
TimingPipe,
|
||||
NumberWithCommasPipe,
|
||||
EvaIconsPipe,
|
||||
];
|
||||
|
||||
const NB_THEME_PROVIDERS = [
|
||||
...NbThemeModule.forRoot(
|
||||
{
|
||||
name: 'cosmic',
|
||||
},
|
||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
|
||||
).providers,
|
||||
...NbSidebarModule.forRoot().providers,
|
||||
...NbMenuModule.forRoot().providers,
|
||||
...NbDatepickerModule.forRoot().providers,
|
||||
...NbDialogModule.forRoot().providers,
|
||||
...NbWindowModule.forRoot().providers,
|
||||
...NbToastrModule.forRoot().providers,
|
||||
...NbChatModule.forRoot({
|
||||
messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
|
||||
}).providers,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [...BASE_MODULES, ...NB_MODULES],
|
||||
exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
|
||||
imports: [CommonModule, ...NB_MODULES],
|
||||
exports: [CommonModule, ...PIPES, ...COMPONENTS],
|
||||
declarations: [...COMPONENTS, ...PIPES],
|
||||
entryComponents: [...ENTRY_COMPONENTS],
|
||||
})
|
||||
export class ThemeModule {
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return <ModuleWithProviders>{
|
||||
ngModule: ThemeModule,
|
||||
providers: [...NB_THEME_PROVIDERS],
|
||||
providers: [
|
||||
...NbThemeModule.forRoot(
|
||||
{
|
||||
name: 'default',
|
||||
},
|
||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
|
||||
).providers,
|
||||
WindowModeBlockScrollService,
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue