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
|
dist: trusty
|
||||||
|
|
||||||
node_js:
|
node_js:
|
||||||
- '8'
|
|
||||||
- '9'
|
|
||||||
- '10'
|
- '10'
|
||||||
|
|
||||||
branches:
|
branches:
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
"builder": "@angular-devkit/build-angular:browser",
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
"options": {
|
"options": {
|
||||||
"preserveSymlinks": true,
|
"preserveSymlinks": true,
|
||||||
|
"rebaseRootRelativeCssUrls": true,
|
||||||
"outputPath": "dist",
|
"outputPath": "dist",
|
||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"main": "src/main.ts",
|
"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
|
||||||
7530
package-lock.json
generated
7530
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": {
|
"bugs": {
|
||||||
"url": "https://github.com/akveo/ngx-admin/issues"
|
"url": "https://github.com/akveo/ngx-admin/issues"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
|
||||||
"> 1%",
|
|
||||||
"last 2 versions",
|
|
||||||
"IE 11"
|
|
||||||
],
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
"conventional-changelog": "conventional-changelog",
|
"conventional-changelog": "conventional-changelog",
|
||||||
|
|
@ -35,27 +30,26 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@agm/core": "^1.0.0-beta.5",
|
"@agm/core": "^1.0.0-beta.5",
|
||||||
"@angular/animations": "^7.2.11",
|
"@angular/animations": "^8.0.0",
|
||||||
"@angular/cdk": "^7.3.6",
|
"@angular/cdk": "^8.0.0",
|
||||||
"@angular/common": "^7.2.11",
|
"@angular/common": "^8.0.0",
|
||||||
"@angular/compiler": "^7.2.11",
|
"@angular/compiler": "^8.0.0",
|
||||||
"@angular/core": "^7.2.11",
|
"@angular/core": "^8.0.0",
|
||||||
"@angular/forms": "^7.2.11",
|
"@angular/forms": "^8.0.0",
|
||||||
"@angular/http": "^7.2.11",
|
"@angular/platform-browser": "^8.0.0",
|
||||||
"@angular/platform-browser": "^7.2.11",
|
"@angular/platform-browser-dynamic": "^8.0.0",
|
||||||
"@angular/platform-browser-dynamic": "^7.2.11",
|
"@angular/router": "^8.0.0",
|
||||||
"@angular/router": "^7.2.11",
|
|
||||||
"@asymmetrik/ngx-leaflet": "3.0.1",
|
"@asymmetrik/ngx-leaflet": "3.0.1",
|
||||||
"@nebular/auth": "3.4.2",
|
"@nebular/auth": "4.1.0",
|
||||||
"@nebular/bootstrap": "3.4.2",
|
"@nebular/bootstrap": "4.1.0",
|
||||||
"@nebular/security": "3.4.2",
|
"@nebular/eva-icons": "4.1.0",
|
||||||
"@nebular/theme": "3.4.2",
|
"@nebular/security": "4.1.0",
|
||||||
"@ng-bootstrap/ng-bootstrap": "^4.0.0",
|
"@nebular/theme": "4.1.0",
|
||||||
"@swimlane/ngx-charts": "^10.0.0",
|
"@swimlane/ngx-charts": "^10.0.0",
|
||||||
"angular-tree-component": "7.2.0",
|
"angular-tree-component": "7.2.0",
|
||||||
"angular2-chartjs": "0.4.1",
|
"angular2-chartjs": "0.4.1",
|
||||||
"angular2-toaster": "^7.0.0",
|
"angular2-toaster": "^7.0.0",
|
||||||
"bootstrap": "4.0.0",
|
"bootstrap": "4.3.1",
|
||||||
"chart.js": "2.7.1",
|
"chart.js": "2.7.1",
|
||||||
"ckeditor": "4.7.3",
|
"ckeditor": "4.7.3",
|
||||||
"classlist.js": "1.1.20150312",
|
"classlist.js": "1.1.20150312",
|
||||||
|
|
@ -70,23 +64,24 @@
|
||||||
"ng2-completer": "2.0.8",
|
"ng2-completer": "2.0.8",
|
||||||
"ng2-smart-table": "1.3.5",
|
"ng2-smart-table": "1.3.5",
|
||||||
"ngx-echarts": "^4.0.1",
|
"ngx-echarts": "^4.0.1",
|
||||||
|
"node-sass": "^4.12.0",
|
||||||
"normalize.css": "6.0.0",
|
"normalize.css": "6.0.0",
|
||||||
"pace-js": "1.0.2",
|
"pace-js": "1.0.2",
|
||||||
"roboto-fontface": "0.8.0",
|
"roboto-fontface": "0.8.0",
|
||||||
"rxjs": "6.4.0",
|
"rxjs": "6.5.2",
|
||||||
"rxjs-compat": "6.3.0",
|
"rxjs-compat": "6.3.0",
|
||||||
"socicon": "3.0.5",
|
"socicon": "3.0.5",
|
||||||
"tinymce": "4.5.7",
|
"tinymce": "4.5.7",
|
||||||
"tslib": "^1.9.0",
|
"tslib": "^1.9.0",
|
||||||
"typeface-exo": "0.0.22",
|
"typeface-exo": "0.0.22",
|
||||||
"web-animations-js": "2.2.5",
|
"web-animations-js": "github:angular/web-animations-js#release_pr208",
|
||||||
"zone.js": "^0.8.29"
|
"zone.js": "~0.9.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "0.12.1",
|
"@angular-devkit/build-angular": "~0.800.2",
|
||||||
"@angular/compiler-cli": "^7.2.11",
|
"@angular/cli": "^8.0.2",
|
||||||
"@angular/cli": "^7.3.7",
|
"@angular/compiler-cli": "^8.0.0",
|
||||||
"@angular/language-service": "7.2.11",
|
"@angular/language-service": "8.0.0",
|
||||||
"@compodoc/compodoc": "1.0.1",
|
"@compodoc/compodoc": "1.0.1",
|
||||||
"@fortawesome/fontawesome-free": "^5.2.0",
|
"@fortawesome/fontawesome-free": "^5.2.0",
|
||||||
"@types/d3-color": "1.0.5",
|
"@types/d3-color": "1.0.5",
|
||||||
|
|
@ -95,7 +90,7 @@
|
||||||
"@types/jasminewd2": "2.0.3",
|
"@types/jasminewd2": "2.0.3",
|
||||||
"@types/leaflet": "1.2.3",
|
"@types/leaflet": "1.2.3",
|
||||||
"@types/node": "6.0.90",
|
"@types/node": "6.0.90",
|
||||||
"codelyzer": "^4.5.0",
|
"codelyzer": "^5.0.1",
|
||||||
"conventional-changelog-cli": "1.3.4",
|
"conventional-changelog-cli": "1.3.4",
|
||||||
"husky": "0.13.3",
|
"husky": "0.13.3",
|
||||||
"jasmine-core": "2.6.4",
|
"jasmine-core": "2.6.4",
|
||||||
|
|
@ -111,8 +106,8 @@
|
||||||
"rimraf": "2.6.1",
|
"rimraf": "2.6.1",
|
||||||
"stylelint": "7.13.0",
|
"stylelint": "7.13.0",
|
||||||
"ts-node": "3.2.2",
|
"ts-node": "3.2.2",
|
||||||
"tslint": "5.7.0",
|
"tslint": "^5.7.0",
|
||||||
"tslint-language-service": "^0.9.9",
|
"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',
|
url: 'https://github.com/akveo/nebular',
|
||||||
target: '_blank',
|
target: '_blank',
|
||||||
icon: 'socicon-github',
|
icon: 'github',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: 'https://www.facebook.com/akveo/',
|
url: 'https://www.facebook.com/akveo/',
|
||||||
target: '_blank',
|
target: '_blank',
|
||||||
icon: 'socicon-facebook',
|
icon: 'facebook',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
url: 'https://twitter.com/akveo_inc',
|
url: 'https://twitter.com/akveo_inc',
|
||||||
target: '_blank',
|
target: '_blank',
|
||||||
icon: 'socicon-twitter',
|
icon: 'twitter',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,10 +31,8 @@ export class TrafficListService extends TrafficListData {
|
||||||
private getDataMonth(): TrafficList[] {
|
private getDataMonth(): TrafficList[] {
|
||||||
const getFirstDateInPeriod = () => {
|
const getFirstDateInPeriod = () => {
|
||||||
const months = this.period.getMonths();
|
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);
|
return this.reduceData(this.period.getMonths(), getFirstDateInPeriod);
|
||||||
|
|
|
||||||
|
|
@ -13,11 +13,11 @@
|
||||||
|
|
||||||
a {
|
a {
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
color: nb-theme(color-fg);
|
color: nb-theme(text-hint-color);
|
||||||
transition: color ease-out 0.1s;
|
transition: color ease-out 0.1s;
|
||||||
|
|
||||||
&:hover {
|
&: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',
|
selector: 'ngx-footer',
|
||||||
styleUrls: ['./footer.component.scss'],
|
styleUrls: ['./footer.component.scss'],
|
||||||
template: `
|
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">
|
<div class="socials">
|
||||||
<a href="#" target="_blank" class="ion ion-social-github"></a>
|
<a href="#" target="_blank" class="ion ion-social-github"></a>
|
||||||
<a href="#" target="_blank" class="ion ion-social-facebook"></a>
|
<a href="#" target="_blank" class="ion ion-social-facebook"></a>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,29 @@
|
||||||
<div class="header-container"
|
<div class="header-container">
|
||||||
[class.left]="position === 'normal'"
|
<div class="logo-container">
|
||||||
[class.right]="position === 'inverse'">
|
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
|
||||||
<div class="logo-containter">
|
<nb-icon icon="menu-2-outline"></nb-icon>
|
||||||
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
|
</a>
|
||||||
<div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
|
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
|
<nb-actions size="small">
|
||||||
<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-action class="control-item">
|
<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-action>
|
||||||
</nb-actions>
|
</nb-actions>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,30 @@
|
||||||
@import '../../styles/themes';
|
|
||||||
@import '~bootstrap/scss/mixins/breakpoints';
|
@import '~bootstrap/scss/mixins/breakpoints';
|
||||||
@import '~@nebular/theme/styles/global/breakpoints';
|
@import '~@nebular/theme/styles/global/breakpoints';
|
||||||
|
@import '../../styles/themes';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.left {
|
.logo-container {
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
order: 0;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
order: 1;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-containter {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
|
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-item {
|
nb-action {
|
||||||
display: block;
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
nb-user {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
::ng-deep nb-search button {
|
||||||
|
padding: 0!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-container {
|
.header-container {
|
||||||
|
|
@ -33,179 +32,38 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
.navigation {
|
.sidebar-toggle {
|
||||||
@include nb-ltr(padding-right, nb-theme(padding));
|
@include nb-ltr(padding-right, 1.25rem);
|
||||||
@include nb-rtl(padding-left, nb-theme(padding));
|
@include nb-rtl(padding-left, 1.25rem);
|
||||||
font-size: 2.5rem;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: nb-theme(text-hint-color);
|
||||||
i {
|
nb-icon {
|
||||||
display: block;
|
font-size: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
padding: 0 nb-theme(padding);
|
padding: 0 1.25rem;
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
font-weight: nb-theme(font-weight-bolder);
|
@include nb-ltr(border-left, 1px solid nb-theme(divider-color));
|
||||||
@include nb-ltr(border-left, 1px solid nb-theme(separator));
|
@include nb-rtl(border-right, 1px solid nb-theme(divider-color));
|
||||||
@include nb-rtl(border-right, 1px solid nb-theme(separator));
|
|
||||||
white-space: nowrap;
|
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;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(sm) {
|
@include media-breakpoint-down(sm) {
|
||||||
|
.control-item {
|
||||||
nb-user /deep/ .user-name {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
.user-action {
|
||||||
|
border: 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) {
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(xs) {
|
@include media-breakpoint-down(is) {
|
||||||
.right /deep/ {
|
nb-select {
|
||||||
display: none;
|
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 { UserData } from '../../../@core/data/users';
|
||||||
import { AnalyticsService } from '../../../@core/utils';
|
|
||||||
import { LayoutService } from '../../../@core/utils';
|
import { LayoutService } from '../../../@core/utils';
|
||||||
|
import { map, takeUntil } from 'rxjs/operators';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-header',
|
selector: 'ngx-header',
|
||||||
styleUrls: ['./header.component.scss'],
|
styleUrls: ['./header.component.scss'],
|
||||||
templateUrl: './header.component.html',
|
templateUrl: './header.component.html',
|
||||||
})
|
})
|
||||||
export class HeaderComponent implements OnInit {
|
export class HeaderComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
@Input() position = 'normal';
|
|
||||||
|
|
||||||
|
private destroy$: Subject<void> = new Subject<void>();
|
||||||
|
userPictureOnly: boolean = false;
|
||||||
user: any;
|
user: any;
|
||||||
|
|
||||||
|
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' } ];
|
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
|
||||||
|
|
||||||
constructor(private sidebarService: NbSidebarService,
|
constructor(private sidebarService: NbSidebarService,
|
||||||
private menuService: NbMenuService,
|
private menuService: NbMenuService,
|
||||||
|
private themeService: NbThemeService,
|
||||||
private userService: UserData,
|
private userService: UserData,
|
||||||
private analyticsService: AnalyticsService,
|
private layoutService: LayoutService,
|
||||||
private layoutService: LayoutService) {
|
private breakpointService: NbMediaBreakpointsService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.currentTheme = this.themeService.currentTheme;
|
||||||
|
|
||||||
this.userService.getUsers()
|
this.userService.getUsers()
|
||||||
|
.pipe(takeUntil(this.destroy$))
|
||||||
.subscribe((users: any) => this.user = users.nick);
|
.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 {
|
toggleSidebar(): boolean {
|
||||||
|
|
@ -37,11 +87,8 @@ export class HeaderComponent implements OnInit {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
goToHome() {
|
navigateHome() {
|
||||||
this.menuService.navigateHome();
|
this.menuService.navigateHome();
|
||||||
}
|
return false;
|
||||||
|
|
||||||
startSearch() {
|
|
||||||
this.analyticsService.trackEvent('startSearch');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,3 @@ export * from './header/header.component';
|
||||||
export * from './footer/footer.component';
|
export * from './footer/footer.component';
|
||||||
export * from './search-input/search-input.component';
|
export * from './search-input/search-input.component';
|
||||||
export * from './tiny-mce/tiny-mce.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 {
|
input {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class SearchInputComponent {
|
export class SearchInputComponent {
|
||||||
@ViewChild('input') input: ElementRef;
|
@ViewChild('input', { static: true }) input: ElementRef;
|
||||||
|
|
||||||
@Output() search: EventEmitter<string> = new EventEmitter<string>();
|
@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 './one-column/one-column.layout';
|
||||||
export * from './two-columns/two-columns.layout';
|
export * from './two-columns/two-columns.layout';
|
||||||
export * from './three-columns/three-columns.layout';
|
export * from './three-columns/three-columns.layout';
|
||||||
export * from './sample/sample.layout';
|
|
||||||
|
|
|
||||||
|
|
@ -3,155 +3,7 @@
|
||||||
@import '~@nebular/theme/styles/global/breakpoints';
|
@import '~@nebular/theme/styles/global/breakpoints';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
nb-layout-column.small {
|
.menu-sidebar ::ng-deep .scrollable {
|
||||||
flex: 0.15 !important;
|
padding-top: nb-theme(layout-padding-top);
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,19 @@
|
||||||
import { Component, OnDestroy } from '@angular/core';
|
import { AfterViewInit, Component, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
|
||||||
import { NbThemeService } from '@nebular/theme';
|
import { isPlatformBrowser } from '@angular/common';
|
||||||
import { takeWhile } from 'rxjs/operators';
|
import { NbLayoutComponent } from '@nebular/theme';
|
||||||
|
|
||||||
|
import { WindowModeBlockScrollService } from '../../services/window-mode-block-scroll.service';
|
||||||
|
|
||||||
// TODO: move layouts into the framework
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-one-column-layout',
|
selector: 'ngx-one-column-layout',
|
||||||
styleUrls: ['./one-column.layout.scss'],
|
styleUrls: ['./one-column.layout.scss'],
|
||||||
template: `
|
template: `
|
||||||
<nb-layout>
|
<nb-layout windowMode>
|
||||||
<nb-layout-header fixed>
|
<nb-layout-header fixed>
|
||||||
<ngx-header></ngx-header>
|
<ngx-header></ngx-header>
|
||||||
</nb-layout-header>
|
</nb-layout-header>
|
||||||
|
|
||||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
<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>
|
<ng-content select="nb-menu"></ng-content>
|
||||||
</nb-sidebar>
|
</nb-sidebar>
|
||||||
|
|
||||||
|
|
@ -31,21 +27,18 @@ import { takeWhile } from 'rxjs/operators';
|
||||||
</nb-layout>
|
</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) {
|
ngAfterViewInit() {
|
||||||
this.themeService.getJsTheme()
|
if (isPlatformBrowser(this.platformId)) {
|
||||||
.pipe(takeWhile(() => this.alive))
|
this.windowModeBlockScrollService.register(this.layout);
|
||||||
.subscribe(theme => {
|
}
|
||||||
this.currentTheme = theme.name;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy() {
|
|
||||||
this.alive = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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';
|
@import '~@nebular/theme/styles/global/breakpoints';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
nb-layout-column.small {
|
.menu-sidebar ::ng-deep .scrollable {
|
||||||
flex: 0.15 !important;
|
padding-top: nb-theme(layout-padding-top);
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,15 @@
|
||||||
import { Component, OnDestroy } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NbThemeService } from '@nebular/theme';
|
|
||||||
import { takeWhile } from 'rxjs/operators';
|
|
||||||
|
|
||||||
// TODO: move layouts into the framework
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-three-columns-layout',
|
selector: 'ngx-three-columns-layout',
|
||||||
styleUrls: ['./three-columns.layout.scss'],
|
styleUrls: ['./three-columns.layout.scss'],
|
||||||
template: `
|
template: `
|
||||||
<nb-layout>
|
<nb-layout windowMode>
|
||||||
<nb-layout-header fixed>
|
<nb-layout-header fixed>
|
||||||
<ngx-header></ngx-header>
|
<ngx-header></ngx-header>
|
||||||
</nb-layout-header>
|
</nb-layout-header>
|
||||||
|
|
||||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
<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>
|
<ng-content select="nb-menu"></ng-content>
|
||||||
</nb-sidebar>
|
</nb-sidebar>
|
||||||
|
|
||||||
|
|
@ -37,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
|
||||||
</nb-layout>
|
</nb-layout>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class ThreeColumnsLayoutComponent implements OnDestroy {
|
export class ThreeColumnsLayoutComponent {}
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,156 +3,7 @@
|
||||||
@import '~@nebular/theme/styles/global/breakpoints';
|
@import '~@nebular/theme/styles/global/breakpoints';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
nb-layout-column.small {
|
.menu-sidebar ::ng-deep .scrollable {
|
||||||
flex: 0.15 !important;
|
padding-top: nb-theme(layout-padding-top);
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,15 @@
|
||||||
import { Component, OnDestroy } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NbThemeService } from '@nebular/theme';
|
|
||||||
import { takeWhile } from 'rxjs/operators';
|
|
||||||
|
|
||||||
// TODO: move layouts into the framework
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-two-columns-layout',
|
selector: 'ngx-two-columns-layout',
|
||||||
styleUrls: ['./two-columns.layout.scss'],
|
styleUrls: ['./two-columns.layout.scss'],
|
||||||
template: `
|
template: `
|
||||||
<nb-layout>
|
<nb-layout windowMode>
|
||||||
<nb-layout-header fixed>
|
<nb-layout-header fixed>
|
||||||
<ngx-header></ngx-header>
|
<ngx-header></ngx-header>
|
||||||
</nb-layout-header>
|
</nb-layout-header>
|
||||||
|
|
||||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
<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>
|
<ng-content select="nb-menu"></ng-content>
|
||||||
</nb-sidebar>
|
</nb-sidebar>
|
||||||
|
|
||||||
|
|
@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
|
||||||
</nb-layout>
|
</nb-layout>
|
||||||
`,
|
`,
|
||||||
})
|
})
|
||||||
export class TwoColumnsLayoutComponent implements OnDestroy {
|
export class TwoColumnsLayoutComponent {}
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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 './round.pipe';
|
||||||
export * from './timing.pipe';
|
export * from './timing.pipe';
|
||||||
export * from './number-with-commas.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() {
|
@mixin ngx-pace-theme() {
|
||||||
|
|
||||||
.pace .pace-progress {
|
.pace .pace-progress {
|
||||||
background: nb-theme(color-fg-highlight);
|
background: nb-theme(color-primary-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pace .pace-progress-inner {
|
.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 {
|
.pace .pace-activity {
|
||||||
display: none;
|
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
|
// themes - our custom or/and out of the box themes
|
||||||
@import 'themes';
|
@import 'themes';
|
||||||
|
|
||||||
|
|
@ -5,14 +7,13 @@
|
||||||
@import '~@nebular/theme/styles/globals';
|
@import '~@nebular/theme/styles/globals';
|
||||||
@import '~@nebular/auth/styles/all';
|
@import '~@nebular/auth/styles/all';
|
||||||
@import '~@nebular/bootstrap/styles/globals';
|
@import '~@nebular/bootstrap/styles/globals';
|
||||||
// ...
|
|
||||||
|
|
||||||
// global app font size
|
|
||||||
@import './font-size';
|
|
||||||
|
|
||||||
// loading progress bar theme
|
// loading progress bar theme
|
||||||
@import './pace.theme';
|
@import './pace.theme';
|
||||||
|
|
||||||
|
@import './overrides';
|
||||||
|
|
||||||
// install the framework and custom global styles
|
// install the framework and custom global styles
|
||||||
@include nb-install() {
|
@include nb-install() {
|
||||||
|
|
||||||
|
|
@ -23,4 +24,6 @@
|
||||||
|
|
||||||
// loading progress bar
|
// loading progress bar
|
||||||
@include ngx-pace-theme();
|
@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 = {
|
export const CORPORATE_THEME = {
|
||||||
name: 'corporate',
|
name: 'corporate',
|
||||||
base: 'default',
|
|
||||||
variables: {
|
variables: {
|
||||||
temperature: [
|
...theme,
|
||||||
'#ffa36b',
|
|
||||||
'#ffa36b',
|
temperature: {
|
||||||
'#ff9e7a',
|
arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ],
|
||||||
'#ff9888',
|
arcEmpty: theme.bg2,
|
||||||
'#ff8ea0',
|
thumbBg: theme.bg2,
|
||||||
],
|
thumbBorder: '#ffa36b',
|
||||||
|
},
|
||||||
|
|
||||||
solar: {
|
solar: {
|
||||||
gradientLeft: '#ff8ea0',
|
gradientLeft: theme.primary,
|
||||||
gradientRight: '#ffa36b',
|
gradientRight: theme.primary,
|
||||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
secondSeriesFill: theme.bg2,
|
||||||
radius: ['80%', '90%'],
|
radius: ['80%', '90%'],
|
||||||
},
|
},
|
||||||
|
|
||||||
traffic: {
|
traffic: {
|
||||||
colorBlack: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipBg: '#eef2f5',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderColor: '#eef2f5',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: '400',
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
lineBg: '#cae6f3',
|
yAxisSplitLine: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
|
lineBg: theme.primary,
|
||||||
lineShadowBlur: '0',
|
lineShadowBlur: '0',
|
||||||
itemColor: '#bcc3cc',
|
itemColor: theme.border4,
|
||||||
itemBorderColor: '#bcc3cc',
|
itemBorderColor: theme.border4,
|
||||||
itemEmphasisBorderColor: '#74a2ff',
|
itemEmphasisBorderColor: theme.primaryLight,
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
gradFrom: '#ffffff',
|
gradFrom: theme.bg,
|
||||||
gradTo: '#ffffff',
|
gradTo: theme.bg,
|
||||||
},
|
},
|
||||||
|
|
||||||
electricity: {
|
electricity: {
|
||||||
tooltipBg: '#edf0f4',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: '#bdc4cd',
|
tooltipLineColor: theme.fgText,
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
axisLineColor: 'rgba(0, 0, 0, 0)',
|
axisLineColor: theme.border3,
|
||||||
xAxisTextColor: '#2a2a2a',
|
xAxisTextColor: theme.fg,
|
||||||
yAxisSplitLine: '#ebeef2',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#73a1ff',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
lineGradFrom: '#bdc4cd',
|
lineGradFrom: theme.primary,
|
||||||
lineGradTo: '#c0c8d1',
|
lineGradTo: theme.primary,
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
areaGradFrom: 'rgba(255, 255, 255, 0)',
|
areaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||||
areaGradTo: 'rgba(255, 255, 255, 0)',
|
areaGradTo: 'rgba(0, 0, 0, 0)',
|
||||||
shadowLineDarkBg: 'rgba(255, 255, 255, 0)',
|
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
bubbleMap: {
|
bubbleMap: {
|
||||||
titleColor: '#484848',
|
titleColor: theme.fgText,
|
||||||
areaColor: '#dddddd',
|
areaColor: theme.bg4,
|
||||||
areaHoverColor: '#cccccc',
|
areaHoverColor: theme.fgHighlight,
|
||||||
areaBorderColor: '#ebeef2',
|
areaBorderColor: theme.border5,
|
||||||
},
|
},
|
||||||
|
|
||||||
profitBarAnimationEchart: {
|
profitBarAnimationEchart: {
|
||||||
textColor: '#b2bac2',
|
textColor: theme.fgText,
|
||||||
|
|
||||||
firstAnimationBarColor: '#719efc',
|
firstAnimationBarColor: theme.primary,
|
||||||
secondAnimationBarColor: '#5dcfe3',
|
secondAnimationBarColor: theme.success,
|
||||||
|
|
||||||
splitLineStyleOpacity: '0.06',
|
splitLineStyleOpacity: '1',
|
||||||
splitLineStyleWidth: '1',
|
splitLineStyleWidth: '1',
|
||||||
splitLineStyleColor: '#000000',
|
splitLineStyleColor: theme.separator,
|
||||||
|
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: '400',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '16',
|
tooltipFontSize: '16',
|
||||||
tooltipBg: '#eef2f5',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#eef2f5',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderWidth: '3',
|
tooltipBorderWidth: '1',
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
},
|
},
|
||||||
|
|
||||||
trafficBarEchart: {
|
trafficBarEchart: {
|
||||||
gradientFrom: '#ff8ea0',
|
gradientFrom: theme.warningLight,
|
||||||
gradientTo: '#ffa36b',
|
gradientTo: theme.warning,
|
||||||
shadow: 'rgba(0, 0, 0, 0)',
|
shadow: theme.warningLight,
|
||||||
shadowBlur: '0',
|
shadowBlur: '0',
|
||||||
|
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fgText,
|
||||||
axisFontSize: '12',
|
axisFontSize: '12',
|
||||||
|
|
||||||
tooltipBg: '#edf0f4',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
},
|
},
|
||||||
|
|
||||||
countryOrders: {
|
countryOrders: {
|
||||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
countryBorderColor: theme.border4,
|
||||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
countryFillColor: theme.bg4,
|
||||||
countryBorderWidth: '1',
|
countryBorderWidth: '1',
|
||||||
hoveredCountryBorderColor: 'rgba(113, 158, 252, 1)',
|
hoveredCountryBorderColor: theme.primary,
|
||||||
hoveredCountryFillColor: 'rgba(199, 216, 247, 1)',
|
hoveredCountryFillColor: theme.primaryLight,
|
||||||
hoveredCountryBorderWidth: '3',
|
hoveredCountryBorderWidth: '1',
|
||||||
|
|
||||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
chartAxisLineColor: theme.border4,
|
||||||
chartAxisTextColor: '#b2bac2',
|
chartAxisTextColor: theme.fg,
|
||||||
chartAxisFontSize: '16',
|
chartAxisFontSize: '16',
|
||||||
chartGradientTo: 'rgba(113, 158, 252, 1)',
|
chartGradientTo: theme.primary,
|
||||||
chartGradientFrom: 'rgba(113, 158, 252, 1)',
|
chartGradientFrom: theme.primaryLight,
|
||||||
chartAxisSplitLine: '#ebeef2',
|
chartAxisSplitLine: theme.separator,
|
||||||
chartShadowLineColor: '#2f296b',
|
chartShadowLineColor: theme.primaryLight,
|
||||||
|
|
||||||
chartLineBottomShadowColor: 'rgba(113, 158, 252, 1)',
|
chartLineBottomShadowColor: theme.primary,
|
||||||
|
|
||||||
chartInnerLineColor: '#eceff4',
|
chartInnerLineColor: theme.bg2,
|
||||||
},
|
},
|
||||||
|
|
||||||
echarts: {
|
echarts: {
|
||||||
bg: '#ffffff',
|
bg: theme.bg,
|
||||||
textColor: '#484848',
|
textColor: theme.fgText,
|
||||||
axisLineColor: '#bbbbbb',
|
axisLineColor: theme.fgText,
|
||||||
splitLineColor: '#ebeef2',
|
splitLineColor: theme.separator,
|
||||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
tooltipBackgroundColor: '#6a7985',
|
tooltipBackgroundColor: theme.primary,
|
||||||
areaOpacity: '0.7',
|
areaOpacity: '0.7',
|
||||||
},
|
},
|
||||||
|
|
||||||
chartjs: {
|
chartjs: {
|
||||||
axisLineColor: '#cccccc',
|
axisLineColor: theme.separator,
|
||||||
textColor: '#484848',
|
textColor: theme.fgText,
|
||||||
},
|
},
|
||||||
|
|
||||||
orders: {
|
orders: {
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#73a1ff',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
|
|
||||||
// first line
|
// first line
|
||||||
firstAreaGradFrom: 'rgba(227, 236, 254, 0.7)',
|
firstAreaGradFrom: theme.bg3,
|
||||||
firstAreaGradTo: 'rgba(227, 236, 254, 0.7)',
|
firstAreaGradTo: theme.bg3,
|
||||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second line
|
// second line
|
||||||
secondLineGradFrom: 'rgba(93, 207, 227, 1)',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: 'rgba(93, 207, 227, 1)',
|
secondLineGradTo: theme.primary,
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
secondAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||||
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
secondAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third line
|
// third line
|
||||||
thirdLineGradFrom: 'rgba(113, 158, 252, 1)',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: 'rgba(113, 158, 252, 1)',
|
thirdLineGradTo: theme.successLight,
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
thirdAreaGradFrom: 'rgba(0, 0, 0, 0)',
|
||||||
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
thirdAreaGradTo: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
@ -181,92 +228,91 @@ export const CORPORATE_THEME = {
|
||||||
},
|
},
|
||||||
|
|
||||||
profit: {
|
profit: {
|
||||||
bg: '#ffffff',
|
bg: theme.bg,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
splitLineColor: theme.separator,
|
||||||
areaOpacity: '1',
|
areaOpacity: '1',
|
||||||
|
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
|
|
||||||
// first bar
|
// first bar
|
||||||
firstLineGradFrom: '#719efc',
|
firstLineGradFrom: theme.bg3,
|
||||||
firstLineGradTo: '#719efc',
|
firstLineGradTo: theme.bg3,
|
||||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second bar
|
// second bar
|
||||||
secondLineGradFrom: '#5dcfe3',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#5dcfe3',
|
secondLineGradTo: theme.primary,
|
||||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third bar
|
// third bar
|
||||||
thirdLineGradFrom: '#e3ecfe',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: '#e3ecfe',
|
thirdLineGradTo: theme.success,
|
||||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
orderProfitLegend: {
|
orderProfitLegend: {
|
||||||
firstItem: '#719efc',
|
firstItem: theme.success,
|
||||||
secondItem: '#5dcfe3',
|
secondItem: theme.primary,
|
||||||
thirdItem: '#e3ecfe',
|
thirdItem: theme.bg3,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitors: {
|
visitors: {
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '1',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#73a1ff',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'dotted',
|
lineStyle: 'dotted',
|
||||||
lineWidth: '6',
|
lineWidth: '6',
|
||||||
lineGradFrom: '#73a1ff',
|
lineGradFrom: '#ffffff',
|
||||||
lineGradTo: '#73a1ff',
|
lineGradTo: '#ffffff',
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
areaGradFrom: 'rgba(146, 181, 252, 1)',
|
areaGradFrom: theme.primary,
|
||||||
areaGradTo: 'rgba(146, 181, 252, 1)',
|
areaGradTo: theme.primaryLight,
|
||||||
shadowLineDarkBg: '#a695ff',
|
|
||||||
|
|
||||||
innerLineStyle: 'solid',
|
innerLineStyle: 'solid',
|
||||||
innerLineWidth: '1',
|
innerLineWidth: '1',
|
||||||
|
|
||||||
innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
|
innerAreaGradFrom: theme.success,
|
||||||
innerAreaGradTo: 'rgba(227, 236, 254, 1)',
|
innerAreaGradTo: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsLegend: {
|
visitorsLegend: {
|
||||||
firstIcon: '#e3ecfe',
|
firstIcon: theme.success,
|
||||||
secondIcon: '#719efc',
|
secondIcon: theme.primary,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsPie: {
|
visitorsPie: {
|
||||||
firstPieGradientLeft: '#94e2ed',
|
firstPieGradientLeft: theme.success,
|
||||||
firstPieGradientRight: '#94e2ed',
|
firstPieGradientRight: theme.success,
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
firstPieRadius: ['65%', '90%'],
|
firstPieRadius: ['65%', '90%'],
|
||||||
|
|
||||||
secondPieGradientLeft: '#719efc',
|
secondPieGradientLeft: theme.warning,
|
||||||
secondPieGradientRight: '#719efc',
|
secondPieGradientRight: theme.warningLight,
|
||||||
secondPieShadowColor: '#b2cafb',
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
secondPieRadius: ['63%', '92%'],
|
secondPieRadius: ['63%', '92%'],
|
||||||
shadowOffsetX: '-4',
|
shadowOffsetX: '-4',
|
||||||
shadowOffsetY: '-4',
|
shadowOffsetY: '-4',
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsPieLegend: {
|
visitorsPieLegend: {
|
||||||
firstSection: '#719efc',
|
firstSection: theme.warning,
|
||||||
secondSection: '#99e5ee',
|
secondSection: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
earningPie: {
|
earningPie: {
|
||||||
|
|
@ -275,30 +321,30 @@ export const CORPORATE_THEME = {
|
||||||
|
|
||||||
fontSize: '22',
|
fontSize: '22',
|
||||||
|
|
||||||
firstPieGradientLeft: '#719efc',
|
firstPieGradientLeft: theme.success,
|
||||||
firstPieGradientRight: '#719efc',
|
firstPieGradientRight: theme.success,
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
secondPieGradientLeft: '#ff9f6f',
|
secondPieGradientLeft: theme.primary,
|
||||||
secondPieGradientRight: '#ff9f6f',
|
secondPieGradientRight: theme.primary,
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
thirdPieGradientLeft: '#ff5e83',
|
thirdPieGradientLeft: theme.warning,
|
||||||
thirdPieGradientRight: '#ff5e83',
|
thirdPieGradientRight: theme.warning,
|
||||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
earningLine: {
|
earningLine: {
|
||||||
gradFrom: '#e3ecfe',
|
gradFrom: theme.primary,
|
||||||
gradTo: '#e3ecfe',
|
gradTo: theme.primary,
|
||||||
|
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: '400',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '16',
|
tooltipFontSize: '16',
|
||||||
tooltipBg: '#eef2f5',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#eef2f5',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderWidth: '3',
|
tooltipBorderWidth: '1',
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
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 = {
|
export const COSMIC_THEME = {
|
||||||
name: 'cosmic',
|
name: 'cosmic',
|
||||||
base: 'default',
|
|
||||||
variables: {
|
variables: {
|
||||||
|
...theme,
|
||||||
|
|
||||||
temperature: [
|
temperature: {
|
||||||
'#2ec7fe',
|
arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ],
|
||||||
'#31ffad',
|
arcEmpty: theme.bg2,
|
||||||
'#7bff24',
|
thumbBg: '#ffffff',
|
||||||
'#fff024',
|
thumbBorder: '#ffffff',
|
||||||
'#f7bd59',
|
},
|
||||||
],
|
|
||||||
|
|
||||||
solar: {
|
solar: {
|
||||||
gradientLeft: '#7bff24',
|
gradientLeft: theme.primary,
|
||||||
gradientRight: '#2ec7fe',
|
gradientRight: theme.primary,
|
||||||
shadowColor: '#19977E',
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
secondSeriesFill: theme.bg2,
|
||||||
radius: ['70%', '90%'],
|
radius: ['70%', '90%'],
|
||||||
},
|
},
|
||||||
|
|
||||||
traffic: {
|
traffic: {
|
||||||
colorBlack: '#000000',
|
tooltipBg: theme.bg,
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipTextColor: '#ffffff',
|
|
||||||
tooltipFontWeight: 'normal',
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
lineBg: '#d1d1ff',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
|
lineBg: theme.border2,
|
||||||
lineShadowBlur: '14',
|
lineShadowBlur: '14',
|
||||||
itemColor: '#BEBBFF',
|
itemColor: theme.border2,
|
||||||
itemBorderColor: '#ffffff',
|
itemBorderColor: theme.border2,
|
||||||
itemEmphasisBorderColor: '#ffffff',
|
itemEmphasisBorderColor: theme.primary,
|
||||||
shadowLineDarkBg: '#655ABD',
|
shadowLineDarkBg: theme.border3,
|
||||||
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
|
shadowLineShadow: theme.border3,
|
||||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
gradFrom: theme.bg,
|
||||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
gradTo: theme.bg2,
|
||||||
},
|
},
|
||||||
|
|
||||||
electricity: {
|
electricity: {
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
tooltipLineColor: theme.fgText,
|
||||||
tooltipLineWidth: '1',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
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',
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border3,
|
||||||
xAxisTextColor: '#a1a1e5',
|
xAxisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#ffffff',
|
itemBorderColor: theme.border2,
|
||||||
lineStyle: 'dotted',
|
lineStyle: 'dotted',
|
||||||
lineWidth: '6',
|
lineWidth: '6',
|
||||||
lineGradFrom: '#00ffaa',
|
lineGradFrom: theme.success,
|
||||||
lineGradTo: '#fff835',
|
lineGradTo: theme.warning,
|
||||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
lineShadow: theme.bg4,
|
||||||
|
|
||||||
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
|
areaGradFrom: theme.bg2,
|
||||||
areaGradTo: 'rgba(188, 92, 255, 0)',
|
areaGradTo: theme.bg3,
|
||||||
shadowLineDarkBg: '#a695ff',
|
shadowLineDarkBg: theme.bg3,
|
||||||
},
|
},
|
||||||
|
|
||||||
bubbleMap: {
|
bubbleMap: {
|
||||||
titleColor: '#ffffff',
|
titleColor: theme.fgText,
|
||||||
areaColor: '#2c2961',
|
areaColor: theme.bg4,
|
||||||
areaHoverColor: '#a1a1e5',
|
areaHoverColor: theme.fgHighlight,
|
||||||
areaBorderColor: '#654ddb',
|
areaBorderColor: theme.border5,
|
||||||
},
|
},
|
||||||
|
|
||||||
profitBarAnimationEchart: {
|
profitBarAnimationEchart: {
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
|
|
||||||
firstAnimationBarColor: '#0088ff',
|
firstAnimationBarColor: theme.primary,
|
||||||
secondAnimationBarColor: '#7659ff',
|
secondAnimationBarColor: theme.success,
|
||||||
|
|
||||||
splitLineStyleOpacity: '0.06',
|
splitLineStyleOpacity: '1',
|
||||||
splitLineStyleWidth: '1',
|
splitLineStyleWidth: '1',
|
||||||
splitLineStyleColor: '#000000',
|
splitLineStyleColor: theme.border2,
|
||||||
|
|
||||||
tooltipTextColor: '#ffffff',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'normal',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '16',
|
tooltipFontSize: '16',
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderWidth: '3',
|
tooltipBorderWidth: '1',
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
},
|
},
|
||||||
|
|
||||||
trafficBarEchart: {
|
trafficBarEchart: {
|
||||||
gradientFrom: '#fc0',
|
gradientFrom: theme.warningLight,
|
||||||
gradientTo: '#ffa100',
|
gradientTo: theme.warning,
|
||||||
shadow: '#ffb600',
|
shadow: theme.warningLight,
|
||||||
shadowBlur: '5',
|
shadowBlur: '5',
|
||||||
|
|
||||||
axisTextColor: '#a1a1e5',
|
axisTextColor: theme.fgText,
|
||||||
axisFontSize: '12',
|
axisFontSize: '12',
|
||||||
|
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
tooltipTextColor: '#ffffff',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'normal',
|
tooltipFontWeight: 'normal',
|
||||||
},
|
},
|
||||||
|
|
||||||
countryOrders: {
|
countryOrders: {
|
||||||
countryBorderColor: '#525dbd',
|
countryBorderColor: theme.border4,
|
||||||
countryFillColor: '#4f41a6',
|
countryFillColor: theme.bg3,
|
||||||
countryBorderWidth: '2',
|
countryBorderWidth: '1',
|
||||||
hoveredCountryBorderColor: '#00f9a6',
|
hoveredCountryBorderColor: theme.primary,
|
||||||
hoveredCountryFillColor: '#377aa7',
|
hoveredCountryFillColor: theme.primaryLight,
|
||||||
hoveredCountryBorderWidth: '3',
|
hoveredCountryBorderWidth: '1',
|
||||||
|
|
||||||
chartAxisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
chartAxisLineColor: theme.border4,
|
||||||
chartAxisTextColor: '#a1a1e5',
|
chartAxisTextColor: theme.fg,
|
||||||
chartAxisFontSize: '16',
|
chartAxisFontSize: '16',
|
||||||
chartGradientTo: '#00c7c7',
|
chartGradientTo: theme.primary,
|
||||||
chartGradientFrom: '#00d977',
|
chartGradientFrom: theme.primaryLight,
|
||||||
chartAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
chartAxisSplitLine: theme.separator,
|
||||||
chartShadowBarColor: '#2f296b',
|
chartShadowLineColor: theme.primaryLight,
|
||||||
|
|
||||||
chartLineBottomShadowColor: '#00977e',
|
chartLineBottomShadowColor: theme.primary,
|
||||||
|
|
||||||
chartInnerLineColor: '#2f296b',
|
chartInnerLineColor: theme.bg2,
|
||||||
},
|
},
|
||||||
|
|
||||||
echarts: {
|
echarts: {
|
||||||
bg: '#3d3780',
|
bg: theme.bg,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
axisLineColor: '#a1a1e5',
|
axisLineColor: theme.fgText,
|
||||||
splitLineColor: '#342e73',
|
splitLineColor: theme.separator,
|
||||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
tooltipBackgroundColor: '#6a7985',
|
tooltipBackgroundColor: theme.primary,
|
||||||
areaOpacity: '1',
|
areaOpacity: '1',
|
||||||
},
|
},
|
||||||
|
|
||||||
chartjs: {
|
chartjs: {
|
||||||
axisLineColor: '#a1a1e5',
|
axisLineColor: theme.separator,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
},
|
},
|
||||||
|
|
||||||
orders: {
|
orders: {
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '1',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#ffffff',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'normal',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#a1a1e5',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#ffffff',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
|
|
||||||
// first line
|
// first line
|
||||||
firstAreaGradFrom: 'rgba(78, 64, 164, 1)',
|
firstAreaGradFrom: theme.bg2,
|
||||||
firstAreaGradTo: 'rgba(78, 64, 164, 1)',
|
firstAreaGradTo: theme.bg2,
|
||||||
firstShadowLineDarkBg: '#018dff',
|
firstShadowLineDarkBg: theme.bg2,
|
||||||
|
|
||||||
// second line
|
// second line
|
||||||
secondLineGradFrom: '#00bece',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#00da78',
|
secondLineGradTo: theme.primary,
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(38, 139, 145, 0.8)',
|
secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)',
|
||||||
secondAreaGradTo: 'rgba(38, 139, 145, 0.5)',
|
secondAreaGradTo: 'rgba(161, 110, 255, 0.5)',
|
||||||
secondShadowLineDarkBg: '#2c5a85',
|
secondShadowLineDarkBg: theme.primary,
|
||||||
|
|
||||||
// third line
|
// third line
|
||||||
thirdLineGradFrom: '#8069ff',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: '#8357ff',
|
thirdLineGradTo: theme.successLight,
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(118, 73, 208, 0.7)',
|
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)',
|
||||||
thirdAreaGradTo: 'rgba(188, 92, 255, 0.4)',
|
thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)',
|
||||||
thirdShadowLineDarkBg: '#a695ff',
|
thirdShadowLineDarkBg: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
profit: {
|
profit: {
|
||||||
bg: '#3d3780',
|
bg: theme.bg,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
axisLineColor: '#a1a1e5',
|
axisLineColor: theme.border4,
|
||||||
splitLineColor: '#342e73',
|
splitLineColor: theme.separator,
|
||||||
areaOpacity: '1',
|
areaOpacity: '1',
|
||||||
|
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#a1a1e5',
|
axisTextColor: theme.fg,
|
||||||
|
|
||||||
// first bar
|
// first bar
|
||||||
firstLineGradFrom: '#00bece',
|
firstLineGradFrom: theme.bg2,
|
||||||
firstLineGradTo: '#00da78',
|
firstLineGradTo: theme.bg2,
|
||||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second bar
|
// second bar
|
||||||
secondLineGradFrom: '#8069ff',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#8357ff',
|
secondLineGradTo: theme.primary,
|
||||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third bar
|
// third bar
|
||||||
thirdLineGradFrom: '#4e40a4',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: '#4e40a4',
|
thirdLineGradTo: theme.successLight,
|
||||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
orderProfitLegend: {
|
orderProfitLegend: {
|
||||||
firstItem: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
firstItem: theme.success,
|
||||||
secondItem: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
secondItem: theme.primary,
|
||||||
thirdItem: '#4e40a4',
|
thirdItem: theme.bg2,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitors: {
|
visitors: {
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '1',
|
tooltipLineWidth: '1',
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#ffffff',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'normal',
|
tooltipFontWeight: 'normal',
|
||||||
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#a1a1e5',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#ffffff',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'dotted',
|
lineStyle: 'dotted',
|
||||||
lineWidth: '6',
|
lineWidth: '6',
|
||||||
lineGradFrom: '#ffffff',
|
lineGradFrom: '#ffffff',
|
||||||
lineGradTo: '#ffffff',
|
lineGradTo: '#ffffff',
|
||||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
areaGradFrom: theme.primary,
|
||||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
areaGradTo: theme.primaryLight,
|
||||||
shadowLineDarkBg: '#a695ff',
|
|
||||||
|
|
||||||
innerLineStyle: 'solid',
|
innerLineStyle: 'solid',
|
||||||
innerLineWidth: '1',
|
innerLineWidth: '1',
|
||||||
|
|
||||||
innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
|
innerAreaGradFrom: theme.success,
|
||||||
innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
|
innerAreaGradTo: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsLegend: {
|
visitorsLegend: {
|
||||||
firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
|
firstIcon: theme.success,
|
||||||
secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
|
secondIcon: theme.primary,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsPie: {
|
visitorsPie: {
|
||||||
firstPieGradientLeft: '#7bff24',
|
firstPieGradientLeft: theme.success,
|
||||||
firstPieGradientRight: '#2ec7fe',
|
firstPieGradientRight: theme.successLight,
|
||||||
firstPieShadowColor: '#19977E',
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
firstPieRadius: ['70%', '90%'],
|
firstPieRadius: ['70%', '90%'],
|
||||||
|
|
||||||
secondPieGradientLeft: '#ff894a',
|
secondPieGradientLeft: theme.warning,
|
||||||
secondPieGradientRight: '#ffcc10',
|
secondPieGradientRight: theme.warningLight,
|
||||||
secondPieShadowColor: '#cf7c1c',
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
secondPieRadius: ['60%', '95%'],
|
secondPieRadius: ['60%', '95%'],
|
||||||
shadowOffsetX: '0',
|
shadowOffsetX: '0',
|
||||||
shadowOffsetY: '3',
|
shadowOffsetY: '3',
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsPieLegend: {
|
visitorsPieLegend: {
|
||||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
firstSection: theme.warning,
|
||||||
secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
|
secondSection: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
earningPie: {
|
earningPie: {
|
||||||
|
|
@ -275,30 +321,30 @@ export const COSMIC_THEME = {
|
||||||
|
|
||||||
fontSize: '22',
|
fontSize: '22',
|
||||||
|
|
||||||
firstPieGradientLeft: '#00d77f',
|
firstPieGradientLeft: theme.success,
|
||||||
firstPieGradientRight: '#00d77f',
|
firstPieGradientRight: theme.success,
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
secondPieGradientLeft: '#7756f7',
|
secondPieGradientLeft: theme.primary,
|
||||||
secondPieGradientRight: '#7756f7',
|
secondPieGradientRight: theme.primary,
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
thirdPieGradientLeft: '#ffca00',
|
thirdPieGradientLeft: theme.warning,
|
||||||
thirdPieGradientRight: '#ffca00',
|
thirdPieGradientRight: theme.warning,
|
||||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
earningLine: {
|
earningLine: {
|
||||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
gradFrom: theme.primary,
|
||||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
gradTo: theme.primary,
|
||||||
|
|
||||||
tooltipTextColor: '#ffffff',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'normal',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '16',
|
tooltipFontSize: '16',
|
||||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#00d977',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderWidth: '3',
|
tooltipBorderWidth: '1',
|
||||||
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
|
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 = {
|
export const DEFAULT_THEME = {
|
||||||
name: 'default',
|
name: 'default',
|
||||||
base: null,
|
|
||||||
variables: {
|
variables: {
|
||||||
|
...theme,
|
||||||
|
|
||||||
// Safari fix
|
temperature: {
|
||||||
temperature: [
|
arcFill: [ theme.primary, theme.primary, theme.primary, theme.primary, theme.primary ],
|
||||||
'#42db7d',
|
arcEmpty: theme.bg2,
|
||||||
'#42db7d',
|
thumbBg: theme.bg2,
|
||||||
'#42db7d',
|
thumbBorder: theme.primary,
|
||||||
'#42db7d',
|
},
|
||||||
'#42db7d',
|
|
||||||
],
|
|
||||||
|
|
||||||
solar: {
|
solar: {
|
||||||
gradientLeft: '#42db7d',
|
gradientLeft: theme.primary,
|
||||||
gradientRight: '#42db7d',
|
gradientRight: theme.primary,
|
||||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
secondSeriesFill: theme.bg2,
|
||||||
radius: ['80%', '90%'],
|
radius: ['80%', '90%'],
|
||||||
},
|
},
|
||||||
|
|
||||||
traffic: {
|
traffic: {
|
||||||
colorBlack: '#000000',
|
tooltipBg: theme.bg,
|
||||||
tooltipBg: '#ffffff',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderColor: '#c0c8d1',
|
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
lineBg: '#c0c8d1',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
|
lineBg: theme.border4,
|
||||||
lineShadowBlur: '1',
|
lineShadowBlur: '1',
|
||||||
itemColor: '#bcc3cc',
|
itemColor: theme.border4,
|
||||||
itemBorderColor: '#bcc3cc',
|
itemBorderColor: theme.border4,
|
||||||
itemEmphasisBorderColor: '#42db7d',
|
itemEmphasisBorderColor: theme.primary,
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
gradFrom: '#ebeef2',
|
gradFrom: theme.bg2,
|
||||||
gradTo: '#ebeef2',
|
gradTo: theme.bg2,
|
||||||
},
|
},
|
||||||
|
|
||||||
electricity: {
|
electricity: {
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
tooltipLineColor: theme.fgText,
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
|
|
||||||
axisLineColor: 'rgba(0, 0, 0, 0)',
|
axisLineColor: theme.border3,
|
||||||
xAxisTextColor: '#2a2a2a',
|
xAxisTextColor: theme.fg,
|
||||||
yAxisSplitLine: '#ebeef2',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#42db7d',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
lineGradFrom: '#42db7d',
|
lineGradFrom: theme.primary,
|
||||||
lineGradTo: '#42db7d',
|
lineGradTo: theme.primary,
|
||||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
areaGradFrom: 'rgba(235, 238, 242, 0.5)',
|
areaGradFrom: theme.bg2,
|
||||||
areaGradTo: 'rgba(235, 238, 242, 0.5)',
|
areaGradTo: theme.bg2,
|
||||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
bubbleMap: {
|
bubbleMap: {
|
||||||
titleColor: '#484848',
|
titleColor: theme.fgText,
|
||||||
areaColor: '#dddddd',
|
areaColor: theme.bg4,
|
||||||
areaHoverColor: '#cccccc',
|
areaHoverColor: theme.fgHighlight,
|
||||||
areaBorderColor: '#ebeef2',
|
areaBorderColor: theme.border5,
|
||||||
},
|
},
|
||||||
|
|
||||||
profitBarAnimationEchart: {
|
profitBarAnimationEchart: {
|
||||||
textColor: '#484848',
|
textColor: theme.fgText,
|
||||||
|
|
||||||
firstAnimationBarColor: '#3edd81',
|
firstAnimationBarColor: theme.primary,
|
||||||
secondAnimationBarColor: '#8d7fff',
|
secondAnimationBarColor: theme.success,
|
||||||
|
|
||||||
splitLineStyleOpacity: '0.06',
|
splitLineStyleOpacity: '1',
|
||||||
splitLineStyleWidth: '1',
|
splitLineStyleWidth: '1',
|
||||||
splitLineStyleColor: '#000000',
|
splitLineStyleColor: theme.separator,
|
||||||
|
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '16',
|
tooltipFontSize: '16',
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#c0c8d1',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderWidth: '3',
|
tooltipBorderWidth: '1',
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
},
|
},
|
||||||
|
|
||||||
trafficBarEchart: {
|
trafficBarEchart: {
|
||||||
gradientFrom: '#fc0',
|
gradientFrom: theme.warningLight,
|
||||||
gradientTo: '#ffa100',
|
gradientTo: theme.warning,
|
||||||
shadow: '#ffb600',
|
shadow: theme.warningLight,
|
||||||
shadowBlur: '0',
|
shadowBlur: '0',
|
||||||
|
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fgText,
|
||||||
axisFontSize: '12',
|
axisFontSize: '12',
|
||||||
|
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#c0c8d1',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
},
|
},
|
||||||
|
|
||||||
countryOrders: {
|
countryOrders: {
|
||||||
countryBorderColor: 'rgba(255, 255, 255, 1)',
|
countryBorderColor: theme.border4,
|
||||||
countryFillColor: 'rgba(236, 242, 245, 1)',
|
countryFillColor: theme.bg3,
|
||||||
countryBorderWidth: '1',
|
countryBorderWidth: '1',
|
||||||
hoveredCountryBorderColor: '#40dc7e',
|
hoveredCountryBorderColor: theme.primary,
|
||||||
hoveredCountryFillColor: '#c7f4d9',
|
hoveredCountryFillColor: theme.primaryLight,
|
||||||
hoveredCountryBorderWidth: '3',
|
hoveredCountryBorderWidth: '1',
|
||||||
|
|
||||||
chartAxisLineColor: 'rgba(0, 0, 0, 0)',
|
chartAxisLineColor: theme.border4,
|
||||||
chartAxisTextColor: '#b2bac2',
|
chartAxisTextColor: theme.fg,
|
||||||
chartAxisFontSize: '16',
|
chartAxisFontSize: '16',
|
||||||
chartGradientTo: '#3edd81',
|
chartGradientTo: theme.primary,
|
||||||
chartGradientFrom: '#3bddaf',
|
chartGradientFrom: theme.primaryLight,
|
||||||
chartAxisSplitLine: '#ebeef2',
|
chartAxisSplitLine: theme.separator,
|
||||||
chartShadowLineColor: '#2f296b',
|
chartShadowLineColor: theme.primaryLight,
|
||||||
|
|
||||||
chartLineBottomShadowColor: '#eceff4',
|
chartLineBottomShadowColor: theme.primary,
|
||||||
|
|
||||||
chartInnerLineColor: '#eceff4',
|
chartInnerLineColor: theme.bg2,
|
||||||
},
|
},
|
||||||
|
|
||||||
echarts: {
|
echarts: {
|
||||||
bg: '#ffffff',
|
bg: theme.bg,
|
||||||
textColor: '#484848',
|
textColor: theme.fgText,
|
||||||
axisLineColor: '#bbbbbb',
|
axisLineColor: theme.fgText,
|
||||||
splitLineColor: '#ebeef2',
|
splitLineColor: theme.separator,
|
||||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
tooltipBackgroundColor: '#6a7985',
|
tooltipBackgroundColor: theme.primary,
|
||||||
areaOpacity: '0.7',
|
areaOpacity: '0.7',
|
||||||
},
|
},
|
||||||
|
|
||||||
chartjs: {
|
chartjs: {
|
||||||
axisLineColor: '#cccccc',
|
axisLineColor: theme.separator,
|
||||||
textColor: '#484848',
|
textColor: theme.fgText,
|
||||||
},
|
},
|
||||||
|
|
||||||
orders: {
|
orders: {
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '0',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#42db7d',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'solid',
|
lineStyle: 'solid',
|
||||||
lineWidth: '4',
|
lineWidth: '4',
|
||||||
|
|
||||||
// first line
|
// first line
|
||||||
firstAreaGradFrom: 'rgba(236, 242, 245, 0.8)',
|
firstAreaGradFrom: theme.bg3,
|
||||||
firstAreaGradTo: 'rgba(236, 242, 245, 0.8)',
|
firstAreaGradTo: theme.bg3,
|
||||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second line
|
// second line
|
||||||
secondLineGradFrom: 'rgba(164, 123, 255, 1)',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: 'rgba(164, 123, 255, 1)',
|
secondLineGradTo: theme.primary,
|
||||||
|
|
||||||
secondAreaGradFrom: 'rgba(188, 92, 255, 0.2)',
|
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||||
secondAreaGradTo: 'rgba(188, 92, 255, 0)',
|
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third line
|
// third line
|
||||||
thirdLineGradFrom: 'rgba(55, 220, 136, 1)',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: 'rgba(55, 220, 136, 1)',
|
thirdLineGradTo: theme.successLight,
|
||||||
|
|
||||||
thirdAreaGradFrom: 'rgba(31 ,106, 124, 0.2)',
|
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||||
thirdAreaGradTo: 'rgba(4, 126, 230, 0)',
|
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
// TODO: need design for default theme
|
|
||||||
profit: {
|
profit: {
|
||||||
bg: '#ffffff',
|
bg: theme.bg,
|
||||||
textColor: '#ffffff',
|
textColor: theme.fgText,
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
splitLineColor: 'rgba(161, 161 ,229, 0.2)',
|
splitLineColor: theme.separator,
|
||||||
areaOpacity: '1',
|
areaOpacity: '1',
|
||||||
|
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
|
|
||||||
// first bar
|
// first bar
|
||||||
firstLineGradFrom: '#00bece',
|
firstLineGradFrom: theme.bg3,
|
||||||
firstLineGradTo: '#00da78',
|
firstLineGradTo: theme.bg3,
|
||||||
firstLineShadow: 'rgba(14, 16, 48, 0.4)',
|
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// second bar
|
// second bar
|
||||||
secondLineGradFrom: '#8069ff',
|
secondLineGradFrom: theme.primary,
|
||||||
secondLineGradTo: '#8357ff',
|
secondLineGradTo: theme.primary,
|
||||||
secondLineShadow: 'rgba(14, 16, 48, 0.4)',
|
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
// third bar
|
// third bar
|
||||||
thirdLineGradFrom: 'rgba(236, 242, 245, 0.8)',
|
thirdLineGradFrom: theme.success,
|
||||||
thirdLineGradTo: 'rgba(236, 242, 245, 0.8)',
|
thirdLineGradTo: theme.successLight,
|
||||||
thirdLineShadow: 'rgba(14, 16, 48, 0.4)',
|
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
orderProfitLegend: {
|
orderProfitLegend: {
|
||||||
firstItem: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
firstItem: theme.success,
|
||||||
secondItem: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
secondItem: theme.primary,
|
||||||
thirdItem: 'rgba(236, 242, 245, 0.8)',
|
thirdItem: theme.bg3,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitors: {
|
visitors: {
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||||
tooltipLineWidth: '0',
|
tooltipLineWidth: '1',
|
||||||
tooltipBorderColor: '#ebeef2',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '20',
|
tooltipFontSize: '20',
|
||||||
|
|
||||||
axisLineColor: 'rgba(161, 161 ,229, 0.3)',
|
axisLineColor: theme.border4,
|
||||||
axisFontSize: '16',
|
axisFontSize: '16',
|
||||||
axisTextColor: '#b2bac2',
|
axisTextColor: theme.fg,
|
||||||
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
|
yAxisSplitLine: theme.separator,
|
||||||
|
|
||||||
itemBorderColor: '#42db7d',
|
itemBorderColor: theme.primary,
|
||||||
lineStyle: 'dotted',
|
lineStyle: 'dotted',
|
||||||
lineWidth: '6',
|
lineWidth: '6',
|
||||||
lineGradFrom: '#ffffff',
|
lineGradFrom: '#ffffff',
|
||||||
lineGradTo: '#ffffff',
|
lineGradTo: '#ffffff',
|
||||||
lineShadow: 'rgba(14, 16, 48, 0)',
|
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
areaGradFrom: 'rgba(188, 92, 255, 1)',
|
areaGradFrom: theme.primary,
|
||||||
areaGradTo: 'rgba(188, 92, 255, 0.5)',
|
areaGradTo: theme.primaryLight,
|
||||||
shadowLineDarkBg: '#a695ff',
|
|
||||||
|
|
||||||
innerLineStyle: 'solid',
|
innerLineStyle: 'solid',
|
||||||
innerLineWidth: '1',
|
innerLineWidth: '1',
|
||||||
|
|
||||||
innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
|
innerAreaGradFrom: theme.success,
|
||||||
innerAreaGradTo: 'rgba(60, 221, 156, 1)',
|
innerAreaGradTo: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsLegend: {
|
visitorsLegend: {
|
||||||
firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
|
firstIcon: theme.success,
|
||||||
secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
|
secondIcon: theme.primary,
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsPie: {
|
visitorsPie: {
|
||||||
firstPieGradientLeft: '#8defbb',
|
firstPieGradientLeft: theme.success,
|
||||||
firstPieGradientRight: '#8defbb',
|
firstPieGradientRight: theme.success,
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
firstPieRadius: ['70%', '90%'],
|
firstPieRadius: ['70%', '90%'],
|
||||||
|
|
||||||
secondPieGradientLeft: '#ff894a',
|
secondPieGradientLeft: theme.warning,
|
||||||
secondPieGradientRight: '#ffcc10',
|
secondPieGradientRight: theme.warningLight,
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
secondPieRadius: ['60%', '97%'],
|
secondPieRadius: ['60%', '97%'],
|
||||||
shadowOffsetX: '0',
|
shadowOffsetX: '0',
|
||||||
|
|
@ -268,8 +311,8 @@ export const DEFAULT_THEME = {
|
||||||
},
|
},
|
||||||
|
|
||||||
visitorsPieLegend: {
|
visitorsPieLegend: {
|
||||||
firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
|
firstSection: theme.warning,
|
||||||
secondSection: '#8defbb',
|
secondSection: theme.success,
|
||||||
},
|
},
|
||||||
|
|
||||||
earningPie: {
|
earningPie: {
|
||||||
|
|
@ -278,30 +321,30 @@ export const DEFAULT_THEME = {
|
||||||
|
|
||||||
fontSize: '22',
|
fontSize: '22',
|
||||||
|
|
||||||
firstPieGradientLeft: '#00d77f',
|
firstPieGradientLeft: theme.success,
|
||||||
firstPieGradientRight: '#00d77f',
|
firstPieGradientRight: theme.success,
|
||||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
secondPieGradientLeft: '#7756f7',
|
secondPieGradientLeft: theme.primary,
|
||||||
secondPieGradientRight: '#7756f7',
|
secondPieGradientRight: theme.primary,
|
||||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
|
|
||||||
thirdPieGradientLeft: '#ffca00',
|
thirdPieGradientLeft: theme.warning,
|
||||||
thirdPieGradientRight: '#ffca00',
|
thirdPieGradientRight: theme.warning,
|
||||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||||
},
|
},
|
||||||
|
|
||||||
earningLine: {
|
earningLine: {
|
||||||
gradFrom: 'rgba(188, 92, 255, 0.5)',
|
gradFrom: theme.primary,
|
||||||
gradTo: 'rgba(188, 92, 255, 0.5)',
|
gradTo: theme.primary,
|
||||||
|
|
||||||
tooltipTextColor: '#2a2a2a',
|
tooltipTextColor: theme.fgText,
|
||||||
tooltipFontWeight: 'bolder',
|
tooltipFontWeight: 'normal',
|
||||||
tooltipFontSize: '16',
|
tooltipFontSize: '16',
|
||||||
tooltipBg: '#ffffff',
|
tooltipBg: theme.bg,
|
||||||
tooltipBorderColor: '#c0c8d1',
|
tooltipBorderColor: theme.border2,
|
||||||
tooltipBorderWidth: '3',
|
tooltipBorderWidth: '1',
|
||||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
} as NbJSThemeOptions;
|
||||||
|
|
|
||||||
|
|
@ -3,95 +3,110 @@
|
||||||
// @nebular out of the box themes
|
// @nebular out of the box themes
|
||||||
@import '~@nebular/theme/styles/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((
|
$nb-themes: nb-register-theme((
|
||||||
// app wise variables for each theme
|
font-family-secondary: font-family-primary,
|
||||||
sidebar-header-gap: 2rem,
|
layout-padding-top: 2.25rem,
|
||||||
sidebar-header-height: initial,
|
layout-window-mode-padding-top: 0,
|
||||||
layout-content-width: 1400px,
|
|
||||||
|
|
||||||
font-main: Roboto,
|
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||||
font-secondary: Exo,
|
|
||||||
|
|
||||||
switcher-background: #ebeff5,
|
card-height-tiny: 13.5rem,
|
||||||
switcher-background-percentage: 50%,
|
card-height-small: 21.1875rem,
|
||||||
drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
|
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: #f7f9fc,
|
||||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
|
||||||
|
|
||||||
chart-panel-summary-box-shadow: none,
|
smart-table-bg-even: background-basic-color-2,
|
||||||
chart-panel-summary-background-color: #ecf2f5,
|
smart-table-bg-active: background-basic-color-3,
|
||||||
chart-panel-summary-border-color: #ebeff1,
|
smart-table-paging-hover: transparent,
|
||||||
chart-panel-summary-border-width: 1px,
|
|
||||||
|
|
||||||
ecommerce-card-border-width: 1px,
|
|
||||||
|
|
||||||
progress-bar-background: linear-gradient(90deg, #3edd81 0%, #3bddaf 100%),
|
|
||||||
), default, default);
|
), default, default);
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
$nb-themes: nb-register-theme((
|
||||||
// app wise variables for each theme
|
font-family-secondary: font-family-primary,
|
||||||
sidebar-header-gap: 2rem,
|
layout-padding-top: 2.25rem,
|
||||||
sidebar-header-height: initial,
|
layout-window-mode-padding-top: 0,
|
||||||
layout-content-width: 1400px,
|
|
||||||
|
|
||||||
font-main: Roboto,
|
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||||
font-secondary: Exo,
|
|
||||||
|
|
||||||
switcher-background: #4e41a5,
|
card-height-tiny: 13.5rem,
|
||||||
switcher-background-percentage: 14%,
|
card-height-small: 21.1875rem,
|
||||||
drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa),
|
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: #252547,
|
||||||
slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
|
slide-out-shadow-color: 2px 0 3px #29157a,
|
||||||
slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
|
slide-out-shadow-color-rtl: -2px 0 3px #29157a,
|
||||||
slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
|
|
||||||
|
|
||||||
chart-panel-summary-box-shadow: none,
|
smart-table-bg-even: background-basic-color-2,
|
||||||
chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
|
smart-table-bg-active: background-basic-color-3,
|
||||||
chart-panel-summary-border-color: #332e73,
|
smart-table-paging-hover: transparent,
|
||||||
chart-panel-summary-border-width: 1px,
|
|
||||||
|
|
||||||
ecommerce-card-border-width: 1px,
|
|
||||||
|
|
||||||
progress-bar-background: linear-gradient(90deg, #00c7c7 0%, #00d977 100%),
|
|
||||||
), cosmic, cosmic);
|
), cosmic, cosmic);
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
$nb-themes: nb-register-theme((
|
||||||
// app wise variables for each theme
|
font-family-secondary: font-family-primary,
|
||||||
sidebar-header-gap: 2rem,
|
layout-padding-top: 2.25rem,
|
||||||
sidebar-header-height: initial,
|
layout-window-mode-padding-top: 0,
|
||||||
layout-content-width: 1400px,
|
|
||||||
|
|
||||||
font-main: Roboto,
|
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||||
font-secondary: Exo,
|
|
||||||
|
|
||||||
switcher-background: #2b2d34,
|
card-height-tiny: 13.5rem,
|
||||||
switcher-background-percentage: 14%,
|
card-height-small: 21.1875rem,
|
||||||
drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be),
|
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, #edf1f7 0%, #e4e9f2 100%),
|
||||||
slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
|
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||||
slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
|
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
|
|
||||||
|
|
||||||
chart-panel-summary-box-shadow: none,
|
smart-table-bg-even: background-basic-color-2,
|
||||||
chart-panel-summary-background-color: #f7fafb,
|
smart-table-bg-active: background-basic-color-3,
|
||||||
chart-panel-summary-border-color: #ebeff1,
|
smart-table-paging-hover: transparent,
|
||||||
chart-panel-summary-border-width: 1px,
|
|
||||||
|
|
||||||
ecommerce-card-border-width: 1px,
|
|
||||||
|
|
||||||
progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
|
|
||||||
), corporate, corporate);
|
), 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 { ModuleWithProviders, NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
||||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
NbActionsModule,
|
NbActionsModule,
|
||||||
NbCardModule,
|
|
||||||
NbLayoutModule,
|
NbLayoutModule,
|
||||||
NbMenuModule,
|
NbMenuModule,
|
||||||
NbRouteTabsetModule,
|
|
||||||
NbSearchModule,
|
NbSearchModule,
|
||||||
NbSidebarModule,
|
NbSidebarModule,
|
||||||
NbTabsetModule,
|
|
||||||
NbThemeModule,
|
|
||||||
NbUserModule,
|
NbUserModule,
|
||||||
NbCheckboxModule,
|
|
||||||
NbPopoverModule,
|
|
||||||
NbContextMenuModule,
|
NbContextMenuModule,
|
||||||
NbProgressBarModule,
|
|
||||||
NbCalendarModule,
|
|
||||||
NbCalendarRangeModule,
|
|
||||||
NbStepperModule,
|
|
||||||
NbButtonModule,
|
NbButtonModule,
|
||||||
NbInputModule,
|
|
||||||
NbAccordionModule,
|
|
||||||
NbDatepickerModule,
|
|
||||||
NbDialogModule,
|
|
||||||
NbWindowModule,
|
|
||||||
NbListModule,
|
|
||||||
NbToastrModule,
|
|
||||||
NbAlertModule,
|
|
||||||
NbSpinnerModule,
|
|
||||||
NbRadioModule,
|
|
||||||
NbSelectModule,
|
NbSelectModule,
|
||||||
NbChatModule,
|
NbIconModule,
|
||||||
NbTooltipModule,
|
NbThemeModule,
|
||||||
NbCalendarKitModule,
|
|
||||||
} from '@nebular/theme';
|
} from '@nebular/theme';
|
||||||
|
import { NbEvaIconsModule } from '@nebular/eva-icons';
|
||||||
import { NbSecurityModule } from '@nebular/security';
|
import { NbSecurityModule } from '@nebular/security';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
SearchInputComponent,
|
SearchInputComponent,
|
||||||
ThemeSettingsComponent,
|
|
||||||
SwitcherComponent,
|
|
||||||
LayoutDirectionSwitcherComponent,
|
|
||||||
ThemeSwitcherComponent,
|
|
||||||
TinyMCEComponent,
|
TinyMCEComponent,
|
||||||
ThemeSwitcherListComponent,
|
|
||||||
ToggleSettingsButtonComponent,
|
|
||||||
} from './components';
|
} from './components';
|
||||||
import {
|
import {
|
||||||
CapitalizePipe,
|
CapitalizePipe,
|
||||||
|
|
@ -58,115 +28,67 @@ import {
|
||||||
RoundPipe,
|
RoundPipe,
|
||||||
TimingPipe,
|
TimingPipe,
|
||||||
NumberWithCommasPipe,
|
NumberWithCommasPipe,
|
||||||
EvaIconsPipe,
|
|
||||||
} from './pipes';
|
} from './pipes';
|
||||||
import {
|
import {
|
||||||
OneColumnLayoutComponent,
|
OneColumnLayoutComponent,
|
||||||
SampleLayoutComponent,
|
|
||||||
ThreeColumnsLayoutComponent,
|
ThreeColumnsLayoutComponent,
|
||||||
TwoColumnsLayoutComponent,
|
TwoColumnsLayoutComponent,
|
||||||
} from './layouts';
|
} from './layouts';
|
||||||
|
import { WindowModeBlockScrollService } from './services/window-mode-block-scroll.service';
|
||||||
import { DEFAULT_THEME } from './styles/theme.default';
|
import { DEFAULT_THEME } from './styles/theme.default';
|
||||||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
import { COSMIC_THEME } from './styles/theme.cosmic';
|
||||||
import { CORPORATE_THEME } from './styles/theme.corporate';
|
import { CORPORATE_THEME } from './styles/theme.corporate';
|
||||||
|
import { DARK_THEME } from './styles/theme.dark';
|
||||||
const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
|
|
||||||
|
|
||||||
const NB_MODULES = [
|
const NB_MODULES = [
|
||||||
NbCardModule,
|
|
||||||
NbLayoutModule,
|
NbLayoutModule,
|
||||||
NbTabsetModule,
|
|
||||||
NbRouteTabsetModule,
|
|
||||||
NbMenuModule,
|
NbMenuModule,
|
||||||
NbUserModule,
|
NbUserModule,
|
||||||
NbActionsModule,
|
NbActionsModule,
|
||||||
NbSearchModule,
|
NbSearchModule,
|
||||||
NbSidebarModule,
|
NbSidebarModule,
|
||||||
NbCheckboxModule,
|
|
||||||
NbPopoverModule,
|
|
||||||
NbContextMenuModule,
|
NbContextMenuModule,
|
||||||
NgbModule,
|
NbSecurityModule,
|
||||||
NbSecurityModule, // *nbIsGranted directive,
|
|
||||||
NbProgressBarModule,
|
|
||||||
NbCalendarModule,
|
|
||||||
NbCalendarRangeModule,
|
|
||||||
NbStepperModule,
|
|
||||||
NbButtonModule,
|
NbButtonModule,
|
||||||
NbListModule,
|
|
||||||
NbToastrModule,
|
|
||||||
NbInputModule,
|
|
||||||
NbAccordionModule,
|
|
||||||
NbDatepickerModule,
|
|
||||||
NbDialogModule,
|
|
||||||
NbWindowModule,
|
|
||||||
NbAlertModule,
|
|
||||||
NbSpinnerModule,
|
|
||||||
NbRadioModule,
|
|
||||||
NbSelectModule,
|
NbSelectModule,
|
||||||
NbChatModule,
|
NbIconModule,
|
||||||
NbTooltipModule,
|
NbEvaIconsModule,
|
||||||
NbCalendarKitModule,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const COMPONENTS = [
|
const COMPONENTS = [
|
||||||
SwitcherComponent,
|
|
||||||
LayoutDirectionSwitcherComponent,
|
|
||||||
ThemeSwitcherComponent,
|
|
||||||
ThemeSwitcherListComponent,
|
|
||||||
HeaderComponent,
|
HeaderComponent,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
SearchInputComponent,
|
SearchInputComponent,
|
||||||
ThemeSettingsComponent,
|
|
||||||
TinyMCEComponent,
|
TinyMCEComponent,
|
||||||
OneColumnLayoutComponent,
|
OneColumnLayoutComponent,
|
||||||
SampleLayoutComponent,
|
|
||||||
ThreeColumnsLayoutComponent,
|
ThreeColumnsLayoutComponent,
|
||||||
TwoColumnsLayoutComponent,
|
TwoColumnsLayoutComponent,
|
||||||
ToggleSettingsButtonComponent,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const ENTRY_COMPONENTS = [
|
|
||||||
ThemeSwitcherListComponent,
|
|
||||||
];
|
|
||||||
|
|
||||||
const PIPES = [
|
const PIPES = [
|
||||||
CapitalizePipe,
|
CapitalizePipe,
|
||||||
PluralPipe,
|
PluralPipe,
|
||||||
RoundPipe,
|
RoundPipe,
|
||||||
TimingPipe,
|
TimingPipe,
|
||||||
NumberWithCommasPipe,
|
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({
|
@NgModule({
|
||||||
imports: [...BASE_MODULES, ...NB_MODULES],
|
imports: [CommonModule, ...NB_MODULES],
|
||||||
exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
|
exports: [CommonModule, ...PIPES, ...COMPONENTS],
|
||||||
declarations: [...COMPONENTS, ...PIPES],
|
declarations: [...COMPONENTS, ...PIPES],
|
||||||
entryComponents: [...ENTRY_COMPONENTS],
|
|
||||||
})
|
})
|
||||||
export class ThemeModule {
|
export class ThemeModule {
|
||||||
static forRoot(): ModuleWithProviders {
|
static forRoot(): ModuleWithProviders {
|
||||||
return <ModuleWithProviders>{
|
return <ModuleWithProviders>{
|
||||||
ngModule: ThemeModule,
|
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';
|
} from '@nebular/auth';
|
||||||
|
|
||||||
const routes: Routes = [
|
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',
|
path: 'auth',
|
||||||
component: NbAuthComponent,
|
component: NbAuthComponent,
|
||||||
|
|
@ -46,7 +50,7 @@ const routes: Routes = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const config: ExtraOptions = {
|
const config: ExtraOptions = {
|
||||||
useHash: true,
|
useHash: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,23 @@
|
||||||
* Copyright Akveo. All Rights Reserved.
|
* Copyright Akveo. All Rights Reserved.
|
||||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
* 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 { BrowserModule } from '@angular/platform-browser';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
import { CoreModule } from './@core/core.module';
|
import { CoreModule } from './@core/core.module';
|
||||||
|
import { ThemeModule } from './@theme/theme.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { ThemeModule } from './@theme/theme.module';
|
import {
|
||||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
NbChatModule,
|
||||||
|
NbDatepickerModule,
|
||||||
|
NbDialogModule,
|
||||||
|
NbMenuModule,
|
||||||
|
NbSidebarModule,
|
||||||
|
NbToastrModule,
|
||||||
|
NbWindowModule,
|
||||||
|
} from '@nebular/theme';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [AppComponent],
|
declarations: [AppComponent],
|
||||||
|
|
@ -23,14 +29,20 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
|
|
||||||
NgbModule.forRoot(),
|
|
||||||
ThemeModule.forRoot(),
|
ThemeModule.forRoot(),
|
||||||
|
|
||||||
|
NbSidebarModule.forRoot(),
|
||||||
|
NbMenuModule.forRoot(),
|
||||||
|
NbDatepickerModule.forRoot(),
|
||||||
|
NbDialogModule.forRoot(),
|
||||||
|
NbWindowModule.forRoot(),
|
||||||
|
NbToastrModule.forRoot(),
|
||||||
|
NbChatModule.forRoot({
|
||||||
|
messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
|
||||||
|
}),
|
||||||
CoreModule.forRoot(),
|
CoreModule.forRoot(),
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
providers: [
|
|
||||||
{ provide: APP_BASE_HREF, useValue: '/' },
|
|
||||||
],
|
|
||||||
})
|
})
|
||||||
export class AppModule {
|
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);
|
height: nb-theme(card-height-medium);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
/deep/ chart {
|
::ng-deep chart {
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
|
||||||
import { NgxEchartsModule } from 'ngx-echarts';
|
import { NgxEchartsModule } from 'ngx-echarts';
|
||||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||||
import { ChartModule } from 'angular2-chartjs';
|
import { ChartModule } from 'angular2-chartjs';
|
||||||
|
import { NbCardModule } from '@nebular/theme';
|
||||||
|
|
||||||
import { ThemeModule } from '../../@theme/theme.module';
|
import { ThemeModule } from '../../@theme/theme.module';
|
||||||
|
|
||||||
|
|
@ -49,7 +50,14 @@ const components = [
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [ThemeModule, ChartsRoutingModule, NgxEchartsModule, NgxChartsModule, ChartModule],
|
imports: [
|
||||||
|
ThemeModule,
|
||||||
|
ChartsRoutingModule,
|
||||||
|
NgxEchartsModule,
|
||||||
|
NgxChartsModule,
|
||||||
|
ChartModule,
|
||||||
|
NbCardModule,
|
||||||
|
],
|
||||||
declarations: [...routedComponents, ...components],
|
declarations: [...routedComponents, ...components],
|
||||||
})
|
})
|
||||||
export class ChartsModule {}
|
export class ChartsModule {}
|
||||||
|
|
|
||||||
|
|
@ -11,29 +11,35 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: nb-theme(card-height-medium);
|
height: nb-theme(card-height-medium);
|
||||||
|
|
||||||
/deep/ {
|
::ng-deep {
|
||||||
.pie-label {
|
.pie-label {
|
||||||
fill: nb-theme(color-fg-heading);
|
fill: nb-theme(text-basic-color);
|
||||||
}
|
|
||||||
|
|
||||||
.grid-line-path {
|
|
||||||
stroke: nb-theme(separator);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
fill: nb-theme(color-fg-heading);
|
fill: nb-theme(text-hint-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-legend {
|
.chart-legend {
|
||||||
.legend-labels {
|
.legend-labels {
|
||||||
background: nb-theme(color-bg);
|
background: nb-theme(background-basic-color-2);
|
||||||
}
|
}
|
||||||
.legend-label {
|
.legend-label {
|
||||||
color: nb-theme(color-fg-heading);
|
color: nb-theme(text-hint-color);
|
||||||
.active .legend-label-text {
|
.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%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .echart {
|
::ng-deep .echart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 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-tabset fullWidth>
|
||||||
|
|
||||||
<nb-tab tabTitle="Contacts">
|
<nb-tab tabTitle="Contacts">
|
||||||
<div class="contact" *ngFor="let c of contacts">
|
<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-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||||
<i class="i-contact nb-phone"></i>
|
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
|
||||||
</div>
|
</nb-list-item>
|
||||||
|
</nb-list>
|
||||||
</nb-tab>
|
</nb-tab>
|
||||||
|
|
||||||
<nb-tab tabTitle="Recent">
|
<nb-tab tabTitle="Recent">
|
||||||
<div class="contact" *ngFor="let c of recent">
|
<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>
|
<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>
|
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
|
||||||
</div>
|
</nb-list-item>
|
||||||
|
</nb-list>
|
||||||
</nb-tab>
|
</nb-tab>
|
||||||
|
|
||||||
</nb-tabset>
|
</nb-tabset>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,24 @@
|
||||||
@import '../../../@theme/styles/themes';
|
@import '../../../@theme/styles/themes';
|
||||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
|
nb-card {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
nb-tabset {
|
nb-tabset {
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
nb-tab {
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -18,50 +26,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: nb-theme(color-fg);
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:first-child {
|
||||||
border-bottom: 1px solid nb-theme(separator);
|
border-top: none;
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import { Component, OnDestroy } from '@angular/core';
|
import { Component, OnDestroy } from '@angular/core';
|
||||||
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
|
|
||||||
import { takeWhile } from 'rxjs/operators';
|
import { takeWhile } from 'rxjs/operators';
|
||||||
import { forkJoin } from 'rxjs';
|
import { forkJoin } from 'rxjs';
|
||||||
|
|
||||||
|
|
@ -16,19 +15,8 @@ export class ContactsComponent implements OnDestroy {
|
||||||
|
|
||||||
contacts: any[];
|
contacts: any[];
|
||||||
recent: 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(
|
forkJoin(
|
||||||
this.userService.getContacts(),
|
this.userService.getContacts(),
|
||||||
this.userService.getRecentUsers(),
|
this.userService.getRecentUsers(),
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
|
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
|
||||||
<ngx-status-card [title]="statusCard.title"
|
<ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
|
||||||
[type]="statusCard.type">
|
|
||||||
<i [ngClass]="statusCard.iconClass"></i>
|
<i [ngClass]="statusCard.iconClass"></i>
|
||||||
</ngx-status-card>
|
</ngx-status-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,4 @@
|
||||||
display: none;
|
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[];
|
default: CardSettings[];
|
||||||
cosmic: CardSettings[];
|
cosmic: CardSettings[];
|
||||||
corporate: CardSettings[];
|
corporate: CardSettings[];
|
||||||
|
dark: CardSettings[];
|
||||||
} = {
|
} = {
|
||||||
default: this.commonStatusCardsSet,
|
default: this.commonStatusCardsSet,
|
||||||
cosmic: this.commonStatusCardsSet,
|
cosmic: this.commonStatusCardsSet,
|
||||||
|
|
@ -71,9 +72,10 @@ export class DashboardComponent implements OnDestroy {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
...this.coffeeMakerCard,
|
...this.coffeeMakerCard,
|
||||||
type: 'secondary',
|
type: 'info',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
dark: this.commonStatusCardsSet,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(private themeService: NbThemeService,
|
constructor(private themeService: NbThemeService,
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,15 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import {
|
||||||
|
NbActionsModule,
|
||||||
|
NbButtonModule,
|
||||||
|
NbCardModule,
|
||||||
|
NbTabsetModule,
|
||||||
|
NbUserModule,
|
||||||
|
NbRadioModule,
|
||||||
|
NbSelectModule,
|
||||||
|
NbListModule,
|
||||||
|
NbIconModule,
|
||||||
|
} from '@nebular/theme';
|
||||||
import { NgxEchartsModule } from 'ngx-echarts';
|
import { NgxEchartsModule } from 'ngx-echarts';
|
||||||
|
|
||||||
import { ThemeModule } from '../../@theme/theme.module';
|
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 { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
|
||||||
import { TemperatureComponent } from './temperature/temperature.component';
|
import { TemperatureComponent } from './temperature/temperature.component';
|
||||||
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
|
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
|
||||||
import { TeamComponent } from './team/team.component';
|
|
||||||
import { KittenComponent } from './kitten/kitten.component';
|
import { KittenComponent } from './kitten/kitten.component';
|
||||||
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
|
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
|
||||||
import { ElectricityComponent } from './electricity/electricity.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 { PlayerComponent } from './rooms/player/player.component';
|
||||||
import { TrafficComponent } from './traffic/traffic.component';
|
import { TrafficComponent } from './traffic/traffic.component';
|
||||||
import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
FormsModule,
|
||||||
ThemeModule,
|
ThemeModule,
|
||||||
|
NbCardModule,
|
||||||
|
NbUserModule,
|
||||||
|
NbButtonModule,
|
||||||
|
NbTabsetModule,
|
||||||
|
NbActionsModule,
|
||||||
|
NbRadioModule,
|
||||||
|
NbSelectModule,
|
||||||
|
NbListModule,
|
||||||
|
NbIconModule,
|
||||||
|
NbButtonModule,
|
||||||
NgxEchartsModule,
|
NgxEchartsModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
|
|
@ -34,7 +55,6 @@ import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
||||||
RoomSelectorComponent,
|
RoomSelectorComponent,
|
||||||
TemperatureComponent,
|
TemperatureComponent,
|
||||||
RoomsComponent,
|
RoomsComponent,
|
||||||
TeamComponent,
|
|
||||||
KittenComponent,
|
KittenComponent,
|
||||||
SecurityCamerasComponent,
|
SecurityCamerasComponent,
|
||||||
ElectricityComponent,
|
ElectricityComponent,
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
|
||||||
position: 'top',
|
position: 'top',
|
||||||
backgroundColor: eTheme.tooltipBg,
|
backgroundColor: eTheme.tooltipBg,
|
||||||
borderColor: eTheme.tooltipBorderColor,
|
borderColor: eTheme.tooltipBorderColor,
|
||||||
borderWidth: 3,
|
borderWidth: 1,
|
||||||
formatter: '{c0} kWh',
|
formatter: '{c0} kWh',
|
||||||
extraCssText: eTheme.tooltipExtraCss,
|
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