38cce4b136
feat(SW-1542): Carousel component * feat(SW-1542): add Embla Carousel component and use in CarouselCards * fix(SW-1542): remove max-width constraint for card on ipad * fix(SW-1542): Add padding to start page content container * refactor(SW-1542): Improve Embla Carousel type imports * refactor(SW-1542): Remove unnecessary carousel wrapper div * refactor(SW-1542): Modularize Carousel component structure * refactor(SW-1542): Remove carousel dots display * feat(SW-1542): Add carousel dots navigation * refactor(SW-1542): Update Carousel component styling and types * refactor(SW-1542): Remove uneeded useCallback from Carousel navigation methods * refactor(SW-1542): Modify CarouselContextProps type to exclude className * refactor(SW-1542): Optimize React imports in Carousel components * refactor(SW-1542): Consolidate Carousel component and remove CarouselRoot * refactor(SW-1542): Update Carousel navigation methods to use function-based scroll checks * refactor(SW-1542): Add explicit children prop support to CarouselContent component * refactor(SW-1542): Add children prop support to CarouselItem component Approved-by: Christian Andolf
83 lines
1.3 KiB
CSS
83 lines
1.3 KiB
CSS
.root {
|
|
position: relative;
|
|
}
|
|
|
|
.viewport {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 100%;
|
|
gap: var(--Spacing-x3);
|
|
}
|
|
|
|
.item {
|
|
min-width: 0;
|
|
}
|
|
|
|
.button {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: var(--Base-Surface-Primary-light-Normal);
|
|
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
|
|
border: none;
|
|
border-radius: 50%;
|
|
padding: var(--Spacing-x1);
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
.buttonPrev {
|
|
left: calc(-1 * var(--Spacing-x3));
|
|
}
|
|
|
|
.buttonNext {
|
|
right: calc(-1 * var(--Spacing-x3));
|
|
}
|
|
|
|
.prevIcon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--Spacing-x1);
|
|
margin-top: var(--Spacing-x3);
|
|
}
|
|
|
|
.dot {
|
|
height: 8px;
|
|
width: 8px;
|
|
border-radius: var(--Corner-radius-Large);
|
|
background: var(--UI-Grey-40);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.dot[data-active="true"] {
|
|
width: 22px;
|
|
background: var(--UI-Text-Medium-contrast);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
|
|
}
|
|
|
|
.button {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.container {
|
|
grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
|
|
}
|
|
}
|