sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(design-system): roll out font-size scale across storefront/builder/backoffice

Browse Source 
Mechanical, value-preserving substitution: every literal font-size
declaration across src/app (89 files) that matched one of the 9
typography scale steps introduced earlier (--font-size-xs..4xl) was
replaced with var(--font-size-STEP, <same-or-nearest-step-value>).

Values within ~0.03rem/1px of a scale step were snapped to that step
(e.g. 0.85rem and 0.8rem both -> --font-size-sm/0.8125rem; 0.9rem and
0.875rem -> --font-size-base/0.875rem) to consolidate roughly 15
near-duplicate sizes down to the 9-step scale, per the RC design-system
finalization brief. This eliminates most of the font-size fragmentation
found across the app (previously: 0.7/0.72/0.75/0.78/0.8/0.8125/0.85/
0.875/0.9/0.9375/0.95/1/1.05/1.1/1.125/1.15/1.2/1.25/1.3/1.35/1.4/1.5/
1.75/2rem all in live use simultaneously).

Not touched (deliberately, see docs/UI-DESIGN-REVIEW.md): 3rem+ display
sizes (too large a jump to any existing step, would need a --font-size-5xl
addition), font-size values expressed via clamp()/calc(), and any
component listed as intentionally distinct (code-editor syntax tokens,
theme brand colors).
This commit is contained in:
sdarbinyan
2026-07-20 03:26:17 +04:00
parent aaa3604cd4
commit 7cb1c8c3c6
88 changed files with 538 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/pages/cart/cart.component.scss
View File

