@qite/tide-components 1.0.1

package/styles/components/_passenger-picker.scss

@@ -0,0 +1,306 @@
+@use '../components/mixins' as mixins;
+
+.passenger-picker {
+  z-index: 30; // was 1110005
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 100%;
+  padding: 1.5rem;
+
+  background: var(--tide-booking-passenger-picker-background);
+  border-bottom: var(--tide-booking-passenger-picker-border);
+  box-shadow: none;
+  @extend %transition-easing;
+
+  @include mixins.media-sm {
+    width: 100%;
+    height: auto;
+    position: absolute;
+    top: 64px;
+    left: 0;
+    box-shadow: var(--tide-booking-passenger-picker-box-shadow);
+  }
+
+  &__line {
+    border-bottom: var(--tide-booking-passenger-picker-header-border);
+    margin-top: 1rem;
+
+    &--room {
+      margin: 1rem 0;
+    }
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0 1.5rem;
+
+    @include mixins.media-sm {
+      padding: 0;
+      padding-bottom: 1rem;
+    }
+  }
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-text {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      font-size: var(--tide-booking-passenger-picker-room-item-font-size);
+      font-weight: var(--tide-booking-passenger-picker-room-item-font-weight);
+      color: var(--tide-booking-passenger-picker-room-item-color);
+
+      &-age {
+        font-size: var(--tide-booking-passenger-picker-room-item-age-font-size);
+        font-weight: var(--tide-booking-passenger-picker-room-item-age-font-weight);
+        color: var(--tide-booking-passenger-picker-room-item-age-color);
+      }
+    }
+
+    &-selector {
+      display: flex;
+      gap: 10px;
+    }
+  }
+
+  &__rooms {
+    &-wrapper {
+      padding: 0 1.5rem;
+
+      @include mixins.media-sm {
+        padding: 0;
+        max-height: 100%;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        -ms-overflow-style: none; // IE and Edge
+        scrollbar-width: none; // Firefox
+      }
+    }
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 3px;
+      padding: 0 15px;
+      padding-bottom: 10px;
+      border-bottom: var(--tide-booking-passenger-picker-header-border);
+      margin-bottom: 10px;
+
+      @include mixins.media-sm {
+        padding: 0;
+        padding-bottom: 10px;
+      }
+
+      &-title {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        margin-bottom: 0px;
+        color: var(--tide-booking-passenger-picker-header-color);
+        font-weight: var(--tide-booking-passenger-picker-header-font-weight);
+      }
+
+      &-count {
+        color: var(--tide-booking-passenger-picker-header-count-color);
+      }
+    }
+  }
+
+  &__room {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    &-title {
+      font-weight: var(--tide-booking-passenger-picker-room-title-font-weight);
+      color: var(--tide-booking-passenger-picker-room-title-color);
+    }
+  }
+
+  &__add-room {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    max-width: 10rem;
+    height: 2.25rem;
+    font-size: 16px;
+
+    background: red;
+    color: white;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: purple;
+      cursor: pointer;
+    }
+
+    &--disabled {
+      opacity: 60%;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__remove-room {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  &__class {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    font-size: 14px;
+  }
+
+  &__info-message {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: var(--tide-booking-passenger-picker-room-info-message-padding);
+    background: var(--tide-booking-passenger-picker-room-info-message-background);
+    border: var(--tide-booking-passenger-picker-room-info-message-border);
+    border-radius: var(--tide-booking-passenger-picker-room-info-message-border-radius);
+    margin-top: 7.5px;
+
+    &-icon {
+      fill: var(--tide-booking-passenger-picker-room-info-message-color-icon);
+      width: var(--tide-booking-passenger-picker-room-info-message-icon-size);
+      height: var(--tide-booking-passenger-picker-room-info-message-icon-size);
+      flex-shrink: 0;
+    }
+
+    &-explanation {
+      font-size: var(--tide-booking-passenger-picker-room-info-message-font-size);
+      color: var(--tide-booking-passenger-picker-room-info-message-color);
+      font-style: var(--tide-booking-passenger-picker-room-info-message-font-style);
+    }
+
+    // &-link {
+    //   color: red;
+    //   text-decoration: underline;
+    //   cursor: pointer;
+    // }
+  }
+}
+
+.dropdown {
+  position: relative;
+
+  &__input {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+
+    @include mixins.media-sm {
+      align-items: center;
+      flex-direction: row;
+    }
+  }
+
+  .dropdown-toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 10px 12.5px;
+    font-size: 16px;
+
+    background: var(--tide-booking-dropdown-background);
+    color: var(--tide-booking-dropdown-color);
+    border: var(--tide-booking-dropdown-border);
+    border-radius: var(--tide-booking-dropdown-border-radius);
+
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.5s;
+
+    &:hover {
+      color: var(--tide-booking-dropdown-color-hover);
+      border: var(--tide-booking-dropdown-border-hover);
+      background: var(--tide-booking-dropdown-background-hover);
+    }
+
+    @include mixins.media-sm {
+      width: auto;
+      min-width: 200px;
+    }
+
+    &--open {
+      color: var(--tide-booking-dropdown-color-focus);
+      border: var(--tide-booking-dropdown-border-focus);
+      background: var(--tide-booking-dropdown-background-focus);
+
+      .arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .arrow {
+    font-size: 18px;
+    width: fit-content;
+    transition: transform 0.3s ease;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    z-index: 40;
+    top: auto;
+    bottom: auto;
+
+    width: 100%;
+    max-height: 250px;
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+    background: var(--tide-booking-dropdown-menu-background);
+    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;
+      font-size: 16px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      color: var(--tide-booking-dropdown-menu-option-color);
+      fill: var(--tide-booking-dropdown-menu-option-color);
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      &:hover {
+        background: var(--tide-booking-dropdown-menu-option-background-hover);
+        color: var(--tide-booking-dropdown-menu-option-color-hover);
+        fill: var(--tide-booking-dropdown-menu-option-color-hover);
+      }
+    }
+
+    &--up {
+      bottom: 100%;
+    }
+
+    &--down {
+      top: 100%;
+    }
+  }
+}

package/styles/components/_phone-input.scss

@@ -0,0 +1,8 @@
+.phone-input {
+  display: flex;
+  gap: 5px;
+
+  .dropdown {
+    width: 40%;
+  }
+}

package/styles/components/_placeholders.scss

@@ -0,0 +1,165 @@
+// RESET
+%reset {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+// UI
+%cta {
+  cursor: pointer;
+  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;
+  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 {
+  cursor: pointer;
+  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;
+  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

@@ -0,0 +1,163 @@
+.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;
+
+    &--sub {
+      padding-left: 1rem;
+
+      .pricing-summary__property,
+      .pricing-summary__value {
+        font-size: calc(var(--tide-booking-sidebar-body-font-size) - 1px);
+      }
+    }
+  }
+
+  &__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

@@ -0,0 +1,17 @@
+.qsm {
+  @extend %reset;
+  &__panel {
+    @extend %reset;
+    position: absolute;
+    border-radius: 5px;
+    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);
+  }
+}