FileMaster

Edit File: _items.scss

.latepoint-w {
  &.latepoint-hide-side-panel {
    .latepoint-booking-form-element {
      &.latepoint-border-radius-rounded {
        .latepoint-form-w .latepoint-heading-w {
          border-top-left-radius: $rounded-borders-radius;
        }
        .latepoint-form-w .latepoint-footer {
          border-bottom-left-radius: $rounded-borders-radius;
        }
        .latepoint-form,
        .latepoint-form-w {
          border-bottom-left-radius: $rounded-borders-radius;
          border-top-left-radius: $rounded-borders-radius;
        }
      }
    }
  }
  .latepoint-booking-form-element, .latepoint-transaction-payment-form {
    .lp-options {
      .lp-option {
        box-shadow: 0px 0px 0px 2px #E8EBEE;
        cursor: pointer;
        transition: transform 0.1s ease;

&:focus-visible {
          outline: 2px solid $brand-primary;
        }
        &.selected {
          box-shadow: 0px 0px 0px 2px $brand-primary;
          .lp-option-label {
            color: $brand-primary;
          }
        }
        &:hover {
          box-shadow: 0px 0px 0px 2px $brand-primary;
          .lp-option-label {
            color: $brand-primary;
          }
          .lp-option-image {
          }
        }
        .lp-option-image {
          padding-bottom: 100%;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          transform-origin: center center;
        }
        .lp-option-label {
          font-weight: $body-font-weight-bold;
          color: $body-color;
          font-size: floor($font-size-base * 1.2);
          padding: 10px;
        }
      }
      &.lp-options-grid {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        .lp-option {
          text-align: center;
          .lp-option-image-w {
            padding: 15px;
            border-bottom: 1px solid #E8EBEE;
          }
        }
        &.lp-options-grid-three {
          .lp-option {
            flex: 0 0 30%;
          }
        }
        &.lp-options-grid-two {
          gap: 30px;
          .lp-option {
            flex: 0 0 45%;

}
        }
      }
      &.lp-options-rows {
        display: flex;
        flex-direction: column;
        .lp-option {
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          .lp-option-image {
            flex: 0 0 50px;
            width: 50px;
          }
          .lp-option-image-w {
            padding: 10px 15px;
            border-right: 1px solid #E8EBEE;
          }
          .lp-option-label {
            flex: 1;
            padding-left: 20px;
          }
        }
      }
      .lp-option-amount-w {
        padding: 20px 40px;
        border-bottom: 1px solid #E8EBEE;
      }
      .lp-option-amount {
        border-radius: 50%;
        padding-bottom: 100%;
        box-shadow: 0px 0px 0px 2px $headings-color;
        position: relative;
        .lp-amount-value {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          font-weight: $body-font-weight-bold;
          color: $body-color;
          font-size: floor($font-size-base * 1.1);
        }
        &.lp-amount-deposit {
          background-color: #eee;
          box-shadow: none;
          .lp-slice {
            width: 50%;
            padding-bottom: 50%;
            background: #fff;
            border-radius: 70px 0px 0px 0px;
            box-shadow: 0px 0px 0px 2px $headings-color, 0px 0px 0px 6px #fff;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: bottom right;
            transform: rotate(-45deg);
          }
          .lp-amount-value {
            left: 0px;
            background-color: #fff;
            padding: 2px 0px;
          }
        }
      }
    }

.os-items {
      margin: 0px!important;
      padding: 0px!important;
      &.os-as-rows {
        & + .os-items {
          margin-top: 15px!important;
        }
        > .os-item {
          & + .os-item {
            margin-top: 15px;
          }
        }
        .os-item {
          .os-item-i {
            &:hover {
              .os-item-name-w {
                transform: translateX(3px);
              }
            }
          }
        }
      }
      .os-item {
        &:focus {
          .os-item-i {
            border-color: $brand-primary;
            box-shadow: 0 0 0 1px $brand-primary;
            text-decoration: none;
          }
        }
        .os-item-i {
          cursor: pointer;
          display: flex;
          background: #FFFFFF;
          border: 1px solid $item-border-color;
          align-items: center;
          box-shadow: none;
          outline: none;
          padding: 10px;
          color: $body-color;
          text-decoration: none;
          &:hover {
            border-color: $brand-primary;
            box-shadow: 0 0 0 1px $brand-primary;
            text-decoration: none;
          }
          .os-item-img-w {
            flex: 0 0 45px;
            height: 45px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            text-align: center;
            margin-right: 15px;
            display: block;
            .latepoint-icon {
              font-size: 22px;
              line-height: 43px;
            }
          }
          .os-item-name-w {
            padding: 5px 0px;
            margin-right: auto;
            display: block;
            transition: transform 0.2s ease-out;
            .os-item-name {
              font-weight: $body-font-weight-bold;
              font-size: $headings-font-size-m;
              display: block;
            }
            .os-item-desc {
              color: $color-faded;
              font-size: floor($font-size-base * 0.9);
              display: block;
              margin-top: 3px;
            }
          }
          .os-item-child-count {
            display: block;
            color: $color-faded;
            font-size: floor($font-size-base * 0.8);
            transition: transform 0.2s ease;
            flex-shrink: 0;
            margin-left: 15px;
          }
          .os-item-price-w {
            border-left: 1px solid rgba(0,0,0,0.05);
            padding-left: 15px;
            margin-left: 10px;
            text-align: center;
            display: block;
            .os-item-price {
              display: block;
              color: $brand-primary;
              line-height: 1.1;
              font-weight: $body-font-weight-bold;
              font-family: $mono-font-family;
              font-size: $body-font-size-l;
            }
            .os-item-price-label {
              display: block;
              color: $color-faded;
              font-size: $body-font-size-xxs;
              white-space: nowrap;
            }
          }
        }
        &:last-child {
          margin-bottom: 0px;
        }
        &.with-plus {
        }
        &.with-description {
          .os-item-name-w {
            padding: 5px 0px;
          }
        }
        &.os-allow-multiselect {
          .os-item-i {
            padding-left: 50px;
            &:before {
              background-color: #fff;
              color: #fff;
              padding: 3px;
              font-size: 12px;
              @include latepointfont('\e903');
              position: absolute;
              top: 50%;
              left: 15px;
              display: block;
              transform: translateY(-50%);
              box-shadow: inset 0px 0px 0px 1px #d8dbe3;
            }
          }
          &.selected {
            .os-item-i {
              .os-item-name {
              }
              &:before {
                background-color: $brand-primary;
                box-shadow: none;
                &:hover {
                  box-shadow: none;
                }
              }
            }
          }
        }
        &.selected {
          &.has-child-items {
            > .os-item-i {
              display: none;
            }
            > .os-items {
            }
          }
        }
        &:not(.selected){
          .os-items {
            display: none;
          }
        }
      }

&.selected > .os-items + .os-item-categories-holder {
        margin-top: 15px;
      }

&.os-as-grid {
        display: grid;
        .os-item {
          text-align: center;
          &.os-item-span-row {
            grid-column: 1/4;
            .os-item-i {
              padding: 15px 20px;
            }
            &.with-floating-price {
              .os-item-i {
                padding: 15px 20px;
              }
            }
            .os-duration-value-label {
              display: none;
            }
            .os-duration-name {
              text-align: left;
              font-weight: $body-font-weight-bold;
              font-size: floor($font-size-base * 1.2);
            }
          }
          .os-item-i {
            display: block;
            padding: 10px;
            height: 100%;
            .os-item-name-w {
              padding-bottom: 0px;
              padding-top: 10px;
              border-top: 1px solid #eee;
            }
            .os-item-img-w {
              flex: 1;
              height: auto;
              padding-bottom: 100%;
              margin: 0px;
              &.os-with-avatar {
                padding: 0 15px 15px;
                .os-avatar {
                  background-size: cover;
                  background-position: center center;
                  padding-bottom: 100%;
                  background-repeat: no-repeat;
                }
              }
            }
          }
          &.with-floating-price {
            .os-item-i {
              padding: 25px 10px 15px;
            }
          }
        }
        &.os-three-columns {
          grid-template-columns: 1fr 1fr 1fr;
          column-gap: 15px;
          row-gap: 15px;
          .os-item {
            .os-item-i {
            }
          }
        }
      }

.os-item-details-popup-btn {
        font-size: floor($font-size-base * 0.9);
        padding: 0px;
        font-weight: $body-font-weight-bold;
        opacity: 0;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        max-width: 100%;
        z-index: 1;
        border: none;
        transition: transform 0.2s ease;
        display: inline-block;
        span {
          color: $brand-primary;
          display: inline-block;
          border-bottom: 1px dotted color-mix(in srgb, $brand-primary 50%, transparent);
          padding: 2px 0px 1px;
        }
        &:hover {
          span {
            padding-left: 5px;
            padding-right: 5px;
            color: #fff;
            background-color: $brand-primary;
            border-color: transparent;
          }
        }
      }
      .os-item {
        position: relative;
        &:focus {
          outline: none;
        }
        &.with-details {
          .os-item-name-w {
            transition: transform 0.2s ease;
            z-index: 2;
            position: relative;
          }
          .os-item-img-w {
            transition: transform 0.2s ease;
          }
          .os-item-i:hover {
            .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 {
              }
            }
          }
        }
        &.selected {
          .os-item-details-popup-btn {
            &:hover {
              border-color: $brand-primary;
            }
          }
        }
      }
    }

.show-selected-only {
      > .os-items.os-as-rows {
        margin-top: 0px!important;
      }
    }
    &.latepoint-border-radius-rounded {
      border-radius: $rounded-borders-radius;
      .alternative-login-option {
        border-radius: $rounded-borders-radius;
      }
      .os-social-login-option {
        border-radius: $rounded-borders-radius;
      }
      .item-quantity-selector-w .item-quantity-selector {
        border-radius: $rounded-borders-radius;
      }
      .latepoint-form-w .select-total-attendees-w .total-attendees-selector-w .total-attendees-selector {
        border-radius: $rounded-borders-radius;
      }
      .os-items .os-item-details-popup-btn:hover span {
        border-radius: $rounded-borders-radius - 2;
      }
      .latepoint-side-panel .latepoint-step-desc-w .latepoint-step-desc .latepoint-desc-media.svg-w:before {
        border-radius: 50%;
      }
      .latepoint-form-w .latepoint-heading-w {
        border-top-right-radius: $rounded-borders-radius;
      }
      .latepoint-summary-w {
        border-top-right-radius: $rounded-borders-radius;
        border-bottom-right-radius: $rounded-borders-radius;
      }
      .latepoint-form-w .latepoint-footer {
        border-bottom-right-radius: $rounded-borders-radius;
      }
      .latepoint-form-w,
      .latepoint-form{
        border-bottom-right-radius: $rounded-borders-radius;
        border-top-right-radius: $rounded-borders-radius;
      }

.os-form-group.os-form-phonefield-group {
        border-radius: $rounded-borders-radius!important;
      }
      .dp-timeslot .dp-label {
        border-radius: $rounded-borders-radius;
      }
      .dp-timebox {
        border-radius: $rounded-borders-radius;
      }
      .step-confirmation-w .confirmation-cabinet-info {
        border-radius: $rounded-borders-radius;
        .confirmation-cabinet-link {
          border-radius: $rounded-borders-radius;
        }
      }
      .os-password-reset-form-holder .os-password-reset-form-w,
      .step-confirmation-w .step-confirmation-set-password {
        border-radius: $rounded-borders-radius;
      }
      .info-box {
        border-radius: $rounded-borders-radius;
        .info-box-buttons a {
          border-radius: $rounded-borders-radius;
        }
      }
      .step-confirmation-w .qr-code-on-full-summary .qr-code-vevent .qr-code-label {
        border-radius: $rounded-borders-radius;
      }
      .latepoint-message {
        border-radius: $rounded-borders-radius;
      }
      .step-payment-w .payment-total-info .coupon-code-input-w input.coupon-code-input,
      .step-payment-w .payment-total-info .applied-coupon-code,
      .step-payment-w .payment-total-info .coupon-code-input-w .coupon-code-input-submit {
        border-radius: $rounded-borders-radius!important;
      }
      .latepoint-form-w .select-total-attendees-w .total-attendees-selector-w {
        border-radius: $rounded-borders-radius;
      }
      .select-total-attendees-w {
        border-radius: $rounded-borders-radius;
      }
      .dp-timeslot {
        &:first-child {
        }
        &:last-child {
        }
        &:first-child {
          &:last-child {
          }
        }
      }
      .latepoint-progress ul li .progress-item {
        border-radius: $rounded-borders-radius;
        span {
          border-radius: $rounded-borders-radius;
        }
      }
      .os-monthly-calendar-days .os-day .os-day-box {
        border-radius: $rounded-borders-radius;
      }
      .dp-timeslot .dp-label {
      }
      .latepoint-side-panel {
        border-radius: $rounded-borders-radius 0px 0px $rounded-borders-radius;
      }
      .latepoint-summary-w {
        border-radius: 0px $rounded-borders-radius $rounded-borders-radius 0px;
      }
      .lp-options .lp-option {
        border-radius: $rounded-borders-radius;
      }
      .os-items {
        .os-item {
          .os-item-i {
            border-radius: $rounded-borders-radius;
            .os-item-img-w {
              border-radius: $rounded-borders-radius;
            }
            .os-with-avatar {
              padding: 5px 15px 5px 15px;
              .os-avatar {
                border-radius: 50%;
                background-size: cover;
                background-position: center center;
                padding-bottom: 100%;
              }
            }
          }
          &.os-allow-multiselect .os-item-i:before {
            border-radius: 6px;
          }
        }
        &.os-as-grid {
        }
        .os-item-details-popup-btn {
        }
      }
      .latepoint-btn {
        border-radius: $rounded-borders-radius;
      }
      .latepoint-add-another-item-trigger.on-verify {
        border-radius: $rounded-borders-radius;
      }
      .summary-box .summary-box-content .os-remove-item-from-cart {
        border-radius: $rounded-borders-radius;
      }
      .latepoint-add-another-item-trigger {
        border-radius: $rounded-borders-radius;
      }

.step-verify-w .cart-item-wrapper.multi-item {
        border-radius: $rounded-borders-radius;
      }
      .latepoint-summary-w .os-summary-contents-inner .cart-item-wrapper.multi-item {
        border-radius: $rounded-borders-radius;
      }

.os-form-group.os-form-file-upload-group .os-uploaded-file-info,
      .os-form-group.os-form-file-upload-group .os-upload-file-input-w input[type=file],
      .os-form-group.os-form-select-group .os-form-control,
      .os-form-group.os-form-select-group input.os-form-control,
      .os-form-group.os-form-textfield-group .os-form-control,
      .os-form-group.os-form-textfield-group input.os-form-control {
        border-radius: $rounded-borders-radius!important;
      }
      .os-form-group.os-form-phonefield-group {
        input.os-form-control {
          border-radius: 0 $rounded-borders-radius $rounded-borders-radius 0!important;
        }
        .lp_iti__selected-flag {
          border-radius: $rounded-borders-radius 0 0 $rounded-borders-radius;
        }
      }
      .step-payment-w .payment-total-info {
        border-radius: $rounded-borders-radius;
      }
    }

.os-item-category-w {
      .os-item-category-info {
      }
      &:hover:not(.selected) {
        .os-item-category-info {
        }
        .os-item-category-name {
        }
      }
      > .os-selectable-items {
        display: none;
        .os-item {
          &.selected {
            position: relative;
            z-index: 2;
            > .os-service-selector {
              &:hover {
                border-color: $brand-primary;
              }
            }
          }
          &:hover {
            z-index: 2;
            position: relative;
          }
          a.os-service-selector {
            position: relative;
            .service-name-w .service-name {
              font-size: floor($font-size-base * 1.1);
            }
            &:hover {
              border-color: $brand-primary;
            }
          }
        }
      }
      .os-item-category-w {
        margin-top: 0px;
        box-shadow: none;
        .os-item-category-info-w {
          border: none;
        }
        .os-item-category-info-w {
          display: none;
        }
        & + .os-item-category-w {
        }
      }
      & + .os-item-category-w {
      }
      .os-item-category-info {
        &:focus-visible {
          border-color: $brand-primary;
          box-shadow: 0 0 0 1px $brand-primary;
          text-decoration: none;
        }
        .os-item-category-img-w {
          flex: 0 0 40px;
          height: 40px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          text-align: center;
          margin-right: 15px;
          display: block;
        }
        .os-item-category-name {
          display: block;
          font-weight: $body-font-weight-bold;
          font-size: floor($font-size-base * 1.2);
          display: block;
          margin-right: auto;
          flex: 1;
          transition: transform 0.2s ease;
        }
        .os-item-category-services-count {
          display: block;
          color: $color-faded;
          font-size: floor($font-size-base * 0.8);
          transform: translateX(-40px);
          transition: transform 0.2s ease;
        }
      }
      &.selected {
        box-shadow: none;
        > .os-item-category-info-w {
          display: block;
          border-bottom: 1px solid #E5E7EE;
          background-color: #F4F6F9;
          border-top: none;
          position: relative;
          &:last-child {
            border-bottom: none;
          }
          .os-item-category-img-w {
            opacity: 0;
          }
          .os-item-category-services-count {
            transform: translateX(0);
          }
          &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 25px;
            @include latepointfont("\e902");
            font-size: 10px;
            transform: translateY(-50%);
            color: $color-faded;
            transition: all 0.2s ease;
          }
          > .os-item-category-info {
            &:after {
              opacity: 0;
              transform: translate(5px, -50%);
            }
          }
          &:hover {
            &:before {
              transform: translate(-5px, -50%);
              color: $brand-primary;
            }
            .os-item-category-name {
              color: $brand-primary;
            }
          }
        }
        .os-item-category-w {
          &:hover {
          }
        }
        > .os-selectable-items {
          display: block;
        }
      }
    }
    .os-item-categories-holder {
      &.show-selected-only {
        > .os-selectable-items:not(.selected){
          display: none;
        }
        .os-item-category-info-w {
          display: none;
        }
        .os-item-category-w {
          &:not(.selected){
            border: none;
            & + .os-item-category-w {
            }
          }
          &.selected {
            > .os-item-category-info-w {
              display: none;
            }
           > .os-item-categories-holder  > .os-item-category-w {
              > .os-item-category-info-w {
                display: block;
              }
            }
            > .os-item-categories-holder {
              > .os-item-category-w,
              > .os-selectable-items {
                display: block;
                & + .os-item-category-w {
                }
              }
            }
          }
        }
      }
    }
  }

&.latepoint-summary-is-open {
    .latepoint-booking-form-element.latepoint-border-radius-rounded {
      .latepoint-form-w, .latepoint-form {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
      }
    }
  }
}

Back