scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/carousel-card-gap (pull request #1343)

Browse Source 
refactor: Adjust default carousel card gap

Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-02-17 08:49:36 +00:00
committed by Christian Andolf
parent 2d5111fed3 7c519979bb
commit f5c5172555
2 changed files with 3 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/Blocks/CarouselCards/carouselCards.module.css
View File

@@ -1,35 +1,3 @@
/*
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%;
}

6
components/Carousel/carousel.module.css
View File

@@ -10,7 +10,7 @@
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: var(--Spacing-x3);
gap: var(--Spacing-x2);
}
.item {
@@ -34,11 +34,11 @@
}
.buttonPrev {
left: calc(-1 * var(--Spacing-x3));
left: calc(-1 * var(--Spacing-x1));
}
.buttonNext {
right: calc(-1 * var(--Spacing-x3));
right: calc(-1 * var(--Spacing-x1));
}
.prevIcon {