@qite/tide-booking-component 1.2.4 → 1.3.0

package/styles/components/_select-wrapper.scss

@@ -10,8 +10,10 @@
       right: 15px;
       top: 13px;
       display: inline-flex;
-      border-left: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
-      border-bottom: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
+      border-left: 2px solid
+        var(--tide-booking-room-options-dropdown-select-icon-color);
+      border-bottom: 2px solid
+        var(--tide-booking-room-options-dropdown-select-icon-color);
       transform: rotate(-45deg);
     }
   }
@@ -20,7 +22,9 @@
     width: 100%;
     height: 40px;
     padding: 0 40px 0 10px;
-    border-radius: var(--tide-booking-room-options-dropdown-select-border-radius);
+    border-radius: var(
+      --tide-booking-room-options-dropdown-select-border-radius
+    );
     border: var(--tide-booking-room-options-dropdown-select-border);
     font-family: var(--tide-booking-room-options-dropdown-select-font-family);
     appearance: none;
@@ -30,12 +34,22 @@
       border: --tide-booking-room-options-dropdown-select-border-focus;
     }
 
-    option{
+    option {
+      appearance: none;
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+
       font-family: var(--tide-booking-room-options-dropdown-select-font-family);
       font-size: 16px;
       color: var(--tide-booking-room-options-dropdown-select-option-color);
     }
   }
+
+  ::picker(select) {
+    top: calc(anchor(bottom) + 1px);
+    left: anchor(10%);
+  }
 }
 
 .productcard--accommodation .select-wrapper {

package/styles/components/_spinner.scss

@@ -0,0 +1,29 @@
+.spinner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  @include flex--centerXY;
+  display: none;
+  background: rgba(255, 255, 255, 0.75);
+
+  &__icon {
+    width: 50px;
+    height: 50px;
+    @include flex--centerXY;
+
+    .icon {
+      position: static !important;
+      width: 100% !important;
+      height: 100% !important;
+      top: initial !important;
+      left: initial !important;
+      animation: spinner 1.5s infinite ease-in-out both;
+    }
+  }
+
+  &--active {
+    display: flex;
+  }
+}

package/styles/components/_step-indicators.scss

@@ -55,7 +55,7 @@
       position: absolute;
       width: 200%;
       height: 1.5px;
-      margin-top: .75px;
+      margin-top: 0.75px;
       top: 15px;
       left: 35px;
     }
@@ -64,7 +64,9 @@
       &__icon {
         border: var(--tide-booking-step-indicators-icon-border-active);
         color: transparent;
-        background-color: var(--tide-booking-step-indicators-icon-background-active);
+        background-color: var(
+          --tide-booking-step-indicators-icon-background-active
+        );
         animation: pulse 7s infinite;
 
         &:before {
@@ -76,7 +78,9 @@
           margin-left: -2px;
           border-left: 2px solid;
           border-bottom: 2px solid;
-          border-color: var(--tide-booking-step-indicators-icon-check-color-active);
+          border-color: var(
+            --tide-booking-step-indicators-icon-check-color-active
+          );
           transform: rotate(-45deg);
         }
       }
@@ -93,7 +97,7 @@
       position: absolute;
       width: 200%;
       height: 1.5px;
-      margin-top: .75px;
+      margin-top: 0.75px;
       top: 15px;
       left: 35px;
     }
@@ -101,7 +105,9 @@
     .step-indicators__icon {
       border: var(--tide-booking-step-indicators-icon-color-completed);
       color: transparent;
-      background-color: var(--tide-booking-step-indicators-icon-background-completed);
+      background-color: var(
+        --tide-booking-step-indicators-icon-background-completed
+      );
 
       &:before {
         content: "";
@@ -112,7 +118,9 @@
         margin-left: -2px;
         border-left: 2px solid;
         border-bottom: 2px solid;
-        border-color: var(--tide-booking-step-indicators-icon-check-color-completed);
+        border-color: var(
+          --tide-booking-step-indicators-icon-check-color-completed
+        );
         transform: rotate(-45deg);
       }
     }

package/styles/components/_table.scss

@@ -2,7 +2,7 @@
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
-  border-radius: 5px;
+  border-radius: 0px;
   font-size: 13px;
   overflow: hidden;
 
