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

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

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 {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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