Skip to content

Commit 2668f37

Browse files
susnuxsusnux
authored
Merge pull request #6193 from nextcloud-libraries/backport/6187/next
[next] fix(styles): RTL support
2 parents 667d6f1 + 93580d4 commit 2668f37

27 files changed

+44
-43
lines changed

‎src/components/NcAppContent/NcAppContent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -518,7 +518,7 @@ export default {
518518
}
519519
520520
&.splitpanes--vertical .splitpanes__splitter {
521-
border-left: 1px solid var(--color-border);
521+
border-inline-start: 1px solid var(--color-border);
522522
}
523523
524524
&.splitpanes--horizontal .splitpanes__splitter {

‎src/components/NcAppNavigation/NcAppNavigation.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,7 @@ export default {
327327
max-width: var(--app-navigation-max-width);
328328
position: relative;
329329
top: 0;
330-
left: 0;
330+
inset-inline-start: 0;
331331
padding: 0px;
332332
// Above NcAppContent
333333
z-index: 1800;

‎src/components/NcAppNavigationItem/NcInputConfirmCancel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ $input-margin: 5px;
131131
flex: 1 1 100%;
132132
font-size: 100% !important;
133133
margin: $input-margin !important;
134-
margin-left: -1px - $input-padding !important;
134+
margin-inline-start: -1px - $input-padding !important;
135135
padding: $input-padding !important;
136136
137137
&:active,

‎src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@ export default {
387387
.app-settings {
388388
:deep &__navigation {
389389
min-width: 200px;
390-
margin-right: calc(4 * var(--default-grid-baseline));
390+
margin-inline-end: calc(4 * var(--default-grid-baseline));
391391
overflow-x: hidden;
392392
overflow-y: auto;
393393
position: relative;

‎src/components/NcAppSidebar/NcAppSidebar.vue‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1266,14 +1266,14 @@ $top-buttons-spacing: 6px;
12661266
12671267
z-index: 1500;
12681268
top: 0;
1269-
right: 0;
1269+
inset-inline-end: 0;
12701270
display: flex;
12711271
overflow-x: hidden;
12721272
overflow-y: auto;
12731273
flex-direction: column;
12741274
flex-shrink: 0;
12751275
height: 100%;
1276-
border-left: 1px solid var(--color-border);
1276+
border-inline-start: 1px solid var(--color-border);
12771277
background: var(--color-main-background);
12781278
// Make close button positioned relative to the header
12791279
position: relative;
@@ -1291,7 +1291,7 @@ $top-buttons-spacing: 6px;
12911291
position: absolute;
12921292
z-index: 100;
12931293
top: $top-buttons-spacing;
1294-
right: $top-buttons-spacing;
1294+
inset-inline-end: $top-buttons-spacing;
12951295
width: var(--default-clickable-area);
12961296
height: var(--default-clickable-area);
12971297
opacity: $opacity_normal;
@@ -1318,26 +1318,26 @@ $top-buttons-spacing: 6px;
13181318
flex: 0 0 auto;
13191319
}
13201320
.app-sidebar-header__desc {
1321-
padding-left: 0;
1321+
padding-inline-start: 0;
13221322
flex: 1 1 auto;
13231323
min-width: 0;
1324-
padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
1325-
padding-top: $desc-vertical-padding-compact;
1324+
padding-inline-end: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
1325+
padding-top: var(--app-sidebar-padding);
13261326
13271327
&.app-sidebar-header__desc--without-actions {
1328-
padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
1328+
padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);
13291329
}
13301330
13311331
.app-sidebar-header__tertiary-actions {
13321332
z-index: 3; // above star
13331333
position: absolute;
1334-
top: math.div($desc-vertical-padding, 2);
1335-
left: calc(-1 * var(--default-clickable-area));
1334+
top: calc(var(--app-sidebar-padding) / 2);
1335+
inset-inline-start: calc(-1 * var(--default-clickable-area));
13361336
gap: 0; // override gap
13371337
}
13381338
.app-sidebar-header__menu {
13391339
top: $top-buttons-spacing;
1340-
right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
1340+
inset-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
13411341
position: absolute;
13421342
}
13431343
}
@@ -1350,14 +1350,14 @@ $top-buttons-spacing: 6px;
13501350
.app-sidebar-header__menu {
13511351
position: absolute;
13521352
top: $top-buttons-spacing;
1353-
right: calc(var(--default-clickable-area) + $top-buttons-spacing);
1353+
inset-inline-end: calc($top-buttons-spacing + var(--default-clickable-area));
13541354
}
13551355
// increase the padding to not overlap the menu
13561356
.app-sidebar-header__desc {
1357-
padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
1357+
padding-inline-end: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);
13581358
13591359
&.app-sidebar-header__desc--without-actions {
1360-
padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
1360+
padding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);
13611361
}
13621362
}
13631363
}
@@ -1393,7 +1393,7 @@ $top-buttons-spacing: 6px;
13931393
13941394
// custom overrides
13951395
&--with-tertiary-action {
1396-
padding-left: 6px;
1396+
padding-inline-start: 6px;
13971397
}
13981398
13991399
&--editable .app-sidebar-header__mainname-form,
@@ -1467,7 +1467,7 @@ $top-buttons-spacing: 6px;
14671467
14681468
// main menu
14691469
.app-sidebar-header__menu {
1470-
margin-left: 5px;
1470+
margin-inline-start: 5px;
14711471
}
14721472
}
14731473
@@ -1514,17 +1514,17 @@ $top-buttons-spacing: 6px;
15141514
.slide-right-leave-active,
15151515
.slide-right-enter-active {
15161516
transition-duration: var(--animation-quick);
1517-
transition-property: margin-right;
1517+
transition-property: margin-inline-end;
15181518
}
15191519
15201520
.slide-right-enter-to,
1521-
.slide-right-leave-from {
1522-
margin-right: 0;
1521+
.slide-right-leave {
1522+
margin-inline-end: 0;
15231523
}
15241524
15251525
.slide-right-enter-from,
15261526
.slide-right-leave-to {
1527-
margin-right: calc(-1 * var(--app-sidebar-width));
1527+
margin-inline-end: calc(-1 * var(--app-sidebar-width));
15281528
}
15291529
</style>
15301530

‎src/components/NcAvatar/NcAvatar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -803,7 +803,7 @@ export default {
803803
.action-item {
804804
position: absolute;
805805
top: 0;
806-
left: 0;
806+
inset-inline-start: 0;
807807
}
808808
:deep(.action-item__menutoggle) {
809809
cursor: pointer;
@@ -848,7 +848,7 @@ export default {
848848
.avatardiv__initials {
849849
position: absolute;
850850
top: 0;
851-
left: 0;
851+
inset-inline-start: 0;
852852
display: block;
853853
width: 100%;
854854
text-align: center;

‎src/components/NcButton/NcButton.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -841,8 +841,7 @@ export default defineComponent({
841841
&--text-only {
842842
padding: 0 var(--button-padding);
843843
& .button-vue__text {
844-
margin-left: 4px;
845-
margin-right: 4px;
844+
margin-inline: 4px;
846845
}
847846
}
848847

‎src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export default {
222222
}
223223
224224
&--has-text {
225-
padding-right: $icon-margin;
225+
padding-inline-end: $icon-margin;
226226
}
227227
228228
&, * {

‎src/components/NcCollectionList/NcCollectionListItem.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ li.collection-list-item {
252252
253253
li {
254254
display: flex;
255-
margin-left: var(--default-clickable-area);
255+
margin-inline-start: var(--default-clickable-area);
256256
border-radius: 3px;
257257
cursor: pointer;
258258
@@ -271,7 +271,7 @@ li.collection-list-item {
271271
span {
272272
display: inline-block;
273273
vertical-align: top;
274-
margin-right: 10px;
274+
margin-inline-end: 10px;
275275
}
276276
277277
span.resource-name {

‎src/components/NcColorPicker/NcColorPicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ export default defineComponent({
531531
align-items: center;
532532
width: var(--default-clickable-area);
533533
height: var(--default-clickable-area);
534-
margin-left: 6px;
534+
margin-inline-start: 6px;
535535
filter: var(--background-invert-if-dark);
536536
}
537537

0 commit comments

Comments
 (0)