@@ -10,11 +10,11 @@
     font-size: 16px;
   }
 
-  tr {
-    & + tr {
-      transform: translateY(-10px);
-    }
-  }
+  // tr {
+  //   & + tr {
+  //     transform: translateY(-10px);
+  //   }
+  // }
 
   th,
   td {
@@ -40,7 +40,7 @@
     }
 
     tr:nth-of-type(odd) {
-      background: fade-out($color-primary, 0.95);
+      // background: fade-out($color-primary, 0.95);
     }
   }
 }
@@ -58,7 +58,7 @@
 }
 
 .tree__body .tree__level tbody tr + tr td {
-  border-top: 10px solid fade-out($black, 0.95);
+  // border-top: 10px solid fade-out($black, 0.95);
 }
 
 .tree__level .tree__level .table--striped tr:nth-of-type(odd) {
@@ -68,7 +68,7 @@
 .tree__level .tree__level .table--striped tbody tr:nth-of-type(odd) tbody {
   th,
   td {
-    border-bottom: 10px solid fade-out($black, 0.95);
+    // border-bottom: 10px solid fade-out($black, 0.95);
   }
 }
 

package/styles/components/_tree.scss

@@ -1,7 +1,7 @@
 .tree {
   @extend %reset;
   border: 0px solid transparent;
-  border-radius: 5px;
+  border-radius: 0px;
   background-color: transparent;
 
   * {
@@ -50,7 +50,7 @@
       &--price {
         @include media-lg {
           width: 100px;
-          transform: translateY(3px);
+          transform: translateY(5px) translateX(15px);
         }
 
         @include media-xl {
@@ -90,7 +90,7 @@
     .price {
       position: absolute;
       top: 10px;
-      right: 35px;
+      right: 0px;
       font-size: 14px;
 
       @include media-lg {
@@ -98,13 +98,13 @@
         top: initial;
         right: initial;
         margin-left: auto;
-        font-size: 16px;
+        font-size: var(--tide-booking-sidebar-footer-total-font-size);
       }
     }
   }
 
   &__column--price {
-    width: 70PX;
+    width: 70px;
     padding-left: 10px;
     margin-left: auto;
     text-align: left;
@@ -131,6 +131,11 @@
 
       @include media-lg {
         justify-content: flex-end;
+        align-items: center;
+      }
+
+      @include media-xl {
+        align-items: flex-start;
       }
     }
 
@@ -177,7 +182,7 @@
     margin-bottom: 10px;
     font-size: 13px;
     text-transform: uppercase;
-    color: $black;
+    color: var(--tide-booking-black);
 
     @include media-lg {
       position: absolute;
@@ -195,7 +200,7 @@
 
     @include media-lg {
       padding-top: 3px;
-      padding-bottom: 12.5px;
+      padding-bottom: 15px;
       margin: 0 15px;
       transform: translateY(15px);
     }
@@ -218,13 +223,11 @@
     flex-grow: 1;
 
     @include media-lg {
-      padding: 20px 15px 0 28px;
+      padding: 20px 0px 0 28px;
     }
 
     &__input {
       &:checked {
-        color: $black;
-
         & + * {
           color: var(--tide-booking-checkbox-input-checked-color-text);
         }
@@ -301,8 +304,10 @@
       top: 0;
       transform: rotate(45deg) !important;
       display: none;
-      border-bottom: 2px solid var(--tide-booking-checkbox-input-checked-check-color);
-      border-right: 2px solid var(--tide-booking-checkbox-input-checked-check-color);
+      border-bottom: 2px solid
+        var(--tide-booking-checkbox-input-checked-check-color);
+      border-right: 2px solid
+        var(--tide-booking-checkbox-input-checked-check-color);
       border-radius: 0;
       background-color: transparent;
     }
@@ -341,7 +346,7 @@
     flex-grow: 1;
 
     @include media-lg {
-      padding: 15px 15px 0 28px;
+      padding: 15px 0px 0 28px;
     }
 
     &__input {
@@ -355,13 +360,6 @@
       }
 
       &:checked {
-        border-color: $color-primary;
-        color: $color-primary;
-
-        & + * {
-          color: $color-primary;
-        }
-
         & + span + .tree__columns-actions .tree__columns .tree__column--price {
           opacity: 0;
           pointer-events: none;
@@ -370,8 +368,8 @@
       }
 
       &:after {
-        width: 10px;
-        height: 10px;
+        width: 12px;
+        height: 12px;
 
         @include media-lg {
           width: 12px;
@@ -387,7 +385,7 @@
         }
 
         & + span {
-          margin-top: 5px;
+          margin-top: 0px;
 
           @include media-lg {
             margin: 0;
@@ -409,7 +407,7 @@
 
       &-text {
         padding-right: 15px * 3;
-        margin-bottom: 7.5px;
+        margin-bottom: 5.5px;
         flex-direction: column;
         white-space: nowrap;
 
@@ -434,30 +432,22 @@
   }
 
   &.tree--selected {
-    padding-bottom: 7.5px !important;
   }
 
   &--selected {
-    border-color: $tree-border-selected;
-    color: $color-primary;
-    background-color: $tree-background-selected;
+    border-radius: var(--tide-booking-input-selected-border-radius);
+    border: var(--tide-booking-input-selected-border);
+    color: var(--tide-booking-input-selected-color);
+    background-color: var(--tide-booking-input-selected-background);
 
     * {
-      color: $color-primary;
-    }
-
-    .checkbox__input:checked + * {
-      color: $color-primary;
+      color: var(--tide-booking-input-selected-color);
     }
 
-    .radiobutton__input:checked + * {
-      color: $color-primary;
-    }
-
-    input:not(:empty),
-    select {
-      color: $black;
-    }
+    // input:not(:empty),
+    // select {
+    //   color: green;
+    // }
   }
 }
 

package/styles/components/_typeahead.scss

@@ -0,0 +1,281 @@
+.typeahead {
+  position: relative;
+  width: 100%;
+  @include column;
+  z-index: 97;
+
+  &__trigger {
+    position: relative;
+    width: 100%;
+    @include flex--centerY;
+
+    &:focus,
+    &:active {
+      .form__input {
+        border: var(--tide-booking-form-typeahead-agent-border-hover);
+      }
+
+      svg {
+        fill: var(--tide-booking-form-typeahead-agent-icon-color-hover);
+      }
+    }
+
+    &--icon {
+      .icon {
+        width: 18px;
+        height: 24px;
+        position: absolute;
+        left: 15px;
+
+        fill: var(--tide-booking-form-typeahead-agent-icon-color);
+
+        @include media-md {
+          display: flex;
+        }
+      }
+
+      .form__input {
+        padding-top: 0;
+        padding-left: 15px * 3;
+
+        @include media-md {
+        }
+      }
+    }
+  }
+
+  &__options {
+    width: 100%;
+    max-height: 25vh;
+    @include column;
+    border-radius: var(
+      --tide-booking-form-typeahead-agent-options-border-radius
+    );
+    backdrop-filter: blur(30px);
+    background-color: var(
+      --tide-booking-form-typeahead-agent-options-background
+    );
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+    border: var(--tide-booking-form-typeahead-agent-options-border);
+    overflow-y: auto;
+    // position: absolute;
+    // top: 45px;
+    @extend %scrollbar-thin;
+
+    @include media-sm {
+      max-height: 35vh !important;
+    }
+
+    @include media-md {
+      max-height: 350px !important;
+    }
+
+    @include media-xl {
+      max-height: 400px !important;
+    }
+
+    @include media-xxl {
+      max-height: 500px !important;
+    }
+  }
+
+  &__options-body {
+    @extend %reset;
+    width: 100%;
+    @include column;
+  }
+
+  &__options-actions {
+    @extend %reset;
+    position: sticky;
+    width: 100%;
+    bottom: 0;
+    padding: 0 15px * 0.7 15px * 0.7 15px * 0.7;
+    margin-top: auto;
+    // background-color: yellow;
+  }
+
+  &__option {
+    @extend %reset;
+    width: 100%;
+    @include column;
+    flex-shrink: 0;
+    color: var(--tide-booking-form-typeahead-agent-options-color);
+    transition-duration: 0.2s;
+    transition-property: color, background-color;
+    transition-timing-function: ease-out;
+
+    &:hover,
+    &:focus,
+    &:active {
+      // background-color: yellow;
+    }
+  }
+
+  .typeahead__option + .typeahead__option {
+    border-top: var(--tide-booking-form-typeahead-agent-options-border);
+  }
+
+  &__option-description {
+    display: flex;
+    flex-flow: row wrap;
+    font-size: 14px;
+    white-space: pre-wrap;
+  }
+
+  &__option-header {
+    display: flex;
+  }
+
+  &__option-heading {
+    @include lineclamp($lineclamp-amount: 2);
+    line-height: 1.4;
+    white-space: pre-wrap;
+  }
+
+  &__option-highlight {
+    font-style: normal;
+    font-weight: var(
+      --tide-booking-form-typeahead-agent-options-font-weight-highlight
+    );
+    color: var(--tide-booking-form-typeahead-agent-options-color-highlight);
+    margin-right: 5px;
+    @extend %transition-easing;
+  }
+
+  &__option-label {
+    margin-top: 15px * 0.3;
+    margin-left: 15px * 0.7;
+    font-size: 14px;
+    font-style: italic;
+    line-height: 1;
+    @include lineclamp();
+  }
+
+  &__option-heading + &__option-label {
+    flex-shrink: 0;
+  }
+
+  &__option--icon {
+    position: relative;
+    padding: 10px 15px 10px 45px;
+    font-size: 16px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      .typeahead__option-highlight {
+        // color: yellow;
+      }
+    }
+  }
+
+  &__option--icon + &__option {
+    padding-bottom: 15px;
+    border-top: 0;
+  }
+
+  &__region {
+    @extend %reset;
+    width: 100%;
+
+    & + & {
+      // border-top: 1.5px solid yellow;
+    }
+  }
+
+  &--active {
+    .typeahead__options {
+      display: flex;
+    }
+  }
+}
+
+.booking__panel .typeahead__options {
+  // border: 0.1rem solid yellow;
+}
+
+.qsm--inline .typeahead__trigger--icon .form__input {
+  padding-top: 1.6rem;
+}
+
+.qsm--inline .typeahead--active .typeahead__options {
+  display: flex;
+}
+
+.qsm--inline .typeahead {
+  @include media-sm {
+    z-index: initial;
+  }
+
+  &__options {
+    max-height: 60vh;
+    backdrop-filter: none;
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+    overflow-y: auto;
+
+    @include media-sm {
+      min-height: auto;
+      backdrop-filter: none;
+      background-color: transparent;
+      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &__trigger {
+    .typeahead__trigger {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  .qsm__panel {
+    &--active {
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      max-height: 100%;
+      padding: 1.5rem;
+      display: flex;
+      backdrop-filter: blur(1rem);
+      background-color: rgba(255, 255, 255, 0.8);
+      box-sizing: border-box;
+      pointer-events: initial;
+      z-index: 9999999999999999;
+
+      @media (max-width: 767px) {
+        transform: none !important;
+      }
+
+      @include media-sm {
+        height: auto;
+        max-height: 60vh;
+        padding: 0;
+      }
+    }
+
+    .form__input {
+      padding-top: 0;
+    }
+  }
+}
+
+/*.section--home-qsm {
+    .typeahead__options {
+        position: absolute;
+        transform: translateY(-100%);
+        display: none;
+    }
+}*/
+
+.typeahead__option .link {
+  &:hover,
+  &:focus,
+  &:active {
+    .typeahead__option-highlight {
+      // color: yellow;
+    }
+  }
+}

package/styles/components/_variables.scss

@@ -25,7 +25,7 @@ $gray-timeline: #808080;
 $gray-dark: #666666;
 $tree-border-selected: #e0ecff;
 $tree-background-selected: #edfbff;
-$black: #0A0A0A;
+$black: #0a0a0a;
 $transparent: transparent;
 
 $economy: #334eac;
@@ -72,18 +72,18 @@ $screen-xxl: 1920px;
 }
 
 %scrollbar-thin {
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-  
-    &::-webkit-scrollbar-track {
-      padding: 2px;
-      background: transparent;
-    }
-  
-    &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      background-color: fade-out($black, 0.75);
-    }
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    padding: 2px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: fade-out($black, 0.75);
+  }
 }