From ffb547712b1487bef88412440a878368dc5e5b85 Mon Sep 17 00:00:00 2001 From: Azmat Ali Date: Thu, 5 Mar 2026 15:53:48 +0530 Subject: [PATCH] refactor(styles): moved toast styling to styles from product --- assets/css/product.css | 36 ------------------------------------ assets/css/styles.css | 42 ++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/assets/css/product.css b/assets/css/product.css index 096e48b..83273bc 100644 --- a/assets/css/product.css +++ b/assets/css/product.css @@ -969,42 +969,6 @@ body { gap: var(--space-4); } -/* ── TOAST NOTIFICATION ── */ -.toast { - position: fixed; - bottom: var(--space-6); - right: var(--space-6); - background: var(--gray-800); - color: white; - padding: var(--space-3) var(--space-5); - border-radius: var(--radius-lg); - font-size: var(--text-md); - font-weight: 600; - display: flex; - align-items: center; - gap: var(--space-3); - box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2); - transform: translateY(6rem); - opacity: 0; - transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); - z-index: 9999; - pointer-events: none; -} - -.toast.show { - transform: translateY(0); - opacity: 1; -} -.toast-icon { - font-size: var(--text-xl); -} -.toast-view { - color: var(--yellow); - cursor: pointer; - pointer-events: all; - margin-left: var(--space-2); - text-decoration: underline; -} /* ===================================== FORCE PRODUCT IMAGES TO BE RESPONSIVE ===================================== */ diff --git a/assets/css/styles.css b/assets/css/styles.css index 6218b2c..61abc98 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -234,8 +234,9 @@ nav { .nav-links { display: flex; list-style: none; - gap: var(--space-1); + gap: var(--space-2); align-items: center; + justify-content: center; flex: 1; } @@ -1109,7 +1110,7 @@ footer { margin: 0 auto; padding: 0 var(--space-6); display: grid; - grid-template-columns: 2fr 1fr 1fr 1.4fr; + grid-template-columns: 2fr 1fr 1fr; gap: var(--space-12); margin-bottom: var(--space-8); } @@ -1209,6 +1210,43 @@ footer { color: var(--blue); } +/* ── TOAST NOTIFICATION ── */ +.toast { + position: fixed; + bottom: var(--space-6); + right: var(--space-6); + background: var(--gray-800); + color: white; + padding: var(--space-3) var(--space-5); + border-radius: var(--radius-lg); + font-size: var(--text-md); + font-weight: 600; + display: flex; + align-items: center; + gap: var(--space-3); + box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2); + transform: translateY(6rem); + opacity: 0; + transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); + z-index: 9999; + pointer-events: none; +} + +.toast.show { + transform: translateY(0); + opacity: 1; +} +.toast-icon { + font-size: var(--text-xl); +} +.toast-view { + color: var(--yellow); + cursor: pointer; + pointer-events: all; + margin-left: var(--space-2); + text-decoration: underline; +} + /* ── RESPONSIVE ── */ @media (max-width: 68.75rem) { .products-grid {