feat: RTL support (#1634)

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

View file

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

View file

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

View file

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

View file

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

View file

@ -13,6 +13,7 @@
.echart {
position: absolute;
left: 1em;
height: calc(100% - 2 * #{$padding});
width: 40%;
}

View file

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