[Back] @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 {
}
}
}
}
}
}