mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat: add material themes
This commit is contained in:
Sergey Andrievskiy
parent
cabe4bd71a
commit
0eec54695f
70 changed files with 2622 additions and 896 deletions
854
package-lock.json
generated
854
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -38,6 +38,7 @@
|
||||||
"@angular/core": "^12.1.0",
|
"@angular/core": "^12.1.0",
|
||||||
"@angular/forms": "^12.1.0",
|
"@angular/forms": "^12.1.0",
|
||||||
"@angular/google-maps": "^12.1.0",
|
"@angular/google-maps": "^12.1.0",
|
||||||
|
"@angular/material": "^12.1.0",
|
||||||
"@angular/platform-browser": "^12.1.0",
|
"@angular/platform-browser": "^12.1.0",
|
||||||
"@angular/platform-browser-dynamic": "^12.1.0",
|
"@angular/platform-browser-dynamic": "^12.1.0",
|
||||||
"@angular/router": "^12.1.0",
|
"@angular/router": "^12.1.0",
|
||||||
|
|
@ -62,7 +63,6 @@
|
||||||
"ng2-ckeditor": "^1.2.9",
|
"ng2-ckeditor": "^1.2.9",
|
||||||
"ng2-smart-table": "^1.6.0",
|
"ng2-smart-table": "^1.6.0",
|
||||||
"ngx-echarts": "^4.2.2",
|
"ngx-echarts": "^4.2.2",
|
||||||
"node-sass": "^4.12.0",
|
|
||||||
"normalize.css": "6.0.0",
|
"normalize.css": "6.0.0",
|
||||||
"pace-js": "1.0.2",
|
"pace-js": "1.0.2",
|
||||||
"roboto-fontface": "0.8.0",
|
"roboto-fontface": "0.8.0",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
|
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
|
||||||
import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
|
import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
|
||||||
import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
|
import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
|
||||||
import { of as observableOf } from 'rxjs';
|
import { of as observableOf } from 'rxjs';
|
||||||
|
|
@ -51,6 +52,7 @@ import { CountryOrderService } from './mock/country-order.service';
|
||||||
import { StatsProgressBarService } from './mock/stats-progress-bar.service';
|
import { StatsProgressBarService } from './mock/stats-progress-bar.service';
|
||||||
import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
|
import { VisitorsAnalyticsService } from './mock/visitors-analytics.service';
|
||||||
import { SecurityCamerasService } from './mock/security-cameras.service';
|
import { SecurityCamerasService } from './mock/security-cameras.service';
|
||||||
|
import { RippleService } from './utils/ripple.service';
|
||||||
import { MockDataModule } from './mock/mock-data.module';
|
import { MockDataModule } from './mock/mock-data.module';
|
||||||
|
|
||||||
const socialLinks = [
|
const socialLinks = [
|
||||||
|
|
@ -91,6 +93,7 @@ const DATA_SERVICES = [
|
||||||
{ provide: StatsProgressBarData, useClass: StatsProgressBarService },
|
{ provide: StatsProgressBarData, useClass: StatsProgressBarService },
|
||||||
{ provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
|
{ provide: VisitorsAnalyticsData, useClass: VisitorsAnalyticsService },
|
||||||
{ provide: SecurityCamerasData, useClass: SecurityCamerasService },
|
{ provide: SecurityCamerasData, useClass: SecurityCamerasService },
|
||||||
|
{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: RippleService},
|
||||||
];
|
];
|
||||||
|
|
||||||
export class NbSimpleRoleProvider extends NbRoleProvider {
|
export class NbSimpleRoleProvider extends NbRoleProvider {
|
||||||
|
|
|
||||||
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="header-container">
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
|
<a
|
||||||
<nb-icon icon="menu-2-outline"></nb-icon>
|
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>
|
||||||
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
|
||||||
</div>
|
</div>
|
||||||
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
|
<nb-select
|
||||||
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
|
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>
|
</nb-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -14,11 +30,32 @@
|
||||||
<nb-actions size="small">
|
<nb-actions size="small">
|
||||||
|
|
||||||
<nb-action class="control-item">
|
<nb-action class="control-item">
|
||||||
<nb-search type="rotate-layout"></nb-search>
|
<nb-search
|
||||||
</nb-action>
|
type="rotate-layout"
|
||||||
<nb-action class="control-item" icon="email-outline"></nb-action>
|
matRipple
|
||||||
<nb-action class="control-item" icon="bell-outline"></nb-action>
|
[matRippleUnbounded]="true"
|
||||||
<nb-action class="user-action" *nbIsGranted="['view', 'user']" >
|
[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"
|
<nb-user [nbContextMenu]="userMenu"
|
||||||
[onlyPicture]="userPictureOnly"
|
[onlyPicture]="userPictureOnly"
|
||||||
[name]="user?.name"
|
[name]="user?.name"
|
||||||
|
|
|
||||||
|
|
@ -33,8 +33,8 @@
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
.sidebar-toggle {
|
.sidebar-toggle {
|
||||||
@include nb-ltr(padding-right, 1.25rem);
|
@include nb-ltr(margin-right, 1.25rem);
|
||||||
@include nb-rtl(padding-left, 1.25rem);
|
@include nb-rtl(margin-left, 1.25rem);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: nb-theme(text-hint-color);
|
color: nb-theme(text-hint-color);
|
||||||
nb-icon {
|
nb-icon {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,8 @@ import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeServ
|
||||||
import { UserData } from '../../../@core/data/users';
|
import { UserData } from '../../../@core/data/users';
|
||||||
import { LayoutService } from '../../../@core/utils';
|
import { LayoutService } from '../../../@core/utils';
|
||||||
import { map, takeUntil } from 'rxjs/operators';
|
import { map, takeUntil } from 'rxjs/operators';
|
||||||
import { Subject } from 'rxjs';
|
import { Subject, Observable } from 'rxjs';
|
||||||
|
import { RippleService } from '../../../@core/utils/ripple.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-header',
|
selector: 'ngx-header',
|
||||||
|
|
@ -14,6 +15,7 @@ import { Subject } from 'rxjs';
|
||||||
export class HeaderComponent implements OnInit, OnDestroy {
|
export class HeaderComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
private destroy$: Subject<void> = new Subject<void>();
|
private destroy$: Subject<void> = new Subject<void>();
|
||||||
|
public readonly materialTheme$: Observable<boolean>;
|
||||||
userPictureOnly: boolean = false;
|
userPictureOnly: boolean = false;
|
||||||
user: any;
|
user: any;
|
||||||
|
|
||||||
|
|
@ -34,18 +36,34 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
||||||
value: 'corporate',
|
value: 'corporate',
|
||||||
name: 'Corporate',
|
name: 'Corporate',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
value: 'material-light',
|
||||||
|
name: 'Material Light',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'material-dark',
|
||||||
|
name: 'Material Dark',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
currentTheme = 'default';
|
currentTheme = 'default';
|
||||||
|
|
||||||
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
|
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
|
||||||
|
|
||||||
constructor(private sidebarService: NbSidebarService,
|
public constructor(
|
||||||
private menuService: NbMenuService,
|
private sidebarService: NbSidebarService,
|
||||||
private themeService: NbThemeService,
|
private menuService: NbMenuService,
|
||||||
private userService: UserData,
|
private themeService: NbThemeService,
|
||||||
private layoutService: LayoutService,
|
private userService: UserData,
|
||||||
private breakpointService: NbMediaBreakpointsService) {
|
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() {
|
ngOnInit() {
|
||||||
|
|
@ -68,7 +86,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
||||||
map(({ name }) => name),
|
map(({ name }) => name),
|
||||||
takeUntil(this.destroy$),
|
takeUntil(this.destroy$),
|
||||||
)
|
)
|
||||||
.subscribe(themeName => this.currentTheme = themeName);
|
.subscribe(themeName => {
|
||||||
|
this.currentTheme = themeName;
|
||||||
|
this.rippleService.toggle(themeName?.startsWith('material'));
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
|
|
|
||||||
|
|
@ -8,4 +8,15 @@
|
||||||
right: 0.41rem !important;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
19
src/app/@theme/styles/material/_angular-material.scss
Normal file
19
src/app/@theme/styles/material/_angular-material.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
@use '~@angular/material' as mat;
|
||||||
|
|
||||||
|
@mixin angular-material() {
|
||||||
|
@include mat.core();
|
||||||
|
|
||||||
|
@include nb-for-theme(material-dark) {
|
||||||
|
$custom-dark-theme: mat.define-dark-theme(
|
||||||
|
mat.define-palette(mat.$pink-palette),
|
||||||
|
mat.define-palette(mat.$blue-grey-palette));
|
||||||
|
@include mat.all-component-themes($custom-dark-theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include nb-for-theme(material-light) {
|
||||||
|
$custom-light-theme: mat.define-light-theme(
|
||||||
|
mat.define-palette(mat.$indigo-palette),
|
||||||
|
mat.define-palette(mat.$pink-palette));
|
||||||
|
@include mat.all-component-themes($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=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
|
// themes - our custom or/and out of the box themes
|
||||||
@import 'themes';
|
@import 'themes';
|
||||||
|
|
@ -12,15 +13,20 @@
|
||||||
@import '~bootstrap/scss/mixins';
|
@import '~bootstrap/scss/mixins';
|
||||||
@import '~bootstrap/scss/grid';
|
@import '~bootstrap/scss/grid';
|
||||||
|
|
||||||
|
@import './material/angular-material';
|
||||||
|
|
||||||
// loading progress bar theme
|
// loading progress bar theme
|
||||||
@import './pace.theme';
|
@import './pace.theme';
|
||||||
|
|
||||||
@import './layout';
|
@import './layout';
|
||||||
@import './overrides';
|
@import './overrides';
|
||||||
|
@import './material/material-overrides';
|
||||||
|
|
||||||
// install the framework and custom global styles
|
// install the framework and custom global styles
|
||||||
@include nb-install() {
|
@include nb-install() {
|
||||||
|
|
||||||
|
@include angular-material();
|
||||||
|
|
||||||
// framework global styles
|
// framework global styles
|
||||||
@include nb-theme-global();
|
@include nb-theme-global();
|
||||||
@include nb-auth-global();
|
@include nb-auth-global();
|
||||||
|
|
@ -30,4 +36,5 @@
|
||||||
@include ngx-pace-theme();
|
@include ngx-pace-theme();
|
||||||
|
|
||||||
@include nb-overrides();
|
@include nb-overrides();
|
||||||
|
@include material-overrides();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,9 @@
|
||||||
@import '~@nebular/theme/styles/theming';
|
@import '~@nebular/theme/styles/theming';
|
||||||
// @nebular out of the box themes
|
// @nebular out of the box themes
|
||||||
@import '~@nebular/theme/styles/themes';
|
@import '~@nebular/theme/styles/themes';
|
||||||
|
// material themes
|
||||||
|
@import './material/material-dark';
|
||||||
|
@import './material/material-light';
|
||||||
|
|
||||||
$nb-themes: nb-register-theme((
|
$nb-themes: nb-register-theme((
|
||||||
layout-padding-top: 2.25rem,
|
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: 0 4px 14px 0 #8f9bb3,
|
||||||
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
|
||||||
), dark, dark);
|
), 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 { ModuleWithProviders, NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { MatRippleModule } from '@angular/material/core';
|
||||||
import {
|
import {
|
||||||
NbActionsModule,
|
NbActionsModule,
|
||||||
NbLayoutModule,
|
NbLayoutModule,
|
||||||
|
|
@ -38,6 +39,8 @@ import { DEFAULT_THEME } from './styles/theme.default';
|
||||||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
import { COSMIC_THEME } from './styles/theme.cosmic';
|
||||||
import { CORPORATE_THEME } from './styles/theme.corporate';
|
import { CORPORATE_THEME } from './styles/theme.corporate';
|
||||||
import { DARK_THEME } from './styles/theme.dark';
|
import { DARK_THEME } from './styles/theme.dark';
|
||||||
|
import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light';
|
||||||
|
import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark';
|
||||||
|
|
||||||
const NB_MODULES = [
|
const NB_MODULES = [
|
||||||
NbLayoutModule,
|
NbLayoutModule,
|
||||||
|
|
@ -71,8 +74,8 @@ const PIPES = [
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [CommonModule, ...NB_MODULES],
|
imports: [CommonModule, MatRippleModule, ...NB_MODULES],
|
||||||
exports: [CommonModule, ...PIPES, ...COMPONENTS],
|
exports: [CommonModule, MatRippleModule, ...PIPES, ...COMPONENTS],
|
||||||
declarations: [...COMPONENTS, ...PIPES],
|
declarations: [...COMPONENTS, ...PIPES],
|
||||||
})
|
})
|
||||||
export class ThemeModule {
|
export class ThemeModule {
|
||||||
|
|
@ -84,7 +87,7 @@ export class ThemeModule {
|
||||||
{
|
{
|
||||||
name: 'default',
|
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,
|
).providers,
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
<nb-tab tabTitle="Contacts">
|
<nb-tab tabTitle="Contacts">
|
||||||
<nb-list>
|
<nb-list>
|
||||||
<nb-list-item class="contact" *ngFor="let c of contacts">
|
<nb-list-item matRipple class="contact" *ngFor="let c of contacts">
|
||||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||||
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
|
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
|
||||||
</nb-list-item>
|
</nb-list-item>
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
<nb-tab tabTitle="Recent">
|
<nb-tab tabTitle="Recent">
|
||||||
<nb-list>
|
<nb-list>
|
||||||
<nb-list-item class="contact" *ngFor="let c of recent">
|
<nb-list-item matRipple class="contact" *ngFor="let c of recent">
|
||||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||||
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
|
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
|
||||||
</nb-list-item>
|
</nb-list-item>
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,8 @@ export class DashboardComponent implements OnDestroy {
|
||||||
cosmic: CardSettings[];
|
cosmic: CardSettings[];
|
||||||
corporate: CardSettings[];
|
corporate: CardSettings[];
|
||||||
dark: CardSettings[];
|
dark: CardSettings[];
|
||||||
|
'material-dark': CardSettings[];
|
||||||
|
'material-light': CardSettings[];
|
||||||
} = {
|
} = {
|
||||||
default: this.commonStatusCardsSet,
|
default: this.commonStatusCardsSet,
|
||||||
cosmic: this.commonStatusCardsSet,
|
cosmic: this.commonStatusCardsSet,
|
||||||
|
|
@ -76,6 +78,8 @@ export class DashboardComponent implements OnDestroy {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
dark: this.commonStatusCardsSet,
|
dark: this.commonStatusCardsSet,
|
||||||
|
'material-dark': this.commonStatusCardsSet,
|
||||||
|
'material-light': this.commonStatusCardsSet,
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(private themeService: NbThemeService,
|
constructor(private themeService: NbThemeService,
|
||||||
|
|
|
||||||
|
|
@ -37,8 +37,8 @@
|
||||||
<span>291 <span class="caption">USD</span></span>
|
<span>291 <span class="caption">USD</span></span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<nb-select [(selected)]="type" class="type-select">
|
<nb-select matRipple [(selected)]="type" class="type-select">
|
||||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
nb-card-header {
|
nb-card-header {
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<div class="grid-container">
|
<div class="grid-container">
|
||||||
|
|
||||||
<div class="single-view" *ngIf="isSingleView">
|
<div class="single-view" *ngIf="isSingleView">
|
||||||
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
|
<div class="camera single" [style.background-image]="'url(' + selectedCamera.source + ')'">
|
||||||
<span class="camera-name">{{ selectedCamera.title }}</span>
|
<span class="camera-name">{{ selectedCamera.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -40,19 +40,19 @@
|
||||||
|
|
||||||
<nb-card-footer>
|
<nb-card-footer>
|
||||||
<nb-actions [size]="actionSize" fullWidth>
|
<nb-actions [size]="actionSize" fullWidth>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
|
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
|
||||||
Pause
|
Pause
|
||||||
</nb-action>
|
</nb-action>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon icon="list-outline" pack="eva"></nb-icon>
|
<nb-icon icon="list-outline" pack="eva"></nb-icon>
|
||||||
Logs
|
Logs
|
||||||
</nb-action>
|
</nb-action>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon icon="search-outline" pack="eva"></nb-icon>
|
<nb-icon icon="search-outline" pack="eva"></nb-icon>
|
||||||
Search
|
Search
|
||||||
</nb-action>
|
</nb-action>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
|
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
|
||||||
Setup
|
Setup
|
||||||
</nb-action>
|
</nb-action>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
.single-view-button {
|
.single-view-button {
|
||||||
.nb-square {
|
.nb-square {
|
||||||
font-size: 1.25rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include nb-ltr {
|
@include nb-ltr {
|
||||||
|
|
@ -72,6 +72,10 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
&:not(.single) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
content: '';
|
content: '';
|
||||||
|
|
@ -96,6 +100,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
nb-action {
|
nb-action {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
nb-icon {
|
nb-icon {
|
||||||
@include nb-ltr(margin-right, 0.5rem);
|
@include nb-ltr(margin-right, 0.5rem);
|
||||||
@include nb-rtl(margin-left, 0.5rem);
|
@include nb-rtl(margin-left, 0.5rem);
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
overflow: visible;
|
cursor: pointer;
|
||||||
|
|
||||||
.icon-container {
|
.icon-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
|
||||||
selector: 'ngx-status-card',
|
selector: 'ngx-status-card',
|
||||||
styleUrls: ['./status-card.component.scss'],
|
styleUrls: ['./status-card.component.scss'],
|
||||||
template: `
|
template: `
|
||||||
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
|
<nb-card matRipple (click)="on = !on" [ngClass]="{'off': !on}">
|
||||||
<div class="icon-container">
|
<div class="icon-container">
|
||||||
<div class="icon status-{{ type }}">
|
<div class="icon status-{{ type }}">
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,6 @@
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
|
<button nbButton matRipple appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
|
||||||
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
|
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -39,25 +39,27 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 5.25rem;
|
width: 5.25rem;
|
||||||
height: 5.25rem;
|
height: 5.25rem;
|
||||||
background-color: nb-theme(card-background-color);
|
background-color: nb-theme(card-background-color) !important;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
bottom: 2%;
|
bottom: 2%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 50%);
|
transform: translate(-50%, 50%);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||||
|
|
||||||
&.on {
|
&.on {
|
||||||
color: nb-theme(text-hint-color);
|
color: nb-theme(color-primary-default);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.power-icon {
|
.power-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.625rem;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -0.625rem;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -20,16 +20,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
|
<nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
|
||||||
<nb-radio value="cool">
|
<nb-radio matRipple value="cool">
|
||||||
<i class="nb-snowy-circled"></i>
|
<i class="nb-snowy-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
<nb-radio value="warm">
|
<nb-radio matRipple value="warm">
|
||||||
<i class="nb-sunny-circled"></i>
|
<i class="nb-sunny-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
<nb-radio value="heat">
|
<nb-radio matRipple value="heat">
|
||||||
<i class="nb-flame-circled"></i>
|
<i class="nb-flame-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
<nb-radio value="fan">
|
<nb-radio matRipple value="fan">
|
||||||
<i class="nb-loop-circled"></i>
|
<i class="nb-loop-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
</nb-radio-group>
|
</nb-radio-group>
|
||||||
|
|
@ -51,16 +51,16 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
|
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
|
||||||
<nb-radio value="cool">
|
<nb-radio matRipple value="cool">
|
||||||
<i class="nb-snowy-circled"></i>
|
<i class="nb-snowy-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
<nb-radio value="warm">
|
<nb-radio matRipple value="warm">
|
||||||
<i class="nb-sunny-circled"></i>
|
<i class="nb-sunny-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
<nb-radio value="heat">
|
<nb-radio matRipple value="heat">
|
||||||
<i class="nb-flame-circled"></i>
|
<i class="nb-flame-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
<nb-radio value="fan">
|
<nb-radio matRipple value="fan">
|
||||||
<i class="nb-loop-circled"></i>
|
<i class="nb-loop-circled"></i>
|
||||||
</nb-radio>
|
</nb-radio>
|
||||||
</nb-radio-group>
|
</nb-radio-group>
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,8 @@ import { TrafficChartData } from '../../../@core/data/traffic-chart';
|
||||||
<nb-card-header>
|
<nb-card-header>
|
||||||
<span>Traffic Consumption</span>
|
<span>Traffic Consumption</span>
|
||||||
|
|
||||||
<nb-select [(selected)]="type">
|
<nb-select matRipple [(selected)]="type">
|
||||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
|
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
|
||||||
|
|
||||||
<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
|
<nb-select matRipple class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
|
||||||
<nb-option *ngFor="let period of types" [value]="period">
|
<nb-option matRipple *ngFor="let period of types" [value]="period">
|
||||||
{{ period }}
|
{{ period }}
|
||||||
</nb-option>
|
</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,9 @@
|
||||||
|
|
||||||
ngx-legend-chart,
|
ngx-legend-chart,
|
||||||
.period-select {
|
.period-select {
|
||||||
padding-top: 1rem;
|
margin-top: 1rem;
|
||||||
@include nb-ltr(padding-left, 0.5rem);
|
@include nb-ltr(margin-left, 0.5rem);
|
||||||
@include nb-rtl(padding-right, 0.5rem);
|
@include nb-rtl(margin-right, 0.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(md) {
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,10 @@ $legend-canceled-color: #3f4fda;
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
|
|
||||||
|
nb-card {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
nb-tabset {
|
nb-tabset {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<nb-card-header>
|
<nb-card-header>
|
||||||
<nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
|
<nb-select matRipple [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
|
||||||
<nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
|
<nb-option matRipple *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<nb-card-body>
|
<ngx-traffic-bar-chart
|
||||||
<ngx-traffic-bar-chart [data]="trafficBarData.data"
|
[data]="trafficBarData.data"
|
||||||
[labels]="trafficBarData.labels"
|
[labels]="trafficBarData.labels"
|
||||||
[formatter]="trafficBarData.formatter">
|
[formatter]="trafficBarData.formatter"
|
||||||
</ngx-traffic-bar-chart>
|
></ngx-traffic-bar-chart>
|
||||||
</nb-card-body>
|
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,7 @@
|
||||||
@import '../../../../@theme/styles/themes';
|
@import '../../../../@theme/styles/themes';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
nb-card-body {
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
ngx-traffic-bar-chart {
|
ngx-traffic-bar-chart {
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
::ng-deep {
|
::ng-deep {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,11 @@
|
||||||
@import '../../../../@theme/styles/themes';
|
@import '../../../../@theme/styles/themes';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
overflow: auto;
|
overflow: hidden;
|
||||||
|
|
||||||
|
nb-list {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
<nb-card-header>
|
<span>Traffic</span>
|
||||||
<span>Traffic</span>
|
<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
|
||||||
<nb-select [selected]="type" (selectedChange)="changePeriod($event)">
|
<nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
|
||||||
<nb-option *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
|
</nb-select>
|
||||||
</nb-select>
|
|
||||||
</nb-card-header>
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,5 @@
|
||||||
@import '../../../../@theme/styles/themes';
|
:host {
|
||||||
|
display: flex;
|
||||||
@include nb-install-component() {
|
align-items: center;
|
||||||
nb-card-header {
|
justify-content: space-between;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-top: nb-theme(card-header-with-select-padding-top);
|
|
||||||
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
|
|
||||||
|
|
||||||
@include nb-ltr(padding-right, 4rem);
|
|
||||||
@include nb-rtl(padding-left, 4rem);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,23 @@
|
||||||
<nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
|
<nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
|
||||||
<nb-card-front>
|
<nb-card-front>
|
||||||
<nb-card size="small">
|
<nb-card size="small">
|
||||||
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
|
<nb-card-header>
|
||||||
|
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
|
||||||
|
</ngx-traffic-cards-header>
|
||||||
|
</nb-card-header>
|
||||||
<ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
|
<ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
|
||||||
<nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
|
<nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</nb-card-front>
|
</nb-card-front>
|
||||||
<nb-card-back>
|
<nb-card-back>
|
||||||
<nb-card size="small">
|
<nb-card size="small">
|
||||||
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
|
<nb-card-header>
|
||||||
<ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
|
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
|
||||||
|
</ngx-traffic-cards-header>
|
||||||
|
</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
|
||||||
|
</nb-card-body>
|
||||||
<nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
|
<nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</nb-card-back>
|
</nb-card-back>
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,11 @@
|
||||||
@include nb-rtl(left, 1.25rem);
|
@include nb-rtl(left, 1.25rem);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nb-card-header {
|
||||||
|
padding-top: nb-theme(card-header-with-select-padding-top);
|
||||||
|
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
|
||||||
|
@include nb-ltr(padding-right, 4rem);
|
||||||
|
@include nb-rtl(padding-left, 4rem);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
|
|
||||||
<nb-card-header>
|
<nb-card-header>
|
||||||
<span>User Activity</span>
|
<span>User Activity</span>
|
||||||
<nb-select [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
|
<nb-select matRipple [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
|
||||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,10 @@
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
nb-card {
|
nb-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
nb-card-header {
|
nb-card-header {
|
||||||
|
|
|
||||||
|
|
@ -3,33 +3,33 @@
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12 col-lg-12 col-xxxl-12">
|
<div class="col-md-12 col-lg-12 col-xxxl-12">
|
||||||
<button nbButton status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
<button nbButton matRipple status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
|
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button nbButton status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
<button nbButton matRipple status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
|
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button nbButton status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
<button nbButton matRipple status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
|
||||||
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
|
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
|
||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
|
<div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
|
||||||
<button nbButton status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
<button nbButton matRipple status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
|
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
|
||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button nbButton status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
<button nbButton matRipple status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
|
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
|
||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button nbButton status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
<button nbButton matRipple status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
|
||||||
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
|
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
|
||||||
Download
|
Download
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
<nb-card-header>Hero Buttons</nb-card-header>
|
<nb-card-header>Hero Buttons</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button *ngFor="let status of statuses" nbButton [status]="status" hero>
|
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" hero>
|
||||||
{{ status }}
|
{{ status }}
|
||||||
</button>
|
</button>
|
||||||
<button disabled nbButton hero>
|
<button disabled nbButton matRipple hero>
|
||||||
disabled
|
disabled
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -18,10 +18,10 @@
|
||||||
<nb-card-header>Default Buttons</nb-card-header>
|
<nb-card-header>Default Buttons</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button *ngFor="let status of statuses" nbButton [status]="status">
|
<button *ngFor="let status of statuses" nbButton matRipple [status]="status">
|
||||||
{{ status }}
|
{{ status }}
|
||||||
</button>
|
</button>
|
||||||
<button disabled nbButton>
|
<button disabled nbButton matRipple>
|
||||||
disabled
|
disabled
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -32,10 +32,10 @@
|
||||||
<nb-card-header>Outline Buttons</nb-card-header>
|
<nb-card-header>Outline Buttons</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button *ngFor="let status of statuses" nbButton [status]="status" outline>
|
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" outline>
|
||||||
{{ status }}
|
{{ status }}
|
||||||
</button>
|
</button>
|
||||||
<button disabled nbButton outline>
|
<button disabled nbButton matRipple outline>
|
||||||
disabled
|
disabled
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -46,10 +46,10 @@
|
||||||
<nb-card-header>Ghost Buttons</nb-card-header>
|
<nb-card-header>Ghost Buttons</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button *ngFor="let status of statuses" nbButton [status]="status" ghost>
|
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" ghost>
|
||||||
{{ status }}
|
{{ status }}
|
||||||
</button>
|
</button>
|
||||||
<button disabled nbButton outline>
|
<button disabled nbButton matRipple outline>
|
||||||
disabled
|
disabled
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
<nb-card-header>Button shapes</nb-card-header>
|
<nb-card-header>Button shapes</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button *ngFor="let shape of shapes" nbButton [shape]="shape">
|
<button *ngFor="let shape of shapes" nbButton matRipple [shape]="shape">
|
||||||
{{ shape }}
|
{{ shape }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
<nb-card-header>Button sizes</nb-card-header>
|
<nb-card-header>Button sizes</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button *ngFor="let size of sizes" nbButton [size]="size">
|
<button *ngFor="let size of sizes" nbButton matRipple [size]="size">
|
||||||
{{ size }}
|
{{ size }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -86,13 +86,13 @@
|
||||||
<nb-card-header>Action Groups</nb-card-header>
|
<nb-card-header>Action Groups</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-actions size="medium">
|
<nb-actions size="medium">
|
||||||
<nb-action icon="menu-outline"></nb-action>
|
<nb-action matRipple icon="menu-outline"></nb-action>
|
||||||
<nb-action icon="search-outline"></nb-action>
|
<nb-action matRipple icon="search-outline"></nb-action>
|
||||||
<nb-action icon="email-outline"></nb-action>
|
<nb-action matRipple icon="email-outline"></nb-action>
|
||||||
<nb-action disabled icon="bell-outline"></nb-action><nb-action>
|
<nb-action disabled icon="bell-outline"></nb-action><nb-action>
|
||||||
<nb-user name="Han Solo"></nb-user>
|
<nb-user matRipple name="Han Solo"></nb-user>
|
||||||
</nb-action>
|
</nb-action>
|
||||||
<nb-action icon="settings-2-outline"></nb-action>
|
<nb-action matRipple icon="settings-2-outline"></nb-action>
|
||||||
</nb-actions>
|
</nb-actions>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
@ -100,24 +100,30 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-actions size="medium" fullWidth>
|
<nb-actions size="medium" fullWidth>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
|
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
|
||||||
<span>Pause</span>
|
<span>Pause</span>
|
||||||
</nb-action>
|
</nb-action>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon class="action-icon" icon="list-outline"></nb-icon>
|
<nb-icon class="action-icon" icon="list-outline"></nb-icon>
|
||||||
<span>Logs</span>
|
<span>Logs</span>
|
||||||
</nb-action>
|
</nb-action>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon class="action-icon" icon="search-outline"></nb-icon>
|
<nb-icon class="action-icon" icon="search-outline"></nb-icon>
|
||||||
<span>Search</span>
|
<span>Search</span>
|
||||||
</nb-action>
|
</nb-action>
|
||||||
<nb-action>
|
<nb-action matRipple>
|
||||||
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
|
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
|
||||||
<span>Setup</span>
|
<span>Setup</span>
|
||||||
</nb-action>
|
</nb-action>
|
||||||
</nb-actions>
|
</nb-actions>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
||||||
|
<nb-card *ngIf="materialTheme$ | async">
|
||||||
|
<nb-card-body>
|
||||||
|
<ngx-material-buttons></ngx-material-buttons>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -17,4 +17,9 @@
|
||||||
.actions-card {
|
.actions-card {
|
||||||
height: 8rem;
|
height: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nb-action {
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme';
|
import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { map } from 'rxjs/operators';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-buttons',
|
selector: 'ngx-buttons',
|
||||||
|
|
@ -7,7 +9,18 @@ import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/t
|
||||||
templateUrl: './buttons.component.html',
|
templateUrl: './buttons.component.html',
|
||||||
})
|
})
|
||||||
export class ButtonsComponent {
|
export class ButtonsComponent {
|
||||||
statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
|
public constructor(private readonly themeService: NbThemeService) {
|
||||||
shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
this.materialTheme$ = this.themeService.onThemeChange()
|
||||||
sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
|
.pipe(map(theme => {
|
||||||
|
const themeName: string = theme?.name || '';
|
||||||
|
return themeName.startsWith('material');
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
public readonly materialTheme$: Observable<boolean>;
|
||||||
|
|
||||||
|
public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
|
||||||
|
public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
|
||||||
|
public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<button mat-button color="primary">Basic</button>
|
||||||
|
<button mat-raised-button color="primary">Raised</button>
|
||||||
|
<button mat-stroked-button color="primary">Stroked</button>
|
||||||
|
<button mat-flat-button color="primary">Flat</button>
|
||||||
|
<button mat-fab color="primary">FAB</button>
|
||||||
|
<mat-button-toggle-group>
|
||||||
|
<mat-button-toggle value="left" [checked]="true">Toggle left</mat-button-toggle>
|
||||||
|
<mat-button-toggle value="right">Toggle right</mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
button, mat-button-toggle-group {
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-material-buttons',
|
||||||
|
templateUrl: './material-buttons.component.html',
|
||||||
|
styleUrls: ['./material-buttons.component.scss'],
|
||||||
|
})
|
||||||
|
export class MaterialButtonsComponent {}
|
||||||
|
|
@ -10,8 +10,10 @@
|
||||||
</div>
|
</div>
|
||||||
<input type="password" nbInput fullWidth placeholder="Password">
|
<input type="password" nbInput fullWidth placeholder="Password">
|
||||||
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Rectangle border">
|
||||||
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
<ng-container *ngIf="!(materialTheme$ | async)">
|
||||||
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Semi-round border">
|
||||||
|
<input type="text" nbInput fullWidth shape="round" placeholder="Rounded border">
|
||||||
|
</ng-container>
|
||||||
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
<input type="text" nbInput fullWidth placeholder="Disabled input" disabled/>
|
||||||
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
<textarea rows="5" nbInput fullWidth shape="round" placeholder="Text Area"></textarea>
|
||||||
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
<input type="text" nbInput fullWidth fieldSize="small" placeholder="Small Input">
|
||||||
|
|
@ -26,9 +28,9 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Select</nb-card-header>
|
<nb-card-header>Select</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-select selected="1">
|
<nb-select matRipple selected="1">
|
||||||
<nb-option value="1">Option 1</nb-option>
|
<nb-option matRipple value="1">Option 1</nb-option>
|
||||||
<nb-option value="2">Option 2</nb-option>
|
<nb-option matRipple value="2">Option 2</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
@ -85,3 +87,8 @@
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div *ngIf="showMaterialInputs" class="row">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<ngx-material-inputs></ngx-material-inputs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,13 +1,28 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { NbThemeService } from '@nebular/theme';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { tap } from 'rxjs/operators';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-form-inputs',
|
selector: 'ngx-form-inputs',
|
||||||
styleUrls: ['./form-inputs.component.scss'],
|
styleUrls: ['./form-inputs.component.scss'],
|
||||||
templateUrl: './form-inputs.component.html',
|
templateUrl: './form-inputs.component.html',
|
||||||
})
|
})
|
||||||
export class FormInputsComponent {
|
export class FormInputsComponent implements OnInit {
|
||||||
|
public constructor(private readonly themeService: NbThemeService) {
|
||||||
|
}
|
||||||
|
|
||||||
starRate = 2;
|
public materialTheme$: Observable<boolean>;
|
||||||
heartRate = 4;
|
public starRate: number = 2;
|
||||||
radioGroupValue = 'This is value 2';
|
public heartRate: number = 4;
|
||||||
|
public radioGroupValue: string = 'This is value 2';
|
||||||
|
public showMaterialInputs = false;
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.materialTheme$ = this.themeService.onThemeChange()
|
||||||
|
.pipe(tap(theme => {
|
||||||
|
const themeName: string = theme?.name || '';
|
||||||
|
this.showMaterialInputs = themeName.startsWith('material');
|
||||||
|
}));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header>Angular Material</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<mat-form-field class="input-example">
|
||||||
|
<mat-label>Input</mat-label>
|
||||||
|
<input matInput autocomplete="off">
|
||||||
|
<mat-hint>hint</mat-hint>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field class="input-example">
|
||||||
|
<mat-label>Select</mat-label>
|
||||||
|
<mat-select>
|
||||||
|
<mat-option value="1">Option 1</mat-option>
|
||||||
|
<mat-option value="2">Option 2</mat-option>
|
||||||
|
<mat-option value="3">Option 3</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
<mat-hint>hint</mat-hint>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<mat-form-field class="input-example">
|
||||||
|
<mat-label>Datepicker</mat-label>
|
||||||
|
<input matInput autocomplete="off" [matDatepicker]="picker">
|
||||||
|
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||||
|
<mat-datepicker #picker></mat-datepicker>
|
||||||
|
<mat-hint>hint</mat-hint>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<mat-form-field class="input-example">
|
||||||
|
<mat-label>Textarea</mat-label>
|
||||||
|
<textarea matInput autocomplete="off"></textarea>
|
||||||
|
<mat-hint>hint</mat-hint>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
|
<div class="input-example">
|
||||||
|
<label>Checkbox</label>
|
||||||
|
<mat-checkbox color="primary" [checked]="true"></mat-checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-example">
|
||||||
|
<label>Toggle</label>
|
||||||
|
<mat-slide-toggle color="primary" [checked]="true"></mat-slide-toggle>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-example">
|
||||||
|
<label>Radio</label>
|
||||||
|
<mat-radio-group color="primary">
|
||||||
|
<mat-radio-button value="1" [checked]="true">Option 1</mat-radio-button>
|
||||||
|
<mat-radio-button value="2">Option 2</mat-radio-button>
|
||||||
|
<mat-radio-button value="3">Option 3</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-example {
|
||||||
|
display: block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
|
||||||
|
label, mat-radio-button {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
min-height: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'ngx-material-inputs',
|
||||||
|
templateUrl: './material-inputs.component.html',
|
||||||
|
styleUrls: ['./material-inputs.component.scss'],
|
||||||
|
})
|
||||||
|
export class MaterialInputsComponent {}
|
||||||
|
|
@ -15,11 +15,37 @@ import { ThemeModule } from '../../@theme/theme.module';
|
||||||
import { FormsRoutingModule } from './forms-routing.module';
|
import { FormsRoutingModule } from './forms-routing.module';
|
||||||
import { FormsComponent } from './forms.component';
|
import { FormsComponent } from './forms.component';
|
||||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||||
|
import { MaterialInputsComponent } from './form-inputs/material-inputs/material-inputs.component';
|
||||||
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
import { FormLayoutsComponent } from './form-layouts/form-layouts.component';
|
||||||
import { DatepickerComponent } from './datepicker/datepicker.component';
|
import { DatepickerComponent } from './datepicker/datepicker.component';
|
||||||
import { ButtonsComponent } from './buttons/buttons.component';
|
import { ButtonsComponent } from './buttons/buttons.component';
|
||||||
|
import { MaterialButtonsComponent } from './buttons/material-buttons/material-buttons.component';
|
||||||
import { FormsModule as ngFormsModule } from '@angular/forms';
|
import { FormsModule as ngFormsModule } from '@angular/forms';
|
||||||
|
|
||||||
|
import { MatNativeDateModule } from '@angular/material/core';
|
||||||
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
|
import { MatInputModule } from '@angular/material/input';
|
||||||
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||||
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||||
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||||
|
import { MatRadioModule } from '@angular/material/radio';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
||||||
|
|
||||||
|
const materialModules = [
|
||||||
|
MatFormFieldModule,
|
||||||
|
MatInputModule,
|
||||||
|
MatSelectModule,
|
||||||
|
MatNativeDateModule,
|
||||||
|
MatDatepickerModule,
|
||||||
|
MatCheckboxModule,
|
||||||
|
MatSlideToggleModule,
|
||||||
|
MatRadioModule,
|
||||||
|
MatButtonModule,
|
||||||
|
MatButtonToggleModule,
|
||||||
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
ThemeModule,
|
ThemeModule,
|
||||||
|
|
@ -35,6 +61,7 @@ import { FormsModule as ngFormsModule } from '@angular/forms';
|
||||||
NbSelectModule,
|
NbSelectModule,
|
||||||
NbIconModule,
|
NbIconModule,
|
||||||
ngFormsModule,
|
ngFormsModule,
|
||||||
|
...materialModules,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
FormsComponent,
|
FormsComponent,
|
||||||
|
|
@ -42,6 +69,8 @@ import { FormsModule as ngFormsModule } from '@angular/forms';
|
||||||
FormInputsComponent,
|
FormInputsComponent,
|
||||||
FormLayoutsComponent,
|
FormLayoutsComponent,
|
||||||
DatepickerComponent,
|
DatepickerComponent,
|
||||||
|
MaterialInputsComponent,
|
||||||
|
MaterialButtonsComponent,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class FormsModule { }
|
export class FormsModule { }
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,13 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Toggle Accordion By Button</nb-card-header>
|
<nb-card-header>Toggle Accordion By Button</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbButton (click)="toggle()">Toggle First Item</button>
|
<button nbButton matRipple (click)="toggle()">Toggle First Item</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
||||||
<nb-accordion>
|
<nb-accordion>
|
||||||
<nb-accordion-item #item>
|
<nb-accordion-item #item>
|
||||||
<nb-accordion-item-header>
|
<nb-accordion-item-header matRipple>
|
||||||
Product Details
|
Product Details
|
||||||
</nb-accordion-item-header>
|
</nb-accordion-item-header>
|
||||||
<nb-accordion-item-body>
|
<nb-accordion-item-body>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</nb-accordion-item>
|
</nb-accordion-item>
|
||||||
|
|
||||||
<nb-accordion-item>
|
<nb-accordion-item>
|
||||||
<nb-accordion-item-header>
|
<nb-accordion-item-header matRipple>
|
||||||
Reviews
|
Reviews
|
||||||
</nb-accordion-item-header>
|
</nb-accordion-item-header>
|
||||||
<nb-accordion-item-body>
|
<nb-accordion-item-body>
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
</nb-accordion-item>
|
</nb-accordion-item>
|
||||||
|
|
||||||
<nb-accordion-item>
|
<nb-accordion-item>
|
||||||
<nb-accordion-item-header>
|
<nb-accordion-item-header matRipple>
|
||||||
Edit
|
Edit
|
||||||
</nb-accordion-item-header>
|
</nb-accordion-item-header>
|
||||||
<nb-accordion-item-body>
|
<nb-accordion-item-body>
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
|
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
|
||||||
<nb-accordion multi>
|
<nb-accordion multi>
|
||||||
<nb-accordion-item>
|
<nb-accordion-item>
|
||||||
<nb-accordion-item-header>
|
<nb-accordion-item-header matRipple>
|
||||||
Product Details
|
Product Details
|
||||||
</nb-accordion-item-header>
|
</nb-accordion-item-header>
|
||||||
<nb-accordion-item-body>
|
<nb-accordion-item-body>
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
</nb-accordion-item>
|
</nb-accordion-item>
|
||||||
|
|
||||||
<nb-accordion-item>
|
<nb-accordion-item>
|
||||||
<nb-accordion-item-header>
|
<nb-accordion-item-header matRipple>
|
||||||
Reviews
|
Reviews
|
||||||
</nb-accordion-item-header>
|
</nb-accordion-item-header>
|
||||||
<nb-accordion-item-body>
|
<nb-accordion-item-body>
|
||||||
|
|
@ -68,7 +68,7 @@
|
||||||
</nb-accordion-item>
|
</nb-accordion-item>
|
||||||
|
|
||||||
<nb-accordion-item>
|
<nb-accordion-item>
|
||||||
<nb-accordion-item-header>
|
<nb-accordion-item-header matRipple>
|
||||||
Edit
|
Edit
|
||||||
</nb-accordion-item-header>
|
</nb-accordion-item-header>
|
||||||
<nb-accordion-item-body>
|
<nb-accordion-item-body>
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,14 @@
|
||||||
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
<div class="col-md-12 col-lg-6 col-xxxl-6">
|
||||||
<nb-card class="list-card" size="small">
|
<nb-card class="list-card" size="small">
|
||||||
<nb-card-header>Users</nb-card-header>
|
<nb-card-header>Users</nb-card-header>
|
||||||
<nb-list>
|
<nb-card-body>
|
||||||
<nb-list-item *ngFor="let user of users">
|
<nb-list>
|
||||||
<nb-user [name]="user.name" [title]="user.title">
|
<nb-list-item *ngFor="let user of users">
|
||||||
</nb-user>
|
<nb-user [name]="user.name" [title]="user.title">
|
||||||
</nb-list-item>
|
</nb-user>
|
||||||
</nb-list>
|
</nb-list-item>
|
||||||
|
</nb-list>
|
||||||
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,25 +4,25 @@
|
||||||
<nb-step [label]="labelOne">
|
<nb-step [label]="labelOne">
|
||||||
<ng-template #labelOne>First step</ng-template>
|
<ng-template #labelOne>First step</ng-template>
|
||||||
<h3>Step content #1</h3>
|
<h3>Step content #1</h3>
|
||||||
<button nbButton disabled nbStepperNext>prev</button>
|
<button nbButton matRipple disabled nbStepperNext>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step [label]="labelTwo">
|
<nb-step [label]="labelTwo">
|
||||||
<ng-template #labelTwo>Second step</ng-template>
|
<ng-template #labelTwo>Second step</ng-template>
|
||||||
<h3>Step content #2</h3>
|
<h3>Step content #2</h3>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step label="Third step">
|
<nb-step label="Third step">
|
||||||
<h3>Step content #3</h3>
|
<h3>Step content #3</h3>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step [label]="labelFour">
|
<nb-step [label]="labelFour">
|
||||||
<ng-template #labelFour>Fourth step</ng-template>
|
<ng-template #labelFour>Fourth step</ng-template>
|
||||||
<h3>Step content #4</h3>
|
<h3>Step content #4</h3>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton disabled nbStepperNext>next</button>
|
<button nbButton matRipple disabled nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
</nb-stepper>
|
</nb-stepper>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
|
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
|
||||||
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
|
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
|
||||||
</div>
|
</div>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</form>
|
</form>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step [stepControl]="secondForm" label="Second step">
|
<nb-step [stepControl]="secondForm" label="Second step">
|
||||||
|
|
@ -57,8 +57,8 @@
|
||||||
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
|
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
|
||||||
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
|
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
|
||||||
</div>
|
</div>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</form>
|
</form>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step [stepControl]="thirdForm" label="Third step">
|
<nb-step [stepControl]="thirdForm" label="Third step">
|
||||||
|
|
@ -70,14 +70,14 @@
|
||||||
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
|
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
|
||||||
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
|
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
|
||||||
</div>
|
</div>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>Confirm</button>
|
<button nbButton matRipple nbStepperNext>Confirm</button>
|
||||||
</form>
|
</form>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
|
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
|
||||||
<div class="step-container">
|
<div class="step-container">
|
||||||
<h3>Wizard completed!</h3>
|
<h3>Wizard completed!</h3>
|
||||||
<button nbButton (click)="stepper.reset()">Try again</button>
|
<button nbButton matRipple (click)="stepper.reset()">Try again</button>
|
||||||
</div>
|
</div>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
</nb-stepper>
|
</nb-stepper>
|
||||||
|
|
@ -97,8 +97,8 @@
|
||||||
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
|
||||||
placerat quis, lobortis in ligula.
|
placerat quis, lobortis in ligula.
|
||||||
</p>
|
</p>
|
||||||
<button nbButton disabled nbStepperNext>prev</button>
|
<button nbButton matRipple disabled nbStepperNext>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step label="Second step">
|
<nb-step label="Second step">
|
||||||
<h3>Step content #2</h3>
|
<h3>Step content #2</h3>
|
||||||
|
|
@ -107,8 +107,8 @@
|
||||||
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
||||||
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
||||||
</p>
|
</p>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step label="Third step">
|
<nb-step label="Third step">
|
||||||
<h3>Step content #3</h3>
|
<h3>Step content #3</h3>
|
||||||
|
|
@ -123,8 +123,8 @@
|
||||||
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
|
||||||
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
|
||||||
</p>
|
</p>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton nbStepperNext>next</button>
|
<button nbButton matRipple nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
<nb-step label="Fourth step">
|
<nb-step label="Fourth step">
|
||||||
<h3>Step content #4</h3>
|
<h3>Step content #4</h3>
|
||||||
|
|
@ -133,8 +133,8 @@
|
||||||
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
|
||||||
viverra ex.
|
viverra ex.
|
||||||
</p>
|
</p>
|
||||||
<button nbButton nbStepperPrevious>prev</button>
|
<button nbButton matRipple nbStepperPrevious>prev</button>
|
||||||
<button nbButton disabled nbStepperNext>next</button>
|
<button nbButton matRipple disabled nbStepperNext>next</button>
|
||||||
</nb-step>
|
</nb-step>
|
||||||
</nb-stepper>
|
</nb-stepper>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
|
<div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
|
||||||
<h2 class="title">404 Page Not Found</h2>
|
<h2 class="title">404 Page Not Found</h2>
|
||||||
<small class="sub-title">The page you were looking for doesn't exist</small>
|
<small class="sub-title">The page you were looking for doesn't exist</small>
|
||||||
<button nbButton fullWidth (click)="goToHome()" type="button" class="home-button">
|
<button nbButton matRipple fullWidth (click)="goToHome()" type="button" class="home-button">
|
||||||
Take me home
|
Take me home
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<input #name nbInput placeholder="Name">
|
<input #name nbInput placeholder="Name">
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
<nb-card-footer>
|
<nb-card-footer>
|
||||||
<button class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button>
|
<button class="cancel" nbButton matRipple status="danger" (click)="cancel()">Cancel</button>
|
||||||
<button nbButton status="success" (click)="submit(name.value)">Submit</button>
|
<button nbButton matRipple status="success" (click)="submit(name.value)">Submit</button>
|
||||||
</nb-card-footer>
|
</nb-card-footer>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Open Dialog</nb-card-header>
|
<nb-card-header>Open Dialog</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbButton (click)="open()">Open Dialog with component</button>
|
<button nbButton matRipple (click)="open()">Open Dialog with component</button>
|
||||||
|
|
||||||
<button nbButton (click)="open2(dialog)">Open Dialog with template</button>
|
<button nbButton matRipple (click)="open2(dialog)">Open Dialog with template</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -14,9 +14,9 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Open Without Backdrop</nb-card-header>
|
<nb-card-header>Open Without Backdrop</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbButton (click)="open()">Open Dialog with backdrop</button>
|
<button nbButton matRipple (click)="open()">Open Dialog with backdrop</button>
|
||||||
|
|
||||||
<button nbButton (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
|
<button nbButton matRipple (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -25,9 +25,9 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Open Without Esc Close</nb-card-header>
|
<nb-card-header>Open Without Esc Close</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbButton (click)="open()">Open Dialog with esc close</button>
|
<button nbButton matRipple (click)="open()">Open Dialog with esc close</button>
|
||||||
|
|
||||||
<button nbButton (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
|
<button nbButton matRipple (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -36,9 +36,9 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Open Without Backdrop Click</nb-card-header>
|
<nb-card-header>Open Without Backdrop Click</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbButton (click)="open()">Open Dialog with backdrop click</button>
|
<button nbButton matRipple (click)="open()">Open Dialog with backdrop click</button>
|
||||||
|
|
||||||
<button nbButton (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
|
<button nbButton matRipple (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
<nb-card class="form-input-card">
|
<nb-card class="form-input-card">
|
||||||
<nb-card-header>Return Result From Dialog</nb-card-header>
|
<nb-card-header>Return Result From Dialog</nb-card-header>
|
||||||
<nb-card-body class="result-from-dialog">
|
<nb-card-body class="result-from-dialog">
|
||||||
<button nbButton (click)="open3()">Enter Name</button>
|
<button nbButton matRipple (click)="open3()">Enter Name</button>
|
||||||
<br>
|
<br>
|
||||||
<h3 class="title">Names:</h3>
|
<h3 class="title">Names:</h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -63,7 +63,7 @@
|
||||||
<nb-card-header>Template Dialog</nb-card-header>
|
<nb-card-header>Template Dialog</nb-card-header>
|
||||||
<nb-card-body>{{ data }}</nb-card-body>
|
<nb-card-body>{{ data }}</nb-card-body>
|
||||||
<nb-card-footer>
|
<nb-card-footer>
|
||||||
<button nbButton (click)="ref.close()">Close Dialog</button>
|
<button nbButton matRipple (click)="ref.close()">Close Dialog</button>
|
||||||
</nb-card-footer>
|
</nb-card-footer>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,6 @@
|
||||||
in aliquet massa aliquet et.
|
in aliquet massa aliquet et.
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
<nb-card-footer>
|
<nb-card-footer>
|
||||||
<button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
|
<button nbButton matRipple hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
|
||||||
</nb-card-footer>
|
</nb-card-footer>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export class NgxPopoverTabsComponent {
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<textarea class="form-control" placeholder="Message"></textarea>
|
<textarea class="form-control" placeholder="Message"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary w-100">Send</button>
|
<button matRipple type="submit" class="btn btn-primary w-100">Send</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
<nb-card-header>Popover Position</nb-card-header>
|
<nb-card-header>Popover Position</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
|
<p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
|
||||||
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
|
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
|
||||||
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
|
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
|
||||||
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
|
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
|
||||||
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
|
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -17,9 +17,9 @@
|
||||||
<nb-card-header>Simple Popovers</nb-card-header>
|
<nb-card-header>Simple Popovers</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<p>In a simples form popover can take a string of text to render.</p>
|
<p>In a simples form popover can take a string of text to render.</p>
|
||||||
<button nbButton status="success" nbPopover="Hello, how are you today?">on click</button>
|
<button nbButton matRipple status="success" nbPopover="Hello, how are you today?">on click</button>
|
||||||
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
|
<button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
|
||||||
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
|
<button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<textarea class="form-control" placeholder="Message"></textarea>
|
<textarea class="form-control" placeholder="Message"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary w-100">Send</button>
|
<button matRipple type="submit" class="btn btn-primary w-100">Send</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
@ -76,9 +76,9 @@
|
||||||
<nb-card-header>Template Popovers</nb-card-header>
|
<nb-card-header>Template Popovers</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<p>You can pass a refference to `ng-template` to be rendered.</p>
|
<p>You can pass a refference to `ng-template` to be rendered.</p>
|
||||||
<button nbButton status="warning" [nbPopover]="tabs">With tabs</button>
|
<button nbButton matRipple status="warning" [nbPopover]="tabs">With tabs</button>
|
||||||
<button nbButton status="warning" [nbPopover]="form">With form</button>
|
<button nbButton matRipple status="warning" [nbPopover]="form">With form</button>
|
||||||
<button nbButton status="warning" [nbPopover]="card">With card</button>
|
<button nbButton matRipple status="warning" [nbPopover]="card">With card</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -88,9 +88,9 @@
|
||||||
<nb-card-header>Component Popovers</nb-card-header>
|
<nb-card-header>Component Popovers</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<p>Same way popover can render any angular compnoent.</p>
|
<p>Same way popover can render any angular compnoent.</p>
|
||||||
<button nbButton status="warning" [nbPopover]="tabsComponent">With tabs</button>
|
<button nbButton matRipple status="warning" [nbPopover]="tabsComponent">With tabs</button>
|
||||||
<button nbButton status="warning" [nbPopover]="formComponent">With form</button>
|
<button nbButton matRipple status="warning" [nbPopover]="formComponent">With form</button>
|
||||||
<button nbButton status="warning" [nbPopover]="cardComponent">With card</button>
|
<button nbButton matRipple status="warning" [nbPopover]="cardComponent">With card</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,52 +103,52 @@
|
||||||
<nb-card-body class="debounce-card">
|
<nb-card-body class="debounce-card">
|
||||||
<p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p>
|
<p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p>
|
||||||
|
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
|
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
|
||||||
show hint
|
show hint
|
||||||
</button>
|
</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@
|
||||||
<div class="col-md-6 col-sm-12">
|
<div class="col-md-6 col-sm-12">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="label">Position:</label>
|
<label class="label">Position:</label>
|
||||||
<nb-select [(selected)]="position" class="position-select">
|
<nb-select [(selected)]="position" matRipple class="position-select">
|
||||||
<nb-option *ngFor="let p of positions" [value]="p">{{ p }}</nb-option>
|
<nb-option *ngFor="let p of positions" [value]="p" matRipple>{{ p }}</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -34,8 +34,8 @@
|
||||||
<div class="col-md-6 col-sm-12">
|
<div class="col-md-6 col-sm-12">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="label">Toast type:</label>
|
<label class="label">Toast type:</label>
|
||||||
<nb-select [(selected)]="status">
|
<nb-select [(selected)]="status" matRipple>
|
||||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
<nb-option *ngFor="let t of types" [value]="t" matRipple>{{ t }}</nb-option>
|
||||||
</nb-select>
|
</nb-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
|
|
||||||
<nb-card-footer>
|
<nb-card-footer>
|
||||||
<button nbButton (click)="makeToast()">Show toast</button>
|
<button nbButton matRipple (click)="makeToast()">Show toast</button>
|
||||||
<button nbButton status="success" (click)="openRandomToast()">Random toast</button>
|
<button nbButton matRipple status="success" (click)="openRandomToast()">Random toast</button>
|
||||||
</nb-card-footer>
|
</nb-card-footer>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Tooltip With Icon</nb-card-header>
|
<nb-card-header>Tooltip With Icon</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton>Show Tooltip</button>
|
<button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton matRipple>Show Tooltip</button>
|
||||||
<button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton>Show Tooltip</button>
|
<button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton matRipple>Show Tooltip</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -13,10 +13,10 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Tooltip Placements</nb-card-header>
|
<nb-card-header>Tooltip Placements</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Top</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Top</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton>Right</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton matRipple>Right</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton>Bottom</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton matRipple>Bottom</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton>Left</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton matRipple>Left</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -25,12 +25,12 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Colored Tooltips</nb-card-header>
|
<nb-card-header>Colored Tooltips</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Default</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Default</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton>Primary</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton matRipple>Primary</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton>Success</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton matRipple>Success</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton>Danger</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton matRipple>Danger</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton>Info</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton matRipple>Info</button>
|
||||||
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton>Warning</button>
|
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton matRipple>Warning</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Window Form</nb-card-header>
|
<nb-card-header>Window Form</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button (click)="openWindowForm()" nbButton>Open window form</button>
|
<button (click)="openWindowForm()" nbButton matRipple>Open window form</button>
|
||||||
|
|
||||||
<button (click)="openWindow(contentTemplate)" nbButton>Open window with template</button>
|
<button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with template</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -14,9 +14,9 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-header>Window Without Backdrop</nb-card-header>
|
<nb-card-header>Window Without Backdrop</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<button (click)="openWindow(contentTemplate)" nbButton>Open window with backdrop</button>
|
<button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with backdrop</button>
|
||||||
|
|
||||||
<button (click)="openWindowWithoutBackdrop()" nbButton>Open window without backdrop</button>
|
<button (click)="openWindowWithoutBackdrop()" nbButton matRipple>Open window without backdrop</button>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,14 @@
|
||||||
Layout Rotate Search
|
Layout Rotate Search
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-search type="rotate-layout" tag="rotate-layout"></nb-search>
|
<nb-search
|
||||||
|
matRipple
|
||||||
|
[matRippleUnbounded]="true"
|
||||||
|
[matRippleCentered]="true"
|
||||||
|
[matRippleRadius]="36"
|
||||||
|
type="rotate-layout"
|
||||||
|
tag="rotate-layout"
|
||||||
|
></nb-search>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -15,7 +22,14 @@
|
||||||
Modal Zoomin Search
|
Modal Zoomin Search
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-search type="modal-zoomin" tag="modal-zoomin"></nb-search>
|
<nb-search
|
||||||
|
matRipple
|
||||||
|
[matRippleUnbounded]="true"
|
||||||
|
[matRippleCentered]="true"
|
||||||
|
[matRippleRadius]="36"
|
||||||
|
type="modal-zoomin"
|
||||||
|
tag="modal-zoomin"
|
||||||
|
></nb-search>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -25,7 +39,14 @@
|
||||||
Modal Move Search
|
Modal Move Search
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-search type="modal-move" tag="modal-move"></nb-search>
|
<nb-search
|
||||||
|
matRipple
|
||||||
|
[matRippleUnbounded]="true"
|
||||||
|
[matRippleCentered]="true"
|
||||||
|
[matRippleRadius]="36"
|
||||||
|
type="modal-move"
|
||||||
|
tag="modal-move"
|
||||||
|
></nb-search>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,7 +56,14 @@
|
||||||
Modal Drop Search
|
Modal Drop Search
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-search type="modal-drop" tag="modal-drop"></nb-search>
|
<nb-search
|
||||||
|
matRipple
|
||||||
|
[matRippleUnbounded]="true"
|
||||||
|
[matRippleCentered]="true"
|
||||||
|
[matRippleRadius]="36"
|
||||||
|
type="modal-drop"
|
||||||
|
tag="modal-drop"
|
||||||
|
></nb-search>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -45,7 +73,14 @@
|
||||||
Modal Half Search
|
Modal Half Search
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-search type="modal-half" tag="modal-half"></nb-search>
|
<nb-search
|
||||||
|
matRipple
|
||||||
|
[matRippleUnbounded]="true"
|
||||||
|
[matRippleCentered]="true"
|
||||||
|
[matRippleRadius]="36"
|
||||||
|
type="modal-half"
|
||||||
|
tag="modal-half"
|
||||||
|
></nb-search>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -55,7 +90,14 @@
|
||||||
Curtain Search
|
Curtain Search
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-search type="curtain" tag="curtain"></nb-search>
|
<nb-search
|
||||||
|
matRipple
|
||||||
|
[matRippleUnbounded]="true"
|
||||||
|
[matRippleCentered]="true"
|
||||||
|
[matRippleRadius]="36"
|
||||||
|
type="curtain"
|
||||||
|
tag="curtain"
|
||||||
|
></nb-search>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -65,7 +107,14 @@
|
||||||
Column Curtain Search
|
Column Curtain Search
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<nb-search type="column-curtain" tag="column-curtain"></nb-search>
|
<nb-search
|
||||||
|
matRipple
|
||||||
|
[matRippleUnbounded]="true"
|
||||||
|
[matRippleCentered]="true"
|
||||||
|
[matRippleRadius]="36"
|
||||||
|
type="column-curtain"
|
||||||
|
tag="column-curtain"
|
||||||
|
></nb-search>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
BIN
src/assets/images/kitten-material-dark.png
Normal file
BIN
src/assets/images/kitten-material-dark.png
Normal file
Binary file not shown.
|
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 |
Loading…
Add table
Add a link
Reference in a new issue