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

style(design-system): normalize exact-match border-radius literals to tokens

Browse Source 
Mechanical sweep for border-radius: 4px/8px/12px/13px/999px replaced
with var(--radius-xs/sm/md/lg/full, <same value>) across src/app.
Only exact matches to existing token values were touched (20px, 16px,
10px, 6px, 3px, 2px etc. were left as-is since no token maps to them
without a visible size change on at least one tenant theme — see
docs/UI-DESIGN-REVIEW.md).
This commit is contained in:
sdarbinyan
2026-07-20 03:27:25 +04:00
parent 7cb1c8c3c6
commit be59db2e2d
51 changed files with 130 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.scss
View File

@@ -55,7 +55,7 @@
.retry-btn { .retry-btn {
padding: 0.75rem 2rem; padding: 0.75rem 2rem;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
background: var(--primary-color, #007bff); background: var(--primary-color, #007bff);
color: #fff; color: #fff;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);

4
src/app/components/delivery-selector/delivery-selector.component.scss
View File

@@ -5,7 +5,7 @@
.delivery-selector { .delivery-selector {
margin-top: 12px; margin-top: 12px;
padding: 12px; padding: 12px;
border-radius: 12px; border-radius: var(--radius-md, 12px);
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
background: #fafbfb; background: #fafbfb;
} }
@@ -48,7 +48,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);
font-weight: 700; font-weight: 700;
} }

2
src/app/components/footer/footer.component.scss
View File

@@ -69,7 +69,7 @@
flex-wrap: wrap; flex-wrap: wrap;
img { img {
border-radius: 4px; border-radius: var(--radius-xs, 4px);
background: #fff; background: #fff;
padding: 2px 6px; padding: 2px 6px;
} }

4
src/app/components/header/header.component.scss
View File

@@ -174,7 +174,7 @@
top: -6px; top: -6px;
min-width: 16px; min-width: 16px;
height: 16px; height: 16px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: #497671; background: #497671;
color: #ffffff; color: #ffffff;
font-size: 10px; font-size: 10px;
@@ -273,7 +273,7 @@
padding: 15px 26px; padding: 15px 26px;
background: #e9edf1; background: #e9edf1;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
font-family: 'DM Sans', sans-serif; font-family: 'DM Sans', sans-serif;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);

2
src/app/components/items-carousel/items-carousel.component.scss
View File

