tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(store-home-page): add margin styling for adjacent store sections

Browse Source
This commit is contained in:
ncoronel
2026-07-20 16:24:24 -03:00
parent b0e97fc577
commit a233a93d16
2 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/features/store/pages/store-home-page/store-home-page.component.scss
View File

@@ -2,6 +2,11 @@
display: block;
}
app-hero-banner + app-store-section,
app-store-section + app-store-section {
margin-top: clamp(3rem, 6vw, 5rem);
}
.store-home__alert-error {
margin: 0;
border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);

32
src/app/shared/components/product-list/product-list.component.scss
View File

@@ -17,8 +17,17 @@
}
&--column {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
container-name: product-list;
container-type: inline-size;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
.product-list__item {
flex: 0 0 100%;
max-width: 100%;
}
}
&__item {
@@ -26,6 +35,27 @@
}
}
@container product-list (min-width: 544px) {
.product-list--column .product-list__item {
flex-basis: calc((100% - 1.5rem) / 2);
max-width: calc((100% - 1.5rem) / 2);
}
}
@container product-list (min-width: 828px) {
.product-list--column .product-list__item {
flex-basis: calc((100% - 3rem) / 3);
max-width: calc((100% - 3rem) / 3);
}
}
@container product-list (min-width: 1112px) {
.product-list--column .product-list__item {
flex-basis: calc((100% - 4.5rem) / 4);
max-width: calc((100% - 4.5rem) / 4);
}
}
.product-list__paginator {
margin-top: 1.5rem;
}