heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rtl toast box

Browse Source
This commit is contained in:
Mamalizz
2025-03-13 20:21:51 +03:30
parent 1f099467b3
commit 4bdc78ba21
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/ToastContainer/ToastBox.vue
+4 -4
View File
@@ -88,19 +88,19 @@ onMounted(() => {
:duration="options.duration ?? 4000"
@swipeEnd="onSwipeEnd"
v-model:open="open"
class="bg-white shadow-md shadow-black/3 border-t-[0.5px] border-slate-200 border-black p-4 grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-toast-in data-[state=closed]:animate-toast-hide data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-toast-out"
class="w-full bg-white shadow-md justify-items-start shadow-black/3 border-t-[0.5px] border-slate-200 p-4 grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-toast-in data-[state=closed]:animate-toast-hide data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-toast-out"
:class="options.description ? 'rounded-150' : 'rounded-full'"
>
<ToastTitle
:class="[{ 'mb-1.5': options.description }]"
class="[grid-area:_title] font-medium text-slate-600 text-sm flex items-center gap-2"
class="w-full justify-items-start [grid-area:_title] font-medium text-slate-600 text-sm flex items-center justify-between gap-2"
>
<Icon :name="statusIcon.name" :class="statusIcon.class" size="24" />
<span>{{ message }}</span>
<span class="text-start -me-2">{{ message }}</span>
</ToastTitle>
<ToastDescription v-if="options.description" as-child>
<div
class="[grid-area:_description] m-0 mr-8 text-slate-500 typo-p-sm text-justify"
class="[grid-area:_description] m-0 mr-8 text-slate-500 typo-p-sm text-start"
>
{{ options.description }}
</div>