cart: clean css 2
This commit is contained in:
@@ -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 ===== */
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
.desktopCheckoutButton:focus {
|
||||
outline: 2px solid #ffffff;
|
||||
outline-offset: 2px;
|
||||
.cartContainer input:focus,
|
||||
.cartContainer textarea:focus,
|
||||
.cartContainer select:focus {
|
||||
outline: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: 16px; /* Prevents zoom on iOS */
|
||||
}
|
||||
|
||||
/* Print styles for desktop */
|
||||
@media print {
|
||||
.desktopCartContainer {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.desktopMainContent,
|
||||
.desktopSidebarCard {
|
||||
box-shadow: none;
|
||||
border: 1px solid #000;
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user