FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
latepoint
/
lib
/
assets
/
stylesheets
/
front
Edit File: _customer_dashboard.scss
.latepoint { .customer-dashboard-tabs { display: flex; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin: 20px 0px 30px; a { display: block; padding: 10px 0px; font-weight: $body-font-weight-bold; text-decoration: none; color: $color-faded; position: relative; font-size: floor($font-size-base * 1.4); margin-right: 30px; &:focus, &:hover { text-decoration: none; color: $body-color; } &:after { content: ""; height: 2px; background-color: $brand-primary; left: 0px; bottom: -1px; display: block; position: absolute; } &.active { color: $brand-primary; &:after { width: 100%; } } } } } .customer-orders-tiles { display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr; .customer-order { background: #FFFFFF; border: 1px solid #ddd; padding: 25px; color: #222; align-self: flex-start; position: relative; border-radius: $border-radius; .customer-order-confirmation { font-size: floor($font-size-base * 1.7); font-weight: $body-font-weight-bold; color: $headings-color; } .customer-order-datetime { color: $color-faded; font-size: $font-size-base; margin-bottom: 20px; } .summary-price-item-w.spi-total { border-top-width: 2px; } .customer-order-bottom-actions { display: flex; gap: 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid $border-color-light; } } } .customer-bookings-tiles { display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 40px; .new-booking-tile { border: 2px dotted color-mix(in srgb, $brand-primary 20%, transparent); opacity: 0.7; display: flex; flex-direction: column; text-align: center; color: $brand-primary; position: relative; padding: 30px 20px; min-height: 100px; text-decoration: none!important; border-radius: $border-radius; i, span { display: block; } i { margin-top: auto; font-size: floor($font-size-base * 1.4); } span { margin-top: 15px; margin-bottom: auto; font-weight: $body-font-weight-bold; font-size: floor($font-size-base * 1.4); } &:hover { opacity: 1; border-color: $brand-primary; border-style: solid; } &.os-loading { color: transparent; &:before { @include loading-circle($brand-primary, 30px); } } } .customer-booking { background: #FFFFFF; border: 1px solid #ddd; padding: 25px; color: #222; align-self: flex-start; position: relative; border-radius: $border-radius; .bt-payment-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid $border-color-light; .bt-balance-info { display: flex; align-items: center; } .bt-balance-label { color: $color-faded; } .bt-balance-amount { margin-left: auto; font-weight: $body-font-weight-bold; color: $headings-color; font-size: floor($font-size-base * 1.4); } .bt-balance-pay-link { margin-left: auto; display: flex; padding-top: 5px; a { font-size: $font-size-base; text-decoration: none; margin-left: auto; color: $brand-primary; border-bottom: 1px dotted $brand-primary; display: inline-block; position: relative; &:hover { border-bottom-style: solid; } &.os-loading { border-bottom-color: transparent; color: transparent; &:before { @include loading-circle($brand-primary, 15px); } } } } } } h6.customer-booking-service-name { color: $headings-color; padding-bottom: 5px; margin: 0px; text-align: left; text-transform: none; font-size: floor($headings-font-size * 1.4); line-height: 1.2; } .part-of-bundle-message { padding: 8px; background-color: #f1f3ff; margin-bottom: 15px; font-size: floor($font-size-base * 0.8); a { color: $brand-primary; text-decoration: none; border-bottom: 1px dotted $brand-primary; } } .customer-booking-datetime { margin-bottom: 10px; color: $headings-color; span { color: $color-faded; } } .customer-booking-service-color { height: 1px; background-color: #eee; } .customer-booking-info { margin: 20px 0px; padding: 0px; font-size: floor($font-size-base * 1.1); .customer-booking-info-row { display: flex; margin: 10px 0px; } .booking-info-label { flex: 0 1 80px; color: $color-faded; } .booking-info-value { font-weight: $body-font-weight-bold; &.status-approved, &.status-pending, &.status-cancelled { font-size: 13px; padding: 2px 5px; } &.status-approved { background-color: #45b782; color: #fff; } &.status-pending { background-color: #fde29f; color: #3a2f15; } &.status-cancelled { background-color: #e63c26; color: #fff; } } } .customer-booking-buttons { display: flex; gap: 20px; padding-bottom: 10px; .latepoint-btn { display: block; padding: 5px 0px; white-space: nowrap; font-size: 14px; i + span { margin-left: 4px; } &.latepoint-btn { } } .latepoint-request-booking-cancellation { } } } .latepoint-customer-timezone-selector-w { position: relative; margin-top: -10px; &.os-loading { label { position: relative; &:before { @include loading-circle($color: $body-color, $width: 12px); right: auto; left: -15px; top: 50%; z-index: 9999; } } } .os-form-group.os-form-select-group { display: flex; align-items: center; label { display: block !important; font-size: floor($font-size-base * 1.1); font-weight: $body-font-weight-bold; color: $color-faded; white-space: nowrap; margin-right: 5px; margin-bottom: 0px; margin-left: auto; } select.os-form-control { width: 240px; height: 34px !important; padding: 0px 3px !important; } } } .customer-password-form-w { margin-top: 40px; } .os-zoom-info-link { background-color: #eff5ff; border: 1px solid #bcc6f1; border-bottom-color: darken(#bcc6f1, 5%); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05); display: flex; align-items: center; margin-top: 20px; font-weight: $body-font-weight-bold; img { display: block; width: 20px; height: 20px; margin: 5px 10px; flex: 0; } a { flex: 1; font-size: floor($font-size-base * 1); display: block; padding: 10px 25px 10px 10px; position: relative; text-decoration: none; background-color: rgba(255, 255, 255, 0.3); white-space: nowrap; color: $brand-primary; &:hover { background-color: #fff; } &:before { @include latepointfont("\e904"); position: absolute; top: 50%; right: 10px; font-size: 8px; transform: translateY(-50%); } } } .load-booking-summary-btn-w { a { } } .customer-booking-bottom-actions { display: flex; align-items: center; gap: 20px; padding-top: 15px; margin-top: 10px; border-top: 1px solid #eee; justify-content: stretch; flex-wrap: wrap; .latepoint-btn { padding: 7px 10px; justify-content: center; align-items: center; white-space: nowrap; display: flex; } > div { flex: 1; } } .reschedule-calendar-wrapper { @import "../shared/step_datepicker"; .os-monthly-calendar-days { } .calendar-style-modern { .os-weekdays { padding-top: 15px; } } .os-dates-w { } .os-current-month-label-w { .os-month-next-btn { right: 0; } .os-month-prev-btn { left: 0; } .os-current-month-label { margin: 0; } } } .latepoint-lightbox-w { .reschedule-confirmation-wrapper { text-align: center; .icon-w { margin-bottom: 20px; i { background: #d1ffdd; padding: 15px; border-radius: 40px; color: #18a35b; font-size: 28px; display: inline-block; } } h2 { margin: 0; font-size: $body-font-size-xxl; color: $headings-color; } .desc { font-size: $body-font-size-l; margin-bottom: 30px; color: $color-faded; } .rescheduled-date-time-info { .info-label { color: $color-faded; margin-bottom: 5px; font-size: $body-font-size-m; } .info-value { font-weight: $body-font-weight-black; font-size: $body-font-size-m; } } } } .bundle-services { .bundle-included-service-wrapper { display: flex; padding: 10px 0; font-size: $font-size-base; justify-content: space-between; .bundle-included-service-name { color: $color-faded; } .bundle-included-service-quantity { font-weight: $body-font-weight-bold; } & + .bundle-included-service-wrapper { border-top: 1px solid $border-color-light; } } } .customer-bundle-tile { color: #222; align-self: flex-start; position: relative; .customer-bundle-tile-inner { background: #FFFFFF; border: 1px solid #ddd; border-bottom-color: #ccc; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1); padding: 25px; position: relative; z-index: 3; } .customer-bundle-tile-shadow { z-index: 2; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 10px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.4); background-color: #fff; + .customer-bundle-tile-shadow { bottom: -11px; z-index: 1; left: 12px; right: 12px; box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); } } .bundle-main-info-wrapper { display: flex; justify-content: space-between; padding-bottom: 35px; border-bottom: 1px solid $border-color-light; align-items: flex-start; .bundle-icon { padding: 10px; line-height: 20px; font-size: 20px; background-color: color-mix(in srgb, $brand-primary 10%, transparent); border-radius: 30px; color: $brand-primary; i { display: block; } } } .bundle-name { color: $headings-color; padding-bottom: 5px; margin: 0px; text-align: left; text-transform: none; font-size: floor($headings-font-size * 1.4); line-height: 1.2; } .bundle-order-info { a { color: $brand-primary; border-bottom: 1px dotted $brand-primary; text-decoration: none; } } .customer-bundle-bottom-actions { display: flex; align-items: center; gap: 20px; padding-top: 25px; border-top: 1px solid #eee; justify-content: stretch; .latepoint-btn { padding: 7px 10px; } > div { } } } .latepoint-customer-bundle-scheduling-summary { padding: 30px; .summary-box { &.main-box { padding: 0; display: block; } .sbc-big-item { font-size: floor($font-size-base * 1.8); } .sbc-subtle-item { display: none; } } .bundle-order-small-info { a { color: $brand-primary; text-decoration: none; border-bottom: 1px dotted $brand-primary; } } .bookable-items-breakdown { border-top: 1px solid $border-color-light; padding-top: 15px; margin-top: 20px; .order-item-cancelled-bookings-wrapper { .order-item-cancelled-bookings-heading { padding-top: 5px; padding-bottom: 5px; color: $color-faded; } &:not(:last-child){ margin-bottom: 20px; } } .bundle-service-info { margin-bottom: 10px; color: $color-faded; } .order-item-variant-bundle-booking + .bundle-service-info { margin-top: 20px; } .order-item-variant-bundle-booking { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; padding: 8px; border: 1px dotted #aaa; cursor: pointer; position: relative; &:hover { border: 1px solid $brand-primary; } &.os-loading { &:before { @include loading-circle($brand-primary, 14px); left: auto; right: 0px; } .bib-icon { color: transparent; } } .bib-label { } .bib-datetime { } .bib-icon { margin-left: auto; font-size: 10px; } .booking-item-status-pill { width: 15px; height: 15px; background-color: #eee; } &.is-booked { border: 1px solid #ddd; border-bottom-color: #bbb; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); color: $headings-color; &:hover { box-shadow: none; border-color: $brand-primary; } .booking-item-status-pill { background-color: #bcd96e; } &.is-past { .booking-item-status-pill { background-color: #d9eba6; } } &.bundle-booking-status-pending { .booking-item-status-pill { background-color: #fad277; } } &.bundle-booking-status-cancelled { .booking-item-status-pill { background-color: #fa7b77; } } } } } .bookable-items { display: none; gap: 5px; margin-top: 20px; .bookable-item { flex: 1; border-radius: 2px; background-color: #eee; height: 6px; &.is-past.is-booked { background-color: #bcd96e; } &.is-booked { background-color: #d9eba6; } } } } .latepoint-transaction-payment-form { position: relative; .lp-payment-charge-amount { background-color: #fbf6e1; border-radius: $border-radius; color: #877865; margin-bottom: 20px; padding: 15px; text-align: center; strong { color: #000; } } .latepoint-lightbox-footer { display: flex; align-items: center; gap: 10px; justify-content: space-between; .latepoint-btn-primary { margin-left: auto; } .latepoint-btn { &.latepoint-btn-block { flex: 1; } } } &.os-loading { .latepoint-lightbox-footer { display: none; .latepoint-btn { } } } }
Save
Back