@@ -24,7 +24,7 @@
h1 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: #1e3c38;
margin: 0;
@@ -37,7 +37,7 @@
border: 1px solid #d3dad9;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
@@ -71,7 +71,7 @@
align-items: center;
h1 {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: #111827;
margin: 0;
@@ -87,7 +87,7 @@
color: white;
border: none;
border-radius: 12px;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -145,7 +145,7 @@
p {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: #697777;
margin: 0 0 28px 0;
}
@@ -158,7 +158,7 @@
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
transition: all 0.2s;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
@@ -193,14 +193,14 @@
}
h2 {
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: #111827;
margin: 0 0 12px 0;
}
p {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: #6b7280;
margin: 0 0 32px 0;
}
@@ -212,7 +212,7 @@
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
transition: all 0.3s;
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
@@ -331,7 +331,7 @@
.item-name {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.05rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 600;
color: #1e3c38;
text-decoration: none;
@@ -360,7 +360,7 @@
.item-description {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
color: #697777;
line-height: 1.5;
}
@@ -373,7 +373,7 @@
margin-top: 4px;
.cart-variant {
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #497671;
background: rgba(73, 118, 113, 0.08);
padding: 3px 10px;
@@ -460,7 +460,7 @@
}
.item-name {
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
color: #111827;
text-decoration: none;
@@ -489,7 +489,7 @@
}
.item-description {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: #6b7280;
line-height: 1.6;
}
@@ -502,7 +502,7 @@
margin-top: 4px;
.cart-variant {
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6366f1;
background: rgba(99, 102, 241, 0.08);
padding: 3px 10px;
@@ -544,20 +544,20 @@
}
.original-price {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #9ca3af;
text-decoration: line-through;
}
.current-price {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
color: #497671;
}
.delivery-price {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 500;
color: #697777;
}
@@ -599,7 +599,7 @@
.qty-value {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #1e3c38;
min-width: 24px;
@@ -645,7 +645,7 @@
}
.qty-value {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #059669;
min-width: 24px;
@@ -691,7 +691,7 @@
.summary-header h3 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.4rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: #1e3c38;
margin: 0 0 16px 0;
@@ -702,7 +702,7 @@
justify-content: space-between;
align-items: center;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: #697777;
&.delivery {
@@ -712,13 +712,13 @@
&.total {
padding-top: 16px;
border-top: 1px solid #d3dad9;
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
color: #1e3c38;
margin-top: 8px;
.total-price {
font-size: 1.35rem;
font-size: var(--font-size-3xl, 1.5rem);
color: #497671;
}
}
@@ -739,7 +739,7 @@
border: none;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.05rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
@@ -783,14 +783,14 @@
.login-gate-title {
margin: 0 0 4px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #1a1a1a;
}
.login-gate-desc {
margin: 0 0 16px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6b7280;
line-height: 1.4;
}
@@ -804,7 +804,7 @@
border-radius: 10px;
background: #2AABEE;
color: #fff;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
@@ -841,7 +841,7 @@
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
.summary-header h3 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: #111827;
margin: 0 0 20px 0;
@@ -855,7 +855,7 @@
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: #6b7280;
&.delivery {
@@ -865,13 +865,13 @@
&.total {
padding-top: 20px;
border-top: 2px solid #f0fdf4;
font-size: 1.2rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: #111827;
margin-top: 12px;
.total-price {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
color: #10b981;
font-weight: 800;
}
@@ -897,7 +897,7 @@
color: white;
border: none;
border-radius: 14px;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -949,14 +949,14 @@
.login-gate-title {
margin: 0 0 4px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #111827;
}
.login-gate-desc {
margin: 0 0 16px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6b7280;
line-height: 1.4;
}
@@ -970,7 +970,7 @@
border-radius: 12px;
background: #2AABEE;
color: #fff;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1030,7 +1030,7 @@
}
.terms-text {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6b7280;
line-height: 1.4;
@@ -1050,7 +1050,7 @@
margin: -4px 0 0;
padding: 10px 12px;
border-radius: 10px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
line-height: 1.5;
}
@@ -1085,7 +1085,7 @@
.terms-text {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #697777;
line-height: 1.5;
@@ -1119,7 +1119,7 @@
}
.terms-text {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
line-height: 1.6;
a {
@@ -1229,7 +1229,7 @@
text-align: center;
h2 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
margin: 20px 0 10px;
color: #1a1a1a;
}
@@ -1280,7 +1280,7 @@
border: none;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
@@ -1300,7 +1300,7 @@
}
.auto-close {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
margin-top: 20px;
}
}
@@ -1394,11 +1394,11 @@
.label {
color: #6b7280;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.amount {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: #1a1a1a;
}
@@ -1431,7 +1431,7 @@
padding: 12px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
@@ -1532,7 +1532,7 @@
.error-message {
color: #ef4444;
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
padding-left: 4px;
animation: slideDown 0.2s ease;
}
@@ -1553,7 +1553,7 @@
padding: 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
outline: none;
transition: all 0.2s;
@@ -1590,7 +1590,7 @@
border: none;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
cursor: pointer;
display: flex;
@@ -1698,7 +1698,7 @@
}
.payment-active h2 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
margin-bottom: 16px;
}
}
@@ -1729,7 +1729,7 @@
border-bottom: 2px solid var(--border-color);
h1 {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: var(--text-primary);
margin: 0;
@@ -1748,7 +1748,7 @@
color: white;
border: none;
border-radius: var(--radius-lg);
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
@@ -1791,14 +1791,14 @@
}
h2 {
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 0.75rem 0;
}
p {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
margin: 0 0 2rem 0;
max-width: 400px;
@@ -1812,7 +1812,7 @@
text-decoration: none;
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
transition: all 0.3s ease;
&:hover {
@@ -1886,7 +1886,7 @@
gap: 1rem;
.item-name {
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
@@ -1926,7 +1926,7 @@
}
.item-desc {
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
@@ -1946,7 +1946,7 @@
.item-price {
font-weight: 700;
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
.price-discount {
display: flex;
@@ -1954,7 +1954,7 @@
gap: 0.5rem;
.old {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: var(--text-secondary);
text-decoration: line-through;
font-weight: 400;
@@ -1962,7 +1962,7 @@
.current {
color: #10b981;
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
}
}
@@ -2013,7 +2013,7 @@
min-width: 36px;
text-align: center;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}
}
@@ -2033,7 +2033,7 @@
padding: 1.5rem;
h3 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 1.25rem 0;
@@ -2046,7 +2046,7 @@
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: var(--text-secondary);
.value {
@@ -2063,14 +2063,14 @@
margin-top: 1rem;
border-top: 1px solid var(--border-color);
font-weight: 700;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
span:first-child {
color: var(--text-secondary);
}
.total-price {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
background: linear-gradient(135deg, #10b981, #14b8a6, #06b6d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -2117,7 +2117,7 @@
gap: 0.75rem;
cursor: pointer;
position: relative;
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
line-height: 1.6;
input[type="checkbox"] {
@@ -2204,7 +2204,7 @@
gap: 1rem;
h1 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}
@@ -2234,7 +2234,7 @@
padding: 1.25rem;
.summary-total .total-price {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
}
}
}

18
src/app/pages/category/category.component.scss
View File

@@ -39,14 +39,14 @@
}
h3 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: #1e3c38;
margin: 0 0 8px 0;
}
p {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: #697777;
margin: 0 0 24px 0;
max-width: 340px;
@@ -61,7 +61,7 @@
color: white;
border-radius: 13px;
font-family: "DM Sans", sans-serif;
font-size: 0.9375rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, transform 0.15s ease;
@@ -81,7 +81,7 @@
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
transition: all 0.2s ease;
@@ -166,7 +166,7 @@
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
z-index: 1;
}
@@ -206,7 +206,7 @@
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #697777;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -227,7 +227,7 @@
.original-price {
text-decoration: line-through;
color: #697777;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@@ -274,7 +274,7 @@
color: white;
border: none;
border-radius: 0 0 13px 13px;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
cursor: pointer;
@@ -418,6 +418,6 @@
.add-to-cart-btn {
padding: 10px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
}

34
src/app/pages/category/subcategories.component.scss
View File

@@ -23,7 +23,7 @@
p {
color: #697777;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 0;
}
@@ -41,7 +41,7 @@
p {
color: #dc2626;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-align: center;
margin: 0;
@@ -53,7 +53,7 @@
color: white;
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 500;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
cursor: pointer;
@@ -93,14 +93,14 @@
}
h3 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: #1e3c38;
margin: 0 0 8px 0;
}
p {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: #697777;
margin: 0 0 24px 0;
max-width: 340px;
@@ -115,7 +115,7 @@
color: white;
border-radius: 13px;
font-family: "DM Sans", sans-serif;
font-size: 0.9375rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, transform 0.15s ease;
@@ -132,7 +132,7 @@
h2 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
color: #1e3c38;
margin: 0;
font-weight: 700;
@@ -237,7 +237,7 @@
.category-count {
font-family: "DM Sans", sans-serif;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #697777;
}
@@ -247,7 +247,7 @@
gap: 6px;
min-height: 20px;
font-family: "DM Sans", sans-serif;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #697777;
span {
@@ -266,7 +266,7 @@
background: #eef1f1;
color: #697777;
font-family: "DM Sans", sans-serif;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
}
// Items section within subcategories page
@@ -275,7 +275,7 @@
.items-section-title {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: #1e3c38;
margin: 0 0 20px 0;
@@ -327,7 +327,7 @@
right: 8px;
background: #dc2626;
color: white;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
padding: 2px 8px;
border-radius: 6px;
@@ -360,7 +360,7 @@
.item-name {
font-family: "DM Sans", sans-serif;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
color: #1e3c38;
margin: 0;
@@ -379,13 +379,13 @@
flex-wrap: wrap;
.old-price {
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #a1b4b5;
text-decoration: line-through;
}
.current-price {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #1e3c38;
}
@@ -440,7 +440,7 @@
margin-bottom: 20px;
h2 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}
@@ -466,7 +466,7 @@
margin-bottom: 16px;
h2 {
font-size: 1.35rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}

4
src/app/pages/info/contacts/contacts.component.scss
View File

@@ -17,7 +17,7 @@
}
.icon {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
color: var(--primary-color);
}
@@ -28,7 +28,7 @@
display: block;
margin-bottom: 0.25rem;
color: var(--text-secondary);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
a {

2
src/app/pages/info/faq/faq.component.scss
View File

@@ -17,7 +17,7 @@
h3 {
color: var(--primary-color);
margin-top: 0;
font-size: 1.2rem;
font-size: var(--font-size-2xl, 1.25rem);
margin-bottom: 0.75rem;
}

200
src/app/pages/item-detail/item-detail.component.scss
View File

@@ -23,7 +23,7 @@ $dx-card-bg: #f5f3f9;
padding: 80px 20px;
color: $dx-muted;
p { margin: 0; font-size: 1rem; }
p { margin: 0; font-size: var(--font-size-lg, 1rem); }
}
.dx-spinner {
@@ -71,7 +71,7 @@ $dx-card-bg: #f5f3f9;
h2 {
margin: 0 0 20px;
color: $dx-dark;
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 800;
}
}
@@ -174,7 +174,7 @@ $dx-card-bg: #f5f3f9;
align-items: center;
gap: 12px;
color: $dx-secondary;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
// Item Info Panel
@@ -186,7 +186,7 @@ $dx-card-bg: #f5f3f9;
.dx-title {
font-family: $dx-font;
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: $dx-dark;
margin: 0;
@@ -210,12 +210,12 @@ $dx-card-bg: #f5f3f9;
.dx-rating-value {
font-weight: 700;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: $dx-dark;
}
.dx-rating-count {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: $dx-muted;
}
@@ -234,7 +234,7 @@ $dx-card-bg: #f5f3f9;
.dx-old-price {
text-decoration: line-through;
color: $dx-muted;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
}
.dx-discount-tag {
@@ -243,7 +243,7 @@ $dx-card-bg: #f5f3f9;
padding: 3px 10px;
border-radius: 20px;
font-weight: 700;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.dx-current-price {
@@ -261,7 +261,7 @@ $dx-card-bg: #f5f3f9;
}
.dx-stock-label {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: $dx-muted;
}
@@ -269,7 +269,7 @@ $dx-card-bg: #f5f3f9;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
&.high { color: #2ed573; }
@@ -293,7 +293,7 @@ $dx-card-bg: #f5f3f9;
border: none;
border-radius: 13px;
font-family: $dx-font;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
@@ -329,7 +329,7 @@ $dx-card-bg: #f5f3f9;
}
.variant-label {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: #6b7280;
font-weight: 500;
}
@@ -339,7 +339,7 @@ $dx-card-bg: #f5f3f9;
align-items: center;
padding: 6px 14px;
border-radius: 8px;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
border: 1.5px solid $dx-border;
background: rgba(73, 118, 113, 0.06);
@@ -390,7 +390,7 @@ $dx-card-bg: #f5f3f9;
.attribute-row {
display: flex;
gap: 6px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.attribute-key {
@@ -416,7 +416,7 @@ $dx-card-bg: #f5f3f9;
.dx-delivery-title, .alt-delivery-title {
margin: 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: $dx-dark;
}
@@ -442,14 +442,14 @@ $dx-card-bg: #f5f3f9;
flex-direction: column;
gap: 4px;
color: $dx-muted;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.dx-delivery-price, .alt-delivery-price {
flex-shrink: 0;
font-weight: 700;
color: $dx-primary;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.dx-delivery-chip, .alt-delivery-chip {
@@ -459,7 +459,7 @@ $dx-card-bg: #f5f3f9;
border-radius: 999px;
background: rgba(73, 118, 113, 0.12);
color: $dx-primary;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 700;
}
@@ -469,7 +469,7 @@ $dx-card-bg: #f5f3f9;
h2 {
font-family: $dx-font;
font-size: 1.3rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: $dx-dark;
margin: 0 0 12px 0;
@@ -477,7 +477,7 @@ $dx-card-bg: #f5f3f9;
}
.dx-description-text {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: $dx-muted;
line-height: 1.7;
}
@@ -488,7 +488,7 @@ $dx-card-bg: #f5f3f9;
h2 {
font-family: $dx-font;
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: $dx-dark;
margin: 0 0 24px 0;
@@ -506,7 +506,7 @@ $dx-card-bg: #f5f3f9;
font-family: $dx-font;
margin: 0 0 20px 0;
color: $dx-dark;
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
}
}
@@ -519,7 +519,7 @@ $dx-card-bg: #f5f3f9;
margin-bottom: 8px;
color: $dx-dark;
font-weight: 600;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
}
@@ -545,7 +545,7 @@ $dx-card-bg: #f5f3f9;
border: 1px solid $dx-border;
border-radius: 10px;
font-family: $dx-font;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
resize: none;
margin-bottom: 16px;
background: white;
@@ -570,7 +570,7 @@ $dx-card-bg: #f5f3f9;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: $dx-muted;
input[type="checkbox"] {
@@ -583,7 +583,7 @@ $dx-card-bg: #f5f3f9;
.dx-user-preview {
color: $dx-primary;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
font-style: italic;
}
@@ -596,7 +596,7 @@ $dx-card-bg: #f5f3f9;
border-radius: 13px;
font-family: $dx-font;
font-weight: 700;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
@@ -638,7 +638,7 @@ $dx-card-bg: #f5f3f9;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
animation: dxSlideIn 0.3s ease-out;
&.success {
@@ -694,12 +694,12 @@ $dx-card-bg: #f5f3f9;
.dx-reviewer-name {
font-weight: 600;
color: $dx-dark;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.dx-review-date {
color: $dx-muted;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.dx-review-stars {
@@ -711,14 +711,14 @@ $dx-card-bg: #f5f3f9;
color: $dx-muted;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.dx-no-reviews {
text-align: center;
color: $dx-muted;
padding: 40px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
// Q&A Section
@@ -727,7 +727,7 @@ $dx-card-bg: #f5f3f9;
h2 {
font-family: $dx-font;
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: $dx-dark;
margin: 0 0 24px 0;
@@ -754,7 +754,7 @@ $dx-card-bg: #f5f3f9;
margin-bottom: 12px;
line-height: 1.6;
color: $dx-muted;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.dx-qa-label {
@@ -766,7 +766,7 @@ $dx-card-bg: #f5f3f9;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
&.q {
background: $dx-primary;
@@ -795,7 +795,7 @@ $dx-card-bg: #f5f3f9;
border: 1px solid $dx-border;
border-radius: 8px;
padding: 6px 12px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: $dx-muted;
cursor: pointer;
transition: all 0.2s;
@@ -830,7 +830,7 @@ $dx-card-bg: #f5f3f9;
}
.dx-title {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}
@@ -858,7 +858,7 @@ $dx-card-bg: #f5f3f9;
.dx-reviews-section,
.dx-qa-section {
h2 {
font-size: 1.3rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}
}
@@ -905,7 +905,7 @@ $dx-card-bg: #f5f3f9;
}
.dx-title {
font-size: 1.4rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.dx-current-price {
@@ -913,18 +913,18 @@ $dx-card-bg: #f5f3f9;
}
.dx-old-price {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.dx-add-cart {
max-width: 100%;
padding: 14px 20px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.dx-description {
h2 {
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
}
}
@@ -936,7 +936,7 @@ $dx-card-bg: #f5f3f9;
td {
padding: 8px 10px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
}
@@ -963,7 +963,7 @@ $dx-card-bg: #f5f3f9;
margin-bottom: 32px;
h2 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
margin-bottom: 16px;
}
}
@@ -974,7 +974,7 @@ $dx-card-bg: #f5f3f9;
.dx-question,
.dx-answer {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}
@@ -1005,7 +1005,7 @@ $dx-card-bg: #f5f3f9;
}
.dx-title {
font-size: 1.2rem;
font-size: var(--font-size-2xl, 1.25rem);
}
.dx-info {
@@ -1013,7 +1013,7 @@ $dx-card-bg: #f5f3f9;
}
.dx-current-price {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.dx-rating {
@@ -1028,7 +1028,7 @@ $dx-card-bg: #f5f3f9;
.dx-add-cart {
padding: 12px 16px;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
border-radius: 10px;
}
@@ -1036,19 +1036,19 @@ $dx-card-bg: #f5f3f9;
padding: 14px;
h3 {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
}
.dx-star-selector {
.dx-star-pick {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}
.dx-textarea {
padding: 12px;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.dx-review-card {
@@ -1056,17 +1056,17 @@ $dx-card-bg: #f5f3f9;
}
.dx-reviewer-name {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.dx-review-text {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.dx-specs-table {
td {
padding: 6px 8px;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
display: block;
}
@@ -1092,14 +1092,14 @@ $dx-card-bg: #f5f3f9;
.dx-question,
.dx-answer {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
gap: 8px;
}
.dx-qa-label {
width: 24px;
height: 24px;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
}
}
@@ -1182,7 +1182,7 @@ $dx-card-bg: #f5f3f9;
}
p {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}
}
@@ -1241,7 +1241,7 @@ $dx-card-bg: #f5f3f9;
.alt-info {
.alt-title {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 1rem 0;
@@ -1256,7 +1256,7 @@ $dx-card-bg: #f5f3f9;
.stars {
color: #fbbf24;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
}
.value {
@@ -1266,7 +1266,7 @@ $dx-card-bg: #f5f3f9;
.reviews {
color: var(--text-secondary);
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}
@@ -1286,7 +1286,7 @@ $dx-card-bg: #f5f3f9;
.old-price {
text-decoration: line-through;
color: var(--text-tertiary);
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
}
.discount-badge {
@@ -1295,7 +1295,7 @@ $dx-card-bg: #f5f3f9;
padding: 0.25rem 0.75rem;
border-radius: var(--radius-md);
font-weight: 700;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.current-price {
@@ -1358,7 +1358,7 @@ $dx-card-bg: #f5f3f9;
color: white;
border: none;
border-radius: var(--radius-lg);
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
cursor: pointer;
display: flex;
@@ -1381,7 +1381,7 @@ $dx-card-bg: #f5f3f9;
.alt-description {
h3 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 600;
color: var(--text-primary);
margin: 0 0 1rem 0;
@@ -1402,7 +1402,7 @@ $dx-card-bg: #f5f3f9;
border-top: 1px solid var(--border-color);
h2 {
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 2rem 0;
@@ -1440,19 +1440,19 @@ $dx-card-bg: #f5f3f9;
.reviewer-name {
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}
.review-date {
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-secondary);
}
}
.review-stars {
color: #fbbf24;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
flex-shrink: 0;
}
}
@@ -1461,7 +1461,7 @@ $dx-card-bg: #f5f3f9;
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
}
@@ -1469,7 +1469,7 @@ $dx-card-bg: #f5f3f9;
text-align: center;
padding: 3rem 2rem;
color: var(--text-secondary);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
background: var(--bg-secondary);
border-radius: var(--radius-lg);
}
@@ -1484,7 +1484,7 @@ $dx-card-bg: #f5f3f9;
margin-bottom: 2rem;
h3 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 1.5rem 0;
@@ -1495,7 +1495,7 @@ $dx-card-bg: #f5f3f9;
label {
display: block;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.75rem;
@@ -1506,7 +1506,7 @@ $dx-card-bg: #f5f3f9;
gap: 0.5rem;
.alt-star {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
color: #d1d5db;
cursor: pointer;
transition: all 0.2s ease;
@@ -1529,7 +1529,7 @@ $dx-card-bg: #f5f3f9;
padding: 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-family: inherit;
color: var(--text-primary);
background: white;
@@ -1560,7 +1560,7 @@ $dx-card-bg: #f5f3f9;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: var(--text-secondary);
cursor: pointer;
@@ -1576,7 +1576,7 @@ $dx-card-bg: #f5f3f9;
}
.alt-username-preview {
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
color: var(--text-secondary);
font-style: italic;
}
@@ -1591,7 +1591,7 @@ $dx-card-bg: #f5f3f9;
color: white;
border: none;
border-radius: var(--radius-md);
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
@@ -1634,7 +1634,7 @@ $dx-card-bg: #f5f3f9;
padding: 1rem;
margin-top: 1rem;
border-radius: var(--radius-md);
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 500;
animation: slideDown 0.3s ease;
@@ -1692,11 +1692,11 @@ $dx-card-bg: #f5f3f9;
}
.alt-info .alt-title {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.alt-info .alt-price-block .current-price {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
}
.alt-info .alt-add-cart {
@@ -1745,7 +1745,7 @@ $dx-card-bg: #f5f3f9;
.alt-info {
.alt-title {
font-size: 1.35rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.alt-rating {
@@ -1758,11 +1758,11 @@ $dx-card-bg: #f5f3f9;
padding: 1rem;
.current-price {
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
}
.old-price {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
}
@@ -1774,13 +1774,13 @@ $dx-card-bg: #f5f3f9;
.alt-add-cart {
padding: 1rem 1.5rem;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
margin-bottom: 1.5rem;
}
.alt-description {
h3 {
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
}
}
}
@@ -1793,7 +1793,7 @@ $dx-card-bg: #f5f3f9;
td {
padding: 8px 10px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
}
@@ -1802,7 +1802,7 @@ $dx-card-bg: #f5f3f9;
padding-top: 2rem;
h2 {
font-size: 1.35rem;
font-size: var(--font-size-3xl, 1.5rem);
margin-bottom: 1.5rem;
}
}
@@ -1815,7 +1815,7 @@ $dx-card-bg: #f5f3f9;
padding: 1.25rem;
h3 {
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
}
}
}
@@ -1844,25 +1844,25 @@ $dx-card-bg: #f5f3f9;
.alt-info {
.alt-title {
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
}
.alt-price-block {
padding: 0.75rem;
.current-price {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}
.alt-stock {
padding: 0.6rem;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.alt-add-cart {
padding: 0.85rem 1rem;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
border-radius: var(--radius-md);
}
}
@@ -1880,7 +1880,7 @@ $dx-card-bg: #f5f3f9;
.alt-textarea {
padding: 0.75rem;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}
@@ -1897,14 +1897,14 @@ $dx-card-bg: #f5f3f9;
}
.review-text {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}
.alt-specs-table {
td {
padding: 6px 8px;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
display: block;
}
@@ -1939,7 +1939,7 @@ $dx-card-bg: #f5f3f9;
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -1967,7 +1967,7 @@ $dx-card-bg: #f5f3f9;
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: #497671;
background: rgba(73, 118, 113, 0.08);
border: 1px solid rgba(73, 118, 113, 0.15);
@@ -1986,7 +1986,7 @@ $dx-card-bg: #f5f3f9;
td {
padding: 10px 12px;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
vertical-align: top;
}
@@ -2004,7 +2004,7 @@ $dx-card-bg: #f5f3f9;
// Simple description
.alt-simple-desc, .dx-simple-desc {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: #697777;
line-height: 1.6;
margin-bottom: 16px;
@@ -2012,7 +2012,7 @@ $dx-card-bg: #f5f3f9;
// Stock quantity
.stock-qty, .dx-stock-qty {
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #697777;
margin-left: 8px;
}

4
src/app/pages/legal/company-details/company-details.component.scss
View File

@@ -51,12 +51,12 @@
}
.org-short {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: var(--text-light);
}
.basis {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: var(--text-light);
margin-top: 0.5rem;
}

34
src/app/pages/search/search.component.scss
View File

@@ -9,7 +9,7 @@
margin-bottom: 40px;
h1 {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
margin-bottom: 20px;
color: #1e3c38;
text-align: center;
@@ -24,7 +24,7 @@
.search-input {
width: 100%;
padding: 16px 50px 16px 20px;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
border: 2px solid #d3dad9;
border-radius: 13px;
@@ -53,7 +53,7 @@
text-align: center;
margin-bottom: 24px;
color: #1e3c38;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
}
.empty-state,
@@ -82,7 +82,7 @@
}
p {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: #a1b4b5;
margin: 0;
}
@@ -108,7 +108,7 @@
}
h2 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: #1e3c38;
margin: 0 0 8px 0;
@@ -117,11 +117,11 @@
p {
margin: 4px 0;
color: #697777;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.hint {
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
color: #a1b4b5;
margin-top: 12px;
}
@@ -139,7 +139,7 @@
border: none;
border-radius: 13px;
cursor: pointer;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
&:hover {
@@ -220,7 +220,7 @@
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.item-details {
@@ -232,7 +232,7 @@
}
.item-name {
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
margin: 0;
color: #1e3c38;
display: -webkit-box;
@@ -246,7 +246,7 @@
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: #1e3c38;
.rating-stars {
@@ -266,12 +266,12 @@
.original-price {
text-decoration: line-through;
color: #697777;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.discounted-price,
.current-price {
font-size: 1.3rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: var(--primary-color);
}
@@ -311,7 +311,7 @@
color: white;
border: none;
border-radius: 0 0 13px 13px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 600;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
cursor: pointer;
@@ -407,7 +407,7 @@
@media (max-width: 768px) {
.search-header h1 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.items-grid {
@@ -416,11 +416,11 @@
}
.item-name {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.discounted-price,
.current-price {
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
}
}