48 lines
1.3 KiB
CSS
48 lines
1.3 KiB
CSS
/* 페이지네이션 버튼 - 모바일 퍼스트 */
|
|
@layer components {
|
|
.splide-pagination-bullets {
|
|
@apply w-full flex justify-center items-center gap-3 mt-6 z-[5] md:mt-8 md:gap-6;
|
|
}
|
|
|
|
.splide-pagination-bullets.type-full {
|
|
@apply absolute bottom-8 left-0;
|
|
}
|
|
|
|
.splide-pagination-bullet {
|
|
@apply relative w-2 h-2 rounded-full opacity-100 md:w-3 md:h-3 transition-all duration-300 ease-in-out;
|
|
background-color: var(--pagination-disabled);
|
|
}
|
|
|
|
.splide-pagination-bullet:hover,
|
|
.splide-pagination-bullet.is-active {
|
|
background-color: var(--pagination-active);
|
|
}
|
|
|
|
.splide-arrows {
|
|
@apply hidden md:block;
|
|
}
|
|
.splide-arrow {
|
|
@apply absolute top-1/2 w-[48px] h-[48px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5]
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
|
|
hover:after:opacity-10;
|
|
}
|
|
.arrow-prev {
|
|
@apply bg-[image:var(--arrow-prev)];
|
|
}
|
|
.arrow-next {
|
|
@apply bg-[image:var(--arrow-next)];
|
|
}
|
|
|
|
.type-full .arrow-prev {
|
|
@apply left-10;
|
|
}
|
|
|
|
.type-full .arrow-next {
|
|
@apply right-10;
|
|
}
|
|
|
|
.splide-arrow svg {
|
|
@apply hidden;
|
|
}
|
|
}
|