mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-22 05:50:48 +02:00
feat: RTL support (#1634)
This commit is contained in:
Sergey Andrievskiy
Dmitry Nehaychik
parent
06d2197583
commit
3b63759e84
40 changed files with 660 additions and 196 deletions
100
package-lock.json
generated
100
package-lock.json
generated
|
|
@ -690,19 +690,19 @@
|
|||
}
|
||||
},
|
||||
"@nebular/auth": {
|
||||
"version": "2.0.0-rc.7",
|
||||
"resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-2.0.0-rc.7.tgz",
|
||||
"integrity": "sha512-0REoqU771vKuF02bnBZVqDAzC5WfWfB79dl6Wk51Oau6tOJDpL3Kw3FPbPeHHDr3tzFj9UNDXGmtJ0DyUAaibQ=="
|
||||
"version": "2.0.0-rc.8",
|
||||
"resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-2.0.0-rc.8.tgz",
|
||||
"integrity": "sha512-uImudGbG2qcaTpimjJFyqRdxhjE62sQfqqzZcH//NsokXbC5+8YMfUMcX4SpPTYOpWsx4p9T4vEIUDJOoYIBnw=="
|
||||
},
|
||||
"@nebular/security": {
|
||||
"version": "2.0.0-rc.7",
|
||||
"resolved": "https://registry.npmjs.org/@nebular/security/-/security-2.0.0-rc.7.tgz",
|
||||
"integrity": "sha512-K2VOvgUUzd54v7VSs6pFfzdq0UhRlYhCP4EPCi3INcM7mY/dh6F6yIDZMlz0AybS5et1G4PMWUHqvUi1AnrSsQ=="
|
||||
"version": "2.0.0-rc.8",
|
||||
"resolved": "https://registry.npmjs.org/@nebular/security/-/security-2.0.0-rc.8.tgz",
|
||||
"integrity": "sha512-aC3q1AR7jmF3Cm/TNT4Rut/ZQcmBrna0zNPxwg5cBSvWAPk3vRXVTYSFPQCNHDs2tyXJz4Xf50Sl2YJQhCiMnw=="
|
||||
},
|
||||
"@nebular/theme": {
|
||||
"version": "2.0.0-rc.7",
|
||||
"resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-2.0.0-rc.7.tgz",
|
||||
"integrity": "sha512-I8hB+ik/1086HSx8tbJcHuZfXdfpq5lg8cDcUMW0h8Y3Gp0Na5sqpdq850SoTlcqc4HiE6CFS/fkx6ro+8HtTQ=="
|
||||
"version": "2.0.0-rc.8",
|
||||
"resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-2.0.0-rc.8.tgz",
|
||||
"integrity": "sha512-1BLG4J0ElUOHMjIJQ6lSSzMK+8iaPX1brDVPI3Ol0O0FTiyCPVXugyK09/GNX2Of4xUIZqX7VvNYGywiJ7dUTw=="
|
||||
},
|
||||
"@ng-bootstrap/ng-bootstrap": {
|
||||
"version": "1.0.0",
|
||||
|
|
@ -3106,16 +3106,6 @@
|
|||
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
|
||||
"dev": true
|
||||
},
|
||||
"cors": {
|
||||
"version": "2.8.4",
|
||||
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.4.tgz",
|
||||
"integrity": "sha1-K9OB8usgECAQXNUOpZ2mMJBpRoY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object-assign": "^4",
|
||||
"vary": "^1"
|
||||
}
|
||||
},
|
||||
"cosmiconfig": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-2.2.2.tgz",
|
||||
|
|
@ -3584,7 +3574,6 @@
|
|||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
|
||||
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
|
|
@ -3747,8 +3736,7 @@
|
|||
"depd": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
|
||||
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
|
||||
"dev": true
|
||||
"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
|
||||
},
|
||||
"des.js": {
|
||||
"version": "1.0.0",
|
||||
|
|
@ -3763,8 +3751,7 @@
|
|||
"destroy": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
|
||||
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
|
||||
"dev": true
|
||||
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
|
||||
},
|
||||
"detect-indent": {
|
||||
"version": "4.0.0",
|
||||
|
|
@ -4186,8 +4173,7 @@
|
|||
"ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
|
||||
"dev": true
|
||||
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
|
||||
},
|
||||
"ejs": {
|
||||
"version": "2.6.1",
|
||||
|
|
@ -4225,8 +4211,7 @@
|
|||
"encodeurl": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
|
||||
"dev": true
|
||||
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
|
||||
},
|
||||
"end-of-stream": {
|
||||
"version": "1.4.1",
|
||||
|
|
@ -4429,8 +4414,7 @@
|
|||
"escape-html": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
|
||||
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
|
|
@ -4525,8 +4509,7 @@
|
|||
"etag": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
|
||||
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
|
||||
},
|
||||
"event-stream": {
|
||||
"version": "3.3.4",
|
||||
|
|
@ -5099,8 +5082,7 @@
|
|||
"fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
|
||||
"dev": true
|
||||
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
|
||||
},
|
||||
"from": {
|
||||
"version": "0.1.7",
|
||||
|
|
@ -7122,7 +7104,6 @@
|
|||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
|
||||
"integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"depd": "1.1.1",
|
||||
"inherits": "2.0.3",
|
||||
|
|
@ -7133,14 +7114,12 @@
|
|||
"depd": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
|
||||
"integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=",
|
||||
"dev": true
|
||||
"integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k="
|
||||
},
|
||||
"setprototypeof": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
|
||||
"integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=",
|
||||
"dev": true
|
||||
"integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -7639,8 +7618,7 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -8039,8 +8017,7 @@
|
|||
"is-wsl": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
|
||||
"integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
|
||||
"dev": true
|
||||
"integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
|
||||
},
|
||||
"isarray": {
|
||||
"version": "1.0.0",
|
||||
|
|
@ -8996,17 +8973,10 @@
|
|||
"integrity": "sha1-pp8ObKWB4DkapXlBlw4XwwjdSGk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"colors": "latest",
|
||||
"connect": "3.4.x",
|
||||
"cors": "latest",
|
||||
"event-stream": "latest",
|
||||
"faye-websocket": "0.11.x",
|
||||
"http-auth": "2.4.x",
|
||||
"morgan": "^1.6.1",
|
||||
"object-assign": "latest",
|
||||
"opn": "latest",
|
||||
"proxy-middleware": "latest",
|
||||
"send": "latest",
|
||||
"serve-index": "^1.7.2",
|
||||
"watchr": "2.6.x"
|
||||
},
|
||||
|
|
@ -9014,8 +8984,7 @@
|
|||
"colors": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
|
||||
"integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
|
||||
"dev": true
|
||||
"integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM="
|
||||
},
|
||||
"faye-websocket": {
|
||||
"version": "0.11.1",
|
||||
|
|
@ -9029,20 +8998,17 @@
|
|||
"mime": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
|
||||
"integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
|
||||
"dev": true
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
},
|
||||
"opn": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/opn/-/opn-5.2.0.tgz",
|
||||
"integrity": "sha512-Jd/GpzPyHF4P2/aNOVmS3lfMSWV9J7cOhCG1s08XCEAsPkB7lp6ddiU0J7XzyQRDUh8BqJ7PchfINjR8jyofRQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-wsl": "^1.1.0"
|
||||
}
|
||||
|
|
@ -9051,7 +9017,6 @@
|
|||
"version": "0.16.2",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
|
||||
"integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"debug": "2.6.9",
|
||||
"depd": "~1.1.2",
|
||||
|
|
@ -9071,8 +9036,7 @@
|
|||
"statuses": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
|
||||
"integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
|
||||
"dev": true
|
||||
"integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -9758,8 +9722,7 @@
|
|||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
},
|
||||
"multicast-dns": {
|
||||
"version": "6.2.3",
|
||||
|
|
@ -10444,7 +10407,6 @@
|
|||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
|
||||
"integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ee-first": "1.1.1"
|
||||
}
|
||||
|
|
@ -11440,12 +11402,6 @@
|
|||
"ipaddr.js": "1.6.0"
|
||||
}
|
||||
},
|
||||
"proxy-middleware": {
|
||||
"version": "0.15.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz",
|
||||
"integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=",
|
||||
"dev": true
|
||||
},
|
||||
"prr": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
|
||||
|
|
@ -11612,8 +11568,7 @@
|
|||
"range-parser": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
|
||||
"integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
|
||||
"dev": true
|
||||
"integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
|
||||
},
|
||||
"raw-body": {
|
||||
"version": "2.3.2",
|
||||
|
|
@ -12965,8 +12920,7 @@
|
|||
"statuses": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
|
||||
"integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=",
|
||||
"dev": true
|
||||
"integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4="
|
||||
},
|
||||
"stdout-stream": {
|
||||
"version": "1.4.0",
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@
|
|||
"@angular/platform-browser-dynamic": "6.0.0",
|
||||
"@angular/router": "6.0.0",
|
||||
"@asymmetrik/ngx-leaflet": "3.0.1",
|
||||
"@nebular/auth": "^2.0.0-rc.7",
|
||||
"@nebular/security": "^2.0.0-rc.7",
|
||||
"@nebular/theme": "^2.0.0-rc.7",
|
||||
"@nebular/auth": "^2.0.0-rc.8",
|
||||
"@nebular/security": "^2.0.0-rc.8",
|
||||
"@nebular/theme": "^2.0.0-rc.8",
|
||||
"@ng-bootstrap/ng-bootstrap": "1.0.0",
|
||||
"@swimlane/ngx-charts": "7.0.1",
|
||||
"angular2-chartjs": "0.4.1",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { Injectable, OnDestroy } from '@angular/core';
|
||||
import { of as observableOf, Observable, BehaviorSubject } from 'rxjs';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
import { of as observableOf, Observable , BehaviorSubject } from 'rxjs';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
|
||||
|
||||
@Injectable()
|
||||
export class StateService {
|
||||
export class StateService implements OnDestroy {
|
||||
|
||||
protected layouts: any = [
|
||||
{
|
||||
|
|
@ -27,21 +28,44 @@ export class StateService {
|
|||
|
||||
protected sidebars: any = [
|
||||
{
|
||||
name: 'Left Sidebar',
|
||||
name: 'Sidebar at layout start',
|
||||
icon: 'nb-layout-sidebar-left',
|
||||
id: 'left',
|
||||
id: 'start',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
name: 'Right Sidebar',
|
||||
name: 'Sidebar at layout end',
|
||||
icon: 'nb-layout-sidebar-right',
|
||||
id: 'right',
|
||||
id: 'end',
|
||||
},
|
||||
];
|
||||
|
||||
protected layoutState$ = new BehaviorSubject(this.layouts[0]);
|
||||
protected sidebarState$ = new BehaviorSubject(this.sidebars[0]);
|
||||
|
||||
alive = true;
|
||||
|
||||
constructor(directionService: NbLayoutDirectionService) {
|
||||
directionService.onDirectionChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(direction => this.updateSidebarIcons(direction));
|
||||
|
||||
this.updateSidebarIcons(directionService.getDirection());
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
|
||||
private updateSidebarIcons(direction: NbLayoutDirection) {
|
||||
const [ startSidebar, endSidebar ] = this.sidebars;
|
||||
const isLtr = direction === NbLayoutDirection.LTR;
|
||||
const startIconClass = isLtr ? 'nb-layout-sidebar-left' : 'nb-layout-sidebar-right';
|
||||
const endIconClass = isLtr ? 'nb-layout-sidebar-right' : 'nb-layout-sidebar-left';
|
||||
startSidebar.icon = startIconClass;
|
||||
endSidebar.icon = endIconClass;
|
||||
}
|
||||
|
||||
setLayoutState(state: any): any {
|
||||
this.layoutState$.next(state);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<div class="logo" (click)="goToHome()">ngx-<span>admin</span></div>
|
||||
</div>
|
||||
<ngx-theme-switcher></ngx-theme-switcher>
|
||||
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
|
||||
<nb-actions
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
class="header-container"
|
||||
[class.right]="position === 'normal'"
|
||||
[class.left]="position === 'inverse'">
|
||||
<nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action>
|
||||
<nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
|
||||
<nb-action *nbIsGranted="['view', 'user']" >
|
||||
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
|
||||
</nb-action>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
width: 100%;
|
||||
|
||||
.navigation {
|
||||
padding-right: nb-theme(padding);
|
||||
@include nb-ltr(padding-right, nb-theme(padding));
|
||||
@include nb-rtl(padding-left, nb-theme(padding));
|
||||
font-size: 2.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -47,7 +48,8 @@
|
|||
padding: 0 nb-theme(padding);
|
||||
font-size: 1.75rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
border-left: 1px solid nb-theme(separator);
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(separator));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(separator));
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
|
|
@ -56,6 +58,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher,
|
||||
ngx-theme-switcher {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
ngx-layout-direction-switcher {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-layout /deep/ a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
|
@ -64,6 +77,54 @@
|
|||
i {
|
||||
color: nb-theme(color-fg-highlight);
|
||||
font-size: 2.25rem;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation-name: pulse-light;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
// hack to be able to set border-radius
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
position: absolute;
|
||||
top: 52.3%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 13%;
|
||||
height: 13%;
|
||||
|
||||
animation: 3s linear infinite pulse;
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
animation-name: pulse-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pulse) {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(pulse-light) {
|
||||
0% {
|
||||
box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,6 +141,11 @@
|
|||
.toggle-layout {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ngx-layout-direction-switcher,
|
||||
ngx-theme-switcher {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
|
@ -112,4 +178,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,3 +4,5 @@ export * from './search-input/search-input.component';
|
|||
export * from './tiny-mce/tiny-mce.component';
|
||||
export * from './theme-settings/theme-settings.component';
|
||||
export * from './theme-switcher/theme-switcher.component';
|
||||
export * from './switcher/switcher.component';
|
||||
export * from './layout-direction-switcher/layout-direction-switcher.component'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { Component, OnDestroy, Input } from '@angular/core';
|
||||
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators/takeWhile';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-layout-direction-switcher',
|
||||
template: `
|
||||
<ngx-switcher
|
||||
[firstValue]="directions.RTL"
|
||||
[secondValue]="directions.LTR"
|
||||
[firstValueLabel]="'RTL'"
|
||||
[secondValueLabel]="'LTR'"
|
||||
[value]="currentDirection"
|
||||
(valueChange)="toggleDirection($event)"
|
||||
[vertical]="vertical"
|
||||
>
|
||||
</ngx-switcher>
|
||||
`,
|
||||
})
|
||||
export class LayoutDirectionSwitcherComponent implements OnDestroy {
|
||||
directions = NbLayoutDirection;
|
||||
currentDirection: NbLayoutDirection;
|
||||
alive = true;
|
||||
|
||||
@Input() vertical: boolean = false;
|
||||
|
||||
constructor(private directionService: NbLayoutDirectionService) {
|
||||
this.currentDirection = this.directionService.getDirection();
|
||||
|
||||
this.directionService.onDirectionChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(newDirection => this.currentDirection = newDirection);
|
||||
}
|
||||
|
||||
toggleDirection(newDirection) {
|
||||
this.directionService.setDirection(newDirection);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,39 +4,51 @@
|
|||
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
|
||||
.theme-switch {
|
||||
.switch-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.first,
|
||||
.second {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
transition: opacity 0.3s ease;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&.light {
|
||||
color: nb-theme(color-fg-text);
|
||||
padding-right: 10px;
|
||||
&.first {
|
||||
@include nb-ltr(padding-right, 10px);
|
||||
@include nb-rtl(padding-left, 10px);
|
||||
}
|
||||
|
||||
&.cosmic {
|
||||
color: nb-theme(color-fg);
|
||||
padding-left: 10px;
|
||||
&.second {
|
||||
@include nb-ltr(padding-left, 10px);
|
||||
@include nb-rtl(padding-right, 10px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: nb-theme(color-fg-text);
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
&.light {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
&.cosmic {
|
||||
&.active {
|
||||
color: nb-theme(color-white);
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +70,8 @@
|
|||
display: none;
|
||||
|
||||
&:checked + .slider::before {
|
||||
transform: translateX(2.25rem);
|
||||
@include nb-ltr(transform, translateX(2.25rem));
|
||||
@include nb-rtl(transform, translateX(-2.25rem));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -89,12 +102,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
.light, .cosmic {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
align-items: flex-end;
|
||||
}
|
||||
60
src/app/@theme/components/switcher/switcher.component.ts
Normal file
60
src/app/@theme/components/switcher/switcher.component.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-switcher',
|
||||
styleUrls: ['./switcher.component.scss'],
|
||||
template: `
|
||||
<label class="switch-label" [class.vertical]="vertical">
|
||||
<span class="first" [class.active]="vertical || isFirstValue()">
|
||||
{{vertical ? currentValueLabel() : firstValueLabel}}
|
||||
</span>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
*ngIf="!vertical"
|
||||
class="second"
|
||||
[class.active]="isSecondValue()"
|
||||
>
|
||||
{{secondValueLabel}}
|
||||
</span>
|
||||
</label>
|
||||
`,
|
||||
})
|
||||
export class SwitcherComponent {
|
||||
@Input() firstValue: any;
|
||||
@Input() secondValue: any;
|
||||
|
||||
@Input() firstValueLabel: string;
|
||||
@Input() secondValueLabel: string;
|
||||
|
||||
@Input() vertical: boolean;
|
||||
|
||||
@Input() value: any;
|
||||
@Output() valueChange = new EventEmitter<any>();
|
||||
|
||||
isFirstValue() {
|
||||
return this.value === this.firstValue;
|
||||
}
|
||||
|
||||
isSecondValue() {
|
||||
return this.value === this.secondValue;
|
||||
}
|
||||
|
||||
currentValueLabel() {
|
||||
return this.isFirstValue()
|
||||
? this.firstValueLabel
|
||||
: this.secondValueLabel;
|
||||
}
|
||||
|
||||
changeValue() {
|
||||
this.value = this.isFirstValue()
|
||||
? this.secondValue
|
||||
: this.firstValue;
|
||||
|
||||
this.valueChange.emit(this.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -32,5 +32,40 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
/deep/ ngx-switcher {
|
||||
.switch-label span {
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.switch {
|
||||
height: 1.5em;
|
||||
width: 3em;
|
||||
|
||||
.slider::before {
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
input:checked + .slider::before {
|
||||
@include nb-ltr(transform, translateX(1.5rem)!important);
|
||||
@include nb-rtl(transform, translateX(-1.5rem)!important);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.switch .slider {
|
||||
background-color: nb-theme(color-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,13 @@ import { StateService } from '../../../@core/data/state.service';
|
|||
<i [attr.class]="sidebar.icon"></i>
|
||||
</a>
|
||||
</div>
|
||||
<h6 class="settings">SETTINGS</h6>
|
||||
<div class="switcher">
|
||||
<ngx-theme-switcher [vertical]="true"></ngx-theme-switcher>
|
||||
</div>
|
||||
<div class="switcher">
|
||||
<ngx-layout-direction-switcher [vertical]="true"></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ThemeSettingsComponent {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,35 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
|
||||
import { AnalyticsService } from '../../../@core/utils/analytics.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-switcher',
|
||||
styleUrls: ['./theme-switcher.component.scss'],
|
||||
template: `
|
||||
<label class="theme-switch">
|
||||
<span class="light">Light</span>
|
||||
<div class="switch">
|
||||
<input type="checkbox" [checked]="currentBoolTheme()" (change)="toggleTheme(theme.checked)" #theme>
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
<span class="cosmic">Cosmic</span>
|
||||
</label>
|
||||
<ngx-switcher
|
||||
[firstValue]="false"
|
||||
[secondValue]="true"
|
||||
[firstValueLabel]="'Light'"
|
||||
[secondValueLabel]="'Cosmic'"
|
||||
[value]="currentBoolTheme()"
|
||||
(valueChange)="toggleTheme($event)"
|
||||
[vertical]="vertical"
|
||||
>
|
||||
</ngx-switcher>
|
||||
`,
|
||||
})
|
||||
export class ThemeSwitcherComponent implements OnInit {
|
||||
theme: NbJSThemeOptions;
|
||||
|
||||
constructor(private themeService: NbThemeService, private analyticsService: AnalyticsService) {
|
||||
}
|
||||
firstTheme = 'default';
|
||||
secondTheme = 'cosmic';
|
||||
|
||||
@Input() vertical: boolean = false;
|
||||
|
||||
constructor(
|
||||
private themeService: NbThemeService,
|
||||
private analyticsService: AnalyticsService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.themeService.getJsTheme()
|
||||
|
|
@ -29,8 +37,9 @@ export class ThemeSwitcherComponent implements OnInit {
|
|||
}
|
||||
|
||||
toggleTheme(theme: boolean) {
|
||||
const boolTheme = this.boolToTheme(theme);
|
||||
this.themeService.changeTheme(boolTheme);
|
||||
const themeName = this.boolToTheme(theme);
|
||||
this.themeService.changeTheme(themeName);
|
||||
|
||||
this.analyticsService.trackEvent('switchTheme');
|
||||
}
|
||||
|
||||
|
|
@ -39,10 +48,10 @@ export class ThemeSwitcherComponent implements OnInit {
|
|||
}
|
||||
|
||||
private themeToBool(theme: NbJSThemeOptions) {
|
||||
return theme.name === 'cosmic';
|
||||
return theme.name === this.secondTheme;
|
||||
}
|
||||
|
||||
private boolToTheme(theme: boolean) {
|
||||
return theme ? 'cosmic' : 'default';
|
||||
return theme ? this.secondTheme : this.firstTheme;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@
|
|||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
border-top-right-radius: nb-theme(radius);
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
|
|
@ -71,7 +72,8 @@
|
|||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
padding-left: 0.25rem;
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
|
|
@ -115,7 +117,8 @@
|
|||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
border-top-right-radius: 0;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@
|
|||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
border-top-right-radius: nb-theme(radius);
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
|
|
@ -71,7 +72,8 @@
|
|||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
padding-left: 0.25rem;
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
|
|
@ -115,7 +117,8 @@
|
|||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
border-top-right-radius: 0;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@ import { StateService } from '../../../@core/data/state.service';
|
|||
template: `
|
||||
<nb-layout [center]="layout.id === 'center-column'" windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
|
||||
<ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar"
|
||||
tag="menu-sidebar"
|
||||
responsive
|
||||
[right]="sidebar.id === 'right'">
|
||||
[end]="sidebar.id === 'end'">
|
||||
<nb-sidebar-header>
|
||||
<a href="#" class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
|
|
@ -38,11 +38,11 @@ import { StateService } from '../../../@core/data/state.service';
|
|||
<ng-content select="router-outlet"></ng-content>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
||||
<nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column right class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ import { StateService } from '../../../@core/data/state.service';
|
|||
tag="settings-sidebar"
|
||||
state="collapsed"
|
||||
fixed
|
||||
[right]="sidebar.id !== 'right'">
|
||||
[end]="sidebar.id !== 'end'">
|
||||
<ngx-theme-settings></ngx-theme-settings>
|
||||
</nb-sidebar>
|
||||
</nb-layout>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@
|
|||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
border-top-right-radius: nb-theme(radius);
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
|
|
@ -71,7 +72,8 @@
|
|||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
padding-left: 0.25rem;
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
|
|
@ -115,7 +117,8 @@
|
|||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
border-top-right-radius: 0;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { Component } from '@angular/core';
|
|||
<nb-layout-column class="small">
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column right>
|
||||
<nb-layout-column>
|
||||
<ng-content select="router-outlet"></ng-content>
|
||||
</nb-layout-column>
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@
|
|||
/deep/ .main-container {
|
||||
height:
|
||||
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
|
||||
border-top-right-radius: nb-theme(radius);
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(radius));
|
||||
}
|
||||
|
||||
/deep/ nb-sidebar-header {
|
||||
|
|
@ -71,7 +72,8 @@
|
|||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
padding-left: 0.25rem;
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
|
|
@ -115,7 +117,8 @@
|
|||
|
||||
/deep/ .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
border-top-right-radius: 0;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { Component } from '@angular/core';
|
|||
<nb-layout-column class="small">
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column right>
|
||||
<nb-layout-column>
|
||||
<ng-content select="router-outlet"></ng-content>
|
||||
</nb-layout-column>
|
||||
|
||||
|
|
|
|||
193
src/app/@theme/styles/bootstrap-rtl.scss
vendored
Normal file
193
src/app/@theme/styles/bootstrap-rtl.scss
vendored
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
@import './themes';
|
||||
|
||||
@mixin bootstrap-rtl() {
|
||||
.btn-group:not(.btn-divided-group) > .btn:not(.dropdown-toggle) {
|
||||
&:first-child {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
}
|
||||
&:last-child {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group.dropdown {
|
||||
& > .btn:first-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
}
|
||||
& > .btn:last-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
};
|
||||
}
|
||||
|
||||
&:not(.show) {
|
||||
& > .btn:first-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
}
|
||||
& > .btn:last-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group.dropup {
|
||||
& > .btn:first-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
}
|
||||
& > .btn:last-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
}
|
||||
|
||||
&:not(.show) {
|
||||
& > .btn:first-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
}
|
||||
& > .btn:last-of-type.dropdown-toggle {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-divided-group {
|
||||
.btn:not(:first-child) {
|
||||
@include nb-ltr(margin-left, 0.5rem);
|
||||
@include nb-rtl(margin-right, 0.5rem);
|
||||
border-radius: nb-theme(btn-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-icon {
|
||||
@include nb-ltr() {
|
||||
border-left: nb-theme(form-control-border);
|
||||
border-right: none;
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-left: none;
|
||||
border-right: nb-theme(form-control-border);
|
||||
};
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.form-control:first-child:not(:only-child),
|
||||
.input-group-addon:first-child,
|
||||
.input-group-prepend .btn:first-child,
|
||||
.input-group-btn .btn:first-child {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: nb-theme(form-control-border-radius);
|
||||
border-bottom-left-radius: nb-theme(form-control-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(form-control-border-radius);
|
||||
border-bottom-right-radius: nb-theme(form-control-border-radius);
|
||||
};
|
||||
}
|
||||
.form-control:last-child:not(:only-child),
|
||||
.input-group-addon:last-child,
|
||||
.input-group-append .btn:last-child,
|
||||
.input-group-btn .btn:last-child {
|
||||
@include nb-ltr() {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: nb-theme(form-control-border-radius);
|
||||
border-bottom-right-radius: nb-theme(form-control-border-radius);
|
||||
};
|
||||
@include nb-rtl() {
|
||||
border-top-left-radius: nb-theme(form-control-border-radius);
|
||||
border-bottom-left-radius: nb-theme(form-control-border-radius);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
};
|
||||
}
|
||||
|
||||
.dropdown.show .btn.dropdown-toggle {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.dropup.show .btn.dropdown-toggle {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,8 @@
|
|||
// loading progress bar theme
|
||||
@import './pace.theme';
|
||||
|
||||
@import './bootstrap-rtl';
|
||||
|
||||
// install the framework and custom global styles
|
||||
@include nb-install() {
|
||||
|
||||
|
|
@ -18,7 +20,9 @@
|
|||
// loading progress bar
|
||||
@include ngx-pace-theme();
|
||||
|
||||
// fixed in rc.9 and can be removed after upgrade
|
||||
.custom-control .custom-control-indicator {
|
||||
border-radius: 50%; // TODO: quickfix for https://github.com/akveo/nebular/issues/275
|
||||
}
|
||||
@include bootstrap-rtl();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ import {
|
|||
HeaderComponent,
|
||||
SearchInputComponent,
|
||||
ThemeSettingsComponent,
|
||||
SwitcherComponent,
|
||||
LayoutDirectionSwitcherComponent,
|
||||
ThemeSwitcherComponent,
|
||||
TinyMCEComponent,
|
||||
} from './components';
|
||||
|
|
@ -59,6 +61,8 @@ const NB_MODULES = [
|
|||
];
|
||||
|
||||
const COMPONENTS = [
|
||||
SwitcherComponent,
|
||||
LayoutDirectionSwitcherComponent,
|
||||
ThemeSwitcherComponent,
|
||||
HeaderComponent,
|
||||
FooterComponent,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
padding-bottom: 0.25rem;
|
||||
|
||||
button {
|
||||
margin: 0 1rem 1rem 0;
|
||||
@include nb-ltr(margin, 0 1rem 1rem 0);
|
||||
@include nb-rtl(margin, 0 0 1rem 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,8 @@
|
|||
|
||||
nb-user /deep/ {
|
||||
.info-container {
|
||||
margin-left: 0.875rem;
|
||||
@include nb-ltr(margin-left, 0.875rem);
|
||||
@include nb-rtl(margin-right, 0.875rem);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
|
|
@ -60,5 +61,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
|
||||
<div class="progress-wrap">
|
||||
<input type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
|
||||
<input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
|
||||
(input)="setProgress(duration.value)" #duration>
|
||||
<div class="progress-foreground" [style.width.%]="getProgress()"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
background-color: nb-theme(color-success);
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: calc(0.75rem - 1px);
|
||||
width: 100px;
|
||||
|
||||
|
|
@ -107,12 +108,22 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
.current {
|
||||
@include nb-ltr(order, 0);
|
||||
@include nb-rtl(order, 1);
|
||||
}
|
||||
.remaining {
|
||||
@include nb-ltr(order, 1);
|
||||
@include nb-rtl(order, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
padding: 0.25rem 2rem 1rem;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
|
|
@ -171,6 +182,7 @@
|
|||
width: 80%;
|
||||
|
||||
.progress-foreground {
|
||||
left: auto;
|
||||
margin-top: calc(1rem + 1px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,11 +40,13 @@
|
|||
}
|
||||
|
||||
a:first-child {
|
||||
border-left: 1px solid nb-theme(separator);
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(separator));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(separator));
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
border-top-right-radius: nb-theme(card-border-radius);
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(card-border-radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(card-border-radius));
|
||||
}
|
||||
|
||||
a.active {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
.echart {
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
height: calc(100% - 2 * #{$padding});
|
||||
width: 40%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,8 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 0.5rem 0 0.75rem;
|
||||
@include nb-ltr(padding, 0 0.5rem 0 0.75rem);
|
||||
@include nb-rtl(padding, 0 0.75rem 0 0.5rem);
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +113,8 @@
|
|||
@include nb-for-theme(cosmic) {
|
||||
nb-card {
|
||||
&.off .icon-container {
|
||||
border-right: 1px solid nb-theme(separator);
|
||||
@include nb-ltr(border-right, 1px solid nb-theme(separator));
|
||||
@include nb-rtl(border-left, 1px solid nb-theme(separator));
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
|
|
@ -120,14 +122,16 @@
|
|||
}
|
||||
|
||||
.details {
|
||||
padding-left: 1.25rem;
|
||||
@include nb-ltr(padding-left, 1.25rem);
|
||||
@include nb-rtl(padding-right, 1.25rem);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 7rem;
|
||||
height: 100%;
|
||||
font-size: 4.5rem;
|
||||
border-radius: nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius);
|
||||
@include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius));
|
||||
@include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="dropdown input-group-btn" ngbDropdown>
|
||||
<div class="dropdown input-group-prepend input-group-btn" ngbDropdown>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
|
||||
Action
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,8 @@
|
|||
|
||||
.current-rate {
|
||||
font-size: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
@include nb-ltr(padding-left, 1rem);
|
||||
@include nb-rtl(padding-right, 1rem);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
|
|
@ -82,6 +83,7 @@
|
|||
position: relative;
|
||||
|
||||
.form-control {
|
||||
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
.full-width {
|
||||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.full-width {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
nb-checkbox {
|
||||
nb-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-inline > * {
|
||||
margin: 0 1.5rem 1.5rem 0;
|
||||
}
|
||||
.form-inline > * {
|
||||
@include nb-ltr(margin, 0 1.5rem 1.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 1.5rem 1.5rem);
|
||||
}
|
||||
|
||||
nb-card.inline-form-card nb-card-body {
|
||||
nb-card.inline-form-card nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,8 @@
|
|||
padding: 0.75rem;
|
||||
|
||||
.action-groups-header {
|
||||
margin: 0 0 0.5rem 0.25rem;
|
||||
@include nb-ltr(margin, 0 0 0.5rem 0.25rem);
|
||||
@include nb-rtl(margin, 0 0.25rem 0.5rem 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-right: 1rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
.btn-group > .btn {
|
||||
padding-left: 1.125rem;
|
||||
|
|
@ -53,7 +54,8 @@
|
|||
|
||||
> label {
|
||||
flex-basis: 10%;
|
||||
margin: 0 0.25rem 0.5rem 0;
|
||||
@include nb-ltr(margin, 0 0.25rem 0.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 0.5rem 0.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,12 +46,14 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
height: $button-size;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
padding-right: 0;
|
||||
@include nb-ltr(padding-right, 0);
|
||||
@include nb-rtl(padding-left, 0);
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
|
|
@ -78,7 +80,8 @@
|
|||
|
||||
/deep/.icon-buttons .icon-button-examples {
|
||||
button {
|
||||
margin-right: 1rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,10 +18,9 @@ nb-card-body {
|
|||
|
||||
.icon-button-examples {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
margin-right: 2rem;
|
||||
min-width: 4rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
i {
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -37,7 +38,8 @@
|
|||
font-size: 0.75rem;
|
||||
i {
|
||||
font-size: 2rem;
|
||||
margin-right: 0.5rem;
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
button {
|
||||
margin: 0 0.75rem 2rem 0;
|
||||
:host {
|
||||
button {
|
||||
@include nb-ltr(margin, 0 0.75rem 2rem 0);
|
||||
@include nb-rtl(margin, 0 0 2rem 0.75rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
button.with-margins {
|
||||
margin: 0 0.75rem 2rem 0;
|
||||
}
|
||||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
/deep/ nb-card.popover-card {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -8,6 +6,14 @@ button.with-margins {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
:host /deep/ .btn-outline-secondary {
|
||||
margin: 0 0.5rem 0.5rem 0;
|
||||
:host {
|
||||
button.with-margins {
|
||||
@include nb-ltr(margin, 0 0.75rem 2rem 0);
|
||||
@include nb-rtl(margin, 0 0 2rem 0.75rem);
|
||||
}
|
||||
|
||||
/deep/ .btn-outline-secondary {
|
||||
@include nb-ltr(margin, 0 0.5rem 0.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 0.5rem 0.5rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
@ -108,7 +109,8 @@
|
|||
height: 60px;
|
||||
border-top-right-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
margin-right: 1rem;
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue