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

Merged in refactor/SW-1669-carousel-cards-shadow (pull request #1370)

Browse Source 
Refactor(SW-1669): Carousel Cards Enhancements

* feat(SW-1669): Enhance Filters component with scroll shadows and heart icon

* feat(SW-1669): Carousel peek next card

* fix(SW-1669): carousel review comments

* feat(SW-1669): Add left scroll shadow to TabFilters component

* refactor(SW-1669): Simplify TabFilters shadow styling

* refactor(SW-1669): Adjust TabFilters shadow width

* refactor(SW-1699): Remove unused import from enter details store


Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-02-19 12:46:22 +00:00
parent 59eefb877e
commit b6bf1b3ded
6 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/TabFilters/tabFilters.module.css
View File

@@ -1,9 +1,49 @@
.containerWrapper {
position: relative;
overflow: hidden;
}
.container {
display: flex;
gap: var(--Spacing-x1);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
position: relative;
width: 100%;
}
.containerWrapper::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--Spacing-x3);
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
right: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
}
.containerWrapper::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--Spacing-x3);
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
left: 0;
background: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 6%, #fff 90%);
}
.showLeftShadow::before,
.showRightShadow::after {
opacity: 1;
}
.filter,
@@ -17,6 +57,9 @@
font-family: var(--typography-Body-Regular-fontFamily);
font-weight: 400;
cursor: pointer;
display: flex;
align-items: center;
gap: var(--Spacing-x1);
}
.filter {