mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-21 21:40:49 +02: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
|
|
@ -4,8 +4,6 @@ sudo: false
|
|||
dist: trusty
|
||||
|
||||
node_js:
|
||||
- '8'
|
||||
- '9'
|
||||
- '10'
|
||||
|
||||
branches:
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"preserveSymlinks": true,
|
||||
"rebaseRootRelativeCssUrls": true,
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
|
|
|
|||
12
browserslist
Normal file
12
browserslist
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
IE 11
|
||||
7548
package-lock.json
generated
7548
package-lock.json
generated
File diff suppressed because it is too large
Load diff
57
package.json
57
package.json
|
|
@ -9,11 +9,6 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/akveo/ngx-admin/issues"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"IE 11"
|
||||
],
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"conventional-changelog": "conventional-changelog",
|
||||
|
|
@ -35,27 +30,26 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@agm/core": "^1.0.0-beta.5",
|
||||
"@angular/animations": "^7.2.11",
|
||||
"@angular/cdk": "^7.3.6",
|
||||
"@angular/common": "^7.2.11",
|
||||
"@angular/compiler": "^7.2.11",
|
||||
"@angular/core": "^7.2.11",
|
||||
"@angular/forms": "^7.2.11",
|
||||
"@angular/http": "^7.2.11",
|
||||
"@angular/platform-browser": "^7.2.11",
|
||||
"@angular/platform-browser-dynamic": "^7.2.11",
|
||||
"@angular/router": "^7.2.11",
|
||||
"@angular/animations": "^8.0.0",
|
||||
"@angular/cdk": "^8.0.0",
|
||||
"@angular/common": "^8.0.0",
|
||||
"@angular/compiler": "^8.0.0",
|
||||
"@angular/core": "^8.0.0",
|
||||
"@angular/forms": "^8.0.0",
|
||||
"@angular/platform-browser": "^8.0.0",
|
||||
"@angular/platform-browser-dynamic": "^8.0.0",
|
||||
"@angular/router": "^8.0.0",
|
||||
"@asymmetrik/ngx-leaflet": "3.0.1",
|
||||
"@nebular/auth": "3.4.2",
|
||||
"@nebular/bootstrap": "3.4.2",
|
||||
"@nebular/security": "3.4.2",
|
||||
"@nebular/theme": "3.4.2",
|
||||
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
|
||||
"@nebular/auth": "4.1.0",
|
||||
"@nebular/bootstrap": "4.1.0",
|
||||
"@nebular/eva-icons": "4.1.0",
|
||||
"@nebular/security": "4.1.0",
|
||||
"@nebular/theme": "4.1.0",
|
||||
"@swimlane/ngx-charts": "^10.0.0",
|
||||
"angular-tree-component": "7.2.0",
|
||||
"angular2-chartjs": "0.4.1",
|
||||
"angular2-toaster": "^7.0.0",
|
||||
"bootstrap": "4.0.0",
|
||||
"bootstrap": "4.3.1",
|
||||
"chart.js": "2.7.1",
|
||||
"ckeditor": "4.7.3",
|
||||
"classlist.js": "1.1.20150312",
|
||||
|
|
@ -70,23 +64,24 @@
|
|||
"ng2-completer": "2.0.8",
|
||||
"ng2-smart-table": "1.3.5",
|
||||
"ngx-echarts": "^4.0.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"normalize.css": "6.0.0",
|
||||
"pace-js": "1.0.2",
|
||||
"roboto-fontface": "0.8.0",
|
||||
"rxjs": "6.4.0",
|
||||
"rxjs": "6.5.2",
|
||||
"rxjs-compat": "6.3.0",
|
||||
"socicon": "3.0.5",
|
||||
"tinymce": "4.5.7",
|
||||
"tslib": "^1.9.0",
|
||||
"typeface-exo": "0.0.22",
|
||||
"web-animations-js": "2.2.5",
|
||||
"zone.js": "^0.8.29"
|
||||
"web-animations-js": "github:angular/web-animations-js#release_pr208",
|
||||
"zone.js": "~0.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "0.12.1",
|
||||
"@angular/compiler-cli": "^7.2.11",
|
||||
"@angular/cli": "^7.3.7",
|
||||
"@angular/language-service": "7.2.11",
|
||||
"@angular-devkit/build-angular": "~0.800.2",
|
||||
"@angular/cli": "^8.0.2",
|
||||
"@angular/compiler-cli": "^8.0.0",
|
||||
"@angular/language-service": "8.0.0",
|
||||
"@compodoc/compodoc": "1.0.1",
|
||||
"@fortawesome/fontawesome-free": "^5.2.0",
|
||||
"@types/d3-color": "1.0.5",
|
||||
|
|
@ -95,7 +90,7 @@
|
|||
"@types/jasminewd2": "2.0.3",
|
||||
"@types/leaflet": "1.2.3",
|
||||
"@types/node": "6.0.90",
|
||||
"codelyzer": "^4.5.0",
|
||||
"codelyzer": "^5.0.1",
|
||||
"conventional-changelog-cli": "1.3.4",
|
||||
"husky": "0.13.3",
|
||||
"jasmine-core": "2.6.4",
|
||||
|
|
@ -111,8 +106,8 @@
|
|||
"rimraf": "2.6.1",
|
||||
"stylelint": "7.13.0",
|
||||
"ts-node": "3.2.2",
|
||||
"tslint": "5.7.0",
|
||||
"tslint": "^5.7.0",
|
||||
"tslint-language-service": "^0.9.9",
|
||||
"typescript": "3.2.4"
|
||||
"typescript": "3.4.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,17 +56,17 @@ const socialLinks = [
|
|||
{
|
||||
url: 'https://github.com/akveo/nebular',
|
||||
target: '_blank',
|
||||
icon: 'socicon-github',
|
||||
icon: 'github',
|
||||
},
|
||||
{
|
||||
url: 'https://www.facebook.com/akveo/',
|
||||
target: '_blank',
|
||||
icon: 'socicon-facebook',
|
||||
icon: 'facebook',
|
||||
},
|
||||
{
|
||||
url: 'https://twitter.com/akveo_inc',
|
||||
target: '_blank',
|
||||
icon: 'socicon-twitter',
|
||||
icon: 'twitter',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -31,10 +31,8 @@ export class TrafficListService extends TrafficListData {
|
|||
private getDataMonth(): TrafficList[] {
|
||||
const getFirstDateInPeriod = () => {
|
||||
const months = this.period.getMonths();
|
||||
const date = new Date();
|
||||
const prevYear = date.getFullYear() - 1;
|
||||
|
||||
return `${months[months.length - 1]}, ${prevYear}`;
|
||||
return months[months.length - 1];
|
||||
};
|
||||
|
||||
return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@ import {
|
|||
} from '@nebular/auth';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
|
||||
{
|
||||
path: 'pages',
|
||||
loadChildren: () => import('app/pages/pages.module')
|
||||
.then(m => m.PagesModule),
|
||||
},
|
||||
{
|
||||
path: 'auth',
|
||||
component: NbAuthComponent,
|
||||
|
|
@ -46,7 +50,7 @@ const routes: Routes = [
|
|||
];
|
||||
|
||||
const config: ExtraOptions = {
|
||||
useHash: true,
|
||||
useHash: false,
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -3,17 +3,23 @@
|
|||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
import { APP_BASE_HREF } from '@angular/common';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { CoreModule } from './@core/core.module';
|
||||
|
||||
import { ThemeModule } from './@theme/theme.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { ThemeModule } from './@theme/theme.module';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import {
|
||||
NbChatModule,
|
||||
NbDatepickerModule,
|
||||
NbDialogModule,
|
||||
NbMenuModule,
|
||||
NbSidebarModule,
|
||||
NbToastrModule,
|
||||
NbWindowModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
|
|
@ -23,14 +29,20 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
|||
HttpClientModule,
|
||||
AppRoutingModule,
|
||||
|
||||
NgbModule.forRoot(),
|
||||
ThemeModule.forRoot(),
|
||||
|
||||
NbSidebarModule.forRoot(),
|
||||
NbMenuModule.forRoot(),
|
||||
NbDatepickerModule.forRoot(),
|
||||
NbDialogModule.forRoot(),
|
||||
NbWindowModule.forRoot(),
|
||||
NbToastrModule.forRoot(),
|
||||
NbChatModule.forRoot({
|
||||
messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
|
||||
}),
|
||||
CoreModule.forRoot(),
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
providers: [
|
||||
{ provide: APP_BASE_HREF, useValue: '/' },
|
||||
],
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { BootstrapComponent } from './bootstrap.component';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: BootstrapComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'inputs',
|
||||
component: FormInputsComponent,
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
},
|
||||
{
|
||||
path: 'modal',
|
||||
component: ModalsComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class BootstrapRoutingModule { }
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
|
||||
import { BootstrapRoutingModule } from './bootstrap-routing.module';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { ModalComponent } from './modals/modal/modal.component';
|
||||
import { BootstrapComponent } from './bootstrap.component';
|
||||
import { ButtonsModule } from './buttons/buttons.module';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
|
||||
const COMPONENTS = [
|
||||
BootstrapComponent,
|
||||
ModalsComponent,
|
||||
ModalComponent,
|
||||
FormInputsComponent,
|
||||
];
|
||||
|
||||
const ENTRY_COMPONENTS = [
|
||||
ModalComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
BootstrapRoutingModule,
|
||||
ButtonsModule,
|
||||
],
|
||||
declarations: [
|
||||
...COMPONENTS,
|
||||
],
|
||||
entryComponents: [
|
||||
...ENTRY_COMPONENTS,
|
||||
],
|
||||
})
|
||||
export class BootstrapModule { }
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Block Level Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row block-level-buttons">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group btn-group-full-width" role="group">
|
||||
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
|
||||
<i class="nb-home"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Icon Block Button</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-block-level-buttons',
|
||||
templateUrl: './block-level-buttons.component.html',
|
||||
})
|
||||
export class BlockLevelButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="example-container toggle-types">
|
||||
<div class="container-title">Toggle Types</div>
|
||||
<div [(ngModel)]="radioModel" ngbRadioGroup
|
||||
class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="right"> Right
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container toolbars-container">
|
||||
<div class="pagination-container">
|
||||
<div class="container-title">Pagination</div>
|
||||
<div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
|
||||
[(ngModel)]="paginationModel" ngbRadioGroup>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="1"> 1
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="2"> 2
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="3"> 3
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="4"> 4
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="5"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icon-toolbar-container">
|
||||
<div class="container-title">Icon Toolbar</div>
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title divided-button-group">Divided Button Group</div>
|
||||
<div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
|
||||
data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
|
||||
class="nb-arrow-thin-down"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
|
||||
class="nb-arrow-thin-up"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
|
||||
class="nb-arrow-thin-right"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
|
||||
class="nb-arrow-right"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title">Divided Button Group</div>
|
||||
<div class="row">
|
||||
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
|
||||
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.left"
|
||||
[class.focus]="dividedButtonGroupTwo.left">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.middle"
|
||||
[class.focus]="dividedButtonGroupTwo.middle">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.right"
|
||||
[class.focus]="dividedButtonGroupTwo.right">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
.toolbars-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
.btn-group > .btn {
|
||||
padding-left: 1.125rem;
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-toolbar-container {
|
||||
.btn-group > .btn {
|
||||
padding-left: 1.125rem;
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-types {
|
||||
.btn-toggle-radio-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.divided-button-group {
|
||||
.btn-divided-checkbox-group {
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.example-container > div {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container > .btn-divided-checkbox-group {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> label {
|
||||
flex-basis: 10%;
|
||||
@include nb-ltr(margin, 0 0.25rem 0.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 0.5rem 0.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.btn {
|
||||
padding: 0.75rem 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-button-groups',
|
||||
styleUrls: ['./button-groups.component.scss'],
|
||||
templateUrl: './button-groups.component.html',
|
||||
})
|
||||
export class ButtonGroupsComponent {
|
||||
|
||||
radioModel = 'left';
|
||||
|
||||
checkboxModel = {
|
||||
left: false,
|
||||
middle: false,
|
||||
right: false,
|
||||
};
|
||||
|
||||
dividedCheckboxModel = {
|
||||
monday: true,
|
||||
tuesday: true,
|
||||
wednesday: false,
|
||||
thursday: false,
|
||||
friday: false,
|
||||
saturday: false,
|
||||
};
|
||||
|
||||
paginationModel = 1;
|
||||
|
||||
iconToolbarModel = {
|
||||
one: false,
|
||||
two: false,
|
||||
three: true,
|
||||
four: false,
|
||||
five: false,
|
||||
};
|
||||
|
||||
dividedButtonGroupOne = 'left';
|
||||
|
||||
dividedButtonGroupTwo = {
|
||||
left: false,
|
||||
middle: false,
|
||||
right: false,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ngx-hero-buttons></ngx-hero-buttons>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5">
|
||||
<ngx-dropdown-buttons></ngx-dropdown-buttons>
|
||||
<ngx-icon-buttons></ngx-icon-buttons>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<ngx-button-groups></ngx-button-groups>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-size-buttons></ngx-size-buttons>
|
||||
<ngx-default-buttons></ngx-default-buttons>
|
||||
<ngx-block-level-buttons></ngx-block-level-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ {
|
||||
$button-size: 50px;
|
||||
|
||||
.container-title {
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: nb-theme(color-fg-header);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 0.75rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.state-container {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.state-value {
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: nb-theme(btn-border-radius);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(btn-semi-round-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
height: $button-size;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
@include nb-ltr(padding-right, 0);
|
||||
@include nb-rtl(padding-left, 0);
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.block-level-buttons .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
|
||||
span {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
/deep/.icon-buttons .icon-button-examples {
|
||||
button {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ngx-block-level-buttons /deep/ {
|
||||
.btn-primary {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-buttons',
|
||||
styleUrls: ['./buttons.component.scss'],
|
||||
templateUrl: './buttons.component.html',
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../../@theme/theme.module';
|
||||
import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
|
||||
import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
|
||||
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
|
||||
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
|
||||
import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
|
||||
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
|
||||
import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
DropdownButtonsComponent,
|
||||
BlockLevelButtonsComponent,
|
||||
ButtonGroupsComponent,
|
||||
IconButtonsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
providers: [],
|
||||
})
|
||||
export class ButtonsModule { }
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<span>Default Buttons</span>
|
||||
<div class="dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
{{ selectedView.title }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
|
||||
<div class="container-title">
|
||||
<span>{{ b.containerTitle }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
|
||||
</div>
|
||||
<div class="{{ b.container }}">
|
||||
<div class="state-container">
|
||||
<div class="state-value original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">{{ b.default }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">14% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">14% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.dropdown {
|
||||
flex-basis: 30%;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-primary-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-primary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-primary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.primary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-primary-bg);
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-success-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-success-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-success-active();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-success-bg);
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-warning-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-warning-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-warning-active();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-warning-bg);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-info-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-info-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-info-active();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-info-bg);
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-danger-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-danger-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-danger-active();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-danger-bg);
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.original {
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.hover {
|
||||
@include btn-secondary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-secondary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-buttons',
|
||||
styleUrls: ['./default-buttons.component.scss'],
|
||||
templateUrl: './default-buttons.component.html',
|
||||
})
|
||||
export class DefaultButtonsComponent {
|
||||
|
||||
buttonsViews = [{
|
||||
title: 'Default Buttons',
|
||||
key: 'default',
|
||||
}, {
|
||||
title: 'Outline Buttons',
|
||||
key: 'outline',
|
||||
}];
|
||||
|
||||
selectedView = this.buttonsViews[0];
|
||||
|
||||
buttons = {
|
||||
'default': [
|
||||
{
|
||||
class: 'btn-primary',
|
||||
container: 'primary-container',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
}, {
|
||||
class: 'btn-warning',
|
||||
container: 'warning-container',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
}, {
|
||||
class: 'btn-success',
|
||||
container: 'success-container',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
}, {
|
||||
class: 'btn-info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
}, {
|
||||
class: 'btn-danger',
|
||||
container: 'danger-container',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
}, {
|
||||
class: 'btn-secondary',
|
||||
container: 'secondary-container',
|
||||
containerTitle: 'Default Button',
|
||||
title: 'Default',
|
||||
default: '#bdbaff',
|
||||
},
|
||||
],
|
||||
|
||||
'outline': [
|
||||
{
|
||||
class: 'btn-outline-primary',
|
||||
container: 'primary-container outline',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
}, {
|
||||
class: 'btn-outline-warning',
|
||||
container: 'warning-container outline',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
}, {
|
||||
class: 'btn-outline-success',
|
||||
container: 'success-container outline',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
}, {
|
||||
class: 'btn-outline-info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
}, {
|
||||
class: 'btn-outline-danger',
|
||||
container: 'danger-container outline',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
}, {
|
||||
class: 'btn-outline-secondary',
|
||||
container: 'secondary-container outline',
|
||||
containerTitle: 'Default Button',
|
||||
title: 'Default',
|
||||
default: '#bdbaff',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Dropdowns</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="dropdown btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary">Dropdown</button>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle></button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown" placement="top" ngbDropdown>
|
||||
<button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
|
||||
Dropup
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown ghost-dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
text-align: center;
|
||||
|
||||
.dropdown, .dropup, .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dropdown-buttons',
|
||||
styleUrls: ['./dropdown-button.component.scss'],
|
||||
templateUrl: './dropdown-button.component.html',
|
||||
})
|
||||
|
||||
export class DropdownButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Hero Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
|
||||
<div class="container-title">
|
||||
<span>{{ hb.title }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
|
||||
</div>
|
||||
<div class="{{ hb.container }}">
|
||||
<div class="state-container" *ngIf="hb[themeName].border">
|
||||
<div class="state-value border"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Border</span>
|
||||
<span class="subheader">{{ hb[themeName].border }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].color">
|
||||
<div class="state-value color"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Color</span>
|
||||
<span class="subheader">{{ hb[themeName].color }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
|
||||
<div class="state-value gradient"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Linear Gradient</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientLeft }}</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientRight }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].bevel">
|
||||
<span class="header">Bevel</span>
|
||||
<span class="subheader">0 3px 0 0</span>
|
||||
<span class="subheader">{{ hb[themeName].bevel }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].bevel">
|
||||
<span class="header">No Bevel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].shadow">
|
||||
<span class="header">Shadow</span>
|
||||
<span class="subheader">0 4px 10px 0</span>
|
||||
<span class="subheader">{{ hb[themeName].shadow }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].shadow">
|
||||
<span class="header">No Shadow</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].glow">
|
||||
<span class="header">Glow</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.params }}</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.color }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].glow">
|
||||
<span class="header">No Glow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.none {
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: nb-theme(form-control-border-color);
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translateX(-50%);
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform: translateY(-50%);
|
||||
height: 1px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: nb-theme(btn-hero-shadow);
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-primary-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-primary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-warning);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-warning-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-warning-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-warning-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-success);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-success-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-success-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-success-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-info);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-info-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-info-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-info-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-danger);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-danger-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-danger-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-danger-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.color {
|
||||
background-color: nb-theme(btn-secondary-bg);
|
||||
}
|
||||
.border {
|
||||
color: nb-theme(btn-secondary-color);
|
||||
border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-secondary-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-secondary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
styleUrls: ['./hero-buttons.component.scss'],
|
||||
templateUrl: './hero-buttons.component.html',
|
||||
})
|
||||
export class HeroButtonComponent implements OnDestroy {
|
||||
|
||||
themeName = 'default';
|
||||
settings: Array<any>;
|
||||
themeSubscription: Subscription;
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
|
||||
this.themeName = theme.name;
|
||||
this.init(theme.variables);
|
||||
});
|
||||
}
|
||||
|
||||
init(colors: any) {
|
||||
this.settings = [{
|
||||
class: 'btn-hero-primary',
|
||||
container: 'primary-container',
|
||||
title: 'Primary Button',
|
||||
buttonTitle: 'Primary',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.primary,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (115, 161, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
bevel: `shade(${colors.primary}, 14%)`,
|
||||
shadow: 'rgba (6, 7, 64, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.primary}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-warning',
|
||||
container: 'warning-container',
|
||||
title: 'Warning Button',
|
||||
buttonTitle: 'Warning',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.warning,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (256, 163, 107, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
bevel: `shade(${colors.warning}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.warning}, 5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-success',
|
||||
container: 'success-container',
|
||||
title: 'Success Button',
|
||||
buttonTitle: 'Success',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.success,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (93, 207, 227, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
bevel: `shade(${colors.success}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.success}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-info',
|
||||
container: 'info-container',
|
||||
title: 'Info Button',
|
||||
buttonTitle: 'Info',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.info,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (186, 127, 236, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
bevel: `shade(${colors.info}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.info}, -5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-danger',
|
||||
container: 'danger-container',
|
||||
title: 'Danger Button',
|
||||
buttonTitle: 'Danger',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.danger,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (255, 107, 131, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
bevel: `shade(${colors.danger}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.danger}, -10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-secondary',
|
||||
container: 'secondary-container',
|
||||
title: 'Ghost Button',
|
||||
buttonTitle: 'Ghost',
|
||||
default: {
|
||||
border: '#dadfe6',
|
||||
},
|
||||
corporate: {
|
||||
color: '#edf2f5',
|
||||
},
|
||||
cosmic: {
|
||||
border: colors.primary,
|
||||
bevel: '#665ebd',
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: 'rgba (146, 141, 255, 1)',
|
||||
},
|
||||
},
|
||||
}];
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Icon buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row icon-buttons">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
|
||||
<i class="nb-home"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Icon Button</button>
|
||||
</div>
|
||||
<div class="btn-with-icon-example">
|
||||
<button type="button" class="btn btn-primary btn-with-icon">
|
||||
<i class="nb-home"></i>
|
||||
<span>Icon Button</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="icon-button-examples">
|
||||
<button type="button" class="btn btn-outline-primary btn-icon">
|
||||
<i class="nb-layout-centre"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success btn-icon">
|
||||
<i class="nb-layout-default"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-icon">
|
||||
<i class="nb-layout-one-column"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="icon-button-examples">
|
||||
<button type="button" class="btn btn-primary btn-icon">
|
||||
<i class="nb-shuffle"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-icon">
|
||||
<i class="nb-skip-backward-outline"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon">
|
||||
<i class="nb-skip-forward-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
nb-card-body {
|
||||
div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-with-icon-example {
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.icon-button-examples {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
min-width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button-examples:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-icon-buttons',
|
||||
styleUrls: ['./icon-buttons.component.scss'],
|
||||
templateUrl: './icon-buttons.component.html',
|
||||
})
|
||||
export class IconButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Shapes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>4px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Semi-round Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>12px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-semi-round btn-demo">Semi-round</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rounded Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>round</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-round btn-demo">Round</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 0 29px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.shape-container {
|
||||
margin: 1.25rem 1.25rem 0;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-shape-buttons',
|
||||
styleUrls: ['./shape-buttons.component.scss'],
|
||||
templateUrl: './shape-buttons.component.html',
|
||||
})
|
||||
export class ShapeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Sizes</nb-card-header>
|
||||
|
||||
<nb-card-body>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Large Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.875rem 1.75rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-lg">Large Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Medium Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.75rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-md">Medium Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.675rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>X-Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.5rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-xs">X-Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 1.25rem 1.25rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.size-container {
|
||||
margin: 1.25rem 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-size-buttons',
|
||||
styleUrls: ['./size-buttons.component.scss'],
|
||||
templateUrl: './size-buttons.component.html',
|
||||
})
|
||||
export class SizeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Default Inputs</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Project" class="form-control"/>
|
||||
</div>
|
||||
<div class="row full-name-inputs">
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" placeholder="Nick" class="form-control"/>
|
||||
</div>
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" placeholder="Last Name" class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="password" placeholder="Password" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group has-person-icon">
|
||||
<input type="text" placeholder="With Icon" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group input-group-rounded">
|
||||
<input type="text" placeholder="Rounded border" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Project" class="form-control"/>
|
||||
<small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
|
||||
</small>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Disabled input" class="form-control" disabled/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" placeholder="Small Input" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" placeholder="Large Input" class="form-control"/>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Input Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon success">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username"/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mail-btn-group">
|
||||
<span class="input-group-prepend">
|
||||
<button class="btn btn-primary btn-icon input-group-text">
|
||||
<i class="ion-ios-email-outline"></i>
|
||||
</button>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Recipient's username">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary input-group-text">
|
||||
@example.com
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-danger input-group-text">
|
||||
Search
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="dropdown input-group-prepend input-group-btn" ngbDropdown>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Action</li>
|
||||
<li class="dropdown-item">Another action</li>
|
||||
<li class="dropdown-item">Something else here</li>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<li class="dropdown-item">Separated link</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Selects</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<label>Simple Select</label>
|
||||
<select class="form-control">
|
||||
<option>Minsk</option>
|
||||
<option>Gomel</option>
|
||||
<option>Brest</option>
|
||||
<option>Grodno</option>
|
||||
<option>Mogilev</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Multiple Select</label>
|
||||
<select multiple class="form-control">
|
||||
<option>Item 1</option>
|
||||
<option>Item 2</option>
|
||||
<option>Item 3</option>
|
||||
<option>Item 4</option>
|
||||
<option>Item 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<nb-card>
|
||||
<nb-card-header>Input Styles</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group input-group-border-only">
|
||||
<input type="text" placeholder="Border Only" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Default Input" class="form-control">
|
||||
</div>
|
||||
<div class="input-group input-group-fill-only">
|
||||
<input type="text" placeholder="Fill Only" class="form-control">
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Validation States</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Success" class="form-control form-control-success">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
|
||||
</div>
|
||||
<div class="form-group validation-checkboxes row">
|
||||
<nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
|
||||
<nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
|
||||
<nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
|
||||
</div>
|
||||
<div class="form-group has-success">
|
||||
<input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Checkboxes & Radios</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row demo-checkboxes-radio">
|
||||
<div class="demo-checkboxes col-sm-4">
|
||||
<nb-checkbox>Checkbox 1</nb-checkbox>
|
||||
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="b-checkbox">
|
||||
<label class="custom-control-label" for="b-checkbox">Bootstrap Checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-radio col-sm-4">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" checked>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 3</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="demo-disabled-checkbox-radio col-sm-4">
|
||||
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Disabled Radio</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-body class="demo-rating">
|
||||
<span class="rating-header">Rating</span>
|
||||
<div>
|
||||
<ngb-rating [(rate)]="starRate" max=5>
|
||||
<ng-template let-fill="fill">
|
||||
<span class="star fill" [class.filled]="fill === 100">
|
||||
<i class="ion-android-star" *ngIf="fill === 100"></i>
|
||||
<i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngb-rating>
|
||||
<span class="current-rate">{{ starRate }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ngb-rating [(rate)]="heartRate" max=5>
|
||||
<ng-template let-fill="fill">
|
||||
<span class="star fill" [class.filled]="fill === 100">
|
||||
<i class="ion-ios-heart" *ngIf="fill === 100"></i>
|
||||
<i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngb-rating>
|
||||
<span class="current-rate">{{ heartRate }}</span>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.validation-checkboxes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.custom-control {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-disabled-checkbox-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-checkboxes-radio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demo-rating {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.filled {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
// TODO: Replace with the card header styles mixin
|
||||
.rating-header {
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.current-rate {
|
||||
font-size: 1.5rem;
|
||||
@include nb-ltr(padding-left, 1rem);
|
||||
@include nb-rtl(padding-right, 1rem);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.full-name-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group.has-person-icon {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\F47D';
|
||||
font-family: 'Ionicons';
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 1rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
padding: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
ngb-rating {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ngb-rating i {
|
||||
color: nb-theme(color-success);
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
button:not(.btn-icon) {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-form-inputs',
|
||||
styleUrls: ['./form-inputs.component.scss'],
|
||||
templateUrl: './form-inputs.component.html',
|
||||
})
|
||||
export class FormInputsComponent {
|
||||
|
||||
starRate = 2;
|
||||
heartRate = 4;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-modal',
|
||||
template: `
|
||||
<div class="modal-header">
|
||||
<span>{{ modalHeader }}</span>
|
||||
<button class="close" aria-label="Close" (click)="closeModal()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{ modalContent }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ModalComponent {
|
||||
|
||||
modalHeader: string;
|
||||
modalContent = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
|
||||
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
|
||||
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) { }
|
||||
|
||||
closeModal() {
|
||||
this.activeModal.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nb-card>
|
||||
<nb-card-header>Modals</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button class="btn btn-success" (click)="showLargeModal()">Large modal</button>
|
||||
<button class="btn btn-warning" (click)="showSmallModal()">Small modal</button>
|
||||
<button class="btn btn-primary" (click)="showStaticModal()">Static modal</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
:host {
|
||||
button {
|
||||
@include nb-ltr(margin, 0 0.75rem 2rem 0);
|
||||
@include nb-rtl(margin, 0 0 2rem 0.75rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { ModalComponent } from './modal/modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-modals',
|
||||
styleUrls: ['./modals.component.scss'],
|
||||
templateUrl: './modals.component.html',
|
||||
})
|
||||
export class ModalsComponent {
|
||||
|
||||
constructor(private modalService: NgbModal) { }
|
||||
|
||||
showLargeModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Large Modal';
|
||||
}
|
||||
showSmallModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Small Modal';
|
||||
}
|
||||
|
||||
showStaticModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, {
|
||||
size: 'sm',
|
||||
backdrop: 'static',
|
||||
container: 'nb-layout',
|
||||
});
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Static modal';
|
||||
activeModal.componentInstance.modalContent = `This is static modal, backdrop click
|
||||
will not close it. Click × or confirmation button to close modal.`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
height: nb-theme(card-height-medium);
|
||||
width: 100%;
|
||||
|
||||
/deep/ chart {
|
||||
::ng-deep chart {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
|
|||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
import { ChartModule } from 'angular2-chartjs';
|
||||
import { NbCardModule } from '@nebular/theme';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
|
||||
|
|
@ -49,7 +50,14 @@ const components = [
|
|||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [ThemeModule, ChartsRoutingModule, NgxEchartsModule, NgxChartsModule, ChartModule],
|
||||
imports: [
|
||||
ThemeModule,
|
||||
ChartsRoutingModule,
|
||||
NgxEchartsModule,
|
||||
NgxChartsModule,
|
||||
ChartModule,
|
||||
NbCardModule,
|
||||
],
|
||||
declarations: [...routedComponents, ...components],
|
||||
})
|
||||
export class ChartsModule {}
|
||||
|
|
|
|||
|
|
@ -11,30 +11,36 @@
|
|||
width: 100%;
|
||||
height: nb-theme(card-height-medium);
|
||||
|
||||
/deep/ {
|
||||
::ng-deep {
|
||||
.pie-label {
|
||||
fill: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.grid-line-path {
|
||||
stroke: nb-theme(separator);
|
||||
fill: nb-theme(text-basic-color);
|
||||
}
|
||||
|
||||
text {
|
||||
fill: nb-theme(color-fg-heading);
|
||||
fill: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
.legend-labels {
|
||||
background: nb-theme(color-bg);
|
||||
background: nb-theme(background-basic-color-2);
|
||||
}
|
||||
.legend-label {
|
||||
color: nb-theme(color-fg-heading);
|
||||
color: nb-theme(text-hint-color);
|
||||
.active .legend-label-text {
|
||||
color: nb-theme(color-fg-heading);
|
||||
color: nb-theme(text-basic-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-value,
|
||||
.item-value,
|
||||
.item-percent {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.legend-items {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .echart {
|
||||
::ng-deep .echart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,23 @@
|
|||
<nb-card [size]="breakpoint.width >= breakpoints.xxxl || breakpoint.width < breakpoints.md ? 'large' : 'xlarge'">
|
||||
<nb-card size="giant">
|
||||
<nb-tabset fullWidth>
|
||||
|
||||
<nb-tab tabTitle="Contacts">
|
||||
<div class="contact" *ngFor="let c of contacts">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<i class="i-contact nb-phone"></i>
|
||||
</div>
|
||||
<nb-list>
|
||||
<nb-list-item class="contact" *ngFor="let c of contacts">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
|
||||
<nb-tab tabTitle="Recent">
|
||||
<div class="contact" *ngFor="let c of recent">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<span class="time">{{ c.time | date: 'shortTime' }}</span>
|
||||
</div>
|
||||
<nb-list>
|
||||
<nb-list-item class="contact" *ngFor="let c of recent">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,24 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nb-tabset {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
::ng-deep ul {
|
||||
// make same size as card header
|
||||
padding-bottom: 1px;
|
||||
::ng-deep .tab-link {
|
||||
padding: 1.25rem 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -18,50 +26,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: nb-theme(color-fg);
|
||||
padding: 1rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-bottom-color: nb-theme(tabs-separator);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.i-contact {
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
nb-user /deep/ {
|
||||
.info-container {
|
||||
@include nb-ltr(margin-left, 0.875rem);
|
||||
@include nb-rtl(margin-right, 0.875rem);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-size: 1.25rem;
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
}
|
||||
|
||||
.user-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { forkJoin } from 'rxjs';
|
||||
|
||||
|
|
@ -16,19 +15,8 @@ export class ContactsComponent implements OnDestroy {
|
|||
|
||||
contacts: any[];
|
||||
recent: any[];
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
|
||||
constructor(private userService: UserData,
|
||||
private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
});
|
||||
|
||||
constructor(private userService: UserData) {
|
||||
forkJoin(
|
||||
this.userService.getContacts(),
|
||||
this.userService.getRecentUsers(),
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
|
||||
<ngx-status-card [title]="statusCard.title"
|
||||
[type]="statusCard.type">
|
||||
<ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
|
||||
<i [ngClass]="statusCard.iconClass"></i>
|
||||
</ngx-status-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,4 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
/deep/ nb-card.large-card {
|
||||
height: nb-theme(card-height-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export class DashboardComponent implements OnDestroy {
|
|||
default: CardSettings[];
|
||||
cosmic: CardSettings[];
|
||||
corporate: CardSettings[];
|
||||
dark: CardSettings[];
|
||||
} = {
|
||||
default: this.commonStatusCardsSet,
|
||||
cosmic: this.commonStatusCardsSet,
|
||||
|
|
@ -71,9 +72,10 @@ export class DashboardComponent implements OnDestroy {
|
|||
},
|
||||
{
|
||||
...this.coffeeMakerCard,
|
||||
type: 'secondary',
|
||||
type: 'info',
|
||||
},
|
||||
],
|
||||
dark: this.commonStatusCardsSet,
|
||||
};
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
|
|
@ -10,7 +20,6 @@ import { RoomsComponent } from './rooms/rooms.component';
|
|||
import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
|
||||
import { TemperatureComponent } from './temperature/temperature.component';
|
||||
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
|
||||
import { TeamComponent } from './team/team.component';
|
||||
import { KittenComponent } from './kitten/kitten.component';
|
||||
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
|
||||
import { ElectricityComponent } from './electricity/electricity.component';
|
||||
|
|
@ -20,10 +29,22 @@ import { SolarComponent } from './solar/solar.component';
|
|||
import { PlayerComponent } from './rooms/player/player.component';
|
||||
import { TrafficComponent } from './traffic/traffic.component';
|
||||
import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
FormsModule,
|
||||
ThemeModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbTabsetModule,
|
||||
NbActionsModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
NbButtonModule,
|
||||
NgxEchartsModule,
|
||||
],
|
||||
declarations: [
|
||||
|
|
@ -34,7 +55,6 @@ import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
|||
RoomSelectorComponent,
|
||||
TemperatureComponent,
|
||||
RoomsComponent,
|
||||
TeamComponent,
|
||||
KittenComponent,
|
||||
SecurityCamerasComponent,
|
||||
ElectricityComponent,
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
|
|||
position: 'top',
|
||||
backgroundColor: eTheme.tooltipBg,
|
||||
borderColor: eTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: '{c0} kWh',
|
||||
extraCssText: eTheme.tooltipExtraCss,
|
||||
},
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue