Skip to content

Commit 1733666

Browse files
committed
fix(VTreeview): indent lines should support RTL
fixes #21952
1 parent d3e56de commit 1733666

File tree

1 file changed

+12
-8
lines changed

1 file changed

+12
-8
lines changed

packages/vuetify/src/components/VTreeview/VTreeviewItem.sass

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@
3737

3838
.v-treeview-indent-lines
3939
position: absolute
40-
left: 0
40+
inset-inline-start: 0
4141
height: 100%
4242
display: grid
43-
padding-left: $treeview-indent-lines-padding-left
43+
padding-inline-start: $treeview-indent-lines-padding-left
4444
padding-block: $treeview-indent-lines-gap
4545
grid-template-columns: repeat(var(--v-indent-parts, 1), var(--prepend-width))
4646
opacity: $treeview-indent-lines-opacity
@@ -53,7 +53,7 @@
5353

5454
&--leaf,
5555
&--line
56-
border-left-width: $treeview-indent-line-width
56+
border-inline-start-width: $treeview-indent-line-width
5757
height: 100%
5858
width: calc(50% + #{$treeview-indent-line-width-half})
5959
justify-self: end
@@ -74,18 +74,22 @@
7474
&--leaf-link
7575
border-bottom-width: $treeview-indent-line-width
7676
height: calc(50% + #{$treeview-indent-line-width-half})
77-
margin-left: $treeview-indent-lines-gap
78-
margin-right: $treeview-indent-line-leaf-link-margin-right
77+
margin-inline-start: $treeview-indent-lines-gap
78+
margin-inline-end: $treeview-indent-line-leaf-link-margin-right
7979

8080
&--last-leaf
81-
border-left-width: $treeview-indent-line-width
81+
border-inline-start-width: $treeview-indent-line-width
8282
border-bottom-width: $treeview-indent-line-width
8383
height: calc(50% + #{$treeview-indent-line-width-half})
84-
margin-left: calc(50% - #{$treeview-indent-line-width-half})
84+
margin-inline-start: calc(50% - #{$treeview-indent-line-width-half})
8585
border-bottom-left-radius: $treeview-indent-line-border-radius
8686

87+
@include tools.rtl()
88+
border-bottom-left-radius: 0
89+
border-bottom-right-radius: $treeview-indent-line-border-radius
90+
8791
&:last-child
88-
margin-right: $treeview-indent-line-leaf-margin-right
92+
margin-inline-end: $treeview-indent-line-leaf-margin-right
8993

9094
.v-treeview-group.v-list-group
9195
--list-indent-size: 0px

0 commit comments

Comments
 (0)