@qite/tide-booking-component 1.4.109 → 1.4.111

package/styles/components/_flyin.scss

@@ -52,6 +52,29 @@
     }
   }
 
+  &--flight {
+    .flyin__panel {
+      @include mixins.media-sm {
+        width: 100%;
+        max-width: 1200px;
+      }
+    }
+
+    .flyin__content {
+      gap: 30px;
+    }
+
+    .search__results__cards {
+      @include mixins.media-md {
+        grid-template-columns: repeat(1, 1fr);
+      }
+
+      @include mixins.media-lg {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
+
   &__panel {
     background: var(--tide-booking-gray-xlight);
     height: 100%;
@@ -570,6 +593,26 @@
         align-content: flex-start;
       }
     }
+
+    .cta--filter {
+      @include mixins.media-lg {
+        display: none;
+      }
+    }
+
+    .search__result {
+      &-row {
+        justify-content: flex-start;
+        gap: 15px;
+        flex-wrap: wrap;
+
+        &-filter {
+          @include mixins.media-xs {
+            margin-left: auto;
+          }
+        }
+      }
+    }
   }
 
   &__button {

package/styles/components/_loader.scss

@@ -35,6 +35,69 @@
     width: 100%;
     align-items: center;
   }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    padding: 30px;
+  }
+
+  &__line {
+    width: 45px;
+    display: flex;
+    justify-content: space-evenly;
+
+    &__text {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-transform: lowercase;
+      font-weight: 500;
+      font-size: 14px;
+      letter-spacing: 0.2px;
+
+      &::before,
+      &::after {
+        content: attr(data-text);
+      }
+
+      &::before {
+        color: var(--tide-booking-color-primary-light);
+      }
+
+      &::after {
+        color: var(--tide-booking-color-primary);
+        animation: text-animation 3.6s ease infinite;
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+
+  &__ball {
+    list-style: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--tide-booking-color-primary-light);
+
+    animation: bounce 2.1s ease-in-out infinite;
+
+    &--1 {
+      animation-delay: 0s;
+    }
+
+    &--2 {
+      animation-delay: 0.3s;
+    }
+
+    &--3 {
+      animation-delay: 0.6s;
+    }
+  }
 }
 
 @keyframes spin {
@@ -68,3 +131,22 @@
     text-shadow: 0.25em 0 0 var(--tide-booking-spinner-animation-color), 0.5em 0 0 var(--tide-booking-spinner-animation-color);
   }
 }
+
+@keyframes bounce {
+  50% {
+    transform: translateY(-18px);
+    background-color: var(--tide-booking-color-primary);
+  }
+}
+
+@keyframes text-animation {
+  0% {
+    clip-path: inset(0 100% 0 0);
+  }
+  50% {
+    clip-path: inset(0);
+  }
+  100% {
+    clip-path: inset(0 0 0 100%);
+  }
+}

package/styles/components/_search.scss

@@ -43,7 +43,6 @@
     max-width: 360px;
     width: 100%;
     background-color: var(--tide-booking-search-filter-background);
-    border-radius: var(--tide-booking-search-filter-border-radius);
     border: var(--tide-booking-search-filter-border);
     height: 100%;
     margin-bottom: 20px;
@@ -55,6 +54,7 @@
 
     @include mixins.media-md {
       grid-column: auto;
+      border-radius: var(--tide-booking-search-filter-border-radius);
     }
 
     @include mixins.media-lg {
@@ -149,7 +149,7 @@
       top: 0;
       left: 0;
       width: 100vw;
-      height: 100vh;
+      height: 100dvh;
       z-index: 100009;
 
       // Initial hidden state
@@ -190,6 +190,8 @@
           border-bottom-left-radius: 0px;
           transform: translateX(0);
           pointer-events: auto;
+          overflow-y: auto;
+          @extend %scrollbar-thin;
         }
       }
     }
@@ -236,6 +238,11 @@
       margin-bottom: 15px;
       margin-top: 0;
       padding-top: 15px;
+      padding-right: 60px;
+
+      @include mixins.media-lg {
+        padding-right: 15px;
+      }
     }
 
     &-link {
@@ -827,6 +834,11 @@
         display: flex;
         align-items: center;
         padding-left: 15px;
+        gap: 10px;
+
+        svg {
+          fill: var(--tide-booking-gray-dark);
+        }
 
         h3 {
           display: flex;

package/styles/content-blocks-variables.scss

@@ -68,28 +68,28 @@
   --tide-booking-heading-color: var(--tide-booking-black);
 
   //h1
-  --tide-booking-h1: 40px;
-  --tide-booking-h1-sm: 56px;
-  --tide-booking-h1-xl: 56px;
+  --tide-booking-h1: 32px;
+  --tide-booking-h1-sm: 40px;
+  --tide-booking-h1-xl: 40px;
 
   //h2
-  --tide-booking-h2: 32px;
-  --tide-booking-h2-sm: 40px;
-  --tide-booking-h2-xl: 40px;
+  --tide-booking-h2: 24px;
+  --tide-booking-h2-sm: 32px;
+  --tide-booking-h2-xl: 32px;
 
   //h3
-  --tide-booking-h3: 24px;
-  --tide-booking-h3-sm: 32px;
-  --tide-booking-h3-xl: 32px;
+  --tide-booking-h3: 18px;
+  --tide-booking-h3-sm: 24px;
+  --tide-booking-h3-xl: 24px;
 
   //h4
-  --tide-booking-h4: 18px;
-  --tide-booking-h4-sm: 20px;
-  --tide-booking-h4-xl: 20px;
+  --tide-booking-h4: 16px;
+  --tide-booking-h4-sm: 18px;
+  --tide-booking-h4-xl: 18px;
 
   //h5
-  --tide-booking-h5: 18px;
-  --tide-booking-h5-xl: 20px;
+  --tide-booking-h5: 16px;
+  --tide-booking-h5-xl: 18px;
 
   //h6
   --tide-booking-h6: 16px;