FileMaster

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 {
      }
    }
  }
}

Back