dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom thin scrollbar styles and apply to relevant components for improved UI experience. Update OrderPosForm, PurchasePosForm, and SidebarContent to utilize new scrollbar styles, enhancing visual consistency across the application.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-12 22:57:38 +07:00
parent eb2047a3e2
commit b7f5c4e12e
4 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/css/app.css
View File

@ -142,6 +142,27 @@ @layer base {
}
@layer utilities {
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent);
border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: color-mix(in oklch, var(--muted-foreground) 55%, transparent);
}
[data-slot="input"]:focus-visible:not(:disabled):not([aria-invalid="true"]),
[data-slot="textarea"]:focus-visible:not(:disabled):not([aria-invalid="true"]),

2
resources/js/components/admin/manage/orders/OrderPosForm.vue
View File

@ -369,7 +369,7 @@ function submit() {
</Empty>
</div>
<div v-else class="space-y-3">
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
<div v-for="(item, index) in cart" :key="item.product_variant_id"
class="rounded-lg border p-3">
<div class="flex gap-3">

2
resources/js/components/admin/manage/purchases/PurchasePosForm.vue
View File

@ -323,7 +323,7 @@ function submit() {
</Empty>
</div>
<div v-else class="space-y-3">
<div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
<div v-for="(item, index) in cart" :key="item.raw_material_price_id"
class="rounded-lg border p-3">
<div class="flex gap-3">

2
resources/js/components/ui/sidebar/SidebarContent.vue
View File

@ -11,7 +11,7 @@ const props = defineProps<{
<div
data-slot="sidebar-content"
data-sidebar="content"
:class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
:class="cn('scrollbar-thin flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
>
<slot />
</div>