From 9b65a99867c01a92ff6b45870f6834cc9913deff Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Sun, 5 Oct 2025 00:08:04 +0300 Subject: [PATCH] cart: clean css 2 --- src/pages/cart/cart.module.css | 516 +++++++++++++++------------------ 1 file changed, 237 insertions(+), 279 deletions(-) diff --git a/src/pages/cart/cart.module.css b/src/pages/cart/cart.module.css index b1f3e16..eab9948 100644 --- a/src/pages/cart/cart.module.css +++ b/src/pages/cart/cart.module.css @@ -5,24 +5,12 @@ overflow: auto; scrollbar-width: none; } + .cartLayout { max-width: 100%; padding: 16px 16px 12vh; } -@media (min-width: 769px) and (max-width: 1024px) { - .cartLayout { - padding: 24px; - } -} - -@media (min-width: 1025px) { - .cartLayout { - padding: 32px; - max-width: 1400px; - margin: 0 auto; - } -} .cartItem { padding: 16px; border-radius: 12px; @@ -31,20 +19,6 @@ justify-content: space-between; } -@media (min-width: 769px) and (max-width: 1024px) { - .cartItem { - padding: 20px; - border-radius: 16px; - } -} - -@media (min-width: 1025px) { - .cartItem { - padding: 24px; - border-radius: 20px; - } -} - .youMightAlsoLikeContainer { display: flex; flex-direction: row; @@ -58,56 +32,6 @@ fill: var(--primary); } -/* Prevent keyboard from appearing automatically on mobile */ -@media (max-width: 768px) { - .cartContainer input, - .cartContainer textarea, - .cartContainer select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-touch-callout: none; - -webkit-tap-highlight-color: transparent; - font-size: 16px; /* Prevents zoom on iOS */ - } - - .cartContainer input:focus, - .cartContainer textarea:focus, - .cartContainer select:focus { - outline: none; - -webkit-tap-highlight-color: transparent; - font-size: 16px; /* Prevents zoom on iOS */ - } - - /* Additional mobile-specific rules */ - .cartContainer input[type="text"], - .cartContainer input[type="email"], - .cartContainer input[type="tel"], - .cartContainer input[type="number"], - .cartContainer textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0; - } -} - -/* Enhanced responsive cart container */ -@media (min-width: 769px) and (max-width: 1024px) { - .cartContainer { - padding: 24px; - } -} - -@media (min-width: 1025px) { - .cartContainer { - padding: 32px; - max-width: 1200px; - margin: 0 auto; - } -} - .cartContent { width: 100%; } @@ -118,21 +42,6 @@ gap: 16px; } -/* Enhanced responsive cart items */ -@media (min-width: 769px) and (max-width: 1024px) { - .cartItems { - gap: 20px; - margin-bottom: 32px; - } -} - -@media (min-width: 1025px) { - .cartItems { - gap: 24px; - margin-bottom: 40px; - } -} - .container { display: flex; gap: 16px; @@ -146,21 +55,6 @@ display: none; } -/* Enhanced responsive container */ -@media (min-width: 769px) and (max-width: 1024px) { - .container { - gap: 20px; - padding: 12px 0; - } -} - -@media (min-width: 1025px) { - .container { - gap: 24px; - padding: 16px 0; - } -} - .menuItemImage { object-fit: cover; border-radius: 8px; @@ -174,19 +68,6 @@ transform: scale(1.05); } -/* Enhanced responsive menu item images */ -@media (min-width: 769px) and (max-width: 1024px) { - .menuItemImage { - border-radius: 12px; - } -} - -@media (min-width: 1025px) { - .menuItemImage { - border-radius: 16px; - } -} - .popularMenuItemImage { width: 73px; height: 73px; @@ -231,59 +112,16 @@ top: 5px !important; } -/* Enhanced responsive item description */ -@media (min-width: 769px) and (max-width: 1024px) { - .itemDescription { - font-size: 14px !important; - } -} - -@media (min-width: 1025px) { - .itemDescription { - font-size: 16px !important; - } -} - .couponApplyIcon { margin-left: 8px; font-size: 14px; } -/* Enhanced responsive coupon apply icon */ -@media (min-width: 769px) and (max-width: 1024px) { - .couponApplyIcon { - margin-left: 10px; - font-size: 16px; - } -} - -@media (min-width: 1025px) { - .couponApplyIcon { - margin-left: 12px; - font-size: 18px; - } -} - .donateHandIcon { color: #ffb700; font-size: 24px; } -/* Enhanced responsive donate hand icon */ -@media (min-width: 769px) and (max-width: 1024px) { - .donateHandIcon { - font-size: 28px; - } -} - -@media (min-width: 1025px) { - .donateHandIcon { - font-size: 32px; - } -} - -/* Enhanced responsive cart sidebar for desktop */ - /* Desktop Cart Layout Styles */ .desktopCartContainer { max-width: 100vw; @@ -550,7 +388,6 @@ box-shadow: 0 0 0 0 !important; } - [data-theme="dark"] .menuItemImage, [data-theme="dark"] .popularMenuItemImage { border-color: rgba(255, 255, 255, 0.1); @@ -561,17 +398,12 @@ color: rgba(255, 255, 255, 0.75) !important; } -/* Enhanced responsive animations */ -@media (prefers-reduced-motion: no-preference) { - .cartItems { - animation: fadeInUp 0.6s ease-out; - } - - .container { - animation: fadeInUp 1s ease-out; - } +.itemDescriptionIcons svg { + width: 18px; + height: 18px; } +/* Keyframe animations */ @keyframes fadeInUp { from { opacity: 0; @@ -583,87 +415,6 @@ } } -/* Enhanced responsive focus states */ -.cartContainer:focus, -.menuItemImage:focus, -.popularMenuItemImage:focus { - outline: 2px solid var(--primary); - outline-offset: 2px; -} - -@media (min-width: 768px) { - .cartContainer:focus, - .menuItemImage:focus, - .popularMenuItemImage:focus { - outline-offset: 4px; - } -} - -/* Enhanced responsive print styles */ -@media print { - .cartContainer { - background-color: white !important; - color: black !important; - } - - .container { - display: none !important; - } -} - -/* Enhanced responsive hover effects */ -@media (hover: hover) { - .menuItemImage:hover, - .popularMenuItemImage:hover { - transform: scale(1.05); - } - - [data-theme="dark"] .orderSummary:hover { - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); - } -} - -/* Enhanced responsive grid for you might also like section */ -@media (min-width: 768px) { - .responsive-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); - gap: 16px; - overflow-x: visible; - } -} - -@media (min-width: 1024px) { - .responsive-grid { - grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); - gap: 20px; - } -} - -@media (min-width: 1280px) { - .responsive-grid { - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - gap: 24px; - } -} - -/* Enhanced responsive animations */ -@media (prefers-reduced-motion: no-preference) { - .desktopCartItem { - animation: fadeInUp 0.6s ease-out; - } - - .desktopRecommendationCard { - animation: fadeInUp 0.6s ease-out; - animation-delay: calc(var(--animation-order, 0) * 0.1s); - } - - .desktopSidebarCard { - animation: fadeInRight 0.6s ease-out; - animation-delay: calc(var(--animation-order, 0) * 0.1s); - } -} - @keyframes fadeInRight { from { opacity: 0; @@ -675,34 +426,166 @@ } } -/* Enhanced focus states for accessibility */ -.desktopCartItem:focus-within, -.desktopRecommendationCard:focus-within, -.desktopSidebarCard:focus-within { - outline: 2px solid #1890ff; - outline-offset: 2px; -} +/* ===== AGGREGATED MEDIA QUERIES ===== */ -.desktopCheckoutButton:focus { - outline: 2px solid #ffffff; - outline-offset: 2px; -} - -/* Print styles for desktop */ -@media print { - .desktopCartContainer { - background: none; - box-shadow: none; +/* Mobile devices (max-width: 768px) */ +@media (max-width: 768px) { + /* Mobile input handling */ + .cartContainer input, + .cartContainer textarea, + .cartContainer select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; + font-size: 16px; /* Prevents zoom on iOS */ } - .desktopMainContent, - .desktopSidebarCard { - box-shadow: none; - border: 1px solid #000; + .cartContainer input:focus, + .cartContainer textarea:focus, + .cartContainer select:focus { + outline: none; + -webkit-tap-highlight-color: transparent; + font-size: 16px; /* Prevents zoom on iOS */ + } + + .cartContainer input[type="text"], + .cartContainer input[type="email"], + .cartContainer input[type="tel"], + .cartContainer input[type="number"], + .cartContainer textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; } } -/* Responsive adjustments for large desktop */ +/* Tablet devices (min-width: 769px and max-width: 1024px) */ +@media (min-width: 769px) and (max-width: 1024px) { + .cartLayout { + padding: 24px; + } + + .cartItem { + padding: 20px; + border-radius: 16px; + } + + .cartContainer { + padding: 24px; + } + + .cartItems { + gap: 20px; + margin-bottom: 32px; + } + + .container { + gap: 20px; + padding: 12px 0; + } + + .menuItemImage { + border-radius: 12px; + } + + .itemDescription { + font-size: 14px !important; + } + + .couponApplyIcon { + margin-left: 10px; + font-size: 16px; + } + + .donateHandIcon { + font-size: 28px; + } +} + +/* Desktop devices (min-width: 1025px) */ +@media (min-width: 1025px) { + .cartLayout { + padding: 32px; + max-width: 1400px; + margin: 0 auto; + } + + .cartItem { + padding: 24px; + border-radius: 20px; + } + + .cartContainer { + padding: 32px; + max-width: 1200px; + margin: 0 auto; + } + + .cartItems { + gap: 24px; + margin-bottom: 40px; + } + + .container { + gap: 24px; + padding: 16px 0; + } + + .menuItemImage { + border-radius: 16px; + } + + .itemDescription { + font-size: 16px !important; + } + + .couponApplyIcon { + margin-left: 12px; + font-size: 18px; + } + + .donateHandIcon { + font-size: 32px; + } +} + +/* Large screens (min-width: 768px) */ +@media (min-width: 768px) { + .cartContainer:focus, + .menuItemImage:focus, + .popularMenuItemImage:focus { + outline-offset: 4px; + } + + .responsive-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: 16px; + overflow-x: visible; + } +} + +/* Extra large screens (min-width: 1024px) */ +@media (min-width: 1024px) { + .responsive-grid { + grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); + gap: 20px; + } +} + +/* Large desktop screens (min-width: 1280px) */ +@media (min-width: 1280px) { + .responsive-grid { + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: 24px; + } +} + +/* Extra large desktop screens (min-width: 1440px) */ @media (min-width: 1440px) { .desktopCartContainer { max-width: 100vw; @@ -736,7 +619,82 @@ } } -.itemDescriptionIcons svg { - width: 18px; - height: 18px; +/* Reduced motion preference */ +@media (prefers-reduced-motion: no-preference) { + .cartItems { + animation: fadeInUp 0.6s ease-out; + } + + .container { + animation: fadeInUp 1s ease-out; + } + + .desktopCartItem { + animation: fadeInUp 0.6s ease-out; + } + + .desktopRecommendationCard { + animation: fadeInUp 0.6s ease-out; + animation-delay: calc(var(--animation-order, 0) * 0.1s); + } + + .desktopSidebarCard { + animation: fadeInRight 0.6s ease-out; + animation-delay: calc(var(--animation-order, 0) * 0.1s); + } } + +/* Hover effects for devices that support hover */ +@media (hover: hover) { + .menuItemImage:hover, + .popularMenuItemImage:hover { + transform: scale(1.05); + } + + [data-theme="dark"] .orderSummary:hover { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); + } +} + +/* Print styles */ +@media print { + .cartContainer { + background-color: white !important; + color: black !important; + } + + .container { + display: none !important; + } + + .desktopCartContainer { + background: none; + box-shadow: none; + } + + .desktopMainContent, + .desktopSidebarCard { + box-shadow: none; + border: 1px solid #000; + } +} + +/* Focus states for accessibility */ +.cartContainer:focus, +.menuItemImage:focus, +.popularMenuItemImage:focus { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +.desktopCartItem:focus-within, +.desktopRecommendationCard:focus-within, +.desktopSidebarCard:focus-within { + outline: 2px solid #1890ff; + outline-offset: 2px; +} + +.desktopCheckoutButton:focus { + outline: 2px solid #ffffff; + outline-offset: 2px; +} \ No newline at end of file