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

feat(event-detail): adjust product layout and quantity selector styles for improved responsiveness

Browse Source
This commit is contained in:
ncoronel
2026-09-23 11:55:10 -03:00
parent 321f2c08cd
commit ed806abb9f
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/features/store/pages/event-detail-page/event-detail-page.component.scss
View File

@@ -50,7 +50,7 @@
.event-detail__product-list { gap: 42px; } .event-detail__product-list { gap: 42px; }
.event-detail__product { .event-detail__product {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) 118px 72px; grid-template-columns: minmax(0, 1fr) 96px 72px;
column-gap: 26px; column-gap: 26px;
margin-inline: 0; margin-inline: 0;
} }
@@ -58,9 +58,11 @@
.event-detail__product h3 { align-self: center; font-size: 13px; } .event-detail__product h3 { align-self: center; font-size: 13px; }
.event-detail__product-action { margin-left: 0 !important; } .event-detail__product-action { margin-left: 0 !important; }
.event-detail__product-action app-quantity-selector { .event-detail__product-action app-quantity-selector {
--quantity-selector-width: 118px; --quantity-selector-width: 96px;
--quantity-selector-button-width: 34px; --quantity-selector-height: 32px;
--quantity-selector-value-font-size: 20px; --quantity-selector-button-width: 28px;
--quantity-selector-button-font-size: 14px;
--quantity-selector-value-font-size: 14px;
} }
.event-detail__price { align-self: center; font-size: 14px; } .event-detail__price { align-self: center; font-size: 14px; }
.event-detail__total { margin-top: 44px; padding-top: 25px; font-size: 13px; } .event-detail__total { margin-top: 44px; padding-top: 25px; font-size: 13px; }

6
src/app/shared/components/quantity-selector/quantity-selector.component.scss
View File

@@ -5,15 +5,15 @@
.quantity-selector { .quantity-selector {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
width: var(--quantity-selector-width, 78px); width: var(--quantity-selector-width, 78px);
height: 40px; height: var(--quantity-selector-height, 40px);
min-height: 40px; min-height: var(--quantity-selector-height, 40px);
background-color: #ffffff; background-color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
&__button { &__button {
width: var(--quantity-selector-button-width, 24px); width: var(--quantity-selector-button-width, 24px);
height: 100%; height: 100%;
font-size: 20px; font-size: var(--quantity-selector-button-font-size, 20px);
color: #6f6f6f; color: #6f6f6f;
background-color: #ffffff; background-color: #ffffff;
transition: transition: