pramod.rai/mediglobe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(styles): moved toast styling to styles from product

Browse Source
This commit is contained in:
Azmat Ali
2026-03-05 15:53:48 +05:30
parent e4c373f050
commit ffb547712b
2 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/product.css
-36
View File
@@ -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
===================================== */
assets/css/styles.css
+40 -2
View File
@@ -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 {