fix: use inline style for time slot dimming in teleported dropdown
VAutocomplete renders its dropdown list in a teleported overlay outside the component DOM tree. Scoped :deep() CSS cannot reach teleported content. Switch from class-based opacity to inline style on VListItem. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -265,7 +265,7 @@ function onSubmit() {
|
|||||||
|
|
||||||
<VListItem
|
<VListItem
|
||||||
v-bind="itemProps"
|
v-bind="itemProps"
|
||||||
:class="{ 'time-slot-dimmed': item.raw._isDimmed }"
|
:style="item.raw._isDimmed ? 'opacity: 0.55' : ''"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
{{ item.raw.name }}
|
{{ item.raw.name }}
|
||||||
@@ -425,10 +425,3 @@ function onSubmit() {
|
|||||||
</VCard>
|
</VCard>
|
||||||
</VDialog>
|
</VDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* Dimmed festival-level time slots in sub-event dropdown (scenario A/D) */
|
|
||||||
:deep(.time-slot-dimmed) {
|
|
||||||
opacity: 0.65;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user