feat: add rtl support to icons, css styles

This commit is contained in:
raizasafeel
2026-04-13 10:10:53 +05:30
parent 3e05dcedeb
commit 8b3930169d
7 changed files with 14 additions and 11 deletions

View File

@@ -182,7 +182,7 @@ const getGradientColor = () => {
}
.avatar-group.overlap .avatar + .avatar {
margin-left: calc(-8px);
margin-inline-start: calc(-8px);
}
.short-introduction {

View File

@@ -46,12 +46,12 @@
>
<ChevronRight
:class="{
'rotate-90 transform duration-200': open,
'duration-200': !open,
'rotate-90': open,
'rtl:rotate-180': !open,
hidden: chapter.is_scorm_package,
open: index == 1,
}"
class="h-4 w-4 text-ink-gray-9 stroke-1"
class="h-4 w-4 text-ink-gray-9 stroke-1 transform duration-200"
/>
<div
class="text-base text-start text-ink-gray-9 font-medium leading-5 ms-2"

View File

@@ -42,7 +42,10 @@
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
<ChevronRight
class="h-4 w-4 stroke-1.5 text-ink-gray-9 transition-all duration-300 ease-in-out"
:class="{ 'rotate-90': !sidebarStore.isWebpagesCollapsed }"
:class="{
'rotate-90': sidebarStore.isWebpagesCollapsed,
'rtl:rotate-180': !sidebarStore.isWebpagesCollapsed,
}"
/>
</span>
<span class="ms-2">

View File

@@ -336,7 +336,7 @@ const toggleFullscreen = () => {
const getQuizMarkerStyle = (time) => {
const percentage = ((time - 5) / Math.ceil(duration.value)) * 100
return {
left: `${percentage}%`,
insetInlineStart: `${percentage}%`,
}
}

View File

@@ -108,6 +108,6 @@ const props = defineProps({
}
.avatar-group.overlap .avatar + .avatar {
margin-left: calc(-8px);
margin-inline-start: calc(-8px);
}
</style>

View File

@@ -121,7 +121,7 @@
<span>
{{ __('See all') }}
</span>
<MoveRight class="size-3 stroke-1.5" />
<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
</span>
</router-link>
</div>
@@ -149,7 +149,7 @@
<span>
{{ __('See all') }}
</span>
<MoveRight class="size-3 stroke-1.5" />
<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
</span>
</router-link>
</div>

View File

@@ -90,7 +90,7 @@
<span>
{{ __('See all') }}
</span>
<MoveRight class="size-3 stroke-1.5" />
<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
</span>
</router-link>
</div>
@@ -122,7 +122,7 @@
<span>
{{ __('See all') }}
</span>
<MoveRight class="size-3 stroke-1.5" />
<MoveRight class="size-3 stroke-1.5 rtl:rotate-180" />
</span>
</router-link>
</div>