@@ -128,7 +128,7 @@
// Item card styles // Item card styles
.item-card { .item-card {
background: #ffffff; background: #ffffff;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

14
src/app/components/language-selector/language-selector.component.scss
View File

@@ -10,7 +10,7 @@
padding: 8px 12px; padding: 8px 12px;
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: var(--radius-sm, 8px);
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -51,7 +51,7 @@
min-width: 180px; min-width: 180px;
background: var(--card-bg, #1a1a1a); background: var(--card-bg, #1a1a1a);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px; border-radius: var(--radius-md, 12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@@ -167,7 +167,7 @@
gap: 4px; gap: 4px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border: 1px solid #677b78; border: 1px solid #677b78;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
color: #1e3c38; color: #1e3c38;
justify-content: center; justify-content: center;
@@ -282,7 +282,7 @@
transition: max-height 0.3s ease, visibility 0s 0.3s; transition: max-height 0.3s ease, visibility 0s 0.3s;
box-shadow: none; box-shadow: none;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
margin-top: 8px; margin-top: 8px;
background: rgba(233, 237, 241, 0.9); background: rgba(233, 237, 241, 0.9);
@@ -321,7 +321,7 @@
padding: 8px 10px; padding: 8px 10px;
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px; border-radius: var(--radius-sm, 8px);
color: #ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
@@ -357,7 +357,7 @@
min-width: 170px; min-width: 170px;
background: var(--card-bg, #1a1a1a); background: var(--card-bg, #1a1a1a);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px; border-radius: var(--radius-md, 12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@@ -445,7 +445,7 @@
gap: 3px; gap: 3px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border: 1px solid #677b78; border: 1px solid #677b78;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
color: #1e3c38; color: #1e3c38;
&:hover { &:hover {
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);

8
src/app/components/product-card/product-card.component.scss
View File

@@ -71,7 +71,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 2px 8px; padding: 2px 8px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: rgba(22, 163, 74, 0.9); background: rgba(22, 163, 74, 0.9);
color: #fff; color: #fff;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
@@ -157,7 +157,7 @@
align-items: center; align-items: center;
min-height: 24px; min-height: 24px;
padding: 3px 8px; padding: 3px 8px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: #497671; background: #497671;
color: #fff; color: #fff;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
@@ -251,7 +251,7 @@
.bar-segment { .bar-segment {
flex: 1; flex: 1;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: #d3dad9; background: #d3dad9;
&.filled.high { &.filled.high {
@@ -272,7 +272,7 @@
margin-top: 12px; margin-top: 12px;
min-height: 42px; min-height: 42px;
border: 0; border: 0;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
background: #497671; background: #497671;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;

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

@@ -8,7 +8,7 @@
gap: 6px; gap: 6px;
padding: 6px 10px; padding: 6px 10px;
border: 1px solid var(--border-color, #e0e0e0); border: 1px solid var(--border-color, #e0e0e0);
border-radius: 8px; border-radius: var(--radius-sm, 8px);
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);
@@ -53,7 +53,7 @@
min-width: 220px; min-width: 220px;
background: var(--bg-card, #fff); background: var(--bg-card, #fff);
border: 1px solid var(--border-color, #e0e0e0); border: 1px solid var(--border-color, #e0e0e0);
border-radius: 12px; border-radius: var(--radius-md, 12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
@@ -105,7 +105,7 @@
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);

6
src/app/components/telegram-login/telegram-login.component.scss
View File

@@ -79,7 +79,7 @@ h2 {
width: 100%; width: 100%;
padding: 14px 24px; padding: 14px 24px;
border: none; border: none;
border-radius: 12px; border-radius: var(--radius-md, 12px);
background: #2AABEE; background: #2AABEE;
color: #fff; color: #fff;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
@@ -129,12 +129,12 @@ h2 {
display: inline-flex; display: inline-flex;
padding: 12px; padding: 12px;
background: #fff; background: #fff;
border-radius: 12px; border-radius: var(--radius-md, 12px);
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
img { img {
display: block; display: block;
border-radius: 4px; border-radius: var(--radius-xs, 4px);
} }
&.qr-loading { &.qr-loading {

2
src/app/features/admin/analytics/pages/admin-analytics-page.component.scss
View File

@@ -42,7 +42,7 @@
.recommendation-list a:focus-visible, .health-checks a:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; } .recommendation-list a:focus-visible, .health-checks a:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
.muted { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); } .muted { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
.health-widget__bar { height: 8px; border-radius: 999px; background: var(--surface-muted, #eef2f0); overflow: hidden; } .health-widget__bar { height: 8px; border-radius: var(--radius-full, 999px); background: var(--surface-muted, #eef2f0); overflow: hidden; }
.health-widget__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); transition: width 0.3s ease; } .health-widget__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); transition: width 0.3s ease; }
.health-percent { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); } .health-percent { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }

2
src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss
View File

@@ -6,7 +6,7 @@
.category-health__bar { .category-health__bar {
height: 6px; height: 6px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0); background: var(--surface-muted, #eef2f0);
overflow: hidden; overflow: hidden;
} }

2
src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss
View File

@@ -1,5 +1,5 @@
.review-health { display: grid; gap: 6px; align-items: center; } .review-health { display: grid; gap: 6px; align-items: center; }
.review-health__bar { height: 6px; border-radius: 999px; background: var(--surface-muted, #eef2f0); overflow: hidden; } .review-health__bar { height: 6px; border-radius: var(--radius-full, 999px); background: var(--surface-muted, #eef2f0); overflow: hidden; }
.review-health__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); } .review-health__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); }
.review-health__percent { font-size: var(--font-size-xs, 0.75rem); font-weight: 700; color: var(--text-secondary, #5f6e6a); } .review-health__percent { font-size: var(--font-size-xs, 0.75rem); font-weight: 700; color: var(--text-secondary, #5f6e6a); }
.review-health__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); } .review-health__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }

2
src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss
View File

@@ -26,7 +26,7 @@
.order-timeline__dot { .order-timeline__dot {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--brand-primary, #1e8a6e); background: var(--brand-primary, #1e8a6e);
margin-top: 4px; margin-top: 4px;
flex-shrink: 0; flex-shrink: 0;

2
src/app/features/admin/orders/pages/admin-order-detail-page.component.scss
View File

@@ -46,7 +46,7 @@ select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde
.status-stepper__dot { .status-stepper__dot {
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0); background: var(--surface-muted, #eef2f0);
border: 2px solid var(--border-subtle, #e7ece9); border: 2px solid var(--border-subtle, #e7ece9);
flex-shrink: 0; flex-shrink: 0;

2
src/app/features/admin/products/components/admin-product-form.component.scss
View File

@@ -109,7 +109,7 @@ input[type='checkbox'] { width: auto; }
.badge-manager__current, .badge-manager__known { display: flex; flex-wrap: wrap; gap: 6px; } .badge-manager__current, .badge-manager__known { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-chip { .badge-chip {
display: inline-flex; align-items: center; gap: 4px; display: inline-flex; align-items: center; gap: 4px;
min-height: 24px; padding: 3px 10px; border-radius: 999px; min-height: 24px; padding: 3px 10px; border-radius: var(--radius-full, 999px);
color: #fff; font-size: var(--font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase; color: #fff; font-size: var(--font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase;
border: none; border: none;
} }

2
src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss
View File

@@ -6,7 +6,7 @@
.product-health__bar { .product-health__bar {
height: 6px; height: 6px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0); background: var(--surface-muted, #eef2f0);
overflow: hidden; overflow: hidden;
} }

4
src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss
View File

@@ -17,7 +17,7 @@
.attribute-card__tag { .attribute-card__tag {
font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.4px; font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-secondary, #6b7280); border: 1px solid var(--border-color, #d3dad9); color: var(--text-secondary, #6b7280); border: 1px solid var(--border-color, #d3dad9);
border-radius: 999px; padding: 1px 8px; border-radius: var(--radius-full, 999px); padding: 1px 8px;
} }
.attribute-card__remove { .attribute-card__remove {
margin-left: auto; border: none; background: transparent; cursor: pointer; margin-left: auto; border: none; background: transparent; cursor: pointer;
@@ -31,7 +31,7 @@
.value-chip { .value-chip {
display: inline-flex; align-items: center; gap: 6px; display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; border-radius: 999px; padding: 3px 8px; border-radius: var(--radius-full, 999px);
border: 1px solid var(--border-color, #d3dad9); border: 1px solid var(--border-color, #d3dad9);
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);

4
src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss
View File

@@ -6,13 +6,13 @@
.asset-details__preview img { .asset-details__preview img {
max-width: 100%; max-width: 100%;
max-height: 220px; max-height: 220px;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
object-fit: contain; object-fit: contain;
} }
.asset-details__file { .asset-details__file {
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
background: var(--surface-muted, #eef2f0); background: var(--surface-muted, #eef2f0);
text-align: center; text-align: center;
} }

4
src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss
View File

@@ -26,7 +26,7 @@
&:focus-visible { &:focus-visible {
outline: 2px solid var(--brand-primary, #1e8a6e); outline: 2px solid var(--brand-primary, #1e8a6e);
outline-offset: 3px; outline-offset: 3px;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
} }
} }
@@ -34,7 +34,7 @@
width: 100%; width: 100%;
height: 120px; height: 120px;
object-fit: cover; object-fit: cover;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
background: var(--surface-muted, #eef2f0); background: var(--surface-muted, #eef2f0);
} }

2
src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss
View File

@@ -24,7 +24,7 @@
.health-widget__bar { .health-widget__bar {
height: 8px; height: 8px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0); background: var(--surface-muted, #eef2f0);
overflow: hidden; overflow: hidden;
} }

2
src/app/features/content-management/components/page-card/page-card.component.scss
View File

@@ -15,7 +15,7 @@
&:focus-visible { &:focus-visible {
outline: 2px solid var(--brand-primary, #1e8a6e); outline: 2px solid var(--brand-primary, #1e8a6e);
outline-offset: 3px; outline-offset: 3px;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
} }
} }

2
src/app/features/content-management/components/page-editor/page-editor.component.scss
View File

@@ -101,7 +101,7 @@
width: 100%; width: 100%;
max-height: 140px; max-height: 140px;
object-fit: cover; object-fit: cover;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
} }
.media-block__actions { .media-block__actions {

2
src/app/features/diagnostics/components/diagnostics-page.component.scss
View File

@@ -60,7 +60,7 @@
.entry { .entry {
border: 1px solid #d9e2e1; border: 1px solid #d9e2e1;
border-radius: 12px; border-radius: var(--radius-md, 12px);
padding: 14px; padding: 14px;
} }

2
src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
View File

@@ -58,7 +58,7 @@
.html-editor-surface { .html-editor-surface {
min-height: 160px; min-height: 160px;
border: 1px solid var(--border, #ccc); border: 1px solid var(--border, #ccc);
border-radius: 4px; border-radius: var(--radius-xs, 4px);
padding: 0.5rem; padding: 0.5rem;
overflow-y: auto; overflow-y: auto;
} }

2
src/app/features/project-editor/pages/project-editor-page.component.scss
View File

@@ -281,7 +281,7 @@
color: #b91c1c; color: #b91c1c;
background: transparent; background: transparent;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
padding: 6px 12px; padding: 6px 12px;
cursor: pointer; cursor: pointer;
transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease); transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease);

2
src/app/features/project-editor/sections/homepage-section.component.scss
View File

@@ -42,7 +42,7 @@
letter-spacing: 0.4px; letter-spacing: 0.4px;
color: var(--text-secondary, #6b7280); color: var(--text-secondary, #6b7280);
border: 1px solid var(--border-color, #d3dad9); border: 1px solid var(--border-color, #d3dad9);
border-radius: 999px; border-radius: var(--radius-full, 999px);
padding: 1px 8px; padding: 1px 8px;
} }

4
src/app/features/project-editor/sections/section.shared.scss
View File

@@ -91,7 +91,7 @@ input[type='color'] {
.sortable-item, .sortable-item,
.sub-card { .sub-card {
border: 1px solid var(--border-color, #d3dad9); border: 1px solid var(--border-color, #d3dad9);
border-radius: 12px; border-radius: var(--radius-md, 12px);
padding: 12px; padding: 12px;
background: #fbfcfc; background: #fbfcfc;
} }
@@ -233,7 +233,7 @@ button.secondary {
.languages-summary__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .languages-summary__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.languages-summary__chip { .languages-summary__chip {
display: inline-flex; align-items: center; gap: 6px; display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px; padding: 4px 10px; border-radius: var(--radius-full, 999px);
border: 1px solid var(--border-color, #d3dad9); border: 1px solid var(--border-color, #d3dad9);
font-size: var(--font-size-sm, 0.8125rem); font-weight: 600; font-size: var(--font-size-sm, 0.8125rem); font-weight: 600;
em { font-style: normal; font-weight: 400; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); } em { font-style: normal; font-weight: 400; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }

2
src/app/features/search/components/empty-results/search-empty-results.component.scss
View File

@@ -34,7 +34,7 @@ h3 {
.chip { .chip {
min-height: 36px; min-height: 36px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 12px; padding: 0 12px;

2
src/app/features/search/components/search-bar/search-bar.component.scss
View File

@@ -126,7 +126,7 @@
.chip { .chip {
min-height: 32px; min-height: 32px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 10px; padding: 0 10px;

2
src/app/features/search/components/trending-searches/trending-searches.component.scss
View File

@@ -12,7 +12,7 @@
.chip { .chip {
min-height: 32px; min-height: 32px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 10px; padding: 0 10px;

2
src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss
View File

@@ -97,7 +97,7 @@
.catalog-empty-state__chip { .catalog-empty-state__chip {
min-height: 34px; min-height: 34px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 12px; padding: 0 12px;

4
src/app/features/website/catalog/components/category-grid/category-grid.component.scss
View File

@@ -20,7 +20,7 @@
&:focus-visible { &:focus-visible {
outline: 3px solid rgba(73, 118, 113, 0.28); outline: 3px solid rgba(73, 118, 113, 0.28);
outline-offset: 4px; outline-offset: 4px;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
} }
} }
@@ -87,7 +87,7 @@
span { span {
padding: 2px 7px; padding: 2px 7px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.1); background: rgba(73, 118, 113, 0.1);
color: #3d635f; color: #3d635f;
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);

2
src/app/features/website/catalog/components/search-results/search-results.component.scss
View File

@@ -29,7 +29,7 @@
.skeleton-card { .skeleton-card {
min-height: 340px; min-height: 340px;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
background: background:
linear-gradient(90deg, #edf1f1 25%, #e2ebea 50%, #edf1f1 75%) 16px 16px / calc(100% - 32px) calc(100% - 32px) no-repeat, linear-gradient(90deg, #edf1f1 25%, #e2ebea 50%, #edf1f1 75%) 16px 16px / calc(100% - 32px) calc(100% - 32px) no-repeat,
#f5f3f9; #f5f3f9;

8
src/app/features/website/catalog/containers/catalog-container.component.scss
View File

@@ -24,7 +24,7 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
padding: 4px 8px; padding: 4px 8px;
} }
@@ -361,7 +361,7 @@
.subcategory-chip { .subcategory-chip {
min-height: 36px; min-height: 36px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
padding: 0 10px; padding: 0 10px;
@@ -417,7 +417,7 @@
.catalog-skeleton-card { .catalog-skeleton-card {
min-height: 340px; min-height: 340px;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
padding: 16px; padding: 16px;
background: #f5f3f9; background: #f5f3f9;
} }
@@ -475,7 +475,7 @@
min-height: 42px; min-height: 42px;
padding: 0 22px; padding: 0 22px;
border: 0; border: 0;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
background: #497671; background: #497671;
color: #fff; color: #fff;
font-weight: 800; font-weight: 800;

4
src/app/features/website/product/components/delivery-information/delivery-information.component.scss
View File

@@ -4,7 +4,7 @@
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
background: #f8faf9; background: #f8faf9;
h2 { h2 {
@@ -17,7 +17,7 @@
.delivery-chip { .delivery-chip {
width: fit-content; width: fit-content;
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.12); background: rgba(73, 118, 113, 0.12);
color: #3d635f; color: #3d635f;
font-weight: 800; font-weight: 800;

8
src/app/features/website/product/components/product-gallery/product-gallery.component.scss
View File

@@ -8,7 +8,7 @@
position: relative; position: relative;
aspect-ratio: 1; aspect-ratio: 1;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
display: flex; display: flex;
@@ -40,7 +40,7 @@
border: 1px solid rgba(30, 60, 56, 0.25); border: 1px solid rgba(30, 60, 56, 0.25);
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
color: #1e3c38; color: #1e3c38;
border-radius: 999px; border-radius: var(--radius-full, 999px);
padding: 0 10px; padding: 0 10px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
@@ -61,7 +61,7 @@
a { a {
min-height: 38px; min-height: 38px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
border: 1px solid #497671; border: 1px solid #497671;
color: #2e5e59; color: #2e5e59;
text-decoration: none; text-decoration: none;
@@ -123,7 +123,7 @@
z-index: 1; z-index: 1;
background: rgba(30, 60, 56, 0.78); background: rgba(30, 60, 56, 0.78);
color: #fff; color: #fff;
border-radius: 999px; border-radius: var(--radius-full, 999px);
padding: 2px 8px; padding: 2px 8px;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
text-transform: uppercase; text-transform: uppercase;

4
src/app/features/website/product/components/product-information/product-information.component.scss
View File

@@ -27,7 +27,7 @@
align-items: center; align-items: center;
min-height: 26px; min-height: 26px;
padding: 3px 9px; padding: 3px 9px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: #497671; background: #497671;
color: #fff; color: #fff;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
@@ -93,7 +93,7 @@
width: 100%; width: 100%;
min-height: 48px; min-height: 48px;
border: 0; border: 0;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
background: #497671; background: #497671;
color: #fff; color: #fff;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);

2
src/app/features/website/product/components/variant-selector/variant-selector.component.scss
View File

@@ -49,7 +49,7 @@
min-height: 34px; min-height: 34px;
padding: 0 14px; padding: 0 14px;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: #fff; background: #fff;
color: #1e3c38; color: #1e3c38;
font-weight: 800; font-weight: 800;

2
src/app/features/website/product/containers/product-details-container.component.scss
View File

@@ -61,7 +61,7 @@
min-height: 42px; min-height: 42px;
padding: 0 22px; padding: 0 22px;
border: 0; border: 0;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
background: #497671; background: #497671;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;

4
src/app/features/website/product/engagement/components/question-card/question-card.component.scss
View File

@@ -44,7 +44,7 @@ header {
.seller-pill, .seller-pill,
.accepted-pill { .accepted-pill {
border-radius: 999px; border-radius: var(--radius-full, 999px);
padding: 2px 8px; padding: 2px 8px;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
} }
@@ -72,7 +72,7 @@ footer {
footer button { footer button {
min-height: 32px; min-height: 32px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 10px; padding: 0 10px;

4
src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss
View File

@@ -39,7 +39,7 @@
.distribution-row progress { .distribution-row progress {
width: 100%; width: 100%;
height: 8px; height: 8px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
overflow: hidden; overflow: hidden;
} }
@@ -58,7 +58,7 @@
.line { .line {
height: 12px; height: 12px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: linear-gradient(90deg, #edf1f1 25%, #e2ebea 50%, #edf1f1 75%); background: linear-gradient(90deg, #edf1f1 25%, #e2ebea 50%, #edf1f1 75%);
background-size: 200% 100%; background-size: 200% 100%;
animation: shimmer 1.2s linear infinite; animation: shimmer 1.2s linear infinite;

4
src/app/features/website/product/engagement/components/review-card/review-card.component.scss
View File

@@ -19,7 +19,7 @@
.pill { .pill {
border: 1px dashed var(--border-dark); border: 1px dashed var(--border-dark);
border-radius: 999px; border-radius: var(--radius-full, 999px);
padding: 3px 8px; padding: 3px 8px;
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary); color: var(--text-secondary);
@@ -45,7 +45,7 @@ p {
.review-actions button { .review-actions button {
min-height: 32px; min-height: 32px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-secondary); color: var(--text-secondary);
padding: 0 10px; padding: 0 10px;

2
src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
View File

@@ -26,5 +26,5 @@
.star-btn:focus-visible { .star-btn:focus-visible {
outline: 2px solid var(--primary-color); outline: 2px solid var(--primary-color);
outline-offset: 2px; outline-offset: 2px;
border-radius: 4px; border-radius: var(--radius-xs, 4px);
} }

2
src/app/features/website/user-experience/compare/components/compare-table.component.scss
View File

@@ -1,7 +1,7 @@
.compare-table-wrap { .compare-table-wrap {
overflow-x: auto; overflow-x: auto;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 12px; border-radius: var(--radius-md, 12px);
background: var(--bg-primary); background: var(--bg-primary);
} }

2
src/app/features/website/user-experience/compare/containers/compare-page.component.scss
View File

@@ -47,7 +47,7 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 999px; border-radius: var(--radius-full, 999px);
padding: 4px 10px; padding: 4px 10px;
background: var(--bg-primary); background: var(--bg-primary);
} }

2
src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss
View File

@@ -13,7 +13,7 @@
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
border-radius: 12px; border-radius: var(--radius-md, 12px);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background: #ffffff; background: #ffffff;
box-shadow: 0 10px 24px rgba(30, 60, 56, 0.2); box-shadow: 0 10px 24px rgba(30, 60, 56, 0.2);

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

@@ -35,7 +35,7 @@
background: transparent; background: transparent;
color: #697777; color: #697777;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);
font-weight: 600; font-weight: 600;
@@ -86,7 +86,7 @@
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white; color: white;
border: none; border: none;
border-radius: 12px; border-radius: var(--radius-md, 12px);
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
@@ -122,7 +122,7 @@
padding: 80px 20px; padding: 80px 20px;
text-align: center; text-align: center;
background: #f5f3f9; background: #f5f3f9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
.empty-icon { .empty-icon {
@@ -155,7 +155,7 @@
background: #497671; background: #497671;
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600; font-weight: 600;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
@@ -210,7 +210,7 @@
background: linear-gradient(135deg, #10b981 0%, #059669 100%); background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 12px; border-radius: var(--radius-md, 12px);
font-weight: 600; font-weight: 600;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
transition: all 0.3s; transition: all 0.3s;
@@ -251,7 +251,7 @@
.cart-item-wrapper { .cart-item-wrapper {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 12px; border-radius: var(--radius-md, 12px);
transition: transform 0.3s ease; transition: transform 0.3s ease;
&.swiped { &.swiped {
@@ -277,7 +277,7 @@
gap: 20px; gap: 20px;
background: white; background: white;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
padding: 20px; padding: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
@@ -294,7 +294,7 @@
flex-shrink: 0; flex-shrink: 0;
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
overflow: hidden; overflow: hidden;
background: #f5f3f9; background: #f5f3f9;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
@@ -349,7 +349,7 @@
border: none; border: none;
color: #a1b4b5; color: #a1b4b5;
cursor: pointer; cursor: pointer;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
@@ -425,7 +425,7 @@
flex-shrink: 0; flex-shrink: 0;
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 12px; border-radius: var(--radius-md, 12px);
overflow: hidden; overflow: hidden;
background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%); background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
border: 2px solid #d1fae5; border: 2px solid #d1fae5;
@@ -478,7 +478,7 @@
border: none; border: none;
color: #9ca3af; color: #9ca3af;
cursor: pointer; cursor: pointer;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
@@ -569,7 +569,7 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
background: #f5f3f9; background: #f5f3f9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
padding: 4px 10px; padding: 4px 10px;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
@@ -682,7 +682,7 @@
top: 90px; top: 90px;
background: #f5f3f9; background: #f5f3f9;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
padding: 28px; padding: 28px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -737,7 +737,7 @@
background: #497671; background: #497671;
color: white; color: white;
border: none; border: none;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
font-weight: 700; font-weight: 700;
@@ -967,7 +967,7 @@
gap: 8px; gap: 8px;
padding: 12px 24px; padding: 12px 24px;
border: none; border: none;
border-radius: 12px; border-radius: var(--radius-md, 12px);
background: #2AABEE; background: #2AABEE;
color: #fff; color: #fff;
font-size: var(--font-size-md, 0.9375rem); font-size: var(--font-size-md, 0.9375rem);
@@ -1012,7 +1012,7 @@
width: 18px; width: 18px;
background: white; background: white;
border: 2px solid #d1d5db; border: 2px solid #d1d5db;
border-radius: 4px; border-radius: var(--radius-xs, 4px);
transition: all 0.2s; transition: all 0.2s;
&::after { &::after {
@@ -1080,7 +1080,7 @@
.checkmark { .checkmark {
border: 2px solid #d3dad9; border: 2px solid #d3dad9;
border-radius: 4px; border-radius: var(--radius-xs, 4px);
} }
.terms-text { .terms-text {
@@ -1150,7 +1150,7 @@
.payment-modal { .payment-modal {
background: white; background: white;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
max-width: 500px; max-width: 500px;
width: 100%; width: 100%;
padding: 40px; padding: 40px;
@@ -1278,7 +1278,7 @@
background: #497671; background: #497671;
color: white; color: white;
border: none; border: none;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
font-weight: 700; font-weight: 700;
@@ -1344,7 +1344,7 @@
.qr-wrapper { .qr-wrapper {
padding: 16px; padding: 16px;
background: white; background: white;
border-radius: 12px; border-radius: var(--radius-md, 12px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -1389,7 +1389,7 @@
align-items: center; align-items: center;
padding: 16px; padding: 16px;
background: #f9fafb; background: #f9fafb;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
margin-bottom: 16px; margin-bottom: 16px;
.label { .label {
@@ -1429,7 +1429,7 @@
.open-btn { .open-btn {
flex: 1; flex: 1;
padding: 12px 16px; padding: 12px 16px;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
font-weight: 600; font-weight: 600;
font-size: var(--font-size-md, 0.9375rem); font-size: var(--font-size-md, 0.9375rem);
cursor: pointer; cursor: pointer;
@@ -1495,7 +1495,7 @@
height: min(760px, 86vh); height: min(760px, 86vh);
padding: 56px 16px 16px; padding: 56px 16px 16px;
background: white; background: white;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
} }
@@ -1503,7 +1503,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 0; border: 0;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
background: white; background: white;
} }
@@ -1552,7 +1552,7 @@
width: 100%; width: 100%;
padding: 14px; padding: 14px;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
outline: none; outline: none;
transition: all 0.2s; transition: all 0.2s;
@@ -1588,7 +1588,7 @@
background: #497671; background: #497671;
color: white; color: white;
border: none; border: none;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
font-weight: 700; font-weight: 700;
@@ -2144,7 +2144,7 @@
width: 20px; width: 20px;
background-color: transparent; background-color: transparent;
border: 2px solid var(--border-color); border: 2px solid var(--border-color);
border-radius: 4px; border-radius: var(--radius-xs, 4px);
transition: all 0.2s ease; transition: all 0.2s ease;
margin-top: 2px; margin-top: 2px;

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

@@ -59,7 +59,7 @@
padding: 10px 28px; padding: 10px 28px;
background: #497671; background: #497671;
color: white; color: white;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", sans-serif; font-family: "DM Sans", sans-serif;
font-size: var(--font-size-md, 0.9375rem); font-size: var(--font-size-md, 0.9375rem);
font-weight: 600; font-weight: 600;
@@ -79,7 +79,7 @@
background: #497671; background: #497671;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
cursor: pointer; cursor: pointer;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

@@ -52,7 +52,7 @@
background: #497671; background: #497671;
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
font-size: var(--font-size-md, 0.9375rem); font-size: var(--font-size-md, 0.9375rem);
font-weight: 500; font-weight: 500;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -113,7 +113,7 @@
padding: 10px 28px; padding: 10px 28px;
background: #497671; background: #497671;
color: white; color: white;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", sans-serif; font-family: "DM Sans", sans-serif;
font-size: var(--font-size-md, 0.9375rem); font-size: var(--font-size-md, 0.9375rem);
font-weight: 600; font-weight: 600;
@@ -252,7 +252,7 @@
span { span {
padding: 2px 7px; padding: 2px 7px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.1); background: rgba(73, 118, 113, 0.1);
color: #3d635f; color: #3d635f;
white-space: nowrap; white-space: nowrap;
@@ -262,7 +262,7 @@
.category-mixed { .category-mixed {
width: fit-content; width: fit-content;
padding: 2px 7px; padding: 2px 7px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: #eef1f1; background: #eef1f1;
color: #697777; color: #697777;
font-family: "DM Sans", sans-serif; font-family: "DM Sans", sans-serif;
@@ -293,7 +293,7 @@
flex-direction: column; flex-direction: column;
text-decoration: none; text-decoration: none;
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
overflow: hidden; overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff; background: #fff;
@@ -346,7 +346,7 @@
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 600; font-weight: 600;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: var(--radius-xs, 4px);
text-transform: uppercase; text-transform: uppercase;
} }
} }
@@ -396,7 +396,7 @@
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
padding: 6px 10px; padding: 6px 10px;
cursor: pointer; cursor: pointer;
transition: background 0.2s ease; transition: background 0.2s ease;

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

@@ -47,7 +47,7 @@ $dx-card-bg: #f5f3f9;
background: $dx-primary; background: $dx-primary;
color: white; color: white;
text-decoration: none; text-decoration: none;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-weight: 600; font-weight: 600;
transition: all 0.2s; transition: all 0.2s;
@@ -152,7 +152,7 @@ $dx-card-bg: #f5f3f9;
aspect-ratio: 1; aspect-ratio: 1;
background: white; background: white;
border: 1px solid $dx-border; border: 1px solid $dx-border;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -291,7 +291,7 @@ $dx-card-bg: #f5f3f9;
background: $dx-primary; background: $dx-primary;
color: white; color: white;
border: none; border: none;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: $dx-font; font-family: $dx-font;
font-size: var(--font-size-xl, 1.125rem); font-size: var(--font-size-xl, 1.125rem);
font-weight: 700; font-weight: 700;
@@ -338,7 +338,7 @@ $dx-card-bg: #f5f3f9;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 6px 14px; padding: 6px 14px;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);
font-weight: 600; font-weight: 600;
border: 1.5px solid $dx-border; border: 1.5px solid $dx-border;
@@ -410,7 +410,7 @@ $dx-card-bg: #f5f3f9;
gap: 10px; gap: 10px;
padding: 14px 16px; padding: 14px 16px;
border: 1px solid $dx-border; border: 1px solid $dx-border;
border-radius: 12px; border-radius: var(--radius-md, 12px);
background: #f8fafa; background: #f8fafa;
} }
@@ -456,7 +456,7 @@ $dx-card-bg: #f5f3f9;
display: inline-flex; display: inline-flex;
align-self: flex-start; align-self: flex-start;
padding: 6px 12px; padding: 6px 12px;
border-radius: 999px; border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.12); background: rgba(73, 118, 113, 0.12);
color: $dx-primary; color: $dx-primary;
font-size: var(--font-size-base, 0.875rem); font-size: var(--font-size-base, 0.875rem);
@@ -498,7 +498,7 @@ $dx-card-bg: #f5f3f9;
.dx-review-form { .dx-review-form {
background: $dx-card-bg; background: $dx-card-bg;
border: 1px solid $dx-border; border: 1px solid $dx-border;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
padding: 24px; padding: 24px;
margin-bottom: 24px; margin-bottom: 24px;
@@ -593,7 +593,7 @@ $dx-card-bg: #f5f3f9;
color: white; color: white;
border: none; border: none;
padding: 12px 28px; padding: 12px 28px;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
font-family: $dx-font; font-family: $dx-font;
font-weight: 700; font-weight: 700;
font-size: var(--font-size-md, 0.9375rem); font-size: var(--font-size-md, 0.9375rem);
@@ -669,7 +669,7 @@ $dx-card-bg: #f5f3f9;
.dx-review-card { .dx-review-card {
background: white; background: white;
border: 1px solid $dx-border; border: 1px solid $dx-border;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
padding: 20px; padding: 20px;
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
@@ -743,7 +743,7 @@ $dx-card-bg: #f5f3f9;
.dx-qa-card { .dx-qa-card {
background: white; background: white;
border: 1px solid $dx-border; border: 1px solid $dx-border;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
padding: 20px; padding: 20px;
} }
@@ -793,7 +793,7 @@ $dx-card-bg: #f5f3f9;
gap: 5px; gap: 5px;
background: none; background: none;
border: 1px solid $dx-border; border: 1px solid $dx-border;
border-radius: 8px; border-radius: var(--radius-sm, 8px);
padding: 6px 12px; padding: 6px 12px;
font-size: var(--font-size-sm, 0.8125rem); font-size: var(--font-size-sm, 0.8125rem);
color: $dx-muted; color: $dx-muted;
@@ -1938,7 +1938,7 @@ $dx-card-bg: #f5f3f9;
.item-badge { .item-badge {
display: inline-block; display: inline-block;
padding: 3px 10px; padding: 3px 10px;
border-radius: 4px; border-radius: var(--radius-xs, 4px);
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
@@ -1966,7 +1966,7 @@ $dx-card-bg: #f5f3f9;
.item-tag { .item-tag {
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;
border-radius: 12px; border-radius: var(--radius-md, 12px);
font-size: var(--font-size-xs, 0.75rem); font-size: var(--font-size-xs, 0.75rem);
color: #497671; color: #497671;
background: rgba(73, 118, 113, 0.08); background: rgba(73, 118, 113, 0.08);

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

@@ -27,7 +27,7 @@
font-size: var(--font-size-xl, 1.125rem); font-size: var(--font-size-xl, 1.125rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
border: 2px solid #d3dad9; border: 2px solid #d3dad9;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.2s;
@@ -137,7 +137,7 @@
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
border: none; border: none;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
cursor: pointer; cursor: pointer;
font-size: var(--font-size-lg, 1rem); font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -162,7 +162,7 @@
.item-card { .item-card {
background: white; background: white;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
border: 1px solid #d3dad9; border: 1px solid #d3dad9;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
overflow: hidden; overflow: hidden;
@@ -190,7 +190,7 @@
padding-top: 75%; padding-top: 75%;
background: #f5f5f5; background: #f5f5f5;
overflow: hidden; overflow: hidden;
border-radius: 13px; border-radius: var(--radius-lg, 13px);
img { img {
position: absolute; position: absolute;