mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
Remove non-material themes
This commit is contained in:
eugene-sinitsyn
parent
c668b346b0
commit
c2e319499f
24 changed files with 116 additions and 1580 deletions
|
|
@ -7,9 +7,7 @@
|
||||||
[matRippleUnbounded]="true"
|
[matRippleUnbounded]="true"
|
||||||
[matRippleCentered]="true"
|
[matRippleCentered]="true"
|
||||||
(click)="toggleSidebar()"
|
(click)="toggleSidebar()"
|
||||||
>
|
><nb-icon icon="menu-outline"></nb-icon></a>
|
||||||
<nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-outline'"></nb-icon>
|
|
||||||
</a>
|
|
||||||
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
||||||
</div>
|
</div>
|
||||||
<nb-select
|
<nb-select
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,18 @@
|
||||||
align-content: center;
|
align-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::ng-deep {
|
||||||
|
nb-actions, .logo-container {
|
||||||
|
nb-icon {
|
||||||
|
color: nb-theme(color-basic-100) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-button {
|
||||||
|
background-color: nb-theme(background-basic-color-3) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
nb-user {
|
nb-user {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeServ
|
||||||
import { UserData } from '../../../@core/data/users';
|
import { UserData } from '../../../@core/data/users';
|
||||||
import { LayoutService } from '../../../@core/utils';
|
import { LayoutService } from '../../../@core/utils';
|
||||||
import { map, takeUntil } from 'rxjs/operators';
|
import { map, takeUntil } from 'rxjs/operators';
|
||||||
import { Subject, Observable } from 'rxjs';
|
import { Subject } from 'rxjs';
|
||||||
import { RippleService } from '../../../@core/utils/ripple.service';
|
import { RippleService } from '../../../@core/utils/ripple.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
@ -15,39 +15,15 @@ import { RippleService } from '../../../@core/utils/ripple.service';
|
||||||
export class HeaderComponent implements OnInit, OnDestroy {
|
export class HeaderComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
private destroy$: Subject<void> = new Subject<void>();
|
private destroy$: Subject<void> = new Subject<void>();
|
||||||
public readonly materialTheme$: Observable<boolean>;
|
|
||||||
userPictureOnly: boolean = false;
|
userPictureOnly: boolean = false;
|
||||||
user: any;
|
user: any;
|
||||||
|
|
||||||
themes = [
|
public currentTheme = 'material-light';
|
||||||
{
|
public readonly themes = [
|
||||||
value: 'default',
|
{ value: 'material-light', name: 'Material Light' },
|
||||||
name: 'Light',
|
{ value: 'material-dark', name: 'Material Dark' },
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'dark',
|
|
||||||
name: 'Dark',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'cosmic',
|
|
||||||
name: 'Cosmic',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'corporate',
|
|
||||||
name: 'Corporate',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'material-light',
|
|
||||||
name: 'Material Light',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'material-dark',
|
|
||||||
name: 'Material Dark',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
currentTheme = 'default';
|
|
||||||
|
|
||||||
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
|
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
|
||||||
|
|
||||||
public constructor(
|
public constructor(
|
||||||
|
|
@ -58,13 +34,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
||||||
private layoutService: LayoutService,
|
private layoutService: LayoutService,
|
||||||
private breakpointService: NbMediaBreakpointsService,
|
private breakpointService: NbMediaBreakpointsService,
|
||||||
private rippleService: RippleService,
|
private rippleService: RippleService,
|
||||||
) {
|
) {}
|
||||||
this.materialTheme$ = this.themeService.onThemeChange()
|
|
||||||
.pipe(map(theme => {
|
|
||||||
const themeName: string = theme?.name || '';
|
|
||||||
return themeName.startsWith('material');
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.currentTheme = this.themeService.currentTheme;
|
this.currentTheme = this.themeService.currentTheme;
|
||||||
|
|
|
||||||
15
src/app/@theme/styles/_angular-material.scss
Normal file
15
src/app/@theme/styles/_angular-material.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
@import '~@angular/material/theming';
|
||||||
|
|
||||||
|
@mixin angular-material() {
|
||||||
|
@include mat-core();
|
||||||
|
|
||||||
|
@include nb-for-theme(material-dark) {
|
||||||
|
$custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey));
|
||||||
|
@include angular-material-theme($custom-dark-theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include nb-for-theme(material-light) {
|
||||||
|
$custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink));
|
||||||
|
@include angular-material-theme($custom-light-theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -363,6 +363,8 @@ $theme: (
|
||||||
|
|
||||||
font-family-primary: unquote('Roboto, sans-serif'),
|
font-family-primary: unquote('Roboto, sans-serif'),
|
||||||
|
|
||||||
|
layout-padding-top: 2.25rem,
|
||||||
|
|
||||||
shadow: unquote('0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'),
|
shadow: unquote('0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'),
|
||||||
card-shadow: shadow,
|
card-shadow: shadow,
|
||||||
header-shadow: unquote(
|
header-shadow: unquote(
|
||||||
|
|
@ -375,8 +377,6 @@ $theme: (
|
||||||
footer-text-color: text-basic-color,
|
footer-text-color: text-basic-color,
|
||||||
footer-text-highlight-color: footer-text-color,
|
footer-text-highlight-color: footer-text-color,
|
||||||
sidebar-background-color: background-basic-color-2,
|
sidebar-background-color: background-basic-color-2,
|
||||||
actions-icon-color: text-basic-color,
|
|
||||||
actions-text-color: text-basic-color,
|
|
||||||
|
|
||||||
material-regular-font-weight: 400,
|
material-regular-font-weight: 400,
|
||||||
menu-text-font-weight: material-regular-font-weight,
|
menu-text-font-weight: material-regular-font-weight,
|
||||||
|
|
@ -387,6 +387,7 @@ $theme: (
|
||||||
|
|
||||||
menu-item-icon-color: rgba(255, 255, 255, 0.7),
|
menu-item-icon-color: rgba(255, 255, 255, 0.7),
|
||||||
menu-item-icon-hover-color: rgba(255, 255, 255, 0.7),
|
menu-item-icon-hover-color: rgba(255, 255, 255, 0.7),
|
||||||
|
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||||
|
|
||||||
menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04),
|
menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04),
|
||||||
menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1),
|
menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1),
|
||||||
|
|
@ -395,6 +396,20 @@ $theme: (
|
||||||
card-border-style: none,
|
card-border-style: none,
|
||||||
card-background-color: color-basic-800,
|
card-background-color: color-basic-800,
|
||||||
card-divider-color: color-basic-700,
|
card-divider-color: color-basic-700,
|
||||||
|
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, #1f1f1f 0%, #292929 100%),
|
||||||
|
slide-out-shadow-color: 0 4px 14px 0 #292929,
|
||||||
|
slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
|
||||||
|
|
||||||
input-border-width: 0 0 1px 0,
|
input-border-width: 0 0 1px 0,
|
||||||
input-basic-border-color: rgba(255, 255, 255, 0.7),
|
input-basic-border-color: rgba(255, 255, 255, 0.7),
|
||||||
|
|
@ -493,4 +508,4 @@ $theme: (
|
||||||
option-giant-text-font-weight: material-regular-font-weight
|
option-giant-text-font-weight: material-regular-font-weight
|
||||||
);
|
);
|
||||||
|
|
||||||
$nb-themes: nb-register-theme($theme, material-dark, dark);
|
$nb-themes: nb-register-theme($theme, material-dark, default);
|
||||||
|
|
@ -363,6 +363,8 @@ $theme: (
|
||||||
|
|
||||||
font-family-primary: unquote('Roboto, sans-serif'),
|
font-family-primary: unquote('Roboto, sans-serif'),
|
||||||
|
|
||||||
|
layout-padding-top: 2.25rem,
|
||||||
|
|
||||||
shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
|
shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
|
||||||
card-shadow: shadow,
|
card-shadow: shadow,
|
||||||
header-shadow: unquote(
|
header-shadow: unquote(
|
||||||
|
|
@ -375,8 +377,6 @@ $theme: (
|
||||||
footer-text-color: text-alternate-color,
|
footer-text-color: text-alternate-color,
|
||||||
footer-text-highlight-color: footer-text-color,
|
footer-text-highlight-color: footer-text-color,
|
||||||
sidebar-background-color: background-basic-color-2,
|
sidebar-background-color: background-basic-color-2,
|
||||||
actions-icon-color: text-alternate-color,
|
|
||||||
actions-text-color: text-alternate-color,
|
|
||||||
|
|
||||||
menu-text-font-weight: 400,
|
menu-text-font-weight: 400,
|
||||||
menu-text-color: rgba(0, 0, 0, 0.87),
|
menu-text-color: rgba(0, 0, 0, 0.87),
|
||||||
|
|
@ -386,6 +386,7 @@ $theme: (
|
||||||
|
|
||||||
menu-item-icon-color: rgba(0, 0, 0, 0.87),
|
menu-item-icon-color: rgba(0, 0, 0, 0.87),
|
||||||
menu-item-icon-hover-color: rgba(0, 0, 0, 0.87),
|
menu-item-icon-hover-color: rgba(0, 0, 0, 0.87),
|
||||||
|
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||||
|
|
||||||
menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04),
|
menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04),
|
||||||
menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1),
|
menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1),
|
||||||
|
|
@ -393,6 +394,20 @@ $theme: (
|
||||||
|
|
||||||
card-border-style: none,
|
card-border-style: none,
|
||||||
card-divider-color: color-basic-200,
|
card-divider-color: color-basic-200,
|
||||||
|
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, #e0e0e0 0%, #ebebeb 100%),
|
||||||
|
slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
|
||||||
|
slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
|
||||||
|
|
||||||
input-border-width: 0 0 1px 0,
|
input-border-width: 0 0 1px 0,
|
||||||
input-basic-border-color: rgba(0, 0, 0, 0.42),
|
input-basic-border-color: rgba(0, 0, 0, 0.42),
|
||||||
|
|
@ -12,4 +12,33 @@
|
||||||
.table {
|
.table {
|
||||||
color: nb-theme(text-basic-color) !important;
|
color: nb-theme(text-basic-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nb-sidebar {
|
||||||
|
transition: width 0.3s;
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nb-card {
|
||||||
|
border-bottom-left-radius: 0.125rem;
|
||||||
|
border-bottom-right-radius: 0.125rem;
|
||||||
|
|
||||||
|
nb-card-header, .tabset {
|
||||||
|
background-color: nb-theme(card-divider-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[nbinput] {
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
&.status-basic:focus:hover {
|
||||||
|
border-color: nb-theme(color-primary-focus) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[nbbutton] {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
@import '~@angular/material/theming';
|
|
||||||
|
|
||||||
@include nb-install() {
|
|
||||||
@include nb-for-theme(material-dark) {
|
|
||||||
$custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey));
|
|
||||||
@include angular-material-theme($custom-dark-theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include nb-for-theme(material-light) {
|
|
||||||
$custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink));
|
|
||||||
@include angular-material-theme($custom-light-theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include nb-for-themes(material-dark, material-light) {
|
|
||||||
@include mat-core();
|
|
||||||
|
|
||||||
nb-layout-header {
|
|
||||||
.logo-container nb-icon {
|
|
||||||
color: nb-theme(text-control-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-button {
|
|
||||||
background-color: nb-theme(background-basic-color-3) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
nb-sidebar {
|
|
||||||
transition: width 0.3s;
|
|
||||||
|
|
||||||
.main-container {
|
|
||||||
transition: width 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nb-card {
|
|
||||||
border-bottom-left-radius: 0.125rem;
|
|
||||||
border-bottom-right-radius: 0.125rem;
|
|
||||||
|
|
||||||
nb-card-header, .tabset {
|
|
||||||
background-color: nb-theme(card-divider-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[nbinput] {
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
&.status-basic:focus:hover {
|
|
||||||
border-color: nb-theme(color-primary-focus) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[nbbutton] {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -4,6 +4,8 @@
|
||||||
// themes - our custom or/and out of the box themes
|
// themes - our custom or/and out of the box themes
|
||||||
@import 'themes';
|
@import 'themes';
|
||||||
|
|
||||||
|
@import 'angular-material';
|
||||||
|
|
||||||
// framework component themes (styles tied to theme variables)
|
// framework component themes (styles tied to theme variables)
|
||||||
@import '~@nebular/theme/styles/globals';
|
@import '~@nebular/theme/styles/globals';
|
||||||
@import '~@nebular/auth/styles/all';
|
@import '~@nebular/auth/styles/all';
|
||||||
|
|
@ -18,12 +20,12 @@
|
||||||
|
|
||||||
@import './layout';
|
@import './layout';
|
||||||
@import './overrides';
|
@import './overrides';
|
||||||
@import './material/material';
|
|
||||||
|
|
||||||
// install the framework and custom global styles
|
// install the framework and custom global styles
|
||||||
@include nb-install() {
|
@include nb-install() {
|
||||||
|
|
||||||
// framework global styles
|
// framework global styles
|
||||||
|
@include angular-material();
|
||||||
@include nb-theme-global();
|
@include nb-theme-global();
|
||||||
@include nb-auth-global();
|
@include nb-auth-global();
|
||||||
|
|
||||||
|
|
@ -31,5 +33,6 @@
|
||||||
// loading progress bar
|
// loading progress bar
|
||||||
@include ngx-pace-theme();
|
@include ngx-pace-theme();
|
||||||
|
|
||||||
|
|
||||||
@include nb-overrides();
|
@include nb-overrides();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,308 +0,0 @@
|
||||||
import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme';
|
|
||||||
|
|
||||||
const baseThemeVariables = baseTheme.variables;
|
|
||||||
|
|
||||||
export const CORPORATE_THEME = {
|
|
||||||
name: 'corporate',
|
|
||||||
base: 'corporate',
|
|
||||||
variables: {
|
|
||||||
temperature: {
|
|
||||||
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
|
|
||||||
arcEmpty: baseThemeVariables.bg2,
|
|
||||||
thumbBg: baseThemeVariables.bg2,
|
|
||||||
thumbBorder: '#ffa36b',
|
|
||||||
},
|
|
||||||
|
|
||||||
solar: {
|
|
||||||
gradientLeft: baseThemeVariables.primary,
|
|
||||||
gradientRight: baseThemeVariables.primary,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondSeriesFill: baseThemeVariables.bg2,
|
|
||||||
radius: ['80%', '90%'],
|
|
||||||
},
|
|
||||||
|
|
||||||
traffic: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
yAxisSplitLine: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
lineBg: baseThemeVariables.primary,
|
|
||||||
lineShadowBlur: '0',
|
|
||||||
itemColor: baseThemeVariables.border4,
|
|
||||||
itemBorderColor: baseThemeVariables.border4,
|
|
||||||
itemEmphasisBorderColor: baseThemeVariables.primaryLight,
|
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
gradFrom: baseThemeVariables.bg,
|
|
||||||
gradTo: baseThemeVariables.bg,
|
|
||||||
},
|
|
||||||
|
|
||||||
electricity: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: baseThemeVariables.fgText,
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border3,
|
|
||||||
xAxisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'solid',
|
|
||||||
lineWidth: '4',
|
|
||||||
lineGradFrom: baseThemeVariables.primary,
|
|
||||||
lineGradTo: baseThemeVariables.primary,
|
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
areaGradFrom: 'rgba(0, 0, 0, 0)',
|
|
||||||
areaGradTo: 'rgba(0, 0, 0, 0)',
|
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
bubbleMap: {
|
|
||||||
titleColor: baseThemeVariables.fgText,
|
|
||||||
areaColor: baseThemeVariables.bg4,
|
|
||||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
|
||||||
areaBorderColor: baseThemeVariables.border5,
|
|
||||||
},
|
|
||||||
|
|
||||||
profitBarAnimationEchart: {
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
|
|
||||||
firstAnimationBarColor: baseThemeVariables.primary,
|
|
||||||
secondAnimationBarColor: baseThemeVariables.success,
|
|
||||||
|
|
||||||
splitLineStyleOpacity: '1',
|
|
||||||
splitLineStyleWidth: '1',
|
|
||||||
splitLineStyleColor: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
|
|
||||||
trafficBarEchart: {
|
|
||||||
gradientFrom: baseThemeVariables.warningLight,
|
|
||||||
gradientTo: baseThemeVariables.warning,
|
|
||||||
shadow: baseThemeVariables.warningLight,
|
|
||||||
shadowBlur: '0',
|
|
||||||
|
|
||||||
axisTextColor: baseThemeVariables.fgText,
|
|
||||||
axisFontSize: '12',
|
|
||||||
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
},
|
|
||||||
|
|
||||||
countryOrders: {
|
|
||||||
countryBorderColor: baseThemeVariables.border4,
|
|
||||||
countryFillColor: baseThemeVariables.bg4,
|
|
||||||
countryBorderWidth: '1',
|
|
||||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
|
||||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
|
||||||
hoveredCountryBorderWidth: '1',
|
|
||||||
|
|
||||||
chartAxisLineColor: baseThemeVariables.border4,
|
|
||||||
chartAxisTextColor: baseThemeVariables.fg,
|
|
||||||
chartAxisFontSize: '16',
|
|
||||||
chartGradientTo: baseThemeVariables.primary,
|
|
||||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
|
||||||
chartAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
chartInnerLineColor: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
echarts: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.fgText,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
|
||||||
areaOpacity: '0.7',
|
|
||||||
},
|
|
||||||
|
|
||||||
chartjs: {
|
|
||||||
axisLineColor: baseThemeVariables.separator,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
},
|
|
||||||
|
|
||||||
orders: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'solid',
|
|
||||||
lineWidth: '4',
|
|
||||||
|
|
||||||
// first line
|
|
||||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
|
||||||
firstAreaGradTo: baseThemeVariables.bg3,
|
|
||||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// second line
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// third line
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.successLight,
|
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
|
||||||
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
|
||||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
profit: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
areaOpacity: '1',
|
|
||||||
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
|
|
||||||
// first bar
|
|
||||||
firstLineGradFrom: baseThemeVariables.bg3,
|
|
||||||
firstLineGradTo: baseThemeVariables.bg3,
|
|
||||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// second bar
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// third bar
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.success,
|
|
||||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
orderProfitLegend: {
|
|
||||||
firstItem: baseThemeVariables.success,
|
|
||||||
secondItem: baseThemeVariables.primary,
|
|
||||||
thirdItem: baseThemeVariables.bg3,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitors: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '1',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'dotted',
|
|
||||||
lineWidth: '6',
|
|
||||||
lineGradFrom: '#ffffff',
|
|
||||||
lineGradTo: '#ffffff',
|
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
areaGradFrom: baseThemeVariables.primary,
|
|
||||||
areaGradTo: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
innerLineStyle: 'solid',
|
|
||||||
innerLineWidth: '1',
|
|
||||||
|
|
||||||
innerAreaGradFrom: baseThemeVariables.success,
|
|
||||||
innerAreaGradTo: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsLegend: {
|
|
||||||
firstIcon: baseThemeVariables.success,
|
|
||||||
secondIcon: baseThemeVariables.primary,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPie: {
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.success,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
firstPieRadius: ['65%', '90%'],
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondPieRadius: ['63%', '92%'],
|
|
||||||
shadowOffsetX: '-4',
|
|
||||||
shadowOffsetY: '-4',
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPieLegend: {
|
|
||||||
firstSection: baseThemeVariables.warning,
|
|
||||||
secondSection: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
earningPie: {
|
|
||||||
radius: ['65%', '100%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
|
|
||||||
fontSize: '22',
|
|
||||||
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.success,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.primary,
|
|
||||||
secondPieGradientRight: baseThemeVariables.primary,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
thirdPieGradientRight: baseThemeVariables.warning,
|
|
||||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
earningLine: {
|
|
||||||
gradFrom: baseThemeVariables.primary,
|
|
||||||
gradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} as NbJSThemeOptions;
|
|
||||||
|
|
@ -1,308 +0,0 @@
|
||||||
import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme';
|
|
||||||
|
|
||||||
const baseThemeVariables = baseTheme.variables;
|
|
||||||
|
|
||||||
export const COSMIC_THEME = {
|
|
||||||
name: 'cosmic',
|
|
||||||
base: 'cosmic',
|
|
||||||
variables: {
|
|
||||||
temperature: {
|
|
||||||
arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
|
|
||||||
arcEmpty: baseThemeVariables.bg2,
|
|
||||||
thumbBg: '#ffffff',
|
|
||||||
thumbBorder: '#ffffff',
|
|
||||||
},
|
|
||||||
|
|
||||||
solar: {
|
|
||||||
gradientLeft: baseThemeVariables.primary,
|
|
||||||
gradientRight: baseThemeVariables.primary,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondSeriesFill: baseThemeVariables.bg2,
|
|
||||||
radius: ['70%', '90%'],
|
|
||||||
},
|
|
||||||
|
|
||||||
traffic: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
lineBg: baseThemeVariables.border2,
|
|
||||||
lineShadowBlur: '14',
|
|
||||||
itemColor: baseThemeVariables.border2,
|
|
||||||
itemBorderColor: baseThemeVariables.border2,
|
|
||||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
|
||||||
shadowLineDarkBg: baseThemeVariables.border3,
|
|
||||||
shadowLineShadow: baseThemeVariables.border3,
|
|
||||||
gradFrom: baseThemeVariables.bg,
|
|
||||||
gradTo: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
electricity: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: baseThemeVariables.fgText,
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border3,
|
|
||||||
xAxisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.border2,
|
|
||||||
lineStyle: 'dotted',
|
|
||||||
lineWidth: '6',
|
|
||||||
lineGradFrom: baseThemeVariables.success,
|
|
||||||
lineGradTo: baseThemeVariables.warning,
|
|
||||||
lineShadow: baseThemeVariables.bg4,
|
|
||||||
|
|
||||||
areaGradFrom: baseThemeVariables.bg2,
|
|
||||||
areaGradTo: baseThemeVariables.bg3,
|
|
||||||
shadowLineDarkBg: baseThemeVariables.bg3,
|
|
||||||
},
|
|
||||||
|
|
||||||
bubbleMap: {
|
|
||||||
titleColor: baseThemeVariables.fgText,
|
|
||||||
areaColor: baseThemeVariables.bg4,
|
|
||||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
|
||||||
areaBorderColor: baseThemeVariables.border5,
|
|
||||||
},
|
|
||||||
|
|
||||||
profitBarAnimationEchart: {
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
|
|
||||||
firstAnimationBarColor: baseThemeVariables.primary,
|
|
||||||
secondAnimationBarColor: baseThemeVariables.success,
|
|
||||||
|
|
||||||
splitLineStyleOpacity: '1',
|
|
||||||
splitLineStyleWidth: '1',
|
|
||||||
splitLineStyleColor: baseThemeVariables.border2,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
|
|
||||||
trafficBarEchart: {
|
|
||||||
gradientFrom: baseThemeVariables.warningLight,
|
|
||||||
gradientTo: baseThemeVariables.warning,
|
|
||||||
shadow: baseThemeVariables.warningLight,
|
|
||||||
shadowBlur: '5',
|
|
||||||
|
|
||||||
axisTextColor: baseThemeVariables.fgText,
|
|
||||||
axisFontSize: '12',
|
|
||||||
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
},
|
|
||||||
|
|
||||||
countryOrders: {
|
|
||||||
countryBorderColor: baseThemeVariables.border4,
|
|
||||||
countryFillColor: baseThemeVariables.bg3,
|
|
||||||
countryBorderWidth: '1',
|
|
||||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
|
||||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
|
||||||
hoveredCountryBorderWidth: '1',
|
|
||||||
|
|
||||||
chartAxisLineColor: baseThemeVariables.border4,
|
|
||||||
chartAxisTextColor: baseThemeVariables.fg,
|
|
||||||
chartAxisFontSize: '16',
|
|
||||||
chartGradientTo: baseThemeVariables.primary,
|
|
||||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
|
||||||
chartAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
chartInnerLineColor: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
echarts: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.fgText,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
|
||||||
areaOpacity: '1',
|
|
||||||
},
|
|
||||||
|
|
||||||
chartjs: {
|
|
||||||
axisLineColor: baseThemeVariables.separator,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
},
|
|
||||||
|
|
||||||
orders: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'solid',
|
|
||||||
lineWidth: '4',
|
|
||||||
|
|
||||||
// first line
|
|
||||||
firstAreaGradFrom: baseThemeVariables.bg2,
|
|
||||||
firstAreaGradTo: baseThemeVariables.bg2,
|
|
||||||
firstShadowLineDarkBg: baseThemeVariables.bg2,
|
|
||||||
|
|
||||||
// second line
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
|
|
||||||
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
|
|
||||||
secondShadowLineDarkBg: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
// third line
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.successLight,
|
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
|
|
||||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
|
|
||||||
thirdShadowLineDarkBg: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
profit: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
areaOpacity: '1',
|
|
||||||
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
|
|
||||||
// first bar
|
|
||||||
firstLineGradFrom: baseThemeVariables.bg2,
|
|
||||||
firstLineGradTo: baseThemeVariables.bg2,
|
|
||||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// second bar
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// third bar
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.successLight,
|
|
||||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
orderProfitLegend: {
|
|
||||||
firstItem: baseThemeVariables.success,
|
|
||||||
secondItem: baseThemeVariables.primary,
|
|
||||||
thirdItem: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitors: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '1',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'dotted',
|
|
||||||
lineWidth: '6',
|
|
||||||
lineGradFrom: '#ffffff',
|
|
||||||
lineGradTo: '#ffffff',
|
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
areaGradFrom: baseThemeVariables.primary,
|
|
||||||
areaGradTo: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
innerLineStyle: 'solid',
|
|
||||||
innerLineWidth: '1',
|
|
||||||
|
|
||||||
innerAreaGradFrom: baseThemeVariables.success,
|
|
||||||
innerAreaGradTo: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsLegend: {
|
|
||||||
firstIcon: baseThemeVariables.success,
|
|
||||||
secondIcon: baseThemeVariables.primary,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPie: {
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.successLight,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
firstPieRadius: ['70%', '90%'],
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondPieRadius: ['60%', '95%'],
|
|
||||||
shadowOffsetX: '0',
|
|
||||||
shadowOffsetY: '3',
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPieLegend: {
|
|
||||||
firstSection: baseThemeVariables.warning,
|
|
||||||
secondSection: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
earningPie: {
|
|
||||||
radius: ['65%', '100%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
|
|
||||||
fontSize: '22',
|
|
||||||
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.success,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.primary,
|
|
||||||
secondPieGradientRight: baseThemeVariables.primary,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
thirdPieGradientRight: baseThemeVariables.warning,
|
|
||||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
earningLine: {
|
|
||||||
gradFrom: baseThemeVariables.primary,
|
|
||||||
gradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} as NbJSThemeOptions;
|
|
||||||
|
|
@ -1,314 +0,0 @@
|
||||||
import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme';
|
|
||||||
|
|
||||||
const baseThemeVariables = baseTheme.variables;
|
|
||||||
|
|
||||||
export const DARK_THEME = {
|
|
||||||
name: 'dark',
|
|
||||||
base: 'dark',
|
|
||||||
variables: {
|
|
||||||
temperature: {
|
|
||||||
arcFill: [
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
],
|
|
||||||
arcEmpty: baseThemeVariables.bg2,
|
|
||||||
thumbBg: baseThemeVariables.bg2,
|
|
||||||
thumbBorder: baseThemeVariables.primary,
|
|
||||||
},
|
|
||||||
|
|
||||||
solar: {
|
|
||||||
gradientLeft: baseThemeVariables.primary,
|
|
||||||
gradientRight: baseThemeVariables.primary,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondSeriesFill: baseThemeVariables.bg2,
|
|
||||||
radius: ['80%', '90%'],
|
|
||||||
},
|
|
||||||
|
|
||||||
traffic: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
lineBg: baseThemeVariables.border4,
|
|
||||||
lineShadowBlur: '1',
|
|
||||||
itemColor: baseThemeVariables.border4,
|
|
||||||
itemBorderColor: baseThemeVariables.border4,
|
|
||||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
gradFrom: baseThemeVariables.bg2,
|
|
||||||
gradTo: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
electricity: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: baseThemeVariables.fgText,
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border3,
|
|
||||||
xAxisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'solid',
|
|
||||||
lineWidth: '4',
|
|
||||||
lineGradFrom: baseThemeVariables.primary,
|
|
||||||
lineGradTo: baseThemeVariables.primary,
|
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
areaGradFrom: baseThemeVariables.bg2,
|
|
||||||
areaGradTo: baseThemeVariables.bg2,
|
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
bubbleMap: {
|
|
||||||
titleColor: baseThemeVariables.fgText,
|
|
||||||
areaColor: baseThemeVariables.bg4,
|
|
||||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
|
||||||
areaBorderColor: baseThemeVariables.border5,
|
|
||||||
},
|
|
||||||
|
|
||||||
profitBarAnimationEchart: {
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
|
|
||||||
firstAnimationBarColor: baseThemeVariables.primary,
|
|
||||||
secondAnimationBarColor: baseThemeVariables.success,
|
|
||||||
|
|
||||||
splitLineStyleOpacity: '1',
|
|
||||||
splitLineStyleWidth: '1',
|
|
||||||
splitLineStyleColor: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
|
|
||||||
trafficBarEchart: {
|
|
||||||
gradientFrom: baseThemeVariables.warningLight,
|
|
||||||
gradientTo: baseThemeVariables.warning,
|
|
||||||
shadow: baseThemeVariables.warningLight,
|
|
||||||
shadowBlur: '0',
|
|
||||||
|
|
||||||
axisTextColor: baseThemeVariables.fgText,
|
|
||||||
axisFontSize: '12',
|
|
||||||
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
},
|
|
||||||
|
|
||||||
countryOrders: {
|
|
||||||
countryBorderColor: baseThemeVariables.border4,
|
|
||||||
countryFillColor: baseThemeVariables.bg3,
|
|
||||||
countryBorderWidth: '1',
|
|
||||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
|
||||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
|
||||||
hoveredCountryBorderWidth: '1',
|
|
||||||
|
|
||||||
chartAxisLineColor: baseThemeVariables.border4,
|
|
||||||
chartAxisTextColor: baseThemeVariables.fg,
|
|
||||||
chartAxisFontSize: '16',
|
|
||||||
chartGradientTo: baseThemeVariables.primary,
|
|
||||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
|
||||||
chartAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
chartInnerLineColor: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
echarts: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.fgText,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
|
||||||
areaOpacity: '0.7',
|
|
||||||
},
|
|
||||||
|
|
||||||
chartjs: {
|
|
||||||
axisLineColor: baseThemeVariables.separator,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
},
|
|
||||||
|
|
||||||
orders: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'solid',
|
|
||||||
lineWidth: '4',
|
|
||||||
|
|
||||||
// first line
|
|
||||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
|
||||||
firstAreaGradTo: baseThemeVariables.bg3,
|
|
||||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// second line
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
|
||||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
|
||||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// third line
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.successLight,
|
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
|
||||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
|
||||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
profit: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
areaOpacity: '1',
|
|
||||||
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
|
|
||||||
// first bar
|
|
||||||
firstLineGradFrom: baseThemeVariables.bg3,
|
|
||||||
firstLineGradTo: baseThemeVariables.bg3,
|
|
||||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// second bar
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// third bar
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.successLight,
|
|
||||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
orderProfitLegend: {
|
|
||||||
firstItem: baseThemeVariables.success,
|
|
||||||
secondItem: baseThemeVariables.primary,
|
|
||||||
thirdItem: baseThemeVariables.bg3,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitors: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'dotted',
|
|
||||||
lineWidth: '6',
|
|
||||||
lineGradFrom: '#ffffff',
|
|
||||||
lineGradTo: '#ffffff',
|
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
areaGradFrom: baseThemeVariables.primary,
|
|
||||||
areaGradTo: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
innerLineStyle: 'solid',
|
|
||||||
innerLineWidth: '1',
|
|
||||||
|
|
||||||
innerAreaGradFrom: baseThemeVariables.success,
|
|
||||||
innerAreaGradTo: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsLegend: {
|
|
||||||
firstIcon: baseThemeVariables.success,
|
|
||||||
secondIcon: baseThemeVariables.primary,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPie: {
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.success,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
firstPieRadius: ['70%', '90%'],
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondPieRadius: ['60%', '97%'],
|
|
||||||
shadowOffsetX: '0',
|
|
||||||
shadowOffsetY: '0',
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPieLegend: {
|
|
||||||
firstSection: baseThemeVariables.warning,
|
|
||||||
secondSection: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
earningPie: {
|
|
||||||
radius: ['65%', '100%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
|
|
||||||
fontSize: '22',
|
|
||||||
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.success,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.primary,
|
|
||||||
secondPieGradientRight: baseThemeVariables.primary,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
thirdPieGradientRight: baseThemeVariables.warning,
|
|
||||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
earningLine: {
|
|
||||||
gradFrom: baseThemeVariables.primary,
|
|
||||||
gradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} as NbJSThemeOptions;
|
|
||||||
|
|
@ -1,314 +0,0 @@
|
||||||
import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
|
|
||||||
|
|
||||||
const baseThemeVariables = baseTheme.variables;
|
|
||||||
|
|
||||||
export const DEFAULT_THEME = {
|
|
||||||
name: 'default',
|
|
||||||
base: 'default',
|
|
||||||
variables: {
|
|
||||||
temperature: {
|
|
||||||
arcFill: [
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
baseThemeVariables.primary,
|
|
||||||
],
|
|
||||||
arcEmpty: baseThemeVariables.bg2,
|
|
||||||
thumbBg: baseThemeVariables.bg2,
|
|
||||||
thumbBorder: baseThemeVariables.primary,
|
|
||||||
},
|
|
||||||
|
|
||||||
solar: {
|
|
||||||
gradientLeft: baseThemeVariables.primary,
|
|
||||||
gradientRight: baseThemeVariables.primary,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondSeriesFill: baseThemeVariables.bg2,
|
|
||||||
radius: ['80%', '90%'],
|
|
||||||
},
|
|
||||||
|
|
||||||
traffic: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
lineBg: baseThemeVariables.border4,
|
|
||||||
lineShadowBlur: '1',
|
|
||||||
itemColor: baseThemeVariables.border4,
|
|
||||||
itemBorderColor: baseThemeVariables.border4,
|
|
||||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
gradFrom: baseThemeVariables.bg2,
|
|
||||||
gradTo: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
electricity: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: baseThemeVariables.fgText,
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border3,
|
|
||||||
xAxisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'solid',
|
|
||||||
lineWidth: '4',
|
|
||||||
lineGradFrom: baseThemeVariables.primary,
|
|
||||||
lineGradTo: baseThemeVariables.primary,
|
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
areaGradFrom: baseThemeVariables.bg2,
|
|
||||||
areaGradTo: baseThemeVariables.bg2,
|
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
bubbleMap: {
|
|
||||||
titleColor: baseThemeVariables.fgText,
|
|
||||||
areaColor: baseThemeVariables.bg4,
|
|
||||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
|
||||||
areaBorderColor: baseThemeVariables.border5,
|
|
||||||
},
|
|
||||||
|
|
||||||
profitBarAnimationEchart: {
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
|
|
||||||
firstAnimationBarColor: baseThemeVariables.primary,
|
|
||||||
secondAnimationBarColor: baseThemeVariables.success,
|
|
||||||
|
|
||||||
splitLineStyleOpacity: '1',
|
|
||||||
splitLineStyleWidth: '1',
|
|
||||||
splitLineStyleColor: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
|
|
||||||
trafficBarEchart: {
|
|
||||||
gradientFrom: baseThemeVariables.warningLight,
|
|
||||||
gradientTo: baseThemeVariables.warning,
|
|
||||||
shadow: baseThemeVariables.warningLight,
|
|
||||||
shadowBlur: '0',
|
|
||||||
|
|
||||||
axisTextColor: baseThemeVariables.fgText,
|
|
||||||
axisFontSize: '12',
|
|
||||||
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
},
|
|
||||||
|
|
||||||
countryOrders: {
|
|
||||||
countryBorderColor: baseThemeVariables.border4,
|
|
||||||
countryFillColor: baseThemeVariables.bg3,
|
|
||||||
countryBorderWidth: '1',
|
|
||||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
|
||||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
|
||||||
hoveredCountryBorderWidth: '1',
|
|
||||||
|
|
||||||
chartAxisLineColor: baseThemeVariables.border4,
|
|
||||||
chartAxisTextColor: baseThemeVariables.fg,
|
|
||||||
chartAxisFontSize: '16',
|
|
||||||
chartGradientTo: baseThemeVariables.primary,
|
|
||||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
|
||||||
chartAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
chartInnerLineColor: baseThemeVariables.bg2,
|
|
||||||
},
|
|
||||||
|
|
||||||
echarts: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.fgText,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
|
||||||
areaOpacity: '0.7',
|
|
||||||
},
|
|
||||||
|
|
||||||
chartjs: {
|
|
||||||
axisLineColor: baseThemeVariables.separator,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
},
|
|
||||||
|
|
||||||
orders: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '0',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'solid',
|
|
||||||
lineWidth: '4',
|
|
||||||
|
|
||||||
// first line
|
|
||||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
|
||||||
firstAreaGradTo: baseThemeVariables.bg3,
|
|
||||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// second line
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
|
||||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
|
||||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// third line
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.successLight,
|
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
|
||||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
|
||||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
profit: {
|
|
||||||
bg: baseThemeVariables.bg,
|
|
||||||
textColor: baseThemeVariables.fgText,
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
splitLineColor: baseThemeVariables.separator,
|
|
||||||
areaOpacity: '1',
|
|
||||||
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
|
|
||||||
// first bar
|
|
||||||
firstLineGradFrom: baseThemeVariables.bg3,
|
|
||||||
firstLineGradTo: baseThemeVariables.bg3,
|
|
||||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// second bar
|
|
||||||
secondLineGradFrom: baseThemeVariables.primary,
|
|
||||||
secondLineGradTo: baseThemeVariables.primary,
|
|
||||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
// third bar
|
|
||||||
thirdLineGradFrom: baseThemeVariables.success,
|
|
||||||
thirdLineGradTo: baseThemeVariables.successLight,
|
|
||||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
orderProfitLegend: {
|
|
||||||
firstItem: baseThemeVariables.success,
|
|
||||||
secondItem: baseThemeVariables.primary,
|
|
||||||
thirdItem: baseThemeVariables.bg3,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitors: {
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
tooltipLineWidth: '1',
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '20',
|
|
||||||
|
|
||||||
axisLineColor: baseThemeVariables.border4,
|
|
||||||
axisFontSize: '16',
|
|
||||||
axisTextColor: baseThemeVariables.fg,
|
|
||||||
yAxisSplitLine: baseThemeVariables.separator,
|
|
||||||
|
|
||||||
itemBorderColor: baseThemeVariables.primary,
|
|
||||||
lineStyle: 'dotted',
|
|
||||||
lineWidth: '6',
|
|
||||||
lineGradFrom: '#ffffff',
|
|
||||||
lineGradTo: '#ffffff',
|
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
areaGradFrom: baseThemeVariables.primary,
|
|
||||||
areaGradTo: baseThemeVariables.primaryLight,
|
|
||||||
|
|
||||||
innerLineStyle: 'solid',
|
|
||||||
innerLineWidth: '1',
|
|
||||||
|
|
||||||
innerAreaGradFrom: baseThemeVariables.success,
|
|
||||||
innerAreaGradTo: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsLegend: {
|
|
||||||
firstIcon: baseThemeVariables.success,
|
|
||||||
secondIcon: baseThemeVariables.primary,
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPie: {
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.success,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
firstPieRadius: ['70%', '90%'],
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
secondPieRadius: ['60%', '97%'],
|
|
||||||
shadowOffsetX: '0',
|
|
||||||
shadowOffsetY: '0',
|
|
||||||
},
|
|
||||||
|
|
||||||
visitorsPieLegend: {
|
|
||||||
firstSection: baseThemeVariables.warning,
|
|
||||||
secondSection: baseThemeVariables.success,
|
|
||||||
},
|
|
||||||
|
|
||||||
earningPie: {
|
|
||||||
radius: ['65%', '100%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
|
|
||||||
fontSize: '22',
|
|
||||||
|
|
||||||
firstPieGradientLeft: baseThemeVariables.success,
|
|
||||||
firstPieGradientRight: baseThemeVariables.success,
|
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
secondPieGradientLeft: baseThemeVariables.primary,
|
|
||||||
secondPieGradientRight: baseThemeVariables.primary,
|
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
|
|
||||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
|
||||||
thirdPieGradientRight: baseThemeVariables.warning,
|
|
||||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
|
||||||
},
|
|
||||||
|
|
||||||
earningLine: {
|
|
||||||
gradFrom: baseThemeVariables.primary,
|
|
||||||
gradTo: baseThemeVariables.primary,
|
|
||||||
|
|
||||||
tooltipTextColor: baseThemeVariables.fgText,
|
|
||||||
tooltipFontWeight: 'normal',
|
|
||||||
tooltipFontSize: '16',
|
|
||||||
tooltipBg: baseThemeVariables.bg,
|
|
||||||
tooltipBorderColor: baseThemeVariables.border2,
|
|
||||||
tooltipBorderWidth: '1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} as NbJSThemeOptions;
|
|
||||||
|
|
@ -10,7 +10,7 @@ const palette = {
|
||||||
|
|
||||||
export const baseTheme: NbJSThemeOptions = {
|
export const baseTheme: NbJSThemeOptions = {
|
||||||
name: 'material-dark',
|
name: 'material-dark',
|
||||||
base: 'dark',
|
base: 'default',
|
||||||
variables: {
|
variables: {
|
||||||
fontMain: 'Roboto, sans-serif',
|
fontMain: 'Roboto, sans-serif',
|
||||||
fontSecondary: 'Roboto, sans-serif',
|
fontSecondary: 'Roboto, sans-serif',
|
||||||
|
|
@ -2,132 +2,5 @@
|
||||||
@import '~@nebular/theme/styles/theming';
|
@import '~@nebular/theme/styles/theming';
|
||||||
// @nebular out of the box themes
|
// @nebular out of the box themes
|
||||||
@import '~@nebular/theme/styles/themes';
|
@import '~@nebular/theme/styles/themes';
|
||||||
// material themes
|
@import './material-dark';
|
||||||
@import './material/material-dark';
|
@import './material-light';
|
||||||
@import './material/material-light';
|
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
|
||||||
layout-padding-top: 2.25rem,
|
|
||||||
|
|
||||||
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: #f7f9fc,
|
|
||||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
|
||||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
|
||||||
), default, default);
|
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
|
||||||
layout-padding-top: 2.25rem,
|
|
||||||
|
|
||||||
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: #252547,
|
|
||||||
slide-out-shadow-color: 2px 0 3px #29157a,
|
|
||||||
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
|
|
||||||
), cosmic, cosmic);
|
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
|
||||||
layout-padding-top: 2.25rem,
|
|
||||||
|
|
||||||
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, #edf1f7 0%, #e4e9f2 100%),
|
|
||||||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
|
||||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
|
||||||
), corporate, corporate);
|
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
|
||||||
layout-padding-top: 2.25rem,
|
|
||||||
|
|
||||||
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,
|
|
||||||
), dark, dark);
|
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
|
||||||
layout-padding-top: 2.25rem,
|
|
||||||
|
|
||||||
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, #e0e0e0 0%, #ebebeb 100%),
|
|
||||||
slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
|
|
||||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
|
|
||||||
), material-light, material-light);
|
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
|
||||||
layout-padding-top: 2.25rem,
|
|
||||||
|
|
||||||
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, #1f1f1f 0%, #292929 100%),
|
|
||||||
slide-out-shadow-color: 0 4px 14px 0 #292929,
|
|
||||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
|
|
||||||
), material-dark, material-dark);
|
|
||||||
|
|
|
||||||
|
|
@ -35,12 +35,8 @@ import {
|
||||||
ThreeColumnsLayoutComponent,
|
ThreeColumnsLayoutComponent,
|
||||||
TwoColumnsLayoutComponent,
|
TwoColumnsLayoutComponent,
|
||||||
} from './layouts';
|
} from './layouts';
|
||||||
import { DEFAULT_THEME } from './styles/theme.default';
|
import { MATERIAL_LIGHT_THEME } from './styles/theme.material-light';
|
||||||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
import { MATERIAL_DARK_THEME } from './styles/theme.material-dark';
|
||||||
import { CORPORATE_THEME } from './styles/theme.corporate';
|
|
||||||
import { DARK_THEME } from './styles/theme.dark';
|
|
||||||
import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light';
|
|
||||||
import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
|
|
||||||
|
|
||||||
const NB_MODULES = [
|
const NB_MODULES = [
|
||||||
NbLayoutModule,
|
NbLayoutModule,
|
||||||
|
|
@ -84,10 +80,8 @@ export class ThemeModule {
|
||||||
ngModule: ThemeModule,
|
ngModule: ThemeModule,
|
||||||
providers: [
|
providers: [
|
||||||
...NbThemeModule.forRoot(
|
...NbThemeModule.forRoot(
|
||||||
{
|
{ name: 'material-light' },
|
||||||
name: 'default',
|
[MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME],
|
||||||
},
|
|
||||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ],
|
|
||||||
).providers,
|
).providers,
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -50,34 +50,9 @@ export class DashboardComponent implements OnDestroy {
|
||||||
];
|
];
|
||||||
|
|
||||||
statusCardsByThemes: {
|
statusCardsByThemes: {
|
||||||
default: CardSettings[];
|
|
||||||
cosmic: CardSettings[];
|
|
||||||
corporate: CardSettings[];
|
|
||||||
dark: CardSettings[];
|
|
||||||
'material-dark': CardSettings[];
|
'material-dark': CardSettings[];
|
||||||
'material-light': CardSettings[];
|
'material-light': CardSettings[];
|
||||||
} = {
|
} = {
|
||||||
default: this.commonStatusCardsSet,
|
|
||||||
cosmic: this.commonStatusCardsSet,
|
|
||||||
corporate: [
|
|
||||||
{
|
|
||||||
...this.lightCard,
|
|
||||||
type: 'warning',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
...this.rollerShadesCard,
|
|
||||||
type: 'primary',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
...this.wirelessAudioCard,
|
|
||||||
type: 'danger',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
...this.coffeeMakerCard,
|
|
||||||
type: 'info',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
dark: this.commonStatusCardsSet,
|
|
||||||
'material-dark': this.commonStatusCardsSet,
|
'material-dark': this.commonStatusCardsSet,
|
||||||
'material-light': this.commonStatusCardsSet,
|
'material-light': this.commonStatusCardsSet,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,12 @@
|
||||||
import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, Output } from '@angular/core';
|
import { Component, EventEmitter, Output } from '@angular/core';
|
||||||
import { Location, LocationStrategy } from '@angular/common';
|
import { Location, LocationStrategy } from '@angular/common';
|
||||||
import { NbThemeService } from '@nebular/theme';
|
|
||||||
import { map, takeUntil } from 'rxjs/operators';
|
|
||||||
import { Subject } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-room-selector',
|
selector: 'ngx-room-selector',
|
||||||
templateUrl: './room-selector.component.html',
|
templateUrl: './room-selector.component.html',
|
||||||
styleUrls: ['./room-selector.component.scss'],
|
styleUrls: ['./room-selector.component.scss'],
|
||||||
})
|
})
|
||||||
export class RoomSelectorComponent implements OnInit, OnDestroy {
|
export class RoomSelectorComponent {
|
||||||
|
|
||||||
private destroy$ = new Subject<void>();
|
|
||||||
private hideGrid: boolean;
|
|
||||||
|
|
||||||
@Output() select: EventEmitter<number> = new EventEmitter();
|
@Output() select: EventEmitter<number> = new EventEmitter();
|
||||||
|
|
||||||
selectedRoom = null;
|
selectedRoom = null;
|
||||||
|
|
@ -66,35 +59,10 @@ export class RoomSelectorComponent implements OnInit, OnDestroy {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
@HostBinding('style.background')
|
constructor(private location: Location, private locationStrategy: LocationStrategy) {
|
||||||
get background(): 'none' | null {
|
|
||||||
return this.hideGrid ? 'none' : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private location: Location,
|
|
||||||
private locationStrategy: LocationStrategy,
|
|
||||||
private themeService: NbThemeService,
|
|
||||||
) {
|
|
||||||
this.selectRoom('2');
|
this.selectRoom('2');
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.hideGrid = this.themeService.currentTheme === 'corporate';
|
|
||||||
|
|
||||||
this.themeService.onThemeChange()
|
|
||||||
.pipe(
|
|
||||||
map(({ name }) => name === 'corporate'),
|
|
||||||
takeUntil(this.destroy$),
|
|
||||||
)
|
|
||||||
.subscribe((hideGrid: boolean) => this.hideGrid = hideGrid);
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
this.destroy$.next();
|
|
||||||
this.destroy$.complete();
|
|
||||||
}
|
|
||||||
|
|
||||||
private sortRooms() {
|
private sortRooms() {
|
||||||
this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
|
this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
|
||||||
if (a.id === this.selectedRoom) {
|
if (a.id === this.selectedRoom) {
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ export class RoomsComponent implements OnDestroy {
|
||||||
});
|
});
|
||||||
|
|
||||||
this.themeChangeSubscription = this.themeService.onThemeChange()
|
this.themeChangeSubscription = this.themeService.onThemeChange()
|
||||||
.pipe(map(({ name }) => name === 'cosmic' || name === 'dark'))
|
.pipe(map(({ name }) => name === 'material-dark'))
|
||||||
.subscribe((isDark: boolean) => this.isDarkTheme = isDark);
|
.subscribe((isDark: boolean) => this.isDarkTheme = isDark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -120,7 +120,7 @@
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
||||||
<nb-card *ngIf="materialTheme$ | async">
|
<nb-card>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<ngx-material-buttons></ngx-material-buttons>
|
<ngx-material-buttons></ngx-material-buttons>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
|
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
|
||||||
import { Observable } from 'rxjs';
|
|
||||||
import { map } from 'rxjs/operators';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-buttons',
|
selector: 'ngx-buttons',
|
||||||
|
|
@ -9,18 +7,7 @@ import { map } from 'rxjs/operators';
|
||||||
templateUrl: './buttons.component.html',
|
templateUrl: './buttons.component.html',
|
||||||
})
|
})
|
||||||
export class ButtonsComponent {
|
export class ButtonsComponent {
|
||||||
public constructor(private readonly themeService: NbThemeService) {
|
|
||||||
this.materialTheme$ = this.themeService.onThemeChange()
|
|
||||||
.pipe(map(theme => {
|
|
||||||
const themeName: string = theme?.name || '';
|
|
||||||
return themeName.startsWith('material');
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
public readonly materialTheme$: Observable<boolean>;
|
|
||||||
|
|
||||||
public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
|
public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
|
||||||
public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
||||||
public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
|
public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,6 @@
|
||||||
</div>
|
</div>
|
||||||
<input type="password" nbInput fullWidth placeholder="Password">
|
<input type="password" nbInput fullWidth placeholder="Password">
|
||||||
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
||||||
<ng-container *ngIf="!(materialTheme$ | async)">
|
|
||||||
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
|
||||||
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
|
||||||
</ng-container>
|
|
||||||
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
||||||
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
||||||
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
||||||
|
|
@ -87,7 +83,7 @@
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="materialTheme$ | async" class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<ngx-material-inputs></ngx-material-inputs>
|
<ngx-material-inputs></ngx-material-inputs>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,4 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NbThemeService } from '@nebular/theme';
|
|
||||||
import { Observable } from 'rxjs';
|
|
||||||
import { map } from 'rxjs/operators';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-form-inputs',
|
selector: 'ngx-form-inputs',
|
||||||
|
|
@ -9,16 +6,6 @@ import { map } from 'rxjs/operators';
|
||||||
templateUrl: './form-inputs.component.html',
|
templateUrl: './form-inputs.component.html',
|
||||||
})
|
})
|
||||||
export class FormInputsComponent {
|
export class FormInputsComponent {
|
||||||
public constructor(private readonly themeService: NbThemeService) {
|
|
||||||
this.materialTheme$ = this.themeService.onThemeChange()
|
|
||||||
.pipe(map(theme => {
|
|
||||||
const themeName: string = theme?.name || '';
|
|
||||||
return themeName.startsWith('material');
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
public readonly materialTheme$: Observable<boolean>;
|
|
||||||
|
|
||||||
public starRate: number = 2;
|
public starRate: number = 2;
|
||||||
public heartRate: number = 4;
|
public heartRate: number = 4;
|
||||||
public radioGroupValue: string = 'This is value 2';
|
public radioGroupValue: string = 'This is value 2';
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue