@qite/tide-booking-component 1.2.2 → 1.2.4

package/styles/components/_form.scss

@@ -1,6 +1,12 @@
 .form {
   @extend %reset;
 
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20rem;
+  }
+
   &__label {
     @extend %reset;
     margin-bottom: 15px * 0.5;
@@ -129,7 +135,259 @@
     }
   }
 
+  &__region {
+    @extend %reset;
+
+    & + .form__region {
+      margin-top: 15px * 4;
+    }
+
+    &-header {
+      margin-bottom: 15px * 0.3;
+      display: flex;
+      flex-flow: row wrap;
+    }
+
+    &-heading {
+      @include media-xs {
+        padding-right: 15px * 2;
+      }
+    }
+
+    &-label {
+      width: 100%;
+      margin-top: -15px * 0.5;
+      font-style: italic;
+      order: 2;
+
+      @include media-xs {
+        width: auto;
+        margin-top: 0;
+        // @include marginLeft(15px * 0.2);
+        order: initial;
+      }
+    }
+
+    &--errors {
+      padding-left: 0 !important;
+      border: none !important;
+      color: var(--tide-booking-invalid);
+    }
+  }
+
+  &__room {
+    display: grid;
+    grid-template-rows: repeat(1, 1fr);
+    gap: 15px;
+    padding: 20px;
+    background: var(--tide-booking-room-options-card-background);
+    border: var(--tide-booking-room-options-card-border);
+    border-radius: var(--tide-booking-room-options-card-border-radius);
+
+    @include media-md {
+      gap: 25px;
+      grid-template-columns: 75% 20%;
+      justify-content: space-between;
+    }
+
+    &__header{
+      @include h3;
+      color: #666;
+    }
+
+    &__wrapper {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: repeat(1, 1fr);
+      gap: 15px;
+
+      @include media-sm {
+        gap: 25px;
+        grid-template-columns: 230px 1fr;
+      }
+    }
+
+    &__image{
+      width: 100%;
+      height: 230px;
+      object-fit: cover; 
+      overflow: hidden;
+      border-radius: var(--tide-booking-room-options-image-border-radius);
+      position: relative;
+    }
+
+    &__img{
+      width: 100%;
+      height: 100%;
+      object-fit: cover; 
+      object-position: center;
+    }
+
+    &__favorite {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: white;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      color: #26b489;
+      font-size: 20px;
+    }
+
+    &__footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-end;
+      gap: 10px;
+
+      @include media-xs {
+        flex-direction: row;
+      }
+
+      @include media-md {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+
+      p {
+        margin-bottom: 0;
+        font-size: 14px;
+
+        @include media-md {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
 
+      &__top {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 5px;
+        width: 100%;
+
+        @include media-md {
+          align-items: flex-end;
+        }
+      }
+
+      &__bottom {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 5px;
+        width: 100%;
+        max-width: 230px;
+
+        @include media-md {
+          align-items: flex-end;
+        }
+      }
+
+      .cta {
+        width: 100%;
+        max-width: 230px;
+        justify-content: center;
+      }
+    }
+
+    &__title {
+      font-family: var(--tide-booking-room-options-title-font-family);
+      font-weight: var(--tide-booking-room-options-title-font-weight);
+      color: var(--tide-booking-room-options-title-color);
+      margin-bottom: 5px;
+    }
+
+
+    &__text{
+      font-size: 14px;
+      line-height: 18px;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical; 
+    }
+
+    &__days{
+      font-size: 14px;
+      @include media-md {
+        font-size: 16px;
+        text-align: right;
+      }
+    }
+
+    &__usps{
+      display: flex; 
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      gap: 10px;
+      row-gap: 0rem;
+      margin: 0;
+    }
+
+    &__select {
+      display: grid;
+      grid-template-rows: repeat(1, 1fr);
+      gap: 10px;
+      margin-top: 15px;
+
+      @include media-md {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 15px;
+      }
+    }
+
+    &__price {
+      font-size: 16px;
+      font-weight: 400;
+      color: #0a0a0a;
+
+      span{        
+        font-size: 20px;
+        font-weight: bold;
+      }
+
+      &--increase {
+        color: var(--tide-booking-price-increase);
+      }
+
+      &--decrease {
+        color: var(--tide-booking-price-decrease);
+      }
+    }
+
+    &__alternatives{
+      &__header{
+        margin: 30px 0rem 10px 0rem;
+        font-size: 16px;
+      }
+
+      &__btn{
+        margin-bottom: 5px;
+        outline: none;
+        border: none;
+        background: transparent;
+        text-align: right;
+        color: #667eff;
+        text-decoration: underline;
+        transition: color 0.3s ease, text-decoration 0.3s ease;
+
+        &:hover{
+          text-decoration: none;
+          color: #667effcc;
+        }
+      }
+    }
+
+  }
 
 }
 

package/styles/components/_list.scss

@@ -0,0 +1,82 @@
+.list {
+  display: flex;
+  flex-direction: column;
+
+  &--booking-summary {
+    .list__item {
+      margin: 5px 0;
+    }
+  }
+
+
+  &--usps {
+    li {
+      position: relative;
+      padding-left: 20px;
+      list-style-type: none;
+      @extend %transition-easing;
+
+      @include media-xs {
+        padding-left: 20px;
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        width: 18px;
+        height: 6px;
+        left: 0;
+        top: 3px;
+        transform: rotate(-45deg);
+        border-left: 0.2rem solid $color-primary;
+        border-bottom: 0.2rem solid $color-primary;
+        @extend %transition-easing;
+
+        @include media-xs {
+          width: 22px;
+          height: 8px;
+        }
+      }
+    }
+
+    .list {
+      &__item {
+        position: relative;
+        padding-left: 20px;
+        list-style-type: none;
+        @extend %transition-easing;
+        margin-right: 10px;
+        font-weight: 400;
+        line-height: 18px;
+        font-size: 14px;
+        font-weight: var(--tide-booking-room-options-usp-list-font-weight);
+        color: var(--tide-booking-room-options-usp-list-color);
+
+        @include media-xs {
+          padding-left: 20px;
+          font-size: 16px;
+          line-height: 20px;
+        }
+
+        &:before {
+          content: "";
+          position: absolute;
+          width: 12px;
+          height: 6px;
+          left: 0rem;
+          top: 35%;
+          transform: rotate(-45deg) translateY(-50%);
+          border-left: 2px solid var(--tide-booking-room-options-usp-list-icon-color);
+          border-bottom: 2px solid var(--tide-booking-room-options-usp-list-icon-color);
+          @extend %transition-easing;
+
+          @include media-xs {
+            height: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+
+

package/styles/components/_mixins.scss

@@ -49,26 +49,38 @@
 }
 
 // GRID
+@mixin container() {
+  width: 100%;
+  padding: 0 15px;
+  margin: 0 auto;
+
+  @include media-sm {
+    padding: 0 30px;
+  }
 
+  @include media-lg {
+    padding: 0 45px;
+  }
+}
 
 @mixin container-wide() {
   @include container();
-  max-width: $container-wide;
+  max-width: var(--tide-booking-container-wide);
 }
 
 @mixin container-medium() {
   @include container();
-  max-width: $container-medium;
+  max-width: var(--tide-booking-container-medium);
 }
 
 @mixin container-small() {
   @include container();
-  max-width: $container-small;
+  max-width: var(--tide-booking-container-small);
 }
 
 @mixin container-article() {
   @include container();
-  max-width: $container-article;
+  max-width: var(--tide-booking-container-article);
 }
 
 @mixin row() {
@@ -385,7 +397,7 @@
   font-weight: normal;
   line-height: 1.35;
   word-break: break-word;
-  color: var(--tide-booking-black);
+  color: var(--tide-booking-heading-color);
 
   &:empty {
     display: none;

package/styles/components/_placeholders.scss

@@ -82,7 +82,7 @@
   font-weight: var(--tide-booking-cta-font-weight-secondary);
   text-decoration: var(--tide-booking-cta-text-decoration-secondary);
   color: var(--tide-booking-cta-color-secondary);
-  background: var(--tide-booking-cta-background-secondary-secondary);
+  background: var(--tide-booking-cta-background-secondary);
   box-sizing: border-box;
   transition: all .3s ease;
 
@@ -134,7 +134,7 @@
 
   &::-webkit-scrollbar-thumb {
     border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: #cbcbcb;
   }
 }
 

package/styles/components/_pricing-summary.scss

@@ -0,0 +1,117 @@
+.pricing-summary {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__property {
+    color: var(--tide-booking-sidebar-body-label-color);
+    font-size: var(--tide-booking-sidebar-body-label-font-size);
+    font-weight: var(--tide-booking-sidebar-body-label-font-weight);
+  }
+
+  &__region {
+    padding: 25px 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  &__region--pricing {
+    position: sticky;
+    bottom: 0;
+    background: var(--tide-booking-sidebar-footer-background);
+
+    small {
+      font-size: var(--tide-booking-sidebar-footer-small-font-size);
+      color: var(--tide-booking-sidebar-footer-small-color);
+
+      strong {
+        color: var(--tide-booking-sidebar-footer-small-strong-color);
+      }
+
+    }
+
+    .pricing-summary__row + .pricing-summary__row {
+      margin-top: 0;
+    }
+  }
+
+  &__region + &__region {
+    border-top: var(--tide-booking-sidebar-body-border);
+  }
+
+  &__region + &__region--pricing {
+    padding: 15px 0rem;
+  }
+
+  &__row {
+    width: 100%;
+    @include row;
+    justify-content: space-between;
+    font-size: var(--tide-booking-sidebar-body-font-size);
+    font-family: var(--tide-booking-sidebar-body-font-family);
+    line-height: 1.3;
+  }
+
+  &__title {
+    margin-bottom: 0;
+    color: var(--tide-booking-sidebar-body-title-color);
+    font-family: var(--tide-booking-sidebar-body-title-font-family);
+    font-size: var(--tide-booking-sidebar-body-title-font-size);
+    font-weight: var(--tide-booking-sidebar-body-title-font-weight);
+  }
+
+  &__value {
+    margin-left: 15px;
+    text-align: right;
+    color: var(--tide-booking-sidebar-body-color);
+    font-weight: var(--tide-booking-sidebar-body-font-weight);
+
+    &--flight {
+      font-weight: var(--tide-booking-sidebar-body-flight-font-weight);
+      color: var(--tide-booking-sidebar-body-flight-color);
+    }
+  }
+
+  &__social {
+    width: 100%;
+    padding: 15px;
+    margin-top: 20px;
+    @include column;
+    @include flex--centerXY;
+    text-align: center;
+    box-sizing: border-box;
+  }
+}
+
+.pricing-summary .pricing {
+  @include media-lg {
+    margin-top: -15px * 0.4;
+  }
+}
+
+.pricing-summary__region--pricing {
+  .pricing .pricing__price {
+    font-size: var(--tide-booking-sidebar-footer-advance-font-size);
+    font-weight: var(--tide-booking-sidebar-footer-advance-font-weight);
+    color: var(--tide-booking-sidebar-footer-advance-color);
+    margin-top: 0.3rem;
+
+  }
+
+  .pricing-summary__row--total-price {
+    .pricing__price {
+      //font-size: 1.8rem;(
+      font-size: var(--tide-booking-sidebar-footer-total-font-size);
+      font-weight: var(--tide-booking-sidebar-footer-total-font-weight);
+      color: var(--tide-booking-sidebar-footer-total-color);
+      line-height: 1.8;
+    }
+  }
+}

package/styles/components/_select-wrapper.scss

@@ -0,0 +1,66 @@
+.select-wrapper {
+  &__select {
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      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);
+      transform: rotate(-45deg);
+    }
+  }
+
+  select {
+    width: 100%;
+    height: 40px;
+    padding: 0 40px 0 10px;
+    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;
+
+    &:focus {
+      outline: none;
+      border: --tide-booking-room-options-dropdown-select-border-focus;
+    }
+
+    option{
+      font-family: var(--tide-booking-room-options-dropdown-select-font-family);
+      font-size: 16px;
+      color: var(--tide-booking-room-options-dropdown-select-option-color);
+    }
+  }
+}
+
+.productcard--accommodation .select-wrapper {
+  select {
+    font-size: 14.5px;
+
+    @include media-xs {
+      font-size: 15.5px;
+    }
+  }
+}
+
+.tree .select-wrapper {
+  width: 100%;
+
+  @include media-lg {
+    transform: translateY(-5px);
+  }
+
+  @include media-xl {
+    transform: translateY(-7px);
+  }
+}
+
+select {
+  font-family: --tide-booking-font-body;
+  font-size: 16px;
+}