mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 07:30:12 +01:00
feat: upgrade to angular9, upgrade to nebular 5.0, add material theme (#5694)
* chore: update README for extra theme (#5466) * fix(tinymce): set absolute path for skin url (#5491) * feat: add calendar with week numbers example (#5515) * chore(readme): update bundles section text * fix(forms): add missing forms module import (#5530) * feat: update Nebular to 4.4.0 (#5533) * chore(readme): update bundles image (#5565) * chore: add bundles black friday deal (#5569) * chore(readme): update black friday 2019 image (#5570) * chore(readme): remove bundles discounts image (#5574) * chore(readme): update bundles image (#5575) * feat(seo): add canonical tag (#5578) * chore(analytics): add proper analytics tracking URLs (#5604) * feat: Material theme * feat: upgrade to Angular 9 and Nebular 5 (#5628) BREAKING CHANGE: Angular updated to version 9. Nebular updated to version 5. `@agm/core` replaced with `@angular/google-maps`. `ng2-completer` replaced with `@akveo/ng2-completer`, read details [here](https://github.com/akveo/ng2-smart-table/pull/1140#issue-392285957). * Upgrade to the latest minor version of Angular * Upgrade to the latest major version of Angular * Upgrade to nebular 5 beta, remove "angular-tree-component" package * Remove packages uncompatible with Ivy * Fix post-upgrade errors * Replace @agm/core with @angular/google-maps * Fix search-map component using @angular/google-maps * Move material theme files from @nebular * Add missing images and change fg text color of dark material theme to bright white * Implement ripple effect for material themes * Add material style overrides * Add ripple effects to controls across application * Configure material theme, add material button and input examples * Add toggle button example * Fix lint warnings * Add material menu icon for material themes * Fix lint warnings for styles * Set menu font-weight to normal for material themes * Add "hover" and "active" styles for material menu * Update material styles * Override input styles for material themes * Override select styles for material themes * Hide rounded inputs for material themes * Update material styles * Remove non-material themes * Revert "Remove non-material themes" This reverts commitc2e319499f. * Fix actions color * Fix lint warnings * Fix scrollbar for "traffic" card * Fix scroll for "user activity" card * Revert "Fix scroll for "user activity" card" This reverts commit4d793b1731. * Revert "Fix scrollbar for "traffic" card" This reverts commitb00da0d260. * Fix scroll for nb-list inside nb-card * chore(readme): add material theme description * Remove unused angular2-toaster package * chore(readme): add material theme images * chore(readme): update text * Upgrade to @nebular 5 release * feat: update ng2-smart-table to 1.6 * chore(readme): add info about material theme branch * fix: put Material theme in front of others Otherwise Material theme style override Nebular * refactor(material): remove options list border radius * refactor: material input new look * fix(form-inputs): show material inputs * feat(material): change inputs style * refactor: improve observable layout change sharing * feat: add safe delayed event of layout change * fix: replace change layout with safe change * fix: limit front card width to prevent map overflow before repaint * build: starter-kit clean up * feat: upgrade to angular 9 Co-authored-by: David Henley <henleydr@gmail.com> Co-authored-by: Sergey Andrievskiy <yggg@users.noreply.github.com> Co-authored-by: Leon Lafayette <me@le0n.io> Co-authored-by: Vladimir Lugovsky <lugovsky.v@gmail.com> Co-authored-by: Sergey Andrievskiy <s.andrievskiy@akveo.com> Co-authored-by: Evgeny Lupanov <elupanov@users.noreply.github.com> Co-authored-by: eugene-sinitsyn <e.sinitsyn.s@akveo.com> Co-authored-by: Evgeny Lupanov <e.lupanov@akveo.com> Co-authored-by: sashaqred <sashaqred@ya.ru> Co-authored-by: Dmitry Nehaychik <4dmitr@gmail.com> Co-authored-by: Maksim Karatkevich <m.karatkevich@akveo.com>
This commit is contained in:
maksim-karatkevich
GitHub
parent
9b560a0661
commit
07f430126f
27 changed files with 9329 additions and 4475 deletions
22
README.md
22
README.md
|
|
@ -2,38 +2,42 @@
|
|||
|
||||
[Who uses ngx-admin?](https://github.com/akveo/ngx-admin/issues/1645)| [Documentation](https://akveo.github.io/ngx-admin/?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes) | [Installation Guidelines](https://akveo.github.io/ngx-admin/docs/getting-started/what-is-ngxadmin?utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes)
|
||||
|
||||
# Admin template based on Angular 8+ and <a href="https://github.com/akveo/nebular">Nebular</a>
|
||||
# Admin template based on Angular 9+ and <a href="https://github.com/akveo/nebular">Nebular</a>
|
||||
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=main_pic"><img src="https://i.imgur.com/mFdqvgG.png"/></a>
|
||||
|
||||
### Backend Integration Bundles
|
||||
Easy way to integrate ngx-admin with backend (.NET, Node.js, Java etc.).
|
||||
|
||||
<a target="_blank" href="https://hubs.ly/H0qwC1L0">
|
||||
<a target="_blank" href="https://hubs.ly/H0n4ZxC0">
|
||||
<img src="https://i.imgur.com/Ywbs8cl.png"/>
|
||||
</a>
|
||||
|
||||
[Checkout our Store](https://hubs.ly/H0qwC2Q0) for ready to use Backend Bundles.
|
||||
|
||||
|
||||
### With 3 stunning visual themes
|
||||
### With 6 stunning visual themes
|
||||
|
||||
|
||||
#### Material Dark
|
||||
<a target="_blank" href="https://hubs.ly/H0nxM3b0"><img src="https://i.imgur.com/csP0aZ9.png"/></a>
|
||||
|
||||
#### Material Light
|
||||
<a target="_blank" href="https://hubs.ly/H0nxNmv0"><img src="https://i.imgur.com/J5Rmgn4.png"/></a>
|
||||
|
||||
#### Default
|
||||
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=default&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a>
|
||||
<a target="_blank" href="https://hubs.ly/H0n4Tgv0"><img src="https://i.imgur.com/Kn3xDKQ.png"/></a>
|
||||
|
||||
#### Dark
|
||||
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/FAn5iXY.png"/></a>
|
||||
<a target="_blank" href="https://hubs.ly/H0n4Th20"><img src="https://i.imgur.com/FAn5iXY.png"/></a>
|
||||
|
||||
#### Cosmic
|
||||
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/iJu2YDF.png"/></a>
|
||||
<a target="_blank" href="https://hubs.ly/H0n4Tj80"><img src="https://i.imgur.com/iJu2YDF.png"/></a>
|
||||
|
||||
#### Corporate
|
||||
<a target="_blank" href="http://akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_source=github&utm_medium=ngx_admin_readme&utm_campaign=themes"><img src="https://i.imgur.com/GpUt6NW.png"/></a>
|
||||
<a target="_blank" href="https://hubs.ly/H0n4TDQ0"><img src="https://i.imgur.com/GpUt6NW.png"/></a>
|
||||
|
||||
### What's included:
|
||||
|
||||
- Angular 8+ & Typescript
|
||||
- Angular 9+ & Typescript
|
||||
- Bootstrap 4+ & SCSS
|
||||
- Responsive layout
|
||||
- RTL support
|
||||
|
|
|
|||
56
angular.json
56
angular.json
|
|
@ -11,6 +11,7 @@
|
|||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"aot": true,
|
||||
"preserveSymlinks": true,
|
||||
"rebaseRootRelativeCssUrls": true,
|
||||
"outputPath": "dist",
|
||||
|
|
@ -21,24 +22,45 @@
|
|||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico",
|
||||
"src/favicon.png"
|
||||
"src/favicon.png",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "node_modules/leaflet/dist/images",
|
||||
"output": "/assets/img/markers"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/bootstrap/dist/css/bootstrap.css",
|
||||
"node_modules/typeface-exo/index.css",
|
||||
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
|
||||
"node_modules/ionicons/scss/ionicons.scss",
|
||||
"node_modules/@fortawesome/fontawesome-free/css/all.css",
|
||||
"node_modules/socicon/css/socicon.css",
|
||||
"node_modules/nebular-icons/scss/nebular-icons.scss",
|
||||
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
|
||||
"node_modules/leaflet/dist/leaflet.css",
|
||||
"src/app/@theme/styles/styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/pace-js/pace.min.js"
|
||||
"node_modules/pace-js/pace.min.js",
|
||||
"node_modules/tinymce/tinymce.min.js",
|
||||
"node_modules/tinymce/themes/modern/theme.min.js",
|
||||
"node_modules/tinymce/plugins/link/plugin.min.js",
|
||||
"node_modules/tinymce/plugins/paste/plugin.min.js",
|
||||
"node_modules/tinymce/plugins/table/plugin.min.js",
|
||||
"node_modules/echarts/dist/echarts.min.js",
|
||||
"node_modules/echarts/dist/extension/bmap.min.js",
|
||||
"node_modules/chart.js/dist/Chart.min.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
|
|
@ -82,13 +104,22 @@
|
|||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"scripts": [
|
||||
"node_modules/pace-js/pace.min.js"
|
||||
"node_modules/pace-js/pace.min.js",
|
||||
"node_modules/tinymce/tinymce.min.js",
|
||||
"node_modules/tinymce/themes/modern/theme.min.js",
|
||||
"node_modules/tinymce/plugins/link/plugin.min.js",
|
||||
"node_modules/tinymce/plugins/paste/plugin.min.js",
|
||||
"node_modules/tinymce/plugins/table/plugin.min.js",
|
||||
"node_modules/echarts/dist/echarts.min.js",
|
||||
"node_modules/echarts/dist/extension/bmap.min.js",
|
||||
"node_modules/chart.js/dist/Chart.min.js"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/bootstrap/dist/css/bootstrap.css",
|
||||
"node_modules/typeface-exo/index.css",
|
||||
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
|
||||
"node_modules/ionicons/scss/ionicons.scss",
|
||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"node_modules/socicon/css/socicon.css",
|
||||
"node_modules/nebular-icons/scss/nebular-icons.scss",
|
||||
"node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
|
||||
|
|
@ -97,7 +128,12 @@
|
|||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico",
|
||||
"src/favicon.png"
|
||||
"src/favicon.png",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "node_modules/leaflet/dist/images",
|
||||
"output": "/assets/img/markers"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -141,8 +177,14 @@
|
|||
"defaultProject": "ngx-admin-demo",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"styleext": "scss"
|
||||
"prefix": "ngx",
|
||||
"style": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {}
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "ngx"
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": "25084c8e-7e3c-4955-91c5-66ed595e9666"
|
||||
}
|
||||
}
|
||||
}
|
||||
11634
package-lock.json
generated
11634
package-lock.json
generated
File diff suppressed because it is too large
Load diff
69
package.json
69
package.json
|
|
@ -26,51 +26,68 @@
|
|||
"docs": "compodoc -p src/tsconfig.app.json -d docs",
|
||||
"docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
|
||||
"prepush": "npm run lint:ci",
|
||||
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
|
||||
"release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
|
||||
"postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points"
|
||||
},
|
||||
"dependencies": {
|
||||
"@agm/core": "^1.0.0-beta.5",
|
||||
"@angular/animations": "^8.0.0",
|
||||
"@angular/cdk": "^8.0.0",
|
||||
"@angular/common": "^8.0.0",
|
||||
"@angular/compiler": "^8.0.0",
|
||||
"@angular/core": "^8.0.0",
|
||||
"@angular/forms": "^8.0.0",
|
||||
"@angular/platform-browser": "^8.0.0",
|
||||
"@angular/platform-browser-dynamic": "^8.0.0",
|
||||
"@angular/router": "^8.0.0",
|
||||
"@nebular/auth": "4.1.2",
|
||||
"@nebular/eva-icons": "4.1.2",
|
||||
"@nebular/security": "4.1.2",
|
||||
"@nebular/theme": "4.1.2",
|
||||
"@akveo/ng2-completer": "^9.0.1",
|
||||
"@angular/animations": "^9.0.4",
|
||||
"@angular/cdk": "^9.1.2",
|
||||
"@angular/common": "^9.0.4",
|
||||
"@angular/compiler": "^9.0.4",
|
||||
"@angular/core": "^9.0.4",
|
||||
"@angular/forms": "^9.0.4",
|
||||
"@angular/material": "^9.1.0",
|
||||
"@angular/platform-browser": "^9.0.4",
|
||||
"@angular/platform-browser-dynamic": "^9.0.4",
|
||||
"@angular/router": "^9.0.4",
|
||||
"@asymmetrik/ngx-leaflet": "3.0.1",
|
||||
"@nebular/auth": "5.0.0",
|
||||
"@nebular/eva-icons": "5.0.0",
|
||||
"@nebular/security": "5.0.0",
|
||||
"@nebular/theme": "5.0.0",
|
||||
"@swimlane/ngx-charts": "^13.0.2",
|
||||
"angular2-chartjs": "0.4.1",
|
||||
"bootstrap": "4.3.1",
|
||||
"chart.js": "2.7.1",
|
||||
"ckeditor": "4.7.3",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.1",
|
||||
"eva-icons": "^1.1.0",
|
||||
"echarts": "^4.0.2",
|
||||
"eva-icons": "^1.1.3",
|
||||
"intl": "1.2.5",
|
||||
"ionicons": "2.0.1",
|
||||
"leaflet": "1.2.0",
|
||||
"nebular-icons": "1.1.0",
|
||||
"ng2-ckeditor": "^1.2.2",
|
||||
"ngx-echarts": "^4.2.2",
|
||||
"node-sass": "^4.12.0",
|
||||
"normalize.css": "6.0.0",
|
||||
"pace-js": "1.0.2",
|
||||
"roboto-fontface": "0.8.0",
|
||||
"rxjs": "6.5.2",
|
||||
"rxjs": "6.5.4",
|
||||
"rxjs-compat": "6.3.0",
|
||||
"socicon": "3.0.5",
|
||||
"style-loader": "^1.1.3",
|
||||
"tinymce": "4.5.7",
|
||||
"tslib": "^1.10.0",
|
||||
"typeface-exo": "0.0.22",
|
||||
"web-animations-js": "github:angular/web-animations-js#release_pr208",
|
||||
"zone.js": "~0.9.1"
|
||||
"web-animations-js": "^2.3.2",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.800.2",
|
||||
"@angular/cli": "^8.0.2",
|
||||
"@angular/compiler-cli": "^8.0.0",
|
||||
"@angular/language-service": "8.0.0",
|
||||
"@angular-devkit/build-angular": "~0.900.4",
|
||||
"@angular/cli": "^9.0.4",
|
||||
"@angular/compiler-cli": "^9.0.4",
|
||||
"@angular/language-service": "9.0.4",
|
||||
"@compodoc/compodoc": "1.0.1",
|
||||
"@fortawesome/fontawesome-free": "^5.2.0",
|
||||
"@types/d3-color": "1.0.5",
|
||||
"@types/jasmine": "2.5.54",
|
||||
"@types/jasminewd2": "2.0.3",
|
||||
"@types/node": "6.0.90",
|
||||
"codelyzer": "^5.0.1",
|
||||
"@types/leaflet": "1.2.3",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^5.1.2",
|
||||
"conventional-changelog-cli": "1.3.4",
|
||||
"husky": "0.13.3",
|
||||
"jasmine-core": "2.6.4",
|
||||
|
|
@ -88,6 +105,6 @@
|
|||
"ts-node": "3.2.2",
|
||||
"tslint": "^5.7.0",
|
||||
"tslint-language-service": "^0.9.9",
|
||||
"typescript": "3.4.5"
|
||||
"typescript": "3.7.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
|
|||
import { of as observableOf } from 'rxjs';
|
||||
|
||||
import { throwIfAlreadyLoaded } from './module-import-guard';
|
||||
import { AnalyticsService } from './utils';
|
||||
import {
|
||||
AnalyticsService,
|
||||
LayoutService,
|
||||
} from './utils';
|
||||
import { UserData } from './data/users';
|
||||
import { UserService } from './mock/users.service';
|
||||
import { MockDataModule } from './mock/mock-data.module';
|
||||
|
|
@ -78,6 +81,7 @@ export const NB_CORE_PROVIDERS = [
|
|||
provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
|
||||
},
|
||||
AnalyticsService,
|
||||
LayoutService,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -94,8 +98,8 @@ export class CoreModule {
|
|||
throwIfAlreadyLoaded(parentModule, 'CoreModule');
|
||||
}
|
||||
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return <ModuleWithProviders>{
|
||||
static forRoot(): ModuleWithProviders<CoreModule> {
|
||||
return {
|
||||
ngModule: CoreModule,
|
||||
providers: [
|
||||
...NB_CORE_PROVIDERS,
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
export { AnalyticsService } from './analytics.service';
|
||||
import { LayoutService } from './layout.service';
|
||||
import { AnalyticsService } from './analytics.service';
|
||||
|
||||
export {
|
||||
LayoutService,
|
||||
AnalyticsService,
|
||||
};
|
||||
|
|
|
|||
26
src/app/@core/utils/layout.service.ts
Normal file
26
src/app/@core/utils/layout.service.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
import { delay, shareReplay, debounceTime } from 'rxjs/operators';
|
||||
|
||||
@Injectable()
|
||||
export class LayoutService {
|
||||
|
||||
protected layoutSize$ = new Subject();
|
||||
protected layoutSizeChange$ = this.layoutSize$.pipe(
|
||||
shareReplay({ refCount: true }),
|
||||
);
|
||||
|
||||
changeLayoutSize() {
|
||||
this.layoutSize$.next();
|
||||
}
|
||||
|
||||
onChangeLayoutSize(): Observable<any> {
|
||||
return this.layoutSizeChange$.pipe(delay(1));
|
||||
}
|
||||
|
||||
onSafeChangeLayoutSize(): Observable<any> {
|
||||
return this.layoutSizeChange$.pipe(
|
||||
debounceTime(350),
|
||||
);
|
||||
}
|
||||
}
|
||||
11
src/app/@core/utils/ripple.service.ts
Normal file
11
src/app/@core/utils/ripple.service.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { RippleGlobalOptions } from '@angular/material/core';
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class RippleService implements RippleGlobalOptions {
|
||||
public disabled: boolean = false;
|
||||
|
||||
public toggle(enabled: boolean): void {
|
||||
this.disabled = !enabled;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,28 @@
|
|||
<div class="header-container">
|
||||
<div class="logo-container">
|
||||
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
|
||||
<nb-icon icon="menu-2-outline"></nb-icon>
|
||||
<a
|
||||
href="#"
|
||||
class="sidebar-toggle"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
(click)="toggleSidebar()"
|
||||
>
|
||||
<nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-outline'"></nb-icon>
|
||||
</a>
|
||||
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
||||
</div>
|
||||
<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
|
||||
status="primary"
|
||||
matRipple
|
||||
[selected]="currentTheme"
|
||||
(selectedChange)="changeTheme($event)"
|
||||
>
|
||||
<nb-option
|
||||
*ngFor="let theme of themes"
|
||||
[value]="theme.value"
|
||||
matRipple
|
||||
>{{ theme.name }}</nb-option>
|
||||
</nb-select>
|
||||
<ngx-layout-direction-switcher class="direction-switcher"></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
|
|
@ -15,11 +31,32 @@
|
|||
<nb-actions size="small">
|
||||
|
||||
<nb-action class="control-item">
|
||||
<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-search
|
||||
type="rotate-layout"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
></nb-search></nb-action>
|
||||
<nb-action
|
||||
class="control-item"
|
||||
icon="email-outline"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
></nb-action>
|
||||
<nb-action
|
||||
class="control-item"
|
||||
icon="bell-outline"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
></nb-action>
|
||||
<nb-action
|
||||
class="user-action"
|
||||
*nbIsGranted="['view', 'user']"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true">
|
||||
<nb-user [nbContextMenu]="userMenu"
|
||||
[onlyPicture]="userPictureOnly"
|
||||
[name]="user?.name"
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
width: auto;
|
||||
|
||||
.sidebar-toggle {
|
||||
@include nb-ltr(padding-right, 1.25rem);
|
||||
@include nb-rtl(padding-left, 1.25rem);
|
||||
@include nb-ltr(margin-right, 1.25rem);
|
||||
@include nb-rtl(margin-left, 1.25rem);
|
||||
text-decoration: none;
|
||||
color: nb-theme(text-hint-color);
|
||||
nb-icon {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
|
|||
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
|
||||
|
||||
import { UserData } from '../../../@core/data/users';
|
||||
import { LayoutService } from '../../../@core/utils';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { Subject, Observable } from 'rxjs';
|
||||
import { RippleService } from '../../../@core/utils/ripple.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-header',
|
||||
|
|
@ -13,6 +15,7 @@ import { Subject } from 'rxjs';
|
|||
export class HeaderComponent implements OnInit, OnDestroy {
|
||||
|
||||
private destroy$: Subject<void> = new Subject<void>();
|
||||
public readonly materialTheme$: Observable<boolean>;
|
||||
userPictureOnly: boolean = false;
|
||||
user: any;
|
||||
|
||||
|
|
@ -33,17 +36,34 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
value: 'corporate',
|
||||
name: 'Corporate',
|
||||
},
|
||||
{
|
||||
value: 'material-light',
|
||||
name: 'Material Light',
|
||||
},
|
||||
{
|
||||
value: 'material-dark',
|
||||
name: 'Material Dark',
|
||||
},
|
||||
];
|
||||
|
||||
currentTheme = 'default';
|
||||
|
||||
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
|
||||
|
||||
constructor(private sidebarService: NbSidebarService,
|
||||
private menuService: NbMenuService,
|
||||
private themeService: NbThemeService,
|
||||
private userService: UserData,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
public constructor(
|
||||
private sidebarService: NbSidebarService,
|
||||
private menuService: NbMenuService,
|
||||
private themeService: NbThemeService,
|
||||
private userService: UserData,
|
||||
private layoutService: LayoutService,
|
||||
private breakpointService: NbMediaBreakpointsService,
|
||||
private rippleService: RippleService,
|
||||
) {
|
||||
this.materialTheme$ = this.themeService.onThemeChange()
|
||||
.pipe(map(theme => {
|
||||
const themeName: string = theme?.name || '';
|
||||
return themeName.startsWith('material');
|
||||
}));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -66,7 +86,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
map(({ name }) => name),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe(themeName => this.currentTheme = themeName);
|
||||
.subscribe(themeName => {
|
||||
this.currentTheme = themeName;
|
||||
this.rippleService.toggle(themeName?.startsWith('material'));
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
@ -80,6 +103,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
|
||||
toggleSidebar(): boolean {
|
||||
this.sidebarService.toggle(true, 'menu-sidebar');
|
||||
this.layoutService.changeLayoutSize();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,4 +8,15 @@
|
|||
right: 0.41rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
nb-card nb-list {
|
||||
@include nb-scrollbars(
|
||||
nb-theme(card-scrollbar-color),
|
||||
nb-theme(card-scrollbar-background-color),
|
||||
nb-theme(card-scrollbar-width));
|
||||
}
|
||||
|
||||
.table {
|
||||
color: nb-theme(text-basic-color) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
src/app/@theme/styles/material/_angular-material.scss
Normal file
15
src/app/@theme/styles/material/_angular-material.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin angular-material() {
|
||||
@include mat-core();
|
||||
|
||||
@include nb-for-theme(material-dark) {
|
||||
$custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey));
|
||||
@include angular-material-theme($custom-dark-theme);
|
||||
}
|
||||
|
||||
@include nb-for-theme(material-light) {
|
||||
$custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink));
|
||||
@include angular-material-theme($custom-light-theme);
|
||||
}
|
||||
}
|
||||
501
src/app/@theme/styles/material/_material-dark.scss
Normal file
501
src/app/@theme/styles/material/_material-dark.scss
Normal file
|
|
@ -0,0 +1,501 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '~@nebular/theme/styles/core/functions';
|
||||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
$theme: (
|
||||
color-primary-100: #fff2f7,
|
||||
color-primary-200: #ffd4e3,
|
||||
color-primary-300: #fc9abc,
|
||||
color-primary-400: #f24681,
|
||||
color-primary-500: #e91d63,
|
||||
color-primary-600: #c71451,
|
||||
color-primary-700: #a80d43,
|
||||
color-primary-800: #870935,
|
||||
color-primary-900: #70062a,
|
||||
|
||||
color-primary-transparent-100: rgba(233, 29, 99, 0.08),
|
||||
color-primary-transparent-200: rgba(233, 29, 99, 0.16),
|
||||
color-primary-transparent-300: rgba(233, 29, 99, 0.24),
|
||||
color-primary-transparent-400: rgba(233, 29, 99, 0.32),
|
||||
color-primary-transparent-500: rgba(233, 29, 99, 0.4),
|
||||
color-primary-transparent-600: rgba(233, 29, 99, 0.48),
|
||||
|
||||
color-success-100: #edfbd1,
|
||||
color-success-200: #d7f7a6,
|
||||
color-success-300: #b4e775,
|
||||
color-success-400: #8fcf50,
|
||||
color-success-500: #60af20,
|
||||
color-success-600: #499617,
|
||||
color-success-700: #357d10,
|
||||
color-success-800: #24650a,
|
||||
color-success-900: #175306,
|
||||
|
||||
color-success-transparent-100: rgba(96, 175, 32, 0.08),
|
||||
color-success-transparent-200: rgba(96, 175, 32, 0.16),
|
||||
color-success-transparent-300: rgba(96, 175, 32, 0.24),
|
||||
color-success-transparent-400: rgba(96, 175, 32, 0.32),
|
||||
color-success-transparent-500: rgba(96, 175, 32, 0.4),
|
||||
color-success-transparent-600: rgba(96, 175, 32, 0.48),
|
||||
|
||||
color-info-100: #ccf7fe,
|
||||
color-info-200: #99e9fd,
|
||||
color-info-300: #66d3f9,
|
||||
color-info-400: #40bbf4,
|
||||
color-info-500: #0495ee,
|
||||
color-info-600: #0273cc,
|
||||
color-info-700: #0256ab,
|
||||
color-info-800: #013d8a,
|
||||
color-info-900: #002b72,
|
||||
|
||||
color-info-transparent-100: rgba(4, 149, 238, 0.08),
|
||||
color-info-transparent-200: rgba(4, 149, 238, 0.16),
|
||||
color-info-transparent-300: rgba(4, 149, 238, 0.24),
|
||||
color-info-transparent-400: rgba(4, 149, 238, 0.32),
|
||||
color-info-transparent-500: rgba(4, 149, 238, 0.4),
|
||||
color-info-transparent-600: rgba(4, 149, 238, 0.48),
|
||||
|
||||
color-warning-100: #fff3cd,
|
||||
color-warning-200: #ffe49b,
|
||||
color-warning-300: #ffd169,
|
||||
color-warning-400: #ffbe43,
|
||||
color-warning-500: #ff9f05,
|
||||
color-warning-600: #db8003,
|
||||
color-warning-700: #b76302,
|
||||
color-warning-800: #934a01,
|
||||
color-warning-900: #7a3800,
|
||||
|
||||
color-warning-transparent-100: rgba(255, 159, 5, 0.08),
|
||||
color-warning-transparent-200: rgba(255, 159, 5, 0.16),
|
||||
color-warning-transparent-300: rgba(255, 159, 5, 0.24),
|
||||
color-warning-transparent-400: rgba(255, 159, 5, 0.32),
|
||||
color-warning-transparent-500: rgba(255, 159, 5, 0.4),
|
||||
color-warning-transparent-600: rgba(255, 159, 5, 0.48),
|
||||
|
||||
color-danger-100: #fbd2c8,
|
||||
color-danger-200: #f79e94,
|
||||
color-danger-300: #e75d5c,
|
||||
color-danger-400: #cf3341,
|
||||
color-danger-500: #b00020,
|
||||
color-danger-600: #970029,
|
||||
color-danger-700: #7e002e,
|
||||
color-danger-800: #66002f,
|
||||
color-danger-900: #54002f,
|
||||
|
||||
color-danger-transparent-100: rgba(176, 0, 32, 0.08),
|
||||
color-danger-transparent-200: rgba(176, 0, 32, 0.16),
|
||||
color-danger-transparent-300: rgba(176, 0, 32, 0.24),
|
||||
color-danger-transparent-400: rgba(176, 0, 32, 0.32),
|
||||
color-danger-transparent-500: rgba(176, 0, 32, 0.4),
|
||||
color-danger-transparent-600: rgba(176, 0, 32, 0.48),
|
||||
|
||||
color-basic-100: #ffffff,
|
||||
color-basic-200: #f5f5f5,
|
||||
color-basic-300: #f5f5f5,
|
||||
color-basic-400: #d4d4d4,
|
||||
color-basic-500: #b3b3b3,
|
||||
color-basic-600: #808080,
|
||||
color-basic-700: #404040,
|
||||
color-basic-800: #353535,
|
||||
color-basic-900: #303030,
|
||||
color-basic-1000: #1f1f1f,
|
||||
color-basic-1100: #141414,
|
||||
|
||||
color-basic-transparent-100: rgba(128, 128, 128, 0.08),
|
||||
color-basic-transparent-200: rgba(128, 128, 128, 0.16),
|
||||
color-basic-transparent-300: rgba(128, 128, 128, 0.24),
|
||||
color-basic-transparent-400: rgba(128, 128, 128, 0.32),
|
||||
color-basic-transparent-500: rgba(128, 128, 128, 0.4),
|
||||
color-basic-transparent-600: rgba(128, 128, 128, 0.48),
|
||||
|
||||
color-basic-control-transparent-100: rgba(255, 255, 255, 0.08),
|
||||
color-basic-control-transparent-200: rgba(255, 255, 255, 0.16),
|
||||
color-basic-control-transparent-300: rgba(255, 255, 255, 0.24),
|
||||
color-basic-control-transparent-400: rgba(255, 255, 255, 0.32),
|
||||
color-basic-control-transparent-500: rgba(255, 255, 255, 0.4),
|
||||
color-basic-control-transparent-600: rgba(255, 255, 255, 0.48),
|
||||
|
||||
color-basic-focus: color-basic-400,
|
||||
color-basic-hover: color-basic-200,
|
||||
color-basic-default: color-basic-300,
|
||||
color-basic-active: color-basic-400,
|
||||
color-basic-disabled: color-basic-transparent-300,
|
||||
color-basic-focus-border: color-basic-500,
|
||||
color-basic-hover-border: color-basic-hover,
|
||||
color-basic-default-border: color-basic-default,
|
||||
color-basic-active-border: color-basic-active,
|
||||
color-basic-disabled-border: color-basic-disabled,
|
||||
|
||||
color-basic-transparent-focus: color-basic-transparent-300,
|
||||
color-basic-transparent-hover: color-basic-transparent-200,
|
||||
color-basic-transparent-default: color-basic-transparent-100,
|
||||
color-basic-transparent-active: color-basic-transparent-300,
|
||||
color-basic-transparent-disabled: color-basic-transparent-200,
|
||||
color-basic-transparent-focus-border: color-basic-500,
|
||||
color-basic-transparent-hover-border: color-basic-500,
|
||||
color-basic-transparent-default-border: color-basic-500,
|
||||
color-basic-transparent-active-border: color-basic-500,
|
||||
color-basic-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-primary-focus: color-primary-600,
|
||||
color-primary-hover: color-primary-400,
|
||||
color-primary-default: color-primary-500,
|
||||
color-primary-active: color-primary-600,
|
||||
color-primary-disabled: color-basic-transparent-300,
|
||||
color-primary-focus-border: color-primary-700,
|
||||
color-primary-hover-border: color-primary-hover,
|
||||
color-primary-default-border: color-primary-default,
|
||||
color-primary-active-border: color-primary-active,
|
||||
color-primary-disabled-border: color-primary-disabled,
|
||||
|
||||
color-primary-transparent-focus: color-primary-transparent-300,
|
||||
color-primary-transparent-hover: color-primary-transparent-200,
|
||||
color-primary-transparent-default: color-primary-transparent-100,
|
||||
color-primary-transparent-active: color-primary-transparent-300,
|
||||
color-primary-transparent-disabled: color-basic-transparent-200,
|
||||
color-primary-transparent-focus-border: color-primary-500,
|
||||
color-primary-transparent-hover-border: color-primary-500,
|
||||
color-primary-transparent-default-border: color-primary-500,
|
||||
color-primary-transparent-active-border: color-primary-500,
|
||||
color-primary-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-success-focus: color-success-600,
|
||||
color-success-hover: color-success-400,
|
||||
color-success-default: color-success-500,
|
||||
color-success-active: color-success-600,
|
||||
color-success-disabled: color-basic-transparent-300,
|
||||
color-success-focus-border: color-success-700,
|
||||
color-success-hover-border: color-success-hover,
|
||||
color-success-default-border: color-success-default,
|
||||
color-success-active-border: color-success-active,
|
||||
color-success-disabled-border: color-success-disabled,
|
||||
|
||||
color-success-transparent-focus: color-success-transparent-300,
|
||||
color-success-transparent-hover: color-success-transparent-200,
|
||||
color-success-transparent-default: color-success-transparent-100,
|
||||
color-success-transparent-active: color-success-transparent-300,
|
||||
color-success-transparent-disabled: color-basic-transparent-200,
|
||||
color-success-transparent-focus-border: color-success-500,
|
||||
color-success-transparent-hover-border: color-success-500,
|
||||
color-success-transparent-default-border: color-success-500,
|
||||
color-success-transparent-active-border: color-success-500,
|
||||
color-success-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-info-focus: color-info-600,
|
||||
color-info-hover: color-info-400,
|
||||
color-info-default: color-info-500,
|
||||
color-info-active: color-info-600,
|
||||
color-info-disabled: color-basic-transparent-300,
|
||||
color-info-focus-border: color-info-700,
|
||||
color-info-hover-border: color-info-hover,
|
||||
color-info-default-border: color-info-default,
|
||||
color-info-active-border: color-info-active,
|
||||
color-info-disabled-border: color-info-disabled,
|
||||
|
||||
color-info-transparent-focus: color-info-transparent-300,
|
||||
color-info-transparent-hover: color-info-transparent-200,
|
||||
color-info-transparent-default: color-info-transparent-100,
|
||||
color-info-transparent-active: color-info-transparent-300,
|
||||
color-info-transparent-disabled: color-basic-transparent-200,
|
||||
color-info-transparent-focus-border: color-info-500,
|
||||
color-info-transparent-hover-border: color-info-500,
|
||||
color-info-transparent-default-border: color-info-500,
|
||||
color-info-transparent-active-border: color-info-500,
|
||||
color-info-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-warning-focus: color-warning-600,
|
||||
color-warning-hover: color-warning-400,
|
||||
color-warning-default: color-warning-500,
|
||||
color-warning-active: color-warning-600,
|
||||
color-warning-disabled: color-basic-transparent-300,
|
||||
color-warning-focus-border: color-warning-700,
|
||||
color-warning-hover-border: color-warning-hover,
|
||||
color-warning-default-border: color-warning-default,
|
||||
color-warning-active-border: color-warning-active,
|
||||
color-warning-disabled-border: color-warning-disabled,
|
||||
|
||||
color-warning-transparent-focus: color-warning-transparent-300,
|
||||
color-warning-transparent-hover: color-warning-transparent-200,
|
||||
color-warning-transparent-default: color-warning-transparent-100,
|
||||
color-warning-transparent-active: color-warning-transparent-300,
|
||||
color-warning-transparent-disabled: color-basic-transparent-200,
|
||||
color-warning-transparent-focus-border: color-warning-500,
|
||||
color-warning-transparent-hover-border: color-warning-500,
|
||||
color-warning-transparent-default-border: color-warning-500,
|
||||
color-warning-transparent-active-border: color-warning-500,
|
||||
color-warning-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-danger-focus: color-danger-600,
|
||||
color-danger-hover: color-danger-400,
|
||||
color-danger-default: color-danger-500,
|
||||
color-danger-active: color-danger-600,
|
||||
color-danger-disabled: color-basic-transparent-300,
|
||||
color-danger-focus-border: color-danger-700,
|
||||
color-danger-hover-border: color-danger-hover,
|
||||
color-danger-default-border: color-danger-default,
|
||||
color-danger-active-border: color-danger-active,
|
||||
color-danger-disabled-border: color-danger-disabled,
|
||||
|
||||
color-danger-transparent-focus: color-danger-transparent-300,
|
||||
color-danger-transparent-hover: color-danger-transparent-200,
|
||||
color-danger-transparent-default: color-danger-transparent-100,
|
||||
color-danger-transparent-active: color-danger-transparent-300,
|
||||
color-danger-transparent-disabled: color-basic-transparent-200,
|
||||
color-danger-transparent-focus-border: color-danger-500,
|
||||
color-danger-transparent-hover-border: color-danger-500,
|
||||
color-danger-transparent-default-border: color-danger-500,
|
||||
color-danger-transparent-active-border: color-danger-500,
|
||||
color-danger-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-control-focus: color-basic-300,
|
||||
color-control-hover: color-basic-200,
|
||||
color-control-default: color-basic-100,
|
||||
color-control-active: color-basic-300,
|
||||
color-control-disabled: color-basic-transparent-300,
|
||||
color-control-focus-border: color-basic-500,
|
||||
color-control-hover-border: color-control-hover,
|
||||
color-control-default-border: color-control-default,
|
||||
color-control-active-border: color-control-active,
|
||||
color-control-disabled-border: color-control-disabled,
|
||||
|
||||
color-control-transparent-focus: color-basic-control-transparent-300,
|
||||
color-control-transparent-hover: color-basic-control-transparent-200,
|
||||
color-control-transparent-default: color-basic-control-transparent-100,
|
||||
color-control-transparent-active: color-basic-control-transparent-300,
|
||||
color-control-transparent-disabled: color-basic-transparent-200,
|
||||
color-control-transparent-focus-border: color-basic-100,
|
||||
color-control-transparent-hover-border: color-basic-100,
|
||||
color-control-transparent-default-border: color-basic-100,
|
||||
color-control-transparent-active-border: color-basic-100,
|
||||
color-control-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
background-basic-color-1: color-basic-1000,
|
||||
background-basic-color-2: color-basic-1000,
|
||||
background-basic-color-3: color-basic-900,
|
||||
background-basic-color-4: color-basic-1100,
|
||||
|
||||
background-alternative-color-1: color-basic-100,
|
||||
background-alternative-color-2: color-basic-200,
|
||||
background-alternative-color-3: color-basic-300,
|
||||
background-alternative-color-4: color-basic-400,
|
||||
|
||||
border-basic-color-1: color-basic-800,
|
||||
border-basic-color-2: color-basic-900,
|
||||
border-basic-color-3: color-basic-1000,
|
||||
border-basic-color-4: color-basic-1100,
|
||||
border-basic-color-5: color-basic-1100,
|
||||
|
||||
border-alternative-color-1: color-basic-100,
|
||||
border-alternative-color-2: color-basic-200,
|
||||
border-alternative-color-3: color-basic-300,
|
||||
border-alternative-color-4: color-basic-400,
|
||||
border-alternative-color-5: color-basic-500,
|
||||
|
||||
border-primary-color-1: color-primary-500,
|
||||
border-primary-color-2: color-primary-600,
|
||||
border-primary-color-3: color-primary-700,
|
||||
border-primary-color-4: color-primary-800,
|
||||
border-primary-color-5: color-primary-900,
|
||||
|
||||
border-success-color-1: color-success-500,
|
||||
border-success-color-2: color-success-600,
|
||||
border-success-color-3: color-success-700,
|
||||
border-success-color-4: color-success-800,
|
||||
border-success-color-5: color-success-900,
|
||||
|
||||
border-info-color-1: color-info-500,
|
||||
border-info-color-2: color-info-600,
|
||||
border-info-color-3: color-info-700,
|
||||
border-info-color-4: color-info-800,
|
||||
border-info-color-5: color-info-900,
|
||||
|
||||
border-warning-color-1: color-warning-500,
|
||||
border-warning-color-2: color-warning-600,
|
||||
border-warning-color-3: color-warning-700,
|
||||
border-warning-color-4: color-warning-800,
|
||||
border-warning-color-5: color-warning-900,
|
||||
|
||||
border-danger-color-1: color-danger-500,
|
||||
border-danger-color-2: color-danger-600,
|
||||
border-danger-color-3: color-danger-700,
|
||||
border-danger-color-4: color-danger-800,
|
||||
border-danger-color-5: color-danger-900,
|
||||
|
||||
text-basic-color: color-basic-100,
|
||||
text-alternate-color: color-basic-900,
|
||||
text-control-color: color-basic-100,
|
||||
text-disabled-color: color-basic-transparent-600,
|
||||
text-hint-color: color-basic-600,
|
||||
|
||||
text-primary-color: color-primary-default,
|
||||
text-primary-focus-color: color-primary-focus,
|
||||
text-primary-hover-color: color-primary-hover,
|
||||
text-primary-active-color: color-primary-active,
|
||||
text-primary-disabled-color: color-primary-400,
|
||||
|
||||
text-success-color: color-success-default,
|
||||
text-success-focus-color: color-success-focus,
|
||||
text-success-hover-color: color-success-hover,
|
||||
text-success-active-color: color-success-active,
|
||||
text-success-disabled-color: color-success-400,
|
||||
|
||||
text-info-color: color-info-default,
|
||||
text-info-focus-color: color-info-focus,
|
||||
text-info-hover-color: color-info-hover,
|
||||
text-info-active-color: color-info-active,
|
||||
text-info-disabled-color: color-info-400,
|
||||
|
||||
text-warning-color: color-warning-default,
|
||||
text-warning-focus-color: color-warning-focus,
|
||||
text-warning-hover-color: color-warning-hover,
|
||||
text-warning-active-color: color-warning-active,
|
||||
text-warning-disabled-color: color-warning-400,
|
||||
|
||||
text-danger-color: color-danger-default,
|
||||
text-danger-focus-color: color-danger-focus,
|
||||
text-danger-hover-color: color-danger-hover,
|
||||
text-danger-active-color: color-danger-active,
|
||||
text-danger-disabled-color: color-danger-400,
|
||||
|
||||
font-family-primary: unquote('Roboto, sans-serif'),
|
||||
|
||||
shadow: unquote(
|
||||
'0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'
|
||||
),
|
||||
card-shadow: shadow,
|
||||
header-shadow: unquote(
|
||||
'0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)'
|
||||
),
|
||||
|
||||
header-background-color: color-primary-default,
|
||||
footer-background-color: color-primary-default,
|
||||
header-text-color: text-basic-color,
|
||||
footer-text-color: text-basic-color,
|
||||
footer-text-highlight-color: footer-text-color,
|
||||
sidebar-background-color: background-basic-color-2,
|
||||
|
||||
material-regular-font-weight: 400,
|
||||
menu-text-font-weight: material-regular-font-weight,
|
||||
menu-text-color: rgba(255, 255, 255, 0.7),
|
||||
menu-item-hover-text-color: rgba(255, 255, 255, 0.7),
|
||||
menu-item-hover-background-color: rgba(255, 255, 255, 0.04),
|
||||
menu-item-active-background-color: rgba(0, 0, 0, 0.25),
|
||||
|
||||
menu-item-icon-color: rgba(255, 255, 255, 0.7),
|
||||
menu-item-icon-hover-color: rgba(255, 255, 255, 0.7),
|
||||
|
||||
menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04),
|
||||
menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1),
|
||||
menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.25),
|
||||
|
||||
card-border-style: none,
|
||||
card-background-color: color-basic-800,
|
||||
card-divider-color: color-basic-700,
|
||||
|
||||
input-border-width: 1px,
|
||||
input-basic-border-color: rgba(255, 255, 255, 0.7),
|
||||
input-basic-focus-border-color: color-primary-focus,
|
||||
input-basic-disabled-border-color: input-basic-border-color,
|
||||
input-basic-hover-border-color: input-basic-border-color,
|
||||
input-basic-background-color: transparent,
|
||||
input-basic-focus-background-color: transparent,
|
||||
input-basic-disabled-background-color: transparent,
|
||||
input-basic-hover-background-color: transparent,
|
||||
input-rectangle-border-radius: 0.25rem,
|
||||
input-semi-round-border-radius: 0.25rem,
|
||||
input-round-border-radius: 0.25rem,
|
||||
input-medium-padding: 0.75rem 1rem,
|
||||
input-large-padding: 1rem 1rem,
|
||||
input-small-text-font-weight: text-paragraph-font-weight,
|
||||
input-medium-text-font-weight: text-paragraph-font-weight,
|
||||
input-large-text-font-weight: text-paragraph-font-weight,
|
||||
input-primary-background-color: input-basic-background-color,
|
||||
input-primary-focus-background-color: input-basic-focus-background-color,
|
||||
input-primary-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-primary-hover-background-color: input-basic-hover-background-color,
|
||||
input-info-background-color: input-basic-background-color,
|
||||
input-info-focus-background-color: input-basic-focus-background-color,
|
||||
input-info-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-info-hover-background-color: input-basic-hover-background-color,
|
||||
input-success-background-color: input-basic-background-color,
|
||||
input-success-focus-background-color: input-basic-focus-background-color,
|
||||
input-success-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-success-hover-background-color: input-basic-hover-background-color,
|
||||
input-warning-background-color: input-basic-background-color,
|
||||
input-warning-focus-background-color: input-basic-focus-background-color,
|
||||
input-warning-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-warning-hover-background-color: input-basic-hover-background-color,
|
||||
input-danger-background-color: input-basic-background-color,
|
||||
input-danger-focus-background-color: input-basic-focus-background-color,
|
||||
input-danger-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-danger-hover-background-color: input-basic-hover-background-color,
|
||||
input-control-background-color: input-basic-background-color,
|
||||
input-control-focus-background-color: input-basic-focus-background-color,
|
||||
input-control-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-control-hover-background-color: input-basic-hover-background-color,
|
||||
|
||||
select-tiny-text-font-weight: material-regular-font-weight,
|
||||
select-small-text-font-weight: material-regular-font-weight,
|
||||
select-medium-text-font-weight: material-regular-font-weight,
|
||||
select-large-text-font-weight: material-regular-font-weight,
|
||||
select-giant-text-font-weight: material-regular-font-weight,
|
||||
select-rectangle-border-radius: 0,
|
||||
select-semi-round-border-radius: 0,
|
||||
select-round-border-radius: 0,
|
||||
select-outline-border-width: 0 0 1px 0,
|
||||
select-outline-basic-border-color: rgba(255, 255, 255, 0.7),
|
||||
select-outline-basic-focus-border-color: color-primary-focus,
|
||||
select-outline-basic-hover-border-color: select-outline-basic-border-color,
|
||||
select-outline-basic-disabled-border-color: select-outline-basic-border-color,
|
||||
select-outline-basic-background-color: transparent,
|
||||
select-outline-basic-focus-background-color: transparent,
|
||||
select-outline-basic-hover-background-color: transparent,
|
||||
select-outline-basic-disabled-background-color: transparent,
|
||||
select-outline-primary-background-color: select-outline-basic-background-color,
|
||||
select-outline-primary-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-primary-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-success-background-color: select-outline-basic-background-color,
|
||||
select-outline-success-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-success-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-info-background-color: select-outline-basic-background-color,
|
||||
select-outline-info-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-info-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-warning-background-color: select-outline-basic-background-color,
|
||||
select-outline-warning-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-warning-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-danger-background-color: select-outline-basic-background-color,
|
||||
select-outline-danger-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-danger-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-control-background-color: select-outline-basic-background-color,
|
||||
select-outline-control-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-control-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
option-list-shadow: shadow,
|
||||
option-list-border-style: none,
|
||||
option-list-adjacent-border-style: none,
|
||||
option-background-color: color-basic-700,
|
||||
option-hover-background-color: #4a4a4a,
|
||||
option-focus-background-color: option-hover-background-color,
|
||||
option-selected-background-color: #525252,
|
||||
option-selected-hover-background-color: option-selected-background-color,
|
||||
option-selected-focus-background-color: option-selected-background-color,
|
||||
option-selected-text-color: text-primary-color,
|
||||
option-selected-hover-text-color: text-primary-color,
|
||||
option-selected-focus-text-color: text-primary-color,
|
||||
option-tiny-text-font-weight: material-regular-font-weight,
|
||||
option-small-text-font-weight: material-regular-font-weight,
|
||||
option-medium-text-font-weight: material-regular-font-weight,
|
||||
option-large-text-font-weight: material-regular-font-weight,
|
||||
option-giant-text-font-weight: material-regular-font-weight
|
||||
);
|
||||
|
||||
$nb-themes: nb-register-theme($theme, material-dark, dark);
|
||||
497
src/app/@theme/styles/material/_material-light.scss
Normal file
497
src/app/@theme/styles/material/_material-light.scss
Normal file
|
|
@ -0,0 +1,497 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Akveo. All Rights Reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
@import '~@nebular/theme/styles/core/functions';
|
||||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
$theme: (
|
||||
color-primary-100: #e8cbfe,
|
||||
color-primary-200: #ce97fd,
|
||||
color-primary-300: #ae63f9,
|
||||
color-primary-400: #903df4,
|
||||
color-primary-500: #6200ee,
|
||||
color-primary-600: #4b00cc,
|
||||
color-primary-700: #3800ab,
|
||||
color-primary-800: #27008a,
|
||||
color-primary-900: #1b0072,
|
||||
|
||||
color-primary-transparent-100: rgba(98, 0, 238, 0.08),
|
||||
color-primary-transparent-200: rgba(98, 0, 238, 0.16),
|
||||
color-primary-transparent-300: rgba(98, 0, 238, 0.24),
|
||||
color-primary-transparent-400: rgba(98, 0, 238, 0.32),
|
||||
color-primary-transparent-500: rgba(98, 0, 238, 0.4),
|
||||
color-primary-transparent-600: rgba(98, 0, 238, 0.48),
|
||||
|
||||
color-success-100: #edfbd1,
|
||||
color-success-200: #d7f7a6,
|
||||
color-success-300: #b4e775,
|
||||
color-success-400: #8fcf50,
|
||||
color-success-500: #60af20,
|
||||
color-success-600: #499617,
|
||||
color-success-700: #357d10,
|
||||
color-success-800: #24650a,
|
||||
color-success-900: #175306,
|
||||
|
||||
color-success-transparent-100: rgba(96, 175, 32, 0.08),
|
||||
color-success-transparent-200: rgba(96, 175, 32, 0.16),
|
||||
color-success-transparent-300: rgba(96, 175, 32, 0.24),
|
||||
color-success-transparent-400: rgba(96, 175, 32, 0.32),
|
||||
color-success-transparent-500: rgba(96, 175, 32, 0.4),
|
||||
color-success-transparent-600: rgba(96, 175, 32, 0.48),
|
||||
|
||||
color-info-100: #ccf7fe,
|
||||
color-info-200: #99e9fd,
|
||||
color-info-300: #66d3f9,
|
||||
color-info-400: #40bbf4,
|
||||
color-info-500: #0495ee,
|
||||
color-info-600: #0273cc,
|
||||
color-info-700: #0256ab,
|
||||
color-info-800: #013d8a,
|
||||
color-info-900: #002b72,
|
||||
|
||||
color-info-transparent-100: rgba(4, 149, 238, 0.08),
|
||||
color-info-transparent-200: rgba(4, 149, 238, 0.16),
|
||||
color-info-transparent-300: rgba(4, 149, 238, 0.24),
|
||||
color-info-transparent-400: rgba(4, 149, 238, 0.32),
|
||||
color-info-transparent-500: rgba(4, 149, 238, 0.4),
|
||||
color-info-transparent-600: rgba(4, 149, 238, 0.48),
|
||||
|
||||
color-warning-100: #fff3cd,
|
||||
color-warning-200: #ffe49b,
|
||||
color-warning-300: #ffd169,
|
||||
color-warning-400: #ffbe43,
|
||||
color-warning-500: #ff9f05,
|
||||
color-warning-600: #db8003,
|
||||
color-warning-700: #b76302,
|
||||
color-warning-800: #934a01,
|
||||
color-warning-900: #7a3800,
|
||||
|
||||
color-warning-transparent-100: rgba(255, 159, 5, 0.08),
|
||||
color-warning-transparent-200: rgba(255, 159, 5, 0.16),
|
||||
color-warning-transparent-300: rgba(255, 159, 5, 0.24),
|
||||
color-warning-transparent-400: rgba(255, 159, 5, 0.32),
|
||||
color-warning-transparent-500: rgba(255, 159, 5, 0.4),
|
||||
color-warning-transparent-600: rgba(255, 159, 5, 0.48),
|
||||
|
||||
color-danger-100: #fbd2c8,
|
||||
color-danger-200: #f79e94,
|
||||
color-danger-300: #e75d5c,
|
||||
color-danger-400: #cf3341,
|
||||
color-danger-500: #b00020,
|
||||
color-danger-600: #970029,
|
||||
color-danger-700: #7e002e,
|
||||
color-danger-800: #66002f,
|
||||
color-danger-900: #54002f,
|
||||
|
||||
color-danger-transparent-100: rgba(176, 0, 32, 0.08),
|
||||
color-danger-transparent-200: rgba(176, 0, 32, 0.16),
|
||||
color-danger-transparent-300: rgba(176, 0, 32, 0.24),
|
||||
color-danger-transparent-400: rgba(176, 0, 32, 0.32),
|
||||
color-danger-transparent-500: rgba(176, 0, 32, 0.4),
|
||||
color-danger-transparent-600: rgba(176, 0, 32, 0.48),
|
||||
|
||||
color-basic-100: #ffffff,
|
||||
color-basic-200: #f5f5f5,
|
||||
color-basic-300: #ebebeb,
|
||||
color-basic-400: #e0e0e0,
|
||||
color-basic-500: #b3b3b3,
|
||||
color-basic-600: #838383,
|
||||
color-basic-700: #636363,
|
||||
color-basic-800: #424242,
|
||||
color-basic-900: #242424,
|
||||
color-basic-1000: #1b1b1b,
|
||||
color-basic-1100: #000000,
|
||||
|
||||
color-basic-transparent-100: rgba(131, 131, 131, 0.08),
|
||||
color-basic-transparent-200: rgba(131, 131, 131, 0.16),
|
||||
color-basic-transparent-300: rgba(131, 131, 131, 0.24),
|
||||
color-basic-transparent-400: rgba(131, 131, 131, 0.32),
|
||||
color-basic-transparent-500: rgba(131, 131, 131, 0.4),
|
||||
color-basic-transparent-600: rgba(131, 131, 131, 0.48),
|
||||
|
||||
color-basic-control-transparent-100: rgba(255, 255, 255, 0.08),
|
||||
color-basic-control-transparent-200: rgba(255, 255, 255, 0.16),
|
||||
color-basic-control-transparent-300: rgba(255, 255, 255, 0.24),
|
||||
color-basic-control-transparent-400: rgba(255, 255, 255, 0.32),
|
||||
color-basic-control-transparent-500: rgba(255, 255, 255, 0.4),
|
||||
color-basic-control-transparent-600: rgba(255, 255, 255, 0.48),
|
||||
|
||||
color-basic-focus: color-basic-400,
|
||||
color-basic-hover: color-basic-200,
|
||||
color-basic-default: color-basic-300,
|
||||
color-basic-active: color-basic-400,
|
||||
color-basic-disabled: color-basic-transparent-300,
|
||||
color-basic-focus-border: color-basic-500,
|
||||
color-basic-hover-border: color-basic-hover,
|
||||
color-basic-default-border: color-basic-default,
|
||||
color-basic-active-border: color-basic-active,
|
||||
color-basic-disabled-border: color-basic-disabled,
|
||||
|
||||
color-basic-transparent-focus: color-basic-transparent-300,
|
||||
color-basic-transparent-hover: color-basic-transparent-200,
|
||||
color-basic-transparent-default: color-basic-transparent-100,
|
||||
color-basic-transparent-active: color-basic-transparent-300,
|
||||
color-basic-transparent-disabled: color-basic-transparent-200,
|
||||
color-basic-transparent-focus-border: color-basic-500,
|
||||
color-basic-transparent-hover-border: color-basic-500,
|
||||
color-basic-transparent-default-border: color-basic-500,
|
||||
color-basic-transparent-active-border: color-basic-500,
|
||||
color-basic-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-primary-focus: color-primary-600,
|
||||
color-primary-hover: color-primary-400,
|
||||
color-primary-default: color-primary-500,
|
||||
color-primary-active: color-primary-600,
|
||||
color-primary-disabled: color-basic-transparent-300,
|
||||
color-primary-focus-border: color-primary-700,
|
||||
color-primary-hover-border: color-primary-hover,
|
||||
color-primary-default-border: color-primary-default,
|
||||
color-primary-active-border: color-primary-active,
|
||||
color-primary-disabled-border: color-primary-disabled,
|
||||
|
||||
color-primary-transparent-focus: color-primary-transparent-300,
|
||||
color-primary-transparent-hover: color-primary-transparent-200,
|
||||
color-primary-transparent-default: color-primary-transparent-100,
|
||||
color-primary-transparent-active: color-primary-transparent-300,
|
||||
color-primary-transparent-disabled: color-basic-transparent-200,
|
||||
color-primary-transparent-focus-border: color-primary-500,
|
||||
color-primary-transparent-hover-border: color-primary-500,
|
||||
color-primary-transparent-default-border: color-primary-500,
|
||||
color-primary-transparent-active-border: color-primary-500,
|
||||
color-primary-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-success-focus: color-success-600,
|
||||
color-success-hover: color-success-400,
|
||||
color-success-default: color-success-500,
|
||||
color-success-active: color-success-600,
|
||||
color-success-disabled: color-basic-transparent-300,
|
||||
color-success-focus-border: color-success-700,
|
||||
color-success-hover-border: color-success-hover,
|
||||
color-success-default-border: color-success-default,
|
||||
color-success-active-border: color-success-active,
|
||||
color-success-disabled-border: color-success-disabled,
|
||||
|
||||
color-success-transparent-focus: color-success-transparent-300,
|
||||
color-success-transparent-hover: color-success-transparent-200,
|
||||
color-success-transparent-default: color-success-transparent-100,
|
||||
color-success-transparent-active: color-success-transparent-300,
|
||||
color-success-transparent-disabled: color-basic-transparent-200,
|
||||
color-success-transparent-focus-border: color-success-500,
|
||||
color-success-transparent-hover-border: color-success-500,
|
||||
color-success-transparent-default-border: color-success-500,
|
||||
color-success-transparent-active-border: color-success-500,
|
||||
color-success-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-info-focus: color-info-600,
|
||||
color-info-hover: color-info-400,
|
||||
color-info-default: color-info-500,
|
||||
color-info-active: color-info-600,
|
||||
color-info-disabled: color-basic-transparent-300,
|
||||
color-info-focus-border: color-info-700,
|
||||
color-info-hover-border: color-info-hover,
|
||||
color-info-default-border: color-info-default,
|
||||
color-info-active-border: color-info-active,
|
||||
color-info-disabled-border: color-info-disabled,
|
||||
|
||||
color-info-transparent-focus: color-info-transparent-300,
|
||||
color-info-transparent-hover: color-info-transparent-200,
|
||||
color-info-transparent-default: color-info-transparent-100,
|
||||
color-info-transparent-active: color-info-transparent-300,
|
||||
color-info-transparent-disabled: color-basic-transparent-200,
|
||||
color-info-transparent-focus-border: color-info-500,
|
||||
color-info-transparent-hover-border: color-info-500,
|
||||
color-info-transparent-default-border: color-info-500,
|
||||
color-info-transparent-active-border: color-info-500,
|
||||
color-info-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-warning-focus: color-warning-600,
|
||||
color-warning-hover: color-warning-400,
|
||||
color-warning-default: color-warning-500,
|
||||
color-warning-active: color-warning-600,
|
||||
color-warning-disabled: color-basic-transparent-300,
|
||||
color-warning-focus-border: color-warning-700,
|
||||
color-warning-hover-border: color-warning-hover,
|
||||
color-warning-default-border: color-warning-default,
|
||||
color-warning-active-border: color-warning-active,
|
||||
color-warning-disabled-border: color-warning-disabled,
|
||||
|
||||
color-warning-transparent-focus: color-warning-transparent-300,
|
||||
color-warning-transparent-hover: color-warning-transparent-200,
|
||||
color-warning-transparent-default: color-warning-transparent-100,
|
||||
color-warning-transparent-active: color-warning-transparent-300,
|
||||
color-warning-transparent-disabled: color-basic-transparent-200,
|
||||
color-warning-transparent-focus-border: color-warning-500,
|
||||
color-warning-transparent-hover-border: color-warning-500,
|
||||
color-warning-transparent-default-border: color-warning-500,
|
||||
color-warning-transparent-active-border: color-warning-500,
|
||||
color-warning-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-danger-focus: color-danger-600,
|
||||
color-danger-hover: color-danger-400,
|
||||
color-danger-default: color-danger-500,
|
||||
color-danger-active: color-danger-600,
|
||||
color-danger-disabled: color-basic-transparent-300,
|
||||
color-danger-focus-border: color-danger-700,
|
||||
color-danger-hover-border: color-danger-hover,
|
||||
color-danger-default-border: color-danger-default,
|
||||
color-danger-active-border: color-danger-active,
|
||||
color-danger-disabled-border: color-danger-disabled,
|
||||
|
||||
color-danger-transparent-focus: color-danger-transparent-300,
|
||||
color-danger-transparent-hover: color-danger-transparent-200,
|
||||
color-danger-transparent-default: color-danger-transparent-100,
|
||||
color-danger-transparent-active: color-danger-transparent-300,
|
||||
color-danger-transparent-disabled: color-basic-transparent-200,
|
||||
color-danger-transparent-focus-border: color-danger-500,
|
||||
color-danger-transparent-hover-border: color-danger-500,
|
||||
color-danger-transparent-default-border: color-danger-500,
|
||||
color-danger-transparent-active-border: color-danger-500,
|
||||
color-danger-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
color-control-focus: color-basic-300,
|
||||
color-control-hover: color-basic-200,
|
||||
color-control-default: color-basic-100,
|
||||
color-control-active: color-basic-300,
|
||||
color-control-disabled: color-basic-transparent-300,
|
||||
color-control-focus-border: color-basic-500,
|
||||
color-control-hover-border: color-control-hover,
|
||||
color-control-default-border: color-control-default,
|
||||
color-control-active-border: color-control-active,
|
||||
color-control-disabled-border: color-control-disabled,
|
||||
|
||||
color-control-transparent-focus: color-basic-control-transparent-300,
|
||||
color-control-transparent-hover: color-basic-control-transparent-200,
|
||||
color-control-transparent-default: color-basic-control-transparent-100,
|
||||
color-control-transparent-active: color-basic-control-transparent-300,
|
||||
color-control-transparent-disabled: color-basic-transparent-200,
|
||||
color-control-transparent-focus-border: color-basic-100,
|
||||
color-control-transparent-hover-border: color-basic-100,
|
||||
color-control-transparent-default-border: color-basic-100,
|
||||
color-control-transparent-active-border: color-basic-100,
|
||||
color-control-transparent-disabled-border: color-basic-transparent-300,
|
||||
|
||||
background-basic-color-1: color-basic-100,
|
||||
background-basic-color-2: color-basic-300,
|
||||
background-basic-color-3: #fafafa,
|
||||
background-basic-color-4: color-basic-400,
|
||||
|
||||
background-alternative-color-1: color-basic-800,
|
||||
background-alternative-color-2: color-basic-900,
|
||||
background-alternative-color-3: color-basic-1000,
|
||||
background-alternative-color-4: color-basic-1100,
|
||||
|
||||
border-basic-color-1: color-basic-100,
|
||||
border-basic-color-2: color-basic-200,
|
||||
border-basic-color-3: color-basic-300,
|
||||
border-basic-color-4: color-basic-400,
|
||||
border-basic-color-5: color-basic-500,
|
||||
|
||||
border-alternative-color-1: color-basic-800,
|
||||
border-alternative-color-2: color-basic-900,
|
||||
border-alternative-color-3: color-basic-1000,
|
||||
border-alternative-color-4: color-basic-1100,
|
||||
border-alternative-color-5: color-basic-1100,
|
||||
|
||||
border-primary-color-1: color-primary-500,
|
||||
border-primary-color-2: color-primary-600,
|
||||
border-primary-color-3: color-primary-700,
|
||||
border-primary-color-4: color-primary-800,
|
||||
border-primary-color-5: color-primary-900,
|
||||
|
||||
border-success-color-1: color-success-500,
|
||||
border-success-color-2: color-success-600,
|
||||
border-success-color-3: color-success-700,
|
||||
border-success-color-4: color-success-800,
|
||||
border-success-color-5: color-success-900,
|
||||
|
||||
border-info-color-1: color-info-500,
|
||||
border-info-color-2: color-info-600,
|
||||
border-info-color-3: color-info-700,
|
||||
border-info-color-4: color-info-800,
|
||||
border-info-color-5: color-info-900,
|
||||
|
||||
border-warning-color-1: color-warning-500,
|
||||
border-warning-color-2: color-warning-600,
|
||||
border-warning-color-3: color-warning-700,
|
||||
border-warning-color-4: color-warning-800,
|
||||
border-warning-color-5: color-warning-900,
|
||||
|
||||
border-danger-color-1: color-danger-500,
|
||||
border-danger-color-2: color-danger-600,
|
||||
border-danger-color-3: color-danger-700,
|
||||
border-danger-color-4: color-danger-800,
|
||||
border-danger-color-5: color-danger-900,
|
||||
|
||||
text-basic-color: color-basic-800,
|
||||
text-alternate-color: color-basic-100,
|
||||
text-control-color: color-basic-100,
|
||||
text-disabled-color: color-basic-transparent-600,
|
||||
text-hint-color: color-basic-600,
|
||||
|
||||
text-primary-color: color-primary-default,
|
||||
text-primary-focus-color: color-primary-focus,
|
||||
text-primary-hover-color: color-primary-hover,
|
||||
text-primary-active-color: color-primary-active,
|
||||
text-primary-disabled-color: color-primary-400,
|
||||
|
||||
text-success-color: color-success-default,
|
||||
text-success-focus-color: color-success-focus,
|
||||
text-success-hover-color: color-success-hover,
|
||||
text-success-active-color: color-success-active,
|
||||
text-success-disabled-color: color-success-400,
|
||||
|
||||
text-info-color: color-info-default,
|
||||
text-info-focus-color: color-info-focus,
|
||||
text-info-hover-color: color-info-hover,
|
||||
text-info-active-color: color-info-active,
|
||||
text-info-disabled-color: color-info-400,
|
||||
|
||||
text-warning-color: color-warning-default,
|
||||
text-warning-focus-color: color-warning-focus,
|
||||
text-warning-hover-color: color-warning-hover,
|
||||
text-warning-active-color: color-warning-active,
|
||||
text-warning-disabled-color: color-warning-400,
|
||||
|
||||
text-danger-color: color-danger-default,
|
||||
text-danger-focus-color: color-danger-focus,
|
||||
text-danger-hover-color: color-danger-hover,
|
||||
text-danger-active-color: color-danger-active,
|
||||
text-danger-disabled-color: color-danger-400,
|
||||
|
||||
font-family-primary: unquote('Roboto, sans-serif'),
|
||||
|
||||
shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
|
||||
card-shadow: shadow,
|
||||
header-shadow: unquote(
|
||||
'0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)'
|
||||
),
|
||||
|
||||
header-background-color: color-primary-default,
|
||||
footer-background-color: color-primary-default,
|
||||
header-text-color: text-alternate-color,
|
||||
footer-text-color: text-alternate-color,
|
||||
footer-text-highlight-color: footer-text-color,
|
||||
sidebar-background-color: background-basic-color-2,
|
||||
|
||||
menu-text-font-weight: 400,
|
||||
menu-text-color: rgba(0, 0, 0, 0.87),
|
||||
menu-item-hover-text-color: rgba(0, 0, 0, 0.87),
|
||||
menu-item-hover-background-color: rgba(0, 0, 0, 0.04),
|
||||
menu-item-active-background-color: rgba(0, 0, 0, 0.08),
|
||||
|
||||
menu-item-icon-color: rgba(0, 0, 0, 0.87),
|
||||
menu-item-icon-hover-color: rgba(0, 0, 0, 0.87),
|
||||
|
||||
menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04),
|
||||
menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1),
|
||||
menu-submenu-item-active-background-color: rgba(0, 0, 0, 0.08),
|
||||
|
||||
card-border-style: none,
|
||||
card-divider-color: color-basic-200,
|
||||
|
||||
input-border-width: 1px,
|
||||
input-basic-border-color: rgba(0, 0, 0, 0.42),
|
||||
input-basic-focus-border-color: color-primary-focus,
|
||||
input-basic-disabled-border-color: rgba(0, 0, 0, 0.42),
|
||||
input-basic-hover-border-color: rgba(0, 0, 0, 0.42),
|
||||
input-basic-background-color: transparent,
|
||||
input-basic-focus-background-color: transparent,
|
||||
input-basic-disabled-background-color: transparent,
|
||||
input-basic-hover-background-color: transparent,
|
||||
input-rectangle-border-radius: 0.25rem,
|
||||
input-semi-round-border-radius: 0.25rem,
|
||||
input-round-border-radius: 0.25rem,
|
||||
input-medium-padding: 0.75rem 1rem,
|
||||
input-large-padding: 1rem 1rem,
|
||||
input-small-text-font-weight: text-paragraph-font-weight,
|
||||
input-medium-text-font-weight: text-paragraph-font-weight,
|
||||
input-large-text-font-weight: text-paragraph-font-weight,
|
||||
input-primary-background-color: input-basic-background-color,
|
||||
input-primary-focus-background-color: input-basic-focus-background-color,
|
||||
input-primary-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-primary-hover-background-color: input-basic-hover-background-color,
|
||||
input-info-background-color: input-basic-background-color,
|
||||
input-info-focus-background-color: input-basic-focus-background-color,
|
||||
input-info-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-info-hover-background-color: input-basic-hover-background-color,
|
||||
input-success-background-color: input-basic-background-color,
|
||||
input-success-focus-background-color: input-basic-focus-background-color,
|
||||
input-success-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-success-hover-background-color: input-basic-hover-background-color,
|
||||
input-warning-background-color: input-basic-background-color,
|
||||
input-warning-focus-background-color: input-basic-focus-background-color,
|
||||
input-warning-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-warning-hover-background-color: input-basic-hover-background-color,
|
||||
input-danger-background-color: input-basic-background-color,
|
||||
input-danger-focus-background-color: input-basic-focus-background-color,
|
||||
input-danger-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-danger-hover-background-color: input-basic-hover-background-color,
|
||||
input-control-background-color: input-basic-background-color,
|
||||
input-control-focus-background-color: input-basic-focus-background-color,
|
||||
input-control-disabled-background-color: input-basic-disabled-background-color,
|
||||
input-control-hover-background-color: input-basic-hover-background-color,
|
||||
|
||||
select-tiny-text-font-weight: material-regular-font-weight,
|
||||
select-small-text-font-weight: material-regular-font-weight,
|
||||
select-medium-text-font-weight: material-regular-font-weight,
|
||||
select-large-text-font-weight: material-regular-font-weight,
|
||||
select-giant-text-font-weight: material-regular-font-weight,
|
||||
select-rectangle-border-radius: 0,
|
||||
select-semi-round-border-radius: 0,
|
||||
select-round-border-radius: 0,
|
||||
select-outline-border-width: 0 0 1px 0,
|
||||
select-outline-basic-border-color: rgba(0, 0, 0, 0.42),
|
||||
select-outline-basic-focus-border-color: color-primary-focus,
|
||||
select-outline-basic-hover-border-color: select-outline-basic-border-color,
|
||||
select-outline-basic-disabled-border-color: select-outline-basic-border-color,
|
||||
select-outline-basic-background-color: transparent,
|
||||
select-outline-basic-focus-background-color: transparent,
|
||||
select-outline-basic-hover-background-color: transparent,
|
||||
select-outline-basic-disabled-background-color: transparent,
|
||||
select-outline-primary-background-color: select-outline-basic-background-color,
|
||||
select-outline-primary-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-primary-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-primary-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-success-background-color: select-outline-basic-background-color,
|
||||
select-outline-success-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-success-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-success-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-info-background-color: select-outline-basic-background-color,
|
||||
select-outline-info-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-info-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-info-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-warning-background-color: select-outline-basic-background-color,
|
||||
select-outline-warning-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-warning-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-warning-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-danger-background-color: select-outline-basic-background-color,
|
||||
select-outline-danger-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-danger-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-danger-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
select-outline-control-background-color: select-outline-basic-background-color,
|
||||
select-outline-control-focus-background-color: select-outline-basic-focus-background-color,
|
||||
select-outline-control-hover-background-color: select-outline-basic-hover-background-color,
|
||||
select-outline-control-disabled-background-color: select-outline-basic-disabled-background-color,
|
||||
option-list-shadow: shadow,
|
||||
option-list-border-style: none,
|
||||
option-list-adjacent-border-style: none,
|
||||
option-background-color: color-basic-100,
|
||||
option-hover-background-color: color-basic-200,
|
||||
option-focus-background-color: option-hover-background-color,
|
||||
option-selected-background-color: color-basic-300,
|
||||
option-selected-hover-background-color: option-selected-background-color,
|
||||
option-selected-focus-background-color: option-selected-background-color,
|
||||
option-selected-text-color: text-primary-color,
|
||||
option-selected-hover-text-color: text-primary-color,
|
||||
option-selected-focus-text-color: text-primary-color,
|
||||
option-tiny-text-font-weight: material-regular-font-weight,
|
||||
option-small-text-font-weight: material-regular-font-weight,
|
||||
option-medium-text-font-weight: material-regular-font-weight,
|
||||
option-large-text-font-weight: material-regular-font-weight,
|
||||
option-giant-text-font-weight: material-regular-font-weight
|
||||
);
|
||||
|
||||
$nb-themes: nb-register-theme($theme, material-light, default);
|
||||
44
src/app/@theme/styles/material/_material-overrides.scss
Normal file
44
src/app/@theme/styles/material/_material-overrides.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
@mixin material-overrides() {
|
||||
@include nb-for-themes(material-dark, material-light) {
|
||||
nb-layout-header {
|
||||
nb-actions, .logo-container {
|
||||
nb-icon, .user-name {
|
||||
color: nb-theme(color-basic-100) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select-button {
|
||||
background-color: nb-theme(background-basic-color-3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar {
|
||||
transition: width 0.3s;
|
||||
|
||||
.main-container {
|
||||
transition: width 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
nb-card {
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
|
||||
nb-card-header, .tabset {
|
||||
background-color: nb-theme(card-divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
[nbinput] {
|
||||
font-weight: 400;
|
||||
|
||||
&.status-basic:focus:hover {
|
||||
border-color: nb-theme(color-primary-focus) !important;
|
||||
}
|
||||
}
|
||||
|
||||
[nbbutton] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
361
src/app/@theme/styles/material/theme.material-dark.ts
Normal file
361
src/app/@theme/styles/material/theme.material-dark.ts
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#e91d63',
|
||||
success: '#60af20',
|
||||
info: '#0495ee',
|
||||
warning: '#ff9f05',
|
||||
danger: '#b00020',
|
||||
};
|
||||
|
||||
export const baseTheme: NbJSThemeOptions = {
|
||||
name: 'material-dark',
|
||||
base: 'dark',
|
||||
variables: {
|
||||
fontMain: 'Roboto, sans-serif',
|
||||
fontSecondary: 'Roboto, sans-serif',
|
||||
|
||||
bg: '#383838',
|
||||
bg2: '#292929',
|
||||
bg3: '#1f1f1f',
|
||||
bg4: '#141414',
|
||||
|
||||
border: '#383838',
|
||||
border2: '#292929',
|
||||
border3: '#1f1f1f',
|
||||
border4: '#141414',
|
||||
border5: '#141414',
|
||||
|
||||
fg: '#808080',
|
||||
fgHeading: '#ffffff',
|
||||
fgText: '#ffffff',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#1f1f1f',
|
||||
separator: '#1f1f1f',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#f24681',
|
||||
successLight: '#8fcf50',
|
||||
infoLight: '#40bbf4',
|
||||
warningLight: '#ffbe43',
|
||||
dangerLight: '#cf3341',
|
||||
},
|
||||
};
|
||||
|
||||
const baseThemeVariables = baseTheme.variables;
|
||||
|
||||
export const MATERIAL_DARK_THEME = {
|
||||
name: 'material-dark',
|
||||
base: 'default',
|
||||
variables: {
|
||||
temperature: {
|
||||
arcFill: [
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
],
|
||||
arcEmpty: baseThemeVariables.bg2,
|
||||
thumbBg: baseThemeVariables.bg2,
|
||||
thumbBorder: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: baseThemeVariables.primary,
|
||||
gradientRight: baseThemeVariables.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: baseThemeVariables.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
lineBg: baseThemeVariables.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: baseThemeVariables.border4,
|
||||
itemBorderColor: baseThemeVariables.border4,
|
||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: baseThemeVariables.bg2,
|
||||
gradTo: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: baseThemeVariables.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: baseThemeVariables.border3,
|
||||
xAxisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: baseThemeVariables.primary,
|
||||
lineGradTo: baseThemeVariables.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: baseThemeVariables.bg2,
|
||||
areaGradTo: baseThemeVariables.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: baseThemeVariables.fgText,
|
||||
areaColor: baseThemeVariables.bg4,
|
||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
||||
areaBorderColor: baseThemeVariables.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: baseThemeVariables.fgText,
|
||||
|
||||
firstAnimationBarColor: baseThemeVariables.primary,
|
||||
secondAnimationBarColor: baseThemeVariables.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: baseThemeVariables.separator,
|
||||
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: baseThemeVariables.warningLight,
|
||||
gradientTo: baseThemeVariables.warning,
|
||||
shadow: baseThemeVariables.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: baseThemeVariables.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: baseThemeVariables.border4,
|
||||
countryFillColor: baseThemeVariables.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: baseThemeVariables.border4,
|
||||
chartAxisTextColor: baseThemeVariables.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: baseThemeVariables.primary,
|
||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
||||
chartAxisSplitLine: baseThemeVariables.separator,
|
||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
||||
|
||||
chartInnerLineColor: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.fgText,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: baseThemeVariables.separator,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
||||
firstAreaGradTo: baseThemeVariables.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: baseThemeVariables.bg3,
|
||||
firstLineGradTo: baseThemeVariables.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: baseThemeVariables.success,
|
||||
secondItem: baseThemeVariables.primary,
|
||||
thirdItem: baseThemeVariables.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: baseThemeVariables.primary,
|
||||
areaGradTo: baseThemeVariables.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: baseThemeVariables.success,
|
||||
innerAreaGradTo: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: baseThemeVariables.success,
|
||||
secondIcon: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: baseThemeVariables.warning,
|
||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '0',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: baseThemeVariables.warning,
|
||||
secondSection: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
radius: ['65%', '100%'],
|
||||
center: ['50%', '50%'],
|
||||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: baseThemeVariables.primary,
|
||||
secondPieGradientRight: baseThemeVariables.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
||||
thirdPieGradientRight: baseThemeVariables.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: baseThemeVariables.primary,
|
||||
gradTo: baseThemeVariables.primary,
|
||||
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
} as NbJSThemeOptions;
|
||||
361
src/app/@theme/styles/material/theme.material-light.ts
Normal file
361
src/app/@theme/styles/material/theme.material-light.ts
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
import { NbJSThemeOptions } from '@nebular/theme';
|
||||
|
||||
const palette = {
|
||||
primary: '#6200ee',
|
||||
success: '#60af20',
|
||||
info: '#0495ee',
|
||||
warning: '#ff9f05',
|
||||
danger: '#b00020',
|
||||
};
|
||||
|
||||
export const baseTheme: NbJSThemeOptions = {
|
||||
name: 'material-light',
|
||||
base: 'default',
|
||||
variables: {
|
||||
fontMain: 'Roboto, sans-serif',
|
||||
fontSecondary: 'Roboto, sans-serif',
|
||||
|
||||
bg: '#ffffff',
|
||||
bg2: '#f5f5f5',
|
||||
bg3: '#ebebeb',
|
||||
bg4: '#e0e0e0',
|
||||
|
||||
border: '#ffffff',
|
||||
border2: '#f5f5f5',
|
||||
border3: '#ebebeb',
|
||||
border4: '#e0e0e0',
|
||||
border5: '#b3b3b3',
|
||||
|
||||
fg: '#838383',
|
||||
fgHeading: '#1a2138',
|
||||
fgText: '#1a2138',
|
||||
fgHighlight: palette.primary,
|
||||
layoutBg: '#ebebeb',
|
||||
separator: '#ebebeb',
|
||||
|
||||
primary: palette.primary,
|
||||
success: palette.success,
|
||||
info: palette.info,
|
||||
warning: palette.warning,
|
||||
danger: palette.danger,
|
||||
|
||||
primaryLight: '#903df4',
|
||||
successLight: '#8fcf50',
|
||||
infoLight: '#40bbf4',
|
||||
warningLight: '#ffbe43',
|
||||
dangerLight: '#cf3341',
|
||||
},
|
||||
};
|
||||
|
||||
const baseThemeVariables = baseTheme.variables;
|
||||
|
||||
export const MATERIAL_LIGHT_THEME = {
|
||||
name: 'material-light',
|
||||
base: 'default',
|
||||
variables: {
|
||||
temperature: {
|
||||
arcFill: [
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
baseThemeVariables.primary,
|
||||
],
|
||||
arcEmpty: baseThemeVariables.bg2,
|
||||
thumbBg: baseThemeVariables.bg2,
|
||||
thumbBorder: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
solar: {
|
||||
gradientLeft: baseThemeVariables.primary,
|
||||
gradientRight: baseThemeVariables.primary,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondSeriesFill: baseThemeVariables.bg2,
|
||||
radius: ['80%', '90%'],
|
||||
},
|
||||
|
||||
traffic: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
lineBg: baseThemeVariables.border4,
|
||||
lineShadowBlur: '1',
|
||||
itemColor: baseThemeVariables.border4,
|
||||
itemBorderColor: baseThemeVariables.border4,
|
||||
itemEmphasisBorderColor: baseThemeVariables.primary,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
shadowLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
gradFrom: baseThemeVariables.bg2,
|
||||
gradTo: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: baseThemeVariables.fgText,
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
|
||||
axisLineColor: baseThemeVariables.border3,
|
||||
xAxisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
lineGradFrom: baseThemeVariables.primary,
|
||||
lineGradTo: baseThemeVariables.primary,
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: baseThemeVariables.bg2,
|
||||
areaGradTo: baseThemeVariables.bg2,
|
||||
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: baseThemeVariables.fgText,
|
||||
areaColor: baseThemeVariables.bg4,
|
||||
areaHoverColor: baseThemeVariables.fgHighlight,
|
||||
areaBorderColor: baseThemeVariables.border5,
|
||||
},
|
||||
|
||||
profitBarAnimationEchart: {
|
||||
textColor: baseThemeVariables.fgText,
|
||||
|
||||
firstAnimationBarColor: baseThemeVariables.primary,
|
||||
secondAnimationBarColor: baseThemeVariables.success,
|
||||
|
||||
splitLineStyleOpacity: '1',
|
||||
splitLineStyleWidth: '1',
|
||||
splitLineStyleColor: baseThemeVariables.separator,
|
||||
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
|
||||
trafficBarEchart: {
|
||||
gradientFrom: baseThemeVariables.warningLight,
|
||||
gradientTo: baseThemeVariables.warning,
|
||||
shadow: baseThemeVariables.warningLight,
|
||||
shadowBlur: '0',
|
||||
|
||||
axisTextColor: baseThemeVariables.fgText,
|
||||
axisFontSize: '12',
|
||||
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
},
|
||||
|
||||
countryOrders: {
|
||||
countryBorderColor: baseThemeVariables.border4,
|
||||
countryFillColor: baseThemeVariables.bg3,
|
||||
countryBorderWidth: '1',
|
||||
hoveredCountryBorderColor: baseThemeVariables.primary,
|
||||
hoveredCountryFillColor: baseThemeVariables.primaryLight,
|
||||
hoveredCountryBorderWidth: '1',
|
||||
|
||||
chartAxisLineColor: baseThemeVariables.border4,
|
||||
chartAxisTextColor: baseThemeVariables.fg,
|
||||
chartAxisFontSize: '16',
|
||||
chartGradientTo: baseThemeVariables.primary,
|
||||
chartGradientFrom: baseThemeVariables.primaryLight,
|
||||
chartAxisSplitLine: baseThemeVariables.separator,
|
||||
chartShadowLineColor: baseThemeVariables.primaryLight,
|
||||
|
||||
chartLineBottomShadowColor: baseThemeVariables.primary,
|
||||
|
||||
chartInnerLineColor: baseThemeVariables.bg2,
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.fgText,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
tooltipBackgroundColor: baseThemeVariables.primary,
|
||||
areaOpacity: '0.7',
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
axisLineColor: baseThemeVariables.separator,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
},
|
||||
|
||||
orders: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '0',
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'solid',
|
||||
lineWidth: '4',
|
||||
|
||||
// first line
|
||||
firstAreaGradFrom: baseThemeVariables.bg3,
|
||||
firstAreaGradTo: baseThemeVariables.bg3,
|
||||
firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second line
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
|
||||
secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)',
|
||||
secondAreaGradTo: 'rgba(51, 102, 255, 0)',
|
||||
secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third line
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
|
||||
thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)',
|
||||
thirdAreaGradTo: 'rgba(0, 214, 143, 0)',
|
||||
thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
profit: {
|
||||
bg: baseThemeVariables.bg,
|
||||
textColor: baseThemeVariables.fgText,
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
splitLineColor: baseThemeVariables.separator,
|
||||
areaOpacity: '1',
|
||||
|
||||
axisFontSize: '16',
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
|
||||
// first bar
|
||||
firstLineGradFrom: baseThemeVariables.bg3,
|
||||
firstLineGradTo: baseThemeVariables.bg3,
|
||||
firstLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// second bar
|
||||
secondLineGradFrom: baseThemeVariables.primary,
|
||||
secondLineGradTo: baseThemeVariables.primary,
|
||||
secondLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
// third bar
|
||||
thirdLineGradFrom: baseThemeVariables.success,
|
||||
thirdLineGradTo: baseThemeVariables.successLight,
|
||||
thirdLineShadow: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
orderProfitLegend: {
|
||||
firstItem: baseThemeVariables.success,
|
||||
secondItem: baseThemeVariables.primary,
|
||||
thirdItem: baseThemeVariables.bg3,
|
||||
},
|
||||
|
||||
visitors: {
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipLineColor: 'rgba(0, 0, 0, 0)',
|
||||
tooltipLineWidth: '1',
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '20',
|
||||
|
||||
axisLineColor: baseThemeVariables.border4,
|
||||
axisFontSize: '16',
|
||||
axisTextColor: baseThemeVariables.fg,
|
||||
yAxisSplitLine: baseThemeVariables.separator,
|
||||
|
||||
itemBorderColor: baseThemeVariables.primary,
|
||||
lineStyle: 'dotted',
|
||||
lineWidth: '6',
|
||||
lineGradFrom: '#ffffff',
|
||||
lineGradTo: '#ffffff',
|
||||
lineShadow: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
areaGradFrom: baseThemeVariables.primary,
|
||||
areaGradTo: baseThemeVariables.primaryLight,
|
||||
|
||||
innerLineStyle: 'solid',
|
||||
innerLineWidth: '1',
|
||||
|
||||
innerAreaGradFrom: baseThemeVariables.success,
|
||||
innerAreaGradTo: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
visitorsLegend: {
|
||||
firstIcon: baseThemeVariables.success,
|
||||
secondIcon: baseThemeVariables.primary,
|
||||
},
|
||||
|
||||
visitorsPie: {
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
firstPieRadius: ['70%', '90%'],
|
||||
|
||||
secondPieGradientLeft: baseThemeVariables.warning,
|
||||
secondPieGradientRight: baseThemeVariables.warningLight,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
secondPieRadius: ['60%', '97%'],
|
||||
shadowOffsetX: '0',
|
||||
shadowOffsetY: '0',
|
||||
},
|
||||
|
||||
visitorsPieLegend: {
|
||||
firstSection: baseThemeVariables.warning,
|
||||
secondSection: baseThemeVariables.success,
|
||||
},
|
||||
|
||||
earningPie: {
|
||||
radius: ['65%', '100%'],
|
||||
center: ['50%', '50%'],
|
||||
|
||||
fontSize: '22',
|
||||
|
||||
firstPieGradientLeft: baseThemeVariables.success,
|
||||
firstPieGradientRight: baseThemeVariables.success,
|
||||
firstPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
secondPieGradientLeft: baseThemeVariables.primary,
|
||||
secondPieGradientRight: baseThemeVariables.primary,
|
||||
secondPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
|
||||
thirdPieGradientLeft: baseThemeVariables.warning,
|
||||
thirdPieGradientRight: baseThemeVariables.warning,
|
||||
thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
|
||||
},
|
||||
|
||||
earningLine: {
|
||||
gradFrom: baseThemeVariables.primary,
|
||||
gradTo: baseThemeVariables.primary,
|
||||
|
||||
tooltipTextColor: baseThemeVariables.fgText,
|
||||
tooltipFontWeight: 'normal',
|
||||
tooltipFontSize: '16',
|
||||
tooltipBg: baseThemeVariables.bg,
|
||||
tooltipBorderColor: baseThemeVariables.border2,
|
||||
tooltipBorderWidth: '1',
|
||||
tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
|
||||
},
|
||||
},
|
||||
} as NbJSThemeOptions;
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800&display=swap');
|
||||
|
||||
// themes - our custom or/and out of the box themes
|
||||
@import 'themes';
|
||||
|
|
@ -12,15 +13,20 @@
|
|||
@import '~bootstrap/scss/mixins';
|
||||
@import '~bootstrap/scss/grid';
|
||||
|
||||
@import './material/angular-material';
|
||||
|
||||
// loading progress bar theme
|
||||
@import './pace.theme';
|
||||
|
||||
@import './layout';
|
||||
@import './overrides';
|
||||
@import './material/material-overrides';
|
||||
|
||||
// install the framework and custom global styles
|
||||
@include nb-install() {
|
||||
|
||||
@include angular-material();
|
||||
|
||||
// framework global styles
|
||||
@include nb-theme-global();
|
||||
@include nb-auth-global();
|
||||
|
|
@ -30,4 +36,5 @@
|
|||
@include ngx-pace-theme();
|
||||
|
||||
@include nb-overrides();
|
||||
@include material-overrides();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
@import '~@nebular/theme/styles/theming';
|
||||
// @nebular out of the box themes
|
||||
@import '~@nebular/theme/styles/themes';
|
||||
// material themes
|
||||
@import './material/material-dark';
|
||||
@import './material/material-light';
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
layout-padding-top: 2.25rem,
|
||||
|
|
@ -86,3 +89,47 @@ $nb-themes: nb-register-theme((
|
|||
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||
), dark, dark);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
layout-padding-top: 2.25rem,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
select-min-width: 6rem,
|
||||
option-list-border-radius: 0,
|
||||
|
||||
slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
|
||||
), material-light, material-light);
|
||||
|
||||
$nb-themes: nb-register-theme((
|
||||
layout-padding-top: 2.25rem,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
card-height-small: 21.1875rem,
|
||||
card-height-medium: 28.875rem,
|
||||
card-height-large: 36.5625rem,
|
||||
card-height-giant: 44.25rem,
|
||||
card-margin-bottom: 1.875rem,
|
||||
card-header-with-select-padding-top: 0.5rem,
|
||||
card-header-with-select-padding-bottom: 0.5rem,
|
||||
|
||||
select-min-width: 6rem,
|
||||
option-list-border-radius: 0,
|
||||
|
||||
slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
|
||||
slide-out-shadow-color: 0 4px 14px 0 #292929,
|
||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
|
||||
), material-dark, material-dark);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbLayoutModule,
|
||||
|
|
@ -39,6 +40,8 @@ import { DEFAULT_THEME } from './styles/theme.default';
|
|||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
||||
import { CORPORATE_THEME } from './styles/theme.corporate';
|
||||
import { DARK_THEME } from './styles/theme.dark';
|
||||
import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light';
|
||||
import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
|
||||
|
||||
const NB_MODULES = [
|
||||
NbLayoutModule,
|
||||
|
|
@ -73,20 +76,20 @@ const PIPES = [
|
|||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, ...NB_MODULES],
|
||||
exports: [CommonModule, ...PIPES, ...COMPONENTS],
|
||||
imports: [CommonModule, MatRippleModule, ...NB_MODULES],
|
||||
exports: [CommonModule, MatRippleModule, ...PIPES, ...COMPONENTS],
|
||||
declarations: [...COMPONENTS, ...PIPES],
|
||||
})
|
||||
export class ThemeModule {
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return <ModuleWithProviders>{
|
||||
static forRoot(): ModuleWithProviders<ThemeModule> {
|
||||
return {
|
||||
ngModule: ThemeModule,
|
||||
providers: [
|
||||
...NbThemeModule.forRoot(
|
||||
{
|
||||
name: 'default',
|
||||
},
|
||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
|
||||
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ],
|
||||
).providers,
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ import {
|
|||
NbResetPasswordComponent,
|
||||
} from '@nebular/auth';
|
||||
|
||||
const routes: Routes = [
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: 'pages',
|
||||
loadChildren: () => import('app/pages/pages.module')
|
||||
loadChildren: () => import('./pages/pages.module')
|
||||
.then(m => m.PagesModule),
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
BIN
src/assets/images/kitten-material-light.png
Normal file
BIN
src/assets/images/kitten-material-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/images/material-dark.png
Normal file
BIN
src/assets/images/material-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
src/assets/images/material-light.png
Normal file
BIN
src/assets/images/material-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
|
|
@ -2,15 +2,7 @@
|
|||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@angular/*": [
|
||||
"../node_modules/@angular/*"
|
||||
],
|
||||
"@nebular/*": [
|
||||
"../node_modules/@nebular/*"
|
||||
]
|
||||
}
|
||||
"baseUrl": "./"
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue