Files
neuf-www/web/src/components/blocks/swiper.scss
2024-05-20 23:29:33 +02:00

66 lines
1.1 KiB
SCSS

.swiper {
width: 100%;
height: 100%;
}
.swiper-button-next,
.swiper-button-prev {
&:before {
content: "";
display: block;
position: absolute;
width: 3rem;
height: 3rem;
background-size: 100%;
}
}
.swiper-button-next {
&:before {
background-image: url("/assets/icons/circle-arrow-right.svg");
right: var(--spacing-sitepadding);
}
&:after {
content: "Neste";
visibility: hidden;
}
}
.swiper-button-prev {
&:before {
background-image: url("/assets/icons/circle-arrow-left.svg");
left: var(--spacing-sitepadding);
}
&:after {
content: "Forrige";
visibility: hidden;
}
}
.swiper-pagination {
display: inline-block;
width: auto;
margin: var(--spacing-sitepadding);
padding: 0 .5rem;
border-radius: 2rem;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
right: 0;
left: auto;
bottom: auto;
font-size: var(--font-size-caption);
}
@media (max-width: 800px) {
.swiper-button-next:before {
right: 10px;
}
.swiper-button-prev:before {
left: 10px;
}
}