@keyframes osLightboxMobileAnimation { 0% { transform: translate3d(0%, 10%, 0px) scale(0.9); opacity: 0; } 100% { transform: translate3d(0%, 0%, 0px) scale(1); opacity: 1; } } @media (min-width: 601px) and (max-width: 1050px){ .latepoint-w { // side panel open and summary open &.latepoint-with-summary:not(.latepoint-hide-side-panel){ .latepoint-form-w { border-right: none!important; } .latepoint-lightbox-i, &.latepoint-inline-form .latepoint-booking-form-element { } .latepoint-summary-w { display: none!important; } .latepoint-summary-w .summary-header { text-align: left; span { margin-left: 15px; } } &.latepoint-summary-is-open { .latepoint-summary-w { animation: 0.4s cubic-bezier(0.45, 1, 0.4, 1.1) 0ms LatepointSlideUpMobileSummary; animation-fill-mode: both; } .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .latepoint-lightbox-summary-trigger { display: block; } &.show-summary-on-mobile { .latepoint-booking-form-element:before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); z-index: 3; } .latepoint-lightbox-summary-trigger { display: block; } .latepoint-summary-w { display: block!important; position: fixed; top: 50%; left: 50%; min-width: 300px; width: auto; flex: 1; border-radius: 0; bottom: auto; z-index: 4; overflow: auto; box-shadow: 0px 10px 28px -5px rgba(0,0,0,0.4), 0px 2px 3px 0px rgba(0,0,0,0.4); max-height: 80vh; transform: translate3d(-50%,-50%, 0); .summary-header { .latepoint-lightbox-summary-trigger { padding: 3px 5px; line-height: 1.2; } } .summary-header > div { justify-content: flex-start; } .summary-header span { margin-left: 0; } } } } } } } @media (max-width: 600px) { .latepoint-lightbox-w.latepoint-border-radius-rounded .latepoint-lightbox-i { border-radius: 0; } .latepoint-booking-form-element .os-monthly-calendar-days .os-day.week-day-1 .os-available-slots-tooltip, .latepoint-booking-form-element .os-monthly-calendar-days .os-day.week-day-7 .os-available-slots-tooltip { transform: none; animation: 0.1s ease latepointAvailabilityPopupY; animation-fill-mode: both; } .latepoint-booking-form-element .os-monthly-calendar-days .os-day.week-day-7 .os-available-slots-tooltip { left: auto; right: 0; } .latepoint-booking-form-element .os-monthly-calendar-days .os-day.week-day-1 .os-available-slots-tooltip { left: 0; } .latepoint-w { &.latepoint-lightbox-form { height: 100%; } .latepoint-booking-form-element { flex: 1; .latepoint-form-w { width: 100%; flex: 1; } } } .summary-header { .checkout-from-summary-panel-btn-wrapper { display: none; } } .latepoint-w .latepoint-summary-w .os-summary-contents-inner .cart-summary-main-section { padding: 0 20px; } .latepoint-summary-w .summary-price-breakdown-wrapper .summary-price-breakdown-inner { padding: 0 20px 20px; } .latepoint-w .latepoint-summary-w .os-summary-contents { overflow: hidden; } .checkout-from-summary-panel-btn-wrapper { &.os-mobile-only { display: block; padding: 10px 20px; background-color: #fff; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid $border-color-light; .checkout-from-summary-panel-btn { justify-content: space-between; } + .os-summary-contents-inner { padding-top: 10px; } } } .le-day-view-wrapper .le-day-schedule-wrapper { padding: 30px 15px; } .latepoint-calendar-controls { flex-wrap: wrap; .le-navigation .le-today { display: none; } .le-week, .le-month { white-space: nowrap; flex: 0 0 100%; text-align: center; } .le-filter { padding: 10px 12px; span { display: none; } } .le-range-selector { margin-left: 0; } .le-navigation-wrapper { margin-left: auto; border-left: none; } } .latepoint-calendar-week .le-day-weekday-wrapper { position: relative; top: 0; } .latepoint-calendar-filters .le-filters-label { display: none; } .latepoint-calendar-wrapper.show-filters .latepoint-calendar-filters { display: block; .os-form-group + .os-form-group { margin-top: 10px; } select { display: block; width: 100%; } } .latepoint-calendar-week { overflow-x: auto; padding-left: 0; padding-bottom: 10px; grid-template-columns: 200px 200px 200px 200px 200px 200px 200px; .le-day-wrapper { flex: 0 0 100px; } } .latepoint-calendar-month { grid-template-columns: 200px 200px 200px 200px 200px 200px 200px; overflow-x: auto; } .latepoint-calendar-week .le-day-wrapper:first-child .day-schedule-timeslot-value { display: none; } .le-day-view-wrapper .le-day-info-section { padding: 20px 15px; } .le-day-view-wrapper .le-day-info-section .le-day-info .le-day-number { font-size: $font-size-base * 3; } .le-day-view-wrapper .le-day-info-section .le-day-filters-wrapper { margin-left: 15px; padding-left: 15px; } .le-day-view-wrapper .le-day-info-section .le-day-heading { margin-bottom: 7px; font-size: floor($font-size-base * 1.4); } .latepoint-lightbox-w .latepoint-lightbox-i .latepoint-lightbox-close { top: 5px; right: 5px; } .latepoint-clean-body.with-pattern > .latepoint-w { padding: 0px; } .latepoint-w { .manage-order-wrapper, .manage-booking-wrapper { margin: 0; .manage-booking-controls { padding: 10px; gap: 10px; } .manage-booking-inner { padding: 20px; padding-top: 100px; } } } .latepoint-resources-items-w { display: block; .resource-item { margin-bottom: 20px; } } .os-items { .os-item { &.with-details { .os-item-i { .os-item-img-w { transform-origin: center center; transform: translateY(-8px) scale(0.9); } .os-item-name-w { transform: translateY(-18px); } .os-item-details-popup-btn { opacity: 1; transform: translateY(-7px); span { } } } } } } .latepoint-w .latepoint-summary-w .summary-header .summary-header-inner { padding-left: 15px; padding-right: 15px; } .latepoint-w .latepoint-summary-w .os-summary-contents-inner .os-summary-contents-inner-top { padding: 0 20px; } .latepoint-w .latepoint-booking-form-element.latepoint-border-radius-rounded .latepoint-summary-w { border-radius: 0px!important; } .latepoint-w { .os-form-group.os-form-phonefield-group .lp_iti__selected-dial-code { font-size: 16px!important; } &.latepoint-with-summary { .latepoint-summary-w .summary-header { text-align: left; >div { justify-content: flex-start; } span { } } &.latepoint-summary-is-open { .latepoint-summary-w { animation: 0.4s cubic-bezier(0.45, 1, 0.4, 1.1) 0ms LatepointSlideUpMobileSummary; animation-fill-mode: both; } .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .latepoint-lightbox-summary-trigger { display: block; } &.show-summary-on-mobile { .latepoint-booking-form-element:before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); z-index: 3; } .latepoint-lightbox-summary-trigger { display: block; } .latepoint-summary-w { display: flex!important; position: fixed; top: 50%; left: 50%; width: auto; flex: 1; border-radius: 0; bottom: auto; z-index: 4; overflow: hidden; box-shadow: 0px 10px 28px -5px rgba(0,0,0,0.4), 0px 2px 3px 0px rgba(0,0,0,0.4); max-height: 90vh; max-width: 90vw; min-width: 80vw; transform: translate3d(-50%,-50%, 0); .latepoint-lightbox-summary-trigger { line-height: 1; right: 15px; padding: 3px; i { display: block; } } } } } } } .latepoint-w .latepoint-booking-form-element.latepoint-border-radius-rounded { border-radius: 0px; } .latepoint-w.latepoint-with-summary.latepoint-summary-is-open.show-summary-on-mobile .latepoint-booking-form-element.latepoint-border-radius-rounded .latepoint-summary-w { border-radius: $rounded-borders-radius; } .qr-code-on-full-summary { display: none!important; } .customer-bookings-tiles, .customer-orders-tiles { grid-template-columns: 1fr; } .latepoint-booking-form-element .step-verify-w .coupon-code-wrapper-on-verify .coupon-code-input-w input.coupon-code-input { font-size: 16px!important; } .latepoint-w { .latepoint-booking-form-element .latepoint-progress ul li { margin: 0px 3px; } .latepoint-booking-form-element .latepoint-form-w .latepoint-footer .latepoint-btn { padding: 10px; } .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-child-count { display: none; } &.latepoint-hide-side-panel .latepoint-booking-form-element .step-datepicker-w { padding: 0px; } &.latepoint-hide-side-panel { .latepoint-booking-form-element { .os-items.os-as-grid .os-item .os-item-i .os-item-img-w.os-with-avatar { padding: 5px; } .latepoint-form-w { .latepoint-body { padding-left: 15px; padding-right: 15px; } } } } .os-form-group { &.os-form-textfield-group{ textarea, select, input[type="password"], input[type="email"], input[type="number"], input[type="text"], input[type="tel"] { &.os-form-control { font-size: floor($font-size-base * 1.2)!important; } } } } .customer-bookings-tiles .customer-booking { flex: 1; } .customer-dashboard-tabs { overflow-x: auto; a { margin: 0px 0px; text-align: center; white-space: nowrap; & + a { margin-left: 15px; } &:after { bottom: 0px; top: auto; height: 0px; width: 100%; } &.active { &:after { height: 3px; } } } } .latepoint-section-heading-w .heading-extra { display: none; } .latepoint-customer-timezone-selector-w .os-form-group.os-form-select-group { display: block; label { margin-bottom: 5px; } select { width: 100%!important; } } .dp-timeslot { height: 30px; .dp-tick { top: 40px; } } &.latepoint-summary-is-open.show-summary-on-mobile { .latepoint-booking-form-element.current-step-booking__datepicker .latepoint-side-panel { display: none; } } .latepoint-booking-form-element { display: block; height: 100%; &.hidden-buttons { .latepoint-form-w .latepoint-body { } } .latepoint-timezone-selector-w { } &.step-content-loading { .latepoint-timezone-selector-w { display: none!important; } } &.addon-timezone-selector-active { .os-dates-w { } } .lp-options.lp-options-grid { justify-content: space-evenly; &.lp-options-grid-three .lp-option { } } .step-datepicker-w { padding: 10px 0px; } .step-payment-w .payment-total-info { flex-direction: column; align-items: center; .payment-deposit-price-w, .payment-total-price-w { padding: 8px 0px; } .coupon-code-trigger-w { margin-bottom: 5px; a { margin-left: 0px; } } .coupon-code-input-w { margin-left: 0px!important; input.coupon-code-input { font-size: floor($font-size-base * 1.2)!important; -webkit-appearance: none; width: 155px!important; border-radius: 0px!important; } } } .step-services-w { ul.os-services li a { padding: 5px 10px; } ul.os-services li a .service-price-w { padding-left: 5px; margin-left: 5px; } ul.os-services li a .service-img-w { margin-right: 10px; } .os-item-category-w .os-item-category-info .os-item-category-services-count { display: none; } .os-service-durations li .os-duration-value { font-size: 32px; } } .os-weekdays { } .os-monthly-calendar-days { } .os-monthly-calendar-days .os-day { .os-day-number { } } .step-confirmation-w .confirmation-info-w .confirmation-app-info { } .step-confirmation-w .confirmation-info-w .confirmation-customer-info { } .latepoint-side-panel { display: none; width: 100%; flex: 1; } .latepoint-form-w { .item-quantity-selector-w .item-quantity-selector-input { font-size: 16px!important; } .latepoint-heading-w { padding-left: 15px!important; padding-right: 15px!important; } .latepoint-body { padding: 15px; max-height: 100vh; /* Fallback */ max-height: 100dvh; &:after { } } .os-item-details-popup { } .latepoint-footer { } .os-item-details-popup .item-details-popup-content { padding: 40px 15px; .item-details-popup-features { margin-bottom: 20px; } } } &.current-step-booking__datepicker { .latepoint-side-panel { position: absolute; top: 59px; z-index: 999; left: 0px; right: 0px; display: block; flex: 1; padding: 0px; border: none!important; background-color: #fff; .latepoint-step-desc-w, .latepoint-questions, .latepoint-progress { display: none!important; } .latepoint-timezone-selector-w { margin-top: 0px; padding: 10px 15px; border-bottom: 1px solid rgba(0,0,0,0.1); .os-form-group { display: flex; align-items: center; label { margin-bottom: 0px; margin-right: 10px; white-space: nowrap; flex: 1; } select { text-align-last: left; text-align: center; } } } } } } .latepoint-summary-w { display: none!important; } .latepoint-form-w { height: 100%; .latepoint-heading-w { padding-left: 15px!important; } .latepoint-body { padding-left: 15px; padding-right: 15px; } .latepoint-footer { } } .latepoint-lightbox-i { transform: none; animation: 0.4s cubic-bezier(0, 1, 0.51, 1) 0s both osLightboxMobileAnimation; max-height: 100vh; max-height: 100dvh; height: 100vh; /* Fallback */ height: 100dvh; } &.front-lightbox { .latepoint-lightbox-i { max-height: 100vh; /* Fallback */ max-height: 100dvh; } } } .latepoint-lightbox-w { grid-template-columns: 1fr!important; } body.admin-bar { .latepoint-w { .latepoint-lightbox-i { } } } @keyframes osLightboxAnimation { 0% { transform: translate3d(0%, -40%, 0px) scale(1.2); opacity: 0; } 100% { transform: translate3d(0%, -50%, 0px) scale(1); opacity: 1; } } } @media (min-width: 601px) and (max-width: 959px){ .latepoint-lightbox-w { &.latepoint-with-summary { &.latepoint-summary-is-open { .latepoint-booking-form-element { } .latepoint-summary-w { display: flex; } .latepoint-form-w { border-right: 1px solid rgba(0,0,0,0.1); } &.latepoint-hide-side-panel { } &:not(.latepoint-hide-side-panel) { } } } } } @media (min-width: 960px){ .latepoint-w { .summary-boxes-columns { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; .summary-box { flex: 1 1 35%; } } &.latepoint-with-summary { &.latepoint-summary-is-open { .latepoint-booking-form-element { } .latepoint-summary-w { display: flex; } .latepoint-form-w { border-right: 1px solid rgba(0,0,0,0.1); } &.latepoint-hide-side-panel { grid-template-columns: min-content; } } } } .latepoint-inline-form { &.latepoint-with-summary { &.latepoint-summary-is-open { .latepoint-booking-form-element { } &.latepoint-hide-side-panel { .latepoint-booking-form-element { } } } } } }