@qite/tide-booking-component 1.4.84 → 1.4.86

package/styles/components/_flyin.scss

@@ -271,160 +271,171 @@
     }
 
     &-card {
-      // height: 522px;
-      width: 100%;
-      max-width: 315px;
-      min-width: 315px;
-
-      border-radius: 16px;
-      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
       display: flex;
       flex-direction: column;
-      justify-content: space-between;
-      overflow: hidden;
+      padding-bottom: 20px;
+      border-radius: 24px;
       background: var(--tide-booking-white);
-      transition: all 0.4s ease;
-      cursor: pointer;
-
-      @include mixins.media-sm {
-        max-width: 345px;
-        min-width: 345px;
-      }
-
-      &:hover {
-        .flyin__content-card-top {
-          background: var(--tide-booking-color-primary-fade);
-        }
-
-        .flyin__content-card-button {
-          // background: var(--tide-booking-color-primary);
-          color: var(--tide-booking-white);
-
-          .cta--select {
-            background: var(--tide-booking-cta-background-select-hover);
-          }
-        }
-      }
-
-      &--selected {
-        .flyin__content-card-top {
-          background: var(--tide-booking-color-primary-gradient);
-          border-bottom: none;
-        }
-
-        .flyin__content-card-top-price {
-          color: var(--tide-booking-white);
-        }
-
-        .flyin__content-card-top-tag {
-          color: var(--tide-booking-white);
-        }
-
-        .flyin__content-card-middle {
-          // border-left: 4px solid var(--tide-booking-color-primary);
-          // border-right: 4px solid var(--tide-booking-color-primary);
-        }
-
-        &:hover {
-          .flyin__content {
-            cursor: default;
-          }
-
-          .flyin__content-card-top {
-            background: var(--tide-booking-color-primary-gradient);
-          }
-        }
-      }
-
-      &-top {
-        min-height: 60px;
-        width: 100%;
-        background: var(--tide-booking-color-primary);
-        display: flex;
-        justify-content: space-between;
-        align-items: end;
-        padding: 0 15px 12px 15px;
-        background: var(--tide-booking-white);
-        transition: all 0.4s ease;
-
-        &-price {
-          font-size: 18px;
-          font-weight: 700;
-          color: var(--tide-booking-black);
-
-          &--decrease {
-            color: green;
-          }
-
-          &--increase {
-            color: red;
-          }
-        }
-
-        &-tag {
-          font-size: 24px;
-          color: var(--tide-booking-black);
-          /* color: variables.$white; */
-          font-weight: 700;
-        }
-      }
-
-      &-middle {
-        height: 430px;
-        background: var(--tide-booking-white);
-        transition: all 0.4s ease;
-
-        &-rows {
-          display: flex;
-          flex-direction: column;
-          gap: 10px;
-          padding: 15px 15px 0 15px;
-          max-height: 430px;
-        }
-
-        &-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding-bottom: 5px;
-          border-bottom: 1px dashed var(--tide-booking-color-primary-light);
-
-          &-left {
-            font-weight: 500;
-            color: var(--tide-booking-black);
-          }
-
-          &-right {
-            font-weight: 300;
-          }
-        }
-      }
-
-      &-bottom {
-        height: 30px;
-        background: var(--tide-booking-color-primary);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--tide-booking-white);
-        font-size: 14px;
-        transition: all 0.4s ease;
-      }
-
-      &-button {
-        // border: 1.25px solid var(--tide-booking-color-primary);
-        border-radius: 3px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--tide-booking-color-primary);
-        padding: 15px;
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.2s ease;
-      }
+      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
     }
 
