@qite/tide-booking-component 1.4.28 → 1.4.30

package/styles/components/_form.scss

@@ -1111,11 +1111,60 @@
       }
 
       .form__group-input:nth-child(1) .form__input {
-        border-radius: 5px 0 0 5px;
+        border-radius: 5px;
       }
 
       .form__group-input:nth-child(2) .form__input {
-        border-radius: 0 5px 5px 0;
+        border-radius: 5px;
+      }
+    }
+
+    &--datepicker {
+      @include column;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 0px;
+      position: relative;
+
+      @include media-sm {
+        flex-direction: row;
+      }
+
+      .form__group-input {
+        width: 100%;
+
+        @include media-sm {
+          width: 50%;
+        }
+
+        // &:nth-child(1),
+        // &:nth-child(2) {
+        //   .form__input {
+        //     border-radius: 5px;
+        //     border-right: 1.5px solid var(--tide-booking-gray-background-light);
+        //     border-left: 1.5px solid var(--tide-booking-gray-background-light);
+        //   }
+        // }
+      }
+
+      .qsm__panel {
+        display: flex;
+        background-color: rgba(255, 255, 255, 0.97);
+        z-index: 98;
+        visibility: hidden;
+        opacity: 0;
+        transition: all 0.3s ease-in-out;
+
+        &--active {
+          visibility: visible;
+          pointer-events: all;
+          opacity: 1;
+          width: 100vw;
+
+          @include media-sm {
+            width: auto;
+          }
+        }
       }
     }
 

package/styles/components/_passenger-picker.scss

@@ -208,7 +208,6 @@
     gap: 5px;
 
     @include mixins.media-sm {
-      width: 100%;
       align-items: center;
       flex-direction: row;
     }
@@ -229,7 +228,6 @@
 
     cursor: pointer;
     text-align: left;
-
     transition: all 0.5s;
 
     &:hover {
@@ -267,6 +265,7 @@
     bottom: auto;
 
     width: 100%;
+    max-height: 250px;
     margin: 0;
     padding: 0;
 
@@ -275,6 +274,8 @@
     border: var(--tide-booking-dropdown-menu-border);
     border-radius: var(--tide-booking-dropdown-menu-border-radius);
     box-shadow: var(--tide-booking-dropdown-menu-box-shadow);
+    overflow-y: auto;
+    @extend %scrollbar-thin;
 
     li {
       padding: 10px;

package/styles/components/_qsm.scss

@@ -3,7 +3,7 @@
   &__panel {
     @extend %reset;
     position: absolute;
-    border-radius: 0.5rem;
+    border-radius: 5px;
     border: var(--tide-booking-datepicker-container-border);
     box-sizing: border-box;
   }

package/styles/qsm/_qsm.scss

@@ -48,6 +48,27 @@
     z-index: 40; // was 9
   }
 
+  &__panel {
+    @extend %reset;
+    position: fixed;
+    top: 0px;
+    left: 50%;
+    transform: translatex(-50%);
+    box-sizing: border-box;
+
+    @include mixins.media-sm {
+      position: absolute;
+      border-radius: 5px;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    fill: var(--tide-booking-datepicker-close-color);
+  }
+
   &__close-button {
     position: absolute;
     top: 2rem;
@@ -58,7 +79,7 @@
     font-size: 20px;
     text-decoration: underline;
     cursor: pointer;
-    z-index: 20; // was 7
+    z-index: 20;
 
     @include mixins.media-xl {
       top: 2rem;
@@ -186,21 +207,21 @@
     gap: 1rem;
 
     @include mixins.media-md {
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
+      display: grid;
+      grid-template-columns: auto 1fr;
     }
 
     &__classgroup {
       display: flex;
       flex-direction: column;
       gap: 1rem;
-      width: 100%;
+      flex-wrap: wrap;
+      width: auto;
 
       @include mixins.media-sm {
         flex-direction: row;
         align-items: center;
-        width: auto;
+        justify-content: flex-end;
       }
     }
 
@@ -211,6 +232,7 @@
       @include mixins.media-sm {
         flex-direction: row;
         gap: 0rem;
+        margin-top: 10px;
       }
     }
   }
@@ -1030,4 +1052,43 @@
   //       font-size: variables.$font-size-body;
   //       text-align: center;
   //     }
+
+  .qsm__input-group {
+    .booking-product__dates {
+      &-title {
+        position: relative;
+        z-index: 21;
+        left: 0;
+        top: 0rem;
+        padding-bottom: 5px;
+        font-size: var(--tide-booking-input-label-font-size);
+        font-weight: var(--tide-booking-input-label-font-weight);
+        color: var(--tide-booking-input-label-color);
+        pointer-events: none;
+        transition: all 0.2s ease;
+
+        svg {
+          display: none;
+        }
+      }
+
+      .form__input {
+        padding: 0px 10px;
+      }
+
+      .form__label {
+        display: none;
+      }
+    }
+
+    .qsm__pannel--mobile {
+      top: 0;
+      position: fixed;
+      bottom: 0;
+    }
+  }
+
+  &:has(.qsm__panel--active) {
+    z-index: 21;
+  }
 }