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
36 lines
717 B
CSS
36 lines
717 B
CSS
/*
|
|
Mock styles for the carousel cards. Will be removed/replaced
|
|
when the carousel functionality is implemented (SW-1542).
|
|
*/
|
|
.cardsContainer {
|
|
display: grid;
|
|
gap: var(--Spacing-x3);
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 100%;
|
|
overflow-x: auto;
|
|
overscroll-behavior-x: contain;
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
|
|
.cardsContainer > * {
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
/* Show 2 cards on tablet */
|
|
@media (min-width: 768px) {
|
|
.cardsContainer {
|
|
grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
|
|
}
|
|
}
|
|
|
|
/* Show 3 cards on desktop */
|
|
@media (min-width: 1024px) {
|
|
.cardsContainer {
|
|
grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
|
|
}
|
|
}
|
|
|
|
.navigationButton {
|
|
top: 30%;
|
|
}
|