148 lines
2.4 KiB
SCSS
148 lines
2.4 KiB
SCSS
:host {
|
|
display: block;
|
|
min-width: 0;
|
|
}
|
|
|
|
.carousel {
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
&__size-probe {
|
|
position: absolute;
|
|
height: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
contain: strict;
|
|
}
|
|
|
|
&__frame {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
|
|
&--with-controls {
|
|
grid-template-columns: 3rem minmax(0, 1fr) 3rem;
|
|
|
|
.carousel__viewport {
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__viewport {
|
|
grid-row: 1;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overscroll-behavior-inline: contain;
|
|
scroll-behavior: smooth;
|
|
scroll-snap-type: inline mandatory;
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-primary, currentColor);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&--circular {
|
|
overflow: hidden;
|
|
scroll-snap-type: none;
|
|
}
|
|
}
|
|
|
|
&__linear-track,
|
|
&__page {
|
|
display: flex;
|
|
}
|
|
|
|
&__track {
|
|
display: flex;
|
|
width: 300%;
|
|
transform: translateX(calc(-100% / 3));
|
|
|
|
&--moving {
|
|
transition: transform 300ms ease;
|
|
}
|
|
|
|
&--previous {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
&--next {
|
|
transform: translateX(calc(-200% / 3));
|
|
}
|
|
}
|
|
|
|
&__page {
|
|
flex: 0 0 calc(100% / 3);
|
|
min-width: 0;
|
|
}
|
|
|
|
&__item {
|
|
flex: 0 0 auto;
|
|
min-width: 0;
|
|
scroll-snap-align: start;
|
|
|
|
> * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__control {
|
|
grid-row: 1;
|
|
justify-self: center;
|
|
display: grid;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
padding: 0;
|
|
color: var(--color-primary, #6376f3);
|
|
cursor: pointer;
|
|
background: transparent;
|
|
border: 0;
|
|
place-items: center;
|
|
transition:
|
|
color 150ms ease,
|
|
transform 150ms ease;
|
|
|
|
&:hover:not(:disabled) {
|
|
color: color-mix(in srgb, var(--color-primary, #6376f3) 78%, #000);
|
|
transform: scale(1.12);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: default;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-primary, currentColor);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&--previous {
|
|
grid-column: 1;
|
|
}
|
|
|
|
&--next {
|
|
grid-column: 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.carousel__viewport {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
.carousel__track--moving {
|
|
transition-duration: 1ms;
|
|
}
|
|
}
|