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

feat: update border styles to use CSS variables for consistency across components

Browse Source
This commit is contained in:
ncoronel
2026-08-12 09:00:13 -03:00
parent 1b19d36e26
commit 23a5ac32cc
23 changed files with 50 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.scss
View File

@@ -17,7 +17,7 @@
.tenant-status__card { .tenant-status__card {
width: min(100%, 34rem); width: min(100%, 34rem);
padding: 2rem; padding: 2rem;
border: 1px solid rgba(32, 32, 32, 0.1); border: 1px solid var(--border-color);
border-radius: 1.5rem; border-radius: 1.5rem;
background-color: rgba(255, 255, 255, 0.92); background-color: rgba(255, 255, 255, 0.92);
box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.1); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.1);
@@ -55,7 +55,7 @@
.tenant-status__spinner { .tenant-status__spinner {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border: 0.25rem solid rgba(32, 32, 32, 0.08); border: 0.25rem solid var(--border-color);
border-top-color: var(--tenant-primary); border-top-color: var(--tenant-primary);
border-radius: 999px; border-radius: 999px;
animation: tenant-status-spin 0.8s linear infinite; animation: tenant-status-spin 0.8s linear infinite;

4
src/app/core/layout/store-layout/store-footer/store-footer.component.scss
View File

@@ -46,7 +46,7 @@
place-items: center; place-items: center;
width: 2.75rem; width: 2.75rem;
height: 2.75rem; height: 2.75rem;
border: 1px dashed rgba(255, 255, 255, 0.35); border: 1px dashed var(--border-color);
border-radius: 999px; border-radius: 999px;
font-size: 1.05rem; font-size: 1.05rem;
font-weight: 700; font-weight: 700;
@@ -134,7 +134,7 @@
order: 2; order: 2;
grid-column: 1 / -1; grid-column: 1 / -1;
width: 100%; width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.3); border-top: 1px solid var(--border-color);
} }
.store-layout__brand-column, .store-layout__brand-column,

13
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@@ -1,11 +1,10 @@
.store-layout__header { .store-layout__header {
color: #ffffff; color: #ffffff;
background-color: transparent; background-color: transparent;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
} }
.store-layout__header-main { .store-layout__header-main {
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid var(--border-color);
} }
.store-layout__brand-slot { .store-layout__brand-slot {
@@ -77,7 +76,7 @@
.store-layout__search-input { .store-layout__search-input {
color: #666666; color: #666666;
border-color: #cccccc; border-color: var(--border-color);
background-color: rgba(255, 255, 255, 0.96); background-color: rgba(255, 255, 255, 0.96);
} }
@@ -86,21 +85,21 @@
} }
.store-layout__search-input:focus { .store-layout__search-input:focus {
border-color: #cccccc; border-color: var(--border-color);
box-shadow: none; box-shadow: none;
outline: none; outline: none;
} }
.store-layout__search-button { .store-layout__search-button {
color: #a0a0a0; color: #a0a0a0;
border-color: #cccccc; border-color: var(--border-color);
background-color: rgba(255, 255, 255, 0.96); background-color: rgba(255, 255, 255, 0.96);
} }
.store-layout__search-button:hover, .store-layout__search-button:hover,
.store-layout__search-button:focus-visible { .store-layout__search-button:focus-visible {
color: #8a8a8a; color: #8a8a8a;
border-color: #cccccc; border-color: var(--border-color);
background-color: #ffffff; background-color: #ffffff;
} }
@@ -172,7 +171,7 @@
} }
.store-layout__mobile-separator { .store-layout__mobile-separator {
border-color: #dddddd; border-color: var(--border-color);
opacity: 1; opacity: 1;
margin: 0 -1rem; margin: 0 -1rem;
} }

2
src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss
View File

