Untitled
unknown
plain_text
6 months ago
4.4 kB
3
Indexable
ion-toolbar { --padding-start: 0px; --padding-end: 0px; --background: transparent; --padding-bottom: 10px; // Bottom padding for toolbar padding-top: env(safe-area-inset-top + 40px); // Default padding adjusted for notch padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); &.guest-toolbar { height: 100px; // Default height for guest users padding: 0; .header-container { padding: 0 10px; } .new-menu-section { padding: 0 15px; } } &.logged-in-toolbar { height: 170px; // Default height for logged-in users padding: 0; .header-container { padding: 0 20px; } .new-menu-section { padding: 0 20px; } } // Media Queries for Responsiveness // Extra Small Devices @media (max-width: 575.98px) { &.guest-toolbar { height: 80px; // Adjusted height for smaller screens } &.logged-in-toolbar { height: 150px; // Adjusted height for smaller screens } .header-background { height: 200px; // Adjusted background height } .header-container { padding-top: 5px; .menu-button { padding-top: env(safe-area-inset-top + 20px); } .logo-label { padding-top: env(safe-area-inset-top + 10px); } .profile { padding-top: env(safe-area-inset-top + 20px); } } .new-menu-section { gap: 15px; // Reduced gap for smaller screens padding-bottom: 15px; } } // Small Devices @media (min-width: 576px) and (max-width: 767.98px) { &.guest-toolbar { height: 90px; // Slightly adjusted height for small devices } &.logged-in-toolbar { height: 160px; // Slightly adjusted height for small devices } .header-background { height: 220px; // Adjusted background height } .header-container { padding-top: 10px; .menu-button { padding-top: env(safe-area-inset-top + 25px); } .logo-label { padding-top: env(safe-area-inset-top + 15px); } .profile { padding-top: env(safe-area-inset-top + 25px); } } } // Medium Devices @media (min-width: 768px) and (max-width: 991.98px) { &.guest-toolbar { height: 100px; // Maintain height for medium devices } &.logged-in-toolbar { height: 170px; // Maintain height for medium devices } .header-background { height: 230px; // Background height for medium devices } .header-container { padding-top: 15px; .menu-button { padding-top: env(safe-area-inset-top + 30px); } .logo-label { padding-top: env(safe-area-inset-top + 20px); } .profile { padding-top: env(safe-area-inset-top + 30px); } } .new-menu-section { gap: 20px; // Adjust gap for medium devices } } // Large Devices @media (min-width: 992px) and (max-width: 1199.98px) { &.guest-toolbar { height: 110px; // Slightly taller for large devices } &.logged-in-toolbar { height: 180px; // Slightly taller for large devices } .header-background { height: 240px; // Background height for large devices } .header-container { padding-top: 20px; .menu-button { padding-top: env(safe-area-inset-top + 35px); } .logo-label { padding-top: env(safe-area-inset-top + 25px); } .profile { padding-top: env(safe-area-inset-top + 35px); } } } // Extra Large Devices @media (min-width: 1200px) { &.guest-toolbar { height: 120px; // Maintain height for extra large screens } &.logged-in-toolbar { height: 190px; // Maintain height for extra large screens } .header-background { height: 250px; // Maintain background height for larger screens } .header-container { padding-top: 20px; .menu-button { padding-top: env(safe-area-inset-top + 35px); } .logo-label { padding-top: env(safe-area-inset-top + 25px); } .profile { padding-top: env(safe-area-inset-top + 35px); } } } }
Editor is loading...
Leave a Comment