+    // Slicing with image and usps,
+    // not available in the current API response.
+    // &-card {
+    //   // height: 522px;
+    //   width: 100%;
+    //   max-width: 315px;
+    //   min-width: 315px;
+
+    //   border-radius: 16px;
+    //   box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+    //   display: flex;
+    //   flex-direction: column;
+    //   justify-content: space-between;
+    //   overflow: hidden;
+    //   background: var(--tide-booking-white);
+    //   transition: all 0.4s ease;
+    //   cursor: pointer;
+
+    //   @include mixins.media-sm {
+    //     max-width: 345px;
+    //     min-width: 345px;
+    //   }
+
+    //   &:hover {
+    //     .flyin__content-card-top {
+    //       background: var(--tide-booking-color-primary-fade);
+    //     }
+
+    //     .flyin__content-card-button {
+    //       // background: var(--tide-booking-color-primary);
+    //       color: var(--tide-booking-white);
+
+    //       .cta--select {
+    //         background: var(--tide-booking-cta-background-select-hover);
+    //       }
+    //     }
+    //   }
+
+    //   &--selected {
+    //     .flyin__content-card-top {
+    //       background: var(--tide-booking-color-primary-gradient);
+    //       border-bottom: none;
+    //     }
+
+    //     .flyin__content-card-top-price {
+    //       color: var(--tide-booking-white);
+    //     }
+
+    //     .flyin__content-card-top-tag {
+    //       color: var(--tide-booking-white);
+    //     }
+
+    //     .flyin__content-card-middle {
+    //       // border-left: 4px solid var(--tide-booking-color-primary);
+    //       // border-right: 4px solid var(--tide-booking-color-primary);
+    //     }
+
+    //     &:hover {
+    //       .flyin__content {
+    //         cursor: default;
+    //       }
+
+    //       .flyin__content-card-top {
+    //         background: var(--tide-booking-color-primary-gradient);
+    //       }
+    //     }
+    //   }
+
+    //   &-top {
+    //     min-height: 60px;
+    //     width: 100%;
+    //     background: var(--tide-booking-color-primary);
+    //     display: flex;
+    //     justify-content: space-between;
+    //     align-items: end;
+    //     padding: 0 15px 12px 15px;
+    //     background: var(--tide-booking-white);
+    //     transition: all 0.4s ease;
+
+    //     &-price {
+    //       font-size: 18px;
+    //       font-weight: 700;
+    //       color: var(--tide-booking-black);
+
+    //       &--decrease {
+    //         color: green;
+    //       }
+
+    //       &--increase {
+    //         color: red;
+    //       }
+    //     }
+
+    //     &-tag {
+    //       font-size: 24px;
+    //       color: var(--tide-booking-black);
+    //       /* color: variables.$white; */
+    //       font-weight: 700;
+    //     }
+    //   }
+
+    //   &-middle {
+    //     height: 430px;
+    //     background: var(--tide-booking-white);
+    //     transition: all 0.4s ease;
+
+    //     &-rows {
+    //       display: flex;
+    //       flex-direction: column;
+    //       gap: 10px;
+    //       padding: 15px 15px 0 15px;
+    //       max-height: 430px;
+    //     }
+
+    //     &-row {
+    //       display: flex;
+    //       justify-content: space-between;
+    //       align-items: center;
+    //       padding-bottom: 5px;
+    //       border-bottom: 1px dashed var(--tide-booking-color-primary-light);
+
+    //       &-left {
+    //         font-weight: 500;
+    //         color: var(--tide-booking-black);
+    //       }
+
+    //       &-right {
+    //         font-weight: 300;
+    //       }
+    //     }
+    //   }
+
+    //   &-bottom {
+    //     height: 30px;
+    //     background: var(--tide-booking-color-primary);
+    //     display: flex;
+    //     justify-content: center;
+    //     align-items: center;
+    //     color: var(--tide-booking-white);
+    //     font-size: 14px;
+    //     transition: all 0.4s ease;
+    //   }
+
+    //   &-button {
+    //     // border: 1.25px solid var(--tide-booking-color-primary);
+    //     border-radius: 3px;
+    //     display: flex;
+    //     justify-content: center;
+    //     align-items: center;
+    //     color: var(--tide-booking-color-primary);
+    //     padding: 15px;
+    //     cursor: pointer;
+    //     font-size: 14px;
+    //     transition: all 0.2s ease;
+    //   }
+    // }
+
     &-data {
       display: flex;
       flex-direction: column;
@@ -579,6 +590,7 @@
 
   &__acco {
     padding-bottom: 30px;
+
     &__cards {
       display: grid;
       grid-template-columns: repeat(1, 1fr);
@@ -635,20 +647,28 @@
       font-weight: var(--tide-booking-search-hotel-card-price-font-weight);
       color: var(--tide-booking-search-hotel-card-price-color);
       font-size: 20px;
-
+      white-space: nowrap;
+
+      // &__wrapper {
+      //   position: absolute;
+      //   bottom: 0px;
+      //   right: 0px;
+      //   background: var(--tide-booking-search-hotel-card-price-background-color);
+      //   display: flex;
+      //   flex-flow: column nowrap;
+      //   align-items: center;
+      //   justify-content: center;
+      //   gap: 5px;
+      //   padding: 5px 20px;
+      //   border-radius: 5px 0 0 0;
+      //   box-shadow: var(--tide-booking-search-hotel-card-price-box-shadow);
+      // }
       &__wrapper {
-        position: absolute;
-        bottom: 0px;
-        right: 0px;
-        background: var(--tide-booking-search-hotel-card-price-background-color);
         display: flex;
         flex-flow: column nowrap;
         align-items: center;
         justify-content: center;
         gap: 5px;
-        padding: 5px 20px;
-        border-radius: 5px 0 0 0;
-        box-shadow: var(--tide-booking-search-hotel-card-price-box-shadow);
       }
 
       &__label {
@@ -667,7 +687,7 @@
     }
 
     &__content {
-      padding: 0px 20px;
+      padding: 20px 20px 0px 20px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -680,6 +700,11 @@
       display: flex;
       flex-direction: column;
       gap: 10px;
+
+      &__actions {
+        display: flex;
+        gap: 15px;
+      }
     }
 
     .dropdown {
@@ -693,6 +718,10 @@
         content: '';
         display: none;
       }
+
+      &__input {
+        gap: 0;
+      }
     }
   }
 }

package/styles/components/_footer.scss

@@ -29,6 +29,7 @@
   &__logo {
     width: auto;
     height: 40px;
+    cursor: pointer;
 
     svg,
     img {

package/styles/components/_navbar.scss

@@ -232,6 +232,7 @@
     width: auto;
     height: 100%;
     padding: 15px 0px;
+    cursor: pointer;
 
     svg {
       height: 100%;