@@ -10,7 +10,7 @@
.user-dropdown { .user-dropdown {
display: grid; display: grid;
background: #ffffff; background: #ffffff;
border: 1px solid rgba(32, 32, 32, 0.1); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
padding: 0.75rem; padding: 0.75rem;

2
src/app/core/layout/store-layout/store-layout.component.scss
View File

@@ -29,7 +29,7 @@
z-index: 1050; z-index: 1050;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.08); border: 1px solid var(--border-color);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
overflow: hidden; overflow: hidden;
animation: store-layout-slide-down 0.2s ease-out; animation: store-layout-slide-down 0.2s ease-out;

10
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@@ -77,7 +77,7 @@ h1 {
.modal-showcase__result { .modal-showcase__result {
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
border: 1px dashed rgba(32, 32, 32, 0.14); border: 1px dashed var(--border-color);
border-radius: 0.875rem; border-radius: 0.875rem;
background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98)); background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98));
color: #495057; color: #495057;
@@ -231,7 +231,7 @@ h1 {
justify-content: center; justify-content: center;
height: 120px; height: 120px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #dee2e6; border: 1px solid var(--border-color);
padding: 1rem; padding: 1rem;
overflow: hidden; overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -281,7 +281,7 @@ h1 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 8px; border-radius: 8px;
border: 1px solid #dee2e6; border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
background-color: #ffffff; background-color: #ffffff;
transition: transition:
@@ -296,7 +296,7 @@ h1 {
&__preview { &__preview {
height: 80px; height: 80px;
width: 100%; width: 100%;
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid var(--border-color);
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
&:hover { &:hover {
@@ -337,7 +337,7 @@ h1 {
background-color: #eaeaea; background-color: #eaeaea;
padding: 1.5rem; padding: 1.5rem;
border-radius: 8px; border-radius: 8px;
border: 1px solid #dee2e6; border: 1px solid var(--border-color);
} }
&__row { &__row {

2
src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss
View File

@@ -54,7 +54,7 @@
} }
&__text-option { &__text-option {
border: 1px solid #dcdcdc; border: 1px solid var(--border-color);
background: #ffffff; background: #ffffff;
color: #666666; color: #666666;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;

4
src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss
View File

@@ -1,6 +1,6 @@
:host { :host {
display: block; display: block;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--border-color);
} }
:host(:last-child) { :host(:last-child) {
@@ -24,7 +24,7 @@
aspect-ratio: 4 / 3; aspect-ratio: 4 / 3;
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #eaeaea; border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
img { img {

2
src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss
View File

@@ -23,7 +23,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem 0; padding: 1rem 0;
border-bottom: 1px solid #DDDDDD; border-bottom: 1px solid var(--border-color);
} }
.skeleton-item:last-child { .skeleton-item:last-child {

10
src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss
View File

@@ -27,7 +27,7 @@
.tickets-list__generating-spinner { .tickets-list__generating-spinner {
width: 24px; width: 24px;
height: 24px; height: 24px;
border: 3px solid #dce8e0; border: 3px solid var(--border-color);
border-top-color: var(--tenant-primary, #009933); border-top-color: var(--tenant-primary, #009933);
border-radius: 50%; border-radius: 50%;
animation: tickets-spinner 0.75s linear infinite; animation: tickets-spinner 0.75s linear infinite;
@@ -39,7 +39,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--border-color);
} }
.tickets-list__header--inactive { .tickets-list__header--inactive {
@@ -89,7 +89,7 @@
} }
.tickets-list app-ticket { .tickets-list app-ticket {
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--border-color);
} }
.tickets-list__empty { .tickets-list__empty {
@@ -104,7 +104,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--border-color);
} }
.tickets-list__skeleton-selection, .tickets-list__skeleton-selection,
@@ -130,7 +130,7 @@
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid var(--border-color);
} }
.tickets-list__skeleton-check, .tickets-list__skeleton-check,

2
src/app/features/store/pages/checkout-page/checkout-page.component.scss
View File

@@ -64,7 +64,7 @@
.checkout-page__spinner { .checkout-page__spinner {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border: 0.25rem solid rgba(32, 32, 32, 0.08); border: 0.25rem solid var(--border-color);
border-top-color: var(--tenant-primary); border-top-color: var(--tenant-primary);
border-radius: 50%; border-radius: 50%;
animation: checkout-page-spin 0.8s linear infinite; animation: checkout-page-spin 0.8s linear infinite;

2
src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss
View File

@@ -15,7 +15,7 @@
.faq-page__empty { .faq-page__empty {
padding: 1rem 0; padding: 1rem 0;
border-bottom: 1px solid #dedede; border-bottom: 1px solid var(--border-color);
color: #888888; color: #888888;
font-size: 0.8125rem; font-size: 0.8125rem;
} }

2
src/app/features/store/pages/login-page/login-page.component.scss
View File

@@ -31,6 +31,6 @@
.login-page__divider-dot { .login-page__divider-dot {
width: 16px; width: 16px;
height: 16px; height: 16px;
border-color: #d9d9d9 !important; border-color: var(--border-color) !important;
background-color: #ffffff; background-color: #ffffff;
} }

4
src/app/features/store/pages/product-detail-page/product-detail-page.component.scss
View File

@@ -14,7 +14,7 @@
} }
&__divider { &__divider {
border-top: 1px solid #e6e6e6; border-top: 1px solid var(--border-color);
} }
&__title { &__title {
@@ -25,7 +25,7 @@
} }
&__title-price-divider { &__title-price-divider {
border-top: 1px solid #e6e6e6; border-top: 1px solid var(--border-color);
} }
&__price-group { &__price-group {

2
src/app/shared/components/accordion/accordion.component.scss
View File

@@ -4,7 +4,7 @@
} }
.accordion { .accordion {
--bs-accordion-border-color: #dedede; --bs-accordion-border-color: var(--border-color);
--bs-accordion-border-radius: 0; --bs-accordion-border-radius: 0;
--bs-accordion-inner-border-radius: 0; --bs-accordion-inner-border-radius: 0;
--bs-accordion-bg: transparent; --bs-accordion-bg: transparent;

2
src/app/shared/components/cart-item/cart-item.component.scss
View File

@@ -43,7 +43,7 @@
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #eaeaea; border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
img { img {

2
src/app/shared/components/global-loading/global-loading.component.scss
View File

@@ -12,7 +12,7 @@
.global-loading__spinner { .global-loading__spinner {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border: 0.25rem solid rgba(32, 32, 32, 0.12); border: 0.25rem solid var(--border-color);
border-top-color: var(--tenant-primary, #6376f3); border-top-color: var(--tenant-primary, #6376f3);
border-radius: 50%; border-radius: 50%;
animation: global-loading-spin 0.75s linear infinite; animation: global-loading-spin 0.75s linear infinite;

2
src/app/shared/components/input/input.component.scss
View File

@@ -23,7 +23,7 @@
min-height: 40px; min-height: 40px;
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
border-radius: 5px; border-radius: 5px;
border-color: #cccccc; border-color: var(--border-color);
color: #666666; color: #666666;
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;

34
src/app/shared/components/product-row-card/product-row-card.component.scss
View File

@@ -10,7 +10,7 @@
gap: 2rem; gap: 2rem;
width: 100%; width: 100%;
padding: 2rem 0; padding: 2rem 0;
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid var(--border-color);
background: transparent; background: transparent;
&__title { &__title {
@@ -41,7 +41,7 @@
&__actions { &__actions {
display: grid; display: grid;
grid-template-columns: minmax(0, auto) 160px; grid-template-columns: minmax(0, auto) minmax(0, 230px);
align-items: stretch; align-items: stretch;
gap: 0.75rem 2.5rem; gap: 0.75rem 2.5rem;
} }
@@ -54,6 +54,11 @@
gap: 0.5rem; gap: 0.5rem;
} }
&__buttons {
width: 100%;
max-width: 230px;
}
&__controls { &__controls {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -62,8 +67,6 @@
} }
&__btn-wrapper { &__btn-wrapper {
min-width: 160px;
app-button { app-button {
display: block; display: block;
width: 100%; width: 100%;
@@ -83,26 +86,8 @@
min-width: 0; min-width: 0;
} }
&__actions,
&__summary,
&__buttons {
display: flex;
flex-direction: row;
align-items: center;
}
&__actions { &__actions {
flex: 0 0 auto; flex: 0 0 auto;
gap: 0.75rem;
}
&__summary,
&__buttons {
gap: 0.5rem;
}
&__price {
align-self: center;
} }
&__selectors { &__selectors {
@@ -119,9 +104,6 @@
} }
} }
&__btn-wrapper {
min-width: 140px;
}
} }
} }
@@ -131,7 +113,7 @@
flex-direction: column; flex-direction: column;
&__actions { &__actions {
grid-template-columns: minmax(0, 1fr) 160px; grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
} }
} }
} }

2
src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss
View File

@@ -19,7 +19,7 @@
padding: 30px 20px; padding: 30px 20px;
overflow: hidden; overflow: hidden;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #dedede; border: 1px solid var(--border-color);
border-radius: 7px; border-radius: 7px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

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

@@ -3,7 +3,7 @@
} }
.quantity-selector { .quantity-selector {
border: 1px solid #d8d8d8; border: 1px solid var(--border-color);
width: 78px; width: 78px;
height: 40px; height: 40px;
min-height: 40px; min-height: 40px;
@@ -42,7 +42,7 @@
width: 62px; width: 62px;
height: 28px; height: 28px;
min-height: 28px; min-height: 28px;
border-color: #cccccc; border-color: var(--border-color);
background-color: #ffffff; background-color: #ffffff;
.quantity-selector__button { .quantity-selector__button {

2
src/app/shared/components/variant-selector/variant-selector.component.scss
View File

@@ -19,7 +19,7 @@
max-width: none; max-width: none;
height: 38px; height: 38px;
color: #666666; color: #666666;
border-color: #cccccc; border-color: var(--border-color);
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;

3
src/styles.scss
View File

@@ -8,6 +8,9 @@
:root, :root,
app-root { app-root {
--border-color: #dddddd;
--bs-border-color: var(--border-color);
--bs-border-color-translucent: var(--border-color);
--bs-body-font-family: 'Gotham', sans-serif; --bs-body-font-family: 'Gotham', sans-serif;
--color-primary: var(--tenant-primary); --color-primary: var(--tenant-primary);
--color-primary-rgb: var(--tenant-primary-rgb); --color-primary-rgb: var(--tenant-primary-rgb);