114 lines
2.0 KiB
CSS
114 lines
2.0 KiB
CSS
.App {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
.dropdown-toggle::after {
|
|
display: none;
|
|
}
|
|
|
|
.navbar-nav .dropdown-menu {
|
|
position: absolute;
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
/* Navbar search - centered */
|
|
.navbar-search {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Navbar layout - center search bar */
|
|
.navbar .container-fluid {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar .navbar-collapse {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.navbar-search {
|
|
max-width: none;
|
|
flex: 1;
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
|
|
.navbar-search .form-control {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.navbar .container-fluid {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
/* Mobile Sticky Bottom Bar for Item Detail */
|
|
.mobile-sticky-bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
padding: 12px 16px;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
border-top: 1px solid #e0e0e0;
|
|
}
|
|
|
|
/* Mobile-specific styles */
|
|
@media (max-width: 767.98px) {
|
|
/* Make sticky card non-sticky on mobile */
|
|
.sticky-pricing-card {
|
|
position: static !important;
|
|
margin-bottom: 80px;
|
|
}
|
|
}
|
|
|
|
/* Pricing card input sizing - applies to all screen sizes */
|
|
.sticky-pricing-card .form-label {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.sticky-pricing-card .input-group-lg .form-control,
|
|
.sticky-pricing-card .input-group-lg .form-select {
|
|
font-size: 1rem;
|
|
padding: 12px 16px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
/* Style the date input specifically */
|
|
.sticky-pricing-card input[type="date"] {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Make the calendar icon larger on webkit browsers */
|
|
.sticky-pricing-card input[type="date"]::-webkit-calendar-picker-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Time select dropdown */
|
|
.sticky-pricing-card .time-select {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Style options in the time dropdown */
|
|
.sticky-pricing-card .time-select option {
|
|
font-size: 1rem;
|
|
padding: 8px;
|
|
} |