Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-11 16:12:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: RTL support (#1634)

Browse source
This commit is contained in:
Sergey Andrievskiy 2018-05-11 17:25:02 +03:00 • committed by Dmitry Nehaychik
parent 06d2197583
commit 3b63759e84
40 changed files with 660 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/app/@theme/layouts/one-column/one-column.layout.scss
View file

@ -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;

9
src/app/@theme/layouts/sample/sample.layout.scss
View file

@ -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;

20
src/app/@theme/layouts/sample/sample.layout.ts
View file

@ -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'">
tag="menu-sidebar"
responsive
[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>
@ -51,10 +51,10 @@ import { StateService } from '../../../@core/data/state.service';
</nb-layout-footer>
<nb-sidebar class="settings-sidebar"
tag="settings-sidebar"
state="collapsed"
fixed
[right]="sidebar.id !== 'right'">
tag="settings-sidebar"
state="collapsed"
fixed
[end]="sidebar.id !== 'end'">
<ngx-theme-settings></ngx-theme-settings>
</nb-sidebar>
</nb-layout>

9
src/app/@theme/layouts/three-columns/three-columns.layout.scss
View file

@ -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;

2
src/app/@theme/layouts/three-columns/three-columns.layout.ts
View file

@ -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>

9
src/app/@theme/layouts/two-columns/two-columns.layout.scss
View file

@ -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;

2
src/app/@theme/layouts/two-columns/two-columns.layout.ts
View file

@ -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>