mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-08 06:32:35 +01:00
feat: RTL support (#1634)
This commit is contained in:
parent
06d2197583
commit
3b63759e84
40 changed files with 660 additions and 196 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue