47 lines
1.1 KiB
CSS
47 lines
1.1 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-200 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__arrows .splide-arrow.btn-circle {
|
|
@apply absolute top-1/2 w-[40px] h-[40px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5]
|
|
md:w-[48px] md:h-[48px];
|
|
}
|
|
.splide__arrow--prev {
|
|
@apply bg-[image:var(--arrow-prev)];
|
|
}
|
|
.splide__arrow--next {
|
|
@apply bg-[image:var(--arrow-next)];
|
|
}
|
|
|
|
.type-full .splide__arrow--prev {
|
|
@apply left-10;
|
|
}
|
|
|
|
.type-full .splide__arrow--next {
|
|
@apply right-10;
|
|
}
|
|
|
|
.splide-arrow svg {
|
|
@apply hidden;
|
|
}
|
|
}
|