mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-18 14:08:07 +01:00
feat: RTL support (#1634)
This commit is contained in:
parent
06d2197583
commit
3b63759e84
40 changed files with 660 additions and 196 deletions
|
|
@ -8,13 +8,14 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
toaster-container /deep/ {
|
||||
#toast-container .toast-close-button {
|
||||
#toast-container .toast-close-button {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
@import '../../../@theme/styles/themes';
|
||||
|
||||
nb-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@include nb-install-component() {
|
||||
.full-width {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.form-inline > * {
|
||||
margin: 0 1.5rem 1.5rem 0;
|
||||
}
|
||||
nb-checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
nb-card.inline-form-card nb-card-body {
|
||||
padding-bottom: 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 {
|
||||
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