@qite/tide-booking-component 1.2.4 → 1.2.5

package/styles/components/_placeholders.scss

@@ -1,166 +1,166 @@
-// RESET
-%reset {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-// UI
-%cta {
-  height: var(--tide-booking-cta-height);
-  width: var(--tide-booking-cta-width);
-  padding: var(--tide-booking-cta-padding);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: center;
-  gap: 5px;
-  outline: none;
-  border-radius: var(--tide-booking-cta-border-radius);
-  border: var(--tide-booking-cta-border);
-  line-height: 1.2;
-  font-family: var(--tide-booking-cta-font-family-secondary);
-  font-size: var(--tide-booking-cta-font-size);
-  font-weight: var(--tide-booking-cta-font-weight);
-  text-decoration: var(--tide-booking-cta-text-decoration);
-  color: var(--tide-booking-cta-color);
-  background: var(--tide-booking-cta-background);
-  box-sizing: border-box;
-  transition: all .3s ease;
-
-  @include media-xs {
-    width: var(--tide-booking-cta-width-xs);
-    height: var(--tide-booking-cta-height-xs);
-    font-size: var(--tide-booking-cta-font-size-xs);
-  }
-
-  .icon{
-    width: var(--tide-booking-cta-icon-size);
-    height: var(--tide-booking-cta-icon-size);
-  }
-  
-  &:hover{
-    background: var(--tide-booking-cta-background-hover);
-    text-decoration: var(--tide-booking-cta-text-decoration-hover);
-    color: var(--tide-booking-cta-color-hover);
-    fill: var(--tide-booking-cta-icon-color-hover);
-    border: var(--tide-booking-cta-border-hover);
-
-  }
-  
-  &:focus,
-  &:active {
-    text-decoration: var(--tide-booking-cta-text-decoration-focus);
-    background: var(--tide-booking-cta-background-focus);
-    color: var(--tide-booking-cta-color-focus);
-    fill: var(--tide-booking-cta-icon-color-focus);
-    border: var(--tide-booking-cta-border-focus);
-  }
-
-  span {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-}
-
-%cta--secondary {
-  height: var(--tide-booking-cta-height-secondary);
-  width: var(--tide-booking-cta-width-secondary);
-  padding: var(--tide-booking-cta-padding-secondary);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  align-self: center;
-  outline: none;
-  border-radius: var(--tide-booking-cta-border-radius-secondary);
-  border: var(--tide-booking-cta-border-secondary);
-  line-height: 1.2;
-  font-family: var(--tide-booking-cta-font-family-secondary);
-  font-size: var(--tide-booking-cta-font-size-secondary);
-  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);
-  box-sizing: border-box;
-  transition: all .3s ease;
-
-  @include media-xs {
-    height: var(--tide-booking-cta-height-xs-secondary);
-    font-size: var(--tide-booking-cta-font-size-xs-secondary);
-  }
-
-  .icon{
-    width: var(--tide-booking-cta-icon-size-secondary);
-    height: var(--tide-booking-cta-icon-size-secondary);
-  }
-  
-  &:hover{
-    background: var(--tide-booking-cta-background-secondary-hover);
-    color: var(--tide-booking-cta-color-secondary-hover);
-    fill: var(--tide-booking-cta-icon-color-secondary-hover);
-    border: var(--tide-booking-cta-border-secondary-hover);
-    text-decoration: var(--tide-booking-cta-text-decoration-secondary-hover);
-  }
-  
-  &:focus,
-  &:active {
-    text-decoration: none;
-    background: var(--tide-booking-cta-background-secondary-focus);
-    color: var(--tide-booking-cta-color-secondary-focus);
-    fill: var(--tide-booking-cta-icon-color-secondary-focus);
-    border: var(--tide-booking-cta-border-secondary-focus);
-    text-decoration: var(--tide-booking-cta-text-decoration-secondary-hover);
-  }
-
-  span {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-}
-
-%scrollbar-thin {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    padding: 2px;
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: #cbcbcb;
-  }
-}
-
-%scrollbar-transparent {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    width: 0 !important;
-  }
-}
-
-%text-decoration-none {
-  text-decoration: none;
-
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-  }
-}
-
-// ANIMATIONS
-%transition-easing {
-  transition-duration: 0.2s;
-  transition-property: width, height, transform, border, fill, color,
-    background-color, box-shadow, opacity;
-  transition-timing-function: ease-out;
-}
+// RESET
+%reset {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+// UI
+%cta {
+  height: var(--tide-booking-cta-height);
+  width: var(--tide-booking-cta-width);
+  padding: var(--tide-booking-cta-padding);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  gap: 5px;
+  outline: none;
+  border-radius: var(--tide-booking-cta-border-radius);
+  border: var(--tide-booking-cta-border);
+  line-height: 1.2;
+  font-family: var(--tide-booking-cta-font-family-secondary);
+  font-size: var(--tide-booking-cta-font-size);
+  font-weight: var(--tide-booking-cta-font-weight);
+  text-decoration: var(--tide-booking-cta-text-decoration);
+  color: var(--tide-booking-cta-color);
+  background: var(--tide-booking-cta-background);
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+
+  @include media-xs {
+    width: var(--tide-booking-cta-width-xs);
+    height: var(--tide-booking-cta-height-xs);
+    font-size: var(--tide-booking-cta-font-size-xs);
+  }
+
+  .icon {
+    width: var(--tide-booking-cta-icon-size);
+    height: var(--tide-booking-cta-icon-size);
+  }
+
+  &:hover {
+    background: var(--tide-booking-cta-background-hover);
+    text-decoration: var(--tide-booking-cta-text-decoration-hover);
+    color: var(--tide-booking-cta-color-hover);
+    fill: var(--tide-booking-cta-icon-color-hover);
+    border: var(--tide-booking-cta-border-hover);
+  }
+
+  &:focus,
+  &:active {
+    text-decoration: var(--tide-booking-cta-text-decoration-focus);
+    background: var(--tide-booking-cta-background-focus);
+    color: var(--tide-booking-cta-color-focus);
+    fill: var(--tide-booking-cta-icon-color-focus);
+    border: var(--tide-booking-cta-border-focus);
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+}
+
+%cta--secondary {
+  height: var(--tide-booking-cta-height-secondary);
+  width: var(--tide-booking-cta-width-secondary);
+  padding: var(--tide-booking-cta-padding-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  align-self: center;
+  outline: none;
+  border-radius: var(--tide-booking-cta-border-radius-secondary);
+  border: var(--tide-booking-cta-border-secondary);
+  line-height: 1.2;
+  font-family: var(--tide-booking-cta-font-family-secondary);
+  font-size: var(--tide-booking-cta-font-size-secondary);
+  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);
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+
+  @include media-xs {
+    height: var(--tide-booking-cta-height-xs-secondary);
+    font-size: var(--tide-booking-cta-font-size-xs-secondary);
+  }
+
+  .icon {
+    width: var(--tide-booking-cta-icon-size-secondary);
+    height: var(--tide-booking-cta-icon-size-secondary);
+    fill: var(--tide-booking-cta-icon-color-secondary);
+  }
+
+  &:hover {
+    background: var(--tide-booking-cta-background-secondary-hover);
+    color: var(--tide-booking-cta-color-secondary-hover);
+    fill: var(--tide-booking-cta-icon-color-secondary-hover);
+    border: var(--tide-booking-cta-border-secondary-hover);
+    text-decoration: var(--tide-booking-cta-text-decoration-secondary-hover);
+  }
+
+  &:focus,
+  &:active {
+    text-decoration: none;
+    background: var(--tide-booking-cta-background-secondary-focus);
+    color: var(--tide-booking-cta-color-secondary-focus);
+    fill: var(--tide-booking-cta-icon-color-secondary-focus);
+    border: var(--tide-booking-cta-border-secondary-focus);
+    text-decoration: var(--tide-booking-cta-text-decoration-secondary-hover);
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+}
+
+%scrollbar-thin {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    padding: 2px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: #cbcbcb;
+  }
+}
+
+%scrollbar-transparent {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+  }
+}
+
+%text-decoration-none {
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+}
+
+// ANIMATIONS
+%transition-easing {
+  transition-duration: 0.2s;
+  transition-property: width, height, transform, border, fill, color,
+    background-color, box-shadow, opacity;
+  transition-timing-function: ease-out;
+}

package/styles/components/_pricing-summary.scss

@@ -1,117 +1,155 @@
-.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;
-    }
-  }
-}
+.pricing-summary {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &__wrapper {
+    overflow: hidden;
+    overflow-y: auto;
+    height: calc(100vh - 350px);
+    @extend %scrollbar-thin;
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    opacity: 0;
+    transform: translateY(12px);
+    animation: fadeInUp 0.6s ease-out forwards;
+
+    // Use nth-child for delay
+    // &:nth-child(1) {
+    //   animation-delay: 0.1s;
+    // }
+    // &:nth-child(2) {
+    //   animation-delay: 0.2s;
+    // }
+    // &:nth-child(3) {
+    //   animation-delay: 0.3s;
+    // }
+  }
+
+  &__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);
+    border-radius: 0px 0px var(--tide-booking-sidebar-frame-radius)
+      var(--tide-booking-sidebar-frame-radius);
+
+    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;
+    }
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pricing-summary__region--fade-in {
+  animation: fadeInUp 0.6s ease-out both;
+}

package/styles/components/_qsm.scss

@@ -1,20 +1,17 @@
-.qsm {
-  @extend %reset;
-  &__panel {
-    @extend %reset;
-    position: absolute;
-    border-radius: 0.5rem;
-    border: var(--tide-booking-datepicker-container-border);
-    box-sizing: border-box;
-  }
-
-  &__close{
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    fill: var(--tide-booking-datepicker-close-color);
-  }
-}
-
-
-
+.qsm {
+  @extend %reset;
+  &__panel {
+    @extend %reset;
+    position: absolute;
+    border-radius: 0.5rem;
+    border: var(--tide-booking-datepicker-container-border);
+    box-sizing: border-box;
+  }
+
+  &__close {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    fill: var(--tide-booking-datepicker-close-color);
+  }
+}