gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. [디자인 QA] GR_DETAIL_01 인디게이터 hover 효과

Browse Source
This commit is contained in:
clkim
2025-11-26 14:49:59 +09:00
parent 7e645f1072
commit 24ff4ca629
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
layers/templates/GrDetail01/index.vue
View File

@@ -124,11 +124,11 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
@apply flex items-center; @apply flex items-center;
} }
.item-bullet { .item-bullet {
@apply block w-3 h-3 rounded-full transition-all duration-300; @apply block w-3 h-3 rounded-full transition-[background] duration-300 ease-in-out;
background-color: var(--pagination-disabled); background-color: var(--pagination-disabled);
} }
.item-title { .item-title {
@apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium md:block; @apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium transition-[color] duration-300 ease-in-out md:block;
color: var(--pagination-disabled); color: var(--pagination-disabled);
} }
.progress-bar { .progress-bar {
@@ -141,9 +141,11 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
} }
/* 활성화 상태 (현재 슬라이드) */ /* 활성화 상태 (현재 슬라이드) */
.btn-pagination:hover .item-bullet,
.is-active .item-bullet { .is-active .item-bullet {
background-color: var(--pagination-active); background-color: var(--pagination-active);
} }
.btn-pagination:hover .item-title,
.is-active .item-title { .is-active .item-title {
color: var(--pagination-active); color: var(--pagination-active);
} }