diff --git a/src/app/app.scss b/src/app/app.scss index e54216c..4c44030 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -17,7 +17,7 @@ .tenant-status__card { width: min(100%, 34rem); padding: 2rem; - border: 1px solid rgba(32, 32, 32, 0.1); + border: 1px solid var(--border-color); border-radius: 1.5rem; background-color: rgba(255, 255, 255, 0.92); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.1); @@ -55,7 +55,7 @@ .tenant-status__spinner { width: 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-radius: 999px; animation: tenant-status-spin 0.8s linear infinite; diff --git a/src/app/core/layout/store-layout/store-footer/store-footer.component.scss b/src/app/core/layout/store-layout/store-footer/store-footer.component.scss index 768be52..e96e8b2 100644 --- a/src/app/core/layout/store-layout/store-footer/store-footer.component.scss +++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.scss @@ -46,7 +46,7 @@ place-items: center; width: 2.75rem; height: 2.75rem; - border: 1px dashed rgba(255, 255, 255, 0.35); + border: 1px dashed var(--border-color); border-radius: 999px; font-size: 1.05rem; font-weight: 700; @@ -134,7 +134,7 @@ order: 2; grid-column: 1 / -1; width: 100%; - border-top: 1px solid rgba(255, 255, 255, 0.3); + border-top: 1px solid var(--border-color); } .store-layout__brand-column, diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.scss b/src/app/core/layout/store-layout/store-header/store-header.component.scss index 7aa474e..2667c6f 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.scss +++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss @@ -1,11 +1,10 @@ .store-layout__header { color: #ffffff; background-color: transparent; - box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); } .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 { @@ -77,7 +76,7 @@ .store-layout__search-input { color: #666666; - border-color: #cccccc; + border-color: var(--border-color); background-color: rgba(255, 255, 255, 0.96); } @@ -86,21 +85,21 @@ } .store-layout__search-input:focus { - border-color: #cccccc; + border-color: var(--border-color); box-shadow: none; outline: none; } .store-layout__search-button { color: #a0a0a0; - border-color: #cccccc; + border-color: var(--border-color); background-color: rgba(255, 255, 255, 0.96); } .store-layout__search-button:hover, .store-layout__search-button:focus-visible { color: #8a8a8a; - border-color: #cccccc; + border-color: var(--border-color); background-color: #ffffff; } @@ -172,7 +171,7 @@ } .store-layout__mobile-separator { - border-color: #dddddd; + border-color: var(--border-color); opacity: 1; margin: 0 -1rem; } diff --git a/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss b/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss index 939ff63..022069a 100644 --- a/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss +++ b/src/app/core/layout/store-layout/store-header/user-dropdown/user-dropdown.component.scss @@ -10,7 +10,7 @@ .user-dropdown { display: grid; background: #ffffff; - border: 1px solid rgba(32, 32, 32, 0.1); + border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16); padding: 0.75rem; diff --git a/src/app/core/layout/store-layout/store-layout.component.scss b/src/app/core/layout/store-layout/store-layout.component.scss index 9646518..260561d 100644 --- a/src/app/core/layout/store-layout/store-layout.component.scss +++ b/src/app/core/layout/store-layout/store-layout.component.scss @@ -29,7 +29,7 @@ z-index: 1050; background-color: #ffffff; 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); overflow: hidden; animation: store-layout-slide-down 0.2s ease-out; diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss index 2666d62..a22038e 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss @@ -77,7 +77,7 @@ h1 { .modal-showcase__result { padding: 0.875rem 1rem; - border: 1px dashed rgba(32, 32, 32, 0.14); + border: 1px dashed var(--border-color); border-radius: 0.875rem; background: linear-gradient(180deg, rgba(248, 248, 248, 0.92), rgba(255, 255, 255, 0.98)); color: #495057; @@ -231,7 +231,7 @@ h1 { justify-content: center; height: 120px; border-radius: 8px; - border: 1px solid #dee2e6; + border: 1px solid var(--border-color); padding: 1rem; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); @@ -281,7 +281,7 @@ h1 { display: flex; flex-direction: column; border-radius: 8px; - border: 1px solid #dee2e6; + border: 1px solid var(--border-color); overflow: hidden; background-color: #ffffff; transition: @@ -296,7 +296,7 @@ h1 { &__preview { height: 80px; width: 100%; - border-bottom: 1px solid #dee2e6; + border-bottom: 1px solid var(--border-color); transition: opacity 0.2s ease; &:hover { @@ -337,7 +337,7 @@ h1 { background-color: #eaeaea; padding: 1.5rem; border-radius: 8px; - border: 1px solid #dee2e6; + border: 1px solid var(--border-color); } &__row { diff --git a/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss b/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss index 8812d34..4cda36a 100644 --- a/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss +++ b/src/app/features/store/components/product-attribute-selector/product-attribute-selector.component.scss @@ -54,7 +54,7 @@ } &__text-option { - border: 1px solid #dcdcdc; + border: 1px solid var(--border-color); background: #ffffff; color: #666666; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; diff --git a/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss index 98e50d0..4c43390 100644 --- a/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss +++ b/src/app/features/store/pages/account-page/components/purchase-item/purchase-item.scss @@ -1,6 +1,6 @@ :host { display: block; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--border-color); } :host(:last-child) { @@ -24,7 +24,7 @@ aspect-ratio: 4 / 3; border-radius: 5px 0 0 5px; background-color: #ffffff; - border: 1px solid #eaeaea; + border: 1px solid var(--border-color); overflow: hidden; img { diff --git a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss index b6ce189..ddc081b 100644 --- a/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss +++ b/src/app/features/store/pages/account-page/components/purchase-list/purchase-list.scss @@ -23,7 +23,7 @@ justify-content: space-between; align-items: center; padding: 1rem 0; - border-bottom: 1px solid #DDDDDD; + border-bottom: 1px solid var(--border-color); } .skeleton-item:last-child { diff --git a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss b/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss index c12b974..7a6f7d1 100644 --- a/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss +++ b/src/app/features/store/pages/account-page/pages/tickets-page/tickets-page.scss @@ -27,7 +27,7 @@ .tickets-list__generating-spinner { width: 24px; height: 24px; - border: 3px solid #dce8e0; + border: 3px solid var(--border-color); border-top-color: var(--tenant-primary, #009933); border-radius: 50%; animation: tickets-spinner 0.75s linear infinite; @@ -39,7 +39,7 @@ align-items: center; justify-content: space-between; padding-bottom: 12px; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--border-color); } .tickets-list__header--inactive { @@ -89,7 +89,7 @@ } .tickets-list app-ticket { - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--border-color); } .tickets-list__empty { @@ -104,7 +104,7 @@ align-items: center; justify-content: space-between; padding-bottom: 12px; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--border-color); } .tickets-list__skeleton-selection, @@ -130,7 +130,7 @@ align-items: center; gap: 16px; padding: 16px 0; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid var(--border-color); } .tickets-list__skeleton-check, diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.scss b/src/app/features/store/pages/checkout-page/checkout-page.component.scss index 046e5c5..04b30ae 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.scss +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.scss @@ -64,7 +64,7 @@ .checkout-page__spinner { width: 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-radius: 50%; animation: checkout-page-spin 0.8s linear infinite; diff --git a/src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss b/src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss index eb57672..612fd6e 100644 --- a/src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss +++ b/src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss @@ -15,7 +15,7 @@ .faq-page__empty { padding: 1rem 0; - border-bottom: 1px solid #dedede; + border-bottom: 1px solid var(--border-color); color: #888888; font-size: 0.8125rem; } diff --git a/src/app/features/store/pages/login-page/login-page.component.scss b/src/app/features/store/pages/login-page/login-page.component.scss index e5066bf..b404901 100644 --- a/src/app/features/store/pages/login-page/login-page.component.scss +++ b/src/app/features/store/pages/login-page/login-page.component.scss @@ -31,6 +31,6 @@ .login-page__divider-dot { width: 16px; height: 16px; - border-color: #d9d9d9 !important; + border-color: var(--border-color) !important; background-color: #ffffff; } diff --git a/src/app/features/store/pages/product-detail-page/product-detail-page.component.scss b/src/app/features/store/pages/product-detail-page/product-detail-page.component.scss index 44ec558..41cd7dc 100644 --- a/src/app/features/store/pages/product-detail-page/product-detail-page.component.scss +++ b/src/app/features/store/pages/product-detail-page/product-detail-page.component.scss @@ -14,7 +14,7 @@ } &__divider { - border-top: 1px solid #e6e6e6; + border-top: 1px solid var(--border-color); } &__title { @@ -25,7 +25,7 @@ } &__title-price-divider { - border-top: 1px solid #e6e6e6; + border-top: 1px solid var(--border-color); } &__price-group { diff --git a/src/app/shared/components/accordion/accordion.component.scss b/src/app/shared/components/accordion/accordion.component.scss index 33a9217..4a89553 100644 --- a/src/app/shared/components/accordion/accordion.component.scss +++ b/src/app/shared/components/accordion/accordion.component.scss @@ -4,7 +4,7 @@ } .accordion { - --bs-accordion-border-color: #dedede; + --bs-accordion-border-color: var(--border-color); --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-bg: transparent; diff --git a/src/app/shared/components/cart-item/cart-item.component.scss b/src/app/shared/components/cart-item/cart-item.component.scss index 3004042..3374f75 100644 --- a/src/app/shared/components/cart-item/cart-item.component.scss +++ b/src/app/shared/components/cart-item/cart-item.component.scss @@ -43,7 +43,7 @@ aspect-ratio: 1 / 1; border-radius: 5px 0 0 5px; background-color: #ffffff; - border: 1px solid #eaeaea; + border: 1px solid var(--border-color); overflow: hidden; img { diff --git a/src/app/shared/components/global-loading/global-loading.component.scss b/src/app/shared/components/global-loading/global-loading.component.scss index 1b319be..91dfc74 100644 --- a/src/app/shared/components/global-loading/global-loading.component.scss +++ b/src/app/shared/components/global-loading/global-loading.component.scss @@ -12,7 +12,7 @@ .global-loading__spinner { width: 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-radius: 50%; animation: global-loading-spin 0.75s linear infinite; diff --git a/src/app/shared/components/input/input.component.scss b/src/app/shared/components/input/input.component.scss index b97f02d..d0c4b96 100644 --- a/src/app/shared/components/input/input.component.scss +++ b/src/app/shared/components/input/input.component.scss @@ -23,7 +23,7 @@ min-height: 40px; padding: 0.625rem 1rem; border-radius: 5px; - border-color: #cccccc; + border-color: var(--border-color); color: #666666; font-size: 15px; font-weight: 400; diff --git a/src/app/shared/components/product-row-card/product-row-card.component.scss b/src/app/shared/components/product-row-card/product-row-card.component.scss index 9451a69..7fd147d 100644 --- a/src/app/shared/components/product-row-card/product-row-card.component.scss +++ b/src/app/shared/components/product-row-card/product-row-card.component.scss @@ -10,7 +10,7 @@ gap: 2rem; width: 100%; padding: 2rem 0; - border-bottom: 1px solid #e3e3e3; + border-bottom: 1px solid var(--border-color); background: transparent; &__title { @@ -41,7 +41,7 @@ &__actions { display: grid; - grid-template-columns: minmax(0, auto) 160px; + grid-template-columns: minmax(0, auto) minmax(0, 230px); align-items: stretch; gap: 0.75rem 2.5rem; } @@ -54,6 +54,11 @@ gap: 0.5rem; } + &__buttons { + width: 100%; + max-width: 230px; + } + &__controls { display: flex; align-items: center; @@ -62,8 +67,6 @@ } &__btn-wrapper { - min-width: 160px; - app-button { display: block; width: 100%; @@ -83,26 +86,8 @@ min-width: 0; } - &__actions, - &__summary, - &__buttons { - display: flex; - flex-direction: row; - align-items: center; - } - &__actions { flex: 0 0 auto; - gap: 0.75rem; - } - - &__summary, - &__buttons { - gap: 0.5rem; - } - - &__price { - align-self: center; } &__selectors { @@ -119,9 +104,6 @@ } } - &__btn-wrapper { - min-width: 140px; - } } } @@ -131,7 +113,7 @@ flex-direction: column; &__actions { - grid-template-columns: minmax(0, 1fr) 160px; + grid-template-columns: minmax(0, 1fr) minmax(0, 230px); } } } diff --git a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss b/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss index 16f362e..053295e 100644 --- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss +++ b/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss @@ -19,7 +19,7 @@ padding: 30px 20px; overflow: hidden; background-color: #ffffff; - border: 1px solid #dedede; + border: 1px solid var(--border-color); border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); diff --git a/src/app/shared/components/quantity-selector/quantity-selector.component.scss b/src/app/shared/components/quantity-selector/quantity-selector.component.scss index 241af5d..73e8dac 100644 --- a/src/app/shared/components/quantity-selector/quantity-selector.component.scss +++ b/src/app/shared/components/quantity-selector/quantity-selector.component.scss @@ -3,7 +3,7 @@ } .quantity-selector { - border: 1px solid #d8d8d8; + border: 1px solid var(--border-color); width: 78px; height: 40px; min-height: 40px; @@ -42,7 +42,7 @@ width: 62px; height: 28px; min-height: 28px; - border-color: #cccccc; + border-color: var(--border-color); background-color: #ffffff; .quantity-selector__button { diff --git a/src/app/shared/components/variant-selector/variant-selector.component.scss b/src/app/shared/components/variant-selector/variant-selector.component.scss index 821bec4..76f803e 100644 --- a/src/app/shared/components/variant-selector/variant-selector.component.scss +++ b/src/app/shared/components/variant-selector/variant-selector.component.scss @@ -19,7 +19,7 @@ max-width: none; height: 38px; color: #666666; - border-color: #cccccc; + border-color: var(--border-color); font-size: 14px; cursor: pointer; diff --git a/src/styles.scss b/src/styles.scss index 63dd8cc..a063d3a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -8,6 +8,9 @@ :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; --color-primary: var(--tenant-primary); --color-primary-rgb: var(--tenant-primary-rgb);