b6bf1b3ded
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
76 lines
1.6 KiB
CSS
76 lines
1.6 KiB
CSS
.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,
|
|
.filterSelected {
|
|
border-radius: var(--Corner-radius-Rounded);
|
|
padding: var(--Spacing-x1) var(--Spacing-x2);
|
|
transition: all 0.2s ease-in-out;
|
|
scroll-snap-align: start;
|
|
flex-shrink: 0;
|
|
font-size: var(--typography-Caption-Bold-Mobile-fontSize);
|
|
font-family: var(--typography-Body-Regular-fontFamily);
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--Spacing-x1);
|
|
}
|
|
|
|
.filter {
|
|
color: var(--UI-Text-High-contrast);
|
|
background: transparent;
|
|
border: 1px solid var(--UI-Input-Controls-Border-Hover);
|
|
}
|
|
|
|
.filterSelected {
|
|
color: var(--Base-Text-Inverted);
|
|
background: var(--Base-Button-Tertiary-Fill-Normal);
|
|
border: 1px solid transparent;
|
|
}
|