npm - @qite/tide-components - Versions diffs - 1.0.13 → 1.0.15 - Mend

@qite/tide-components 1.0.13 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/build/build-cjs/index.js +11 -11
package/build/build-esm/index.js +11 -11
package/package.json +91 -91
package/styles/abstracts/_mixins.scss +74 -74
package/styles/abstracts/_variables.scss +57 -57
package/styles/base/_fonts.scss +2 -2
package/styles/base/_normalize.scss +227 -227
package/styles/base/_typography.scss +35 -35
package/styles/booking-joker-variables.scss +596 -596
package/styles/booking-product-variables.scss +330 -330
package/styles/booking-product.scss +438 -438
package/styles/booking-qsm-variables.scss +501 -501
package/styles/booking-qsm.scss +52 -52
package/styles/booking-search-results-variables.scss +734 -734
package/styles/booking-search-results.scss +53 -53
package/styles/booking-wizard-variables.scss +603 -603
package/styles/booking-wizard.scss +61 -61
package/styles/components/_accordion.scss +67 -67
package/styles/components/_animations.scss +39 -39
package/styles/components/_base.scss +107 -107
package/styles/components/_booking.scss +906 -906
package/styles/components/_breadcrumb.scss +92 -92
package/styles/components/_button.scss +238 -238
package/styles/components/_checkbox.scss +230 -230
package/styles/components/_contact.scss +255 -255
package/styles/components/_content.scss +336 -336
package/styles/components/_cta.scss +238 -238
package/styles/components/_date-list.scss +41 -41
package/styles/components/_date-range-picker.scss +223 -223
package/styles/components/_decrement-increment.scss +35 -35
package/styles/components/_dropdown.scss +77 -77
package/styles/components/_error.scss +50 -50
package/styles/components/_faq.scss +30 -30
package/styles/components/_flight-option.scss +1444 -1444
package/styles/components/_flyin.scss +830 -830
package/styles/components/_footer.scss +135 -135
package/styles/components/_form.scss +1704 -1704
package/styles/components/_gallery.scss +317 -317
package/styles/components/_header.scss +113 -113
package/styles/components/_image-with-text.scss +206 -206
package/styles/components/_img-slider.scss +175 -175
package/styles/components/_info-message.scss +75 -75
package/styles/components/_input.scss +35 -35
package/styles/components/_list.scss +185 -185
package/styles/components/_loader.scss +152 -152
package/styles/components/_login.scss +140 -140
package/styles/components/_map-view.scss +1100 -1100
package/styles/components/_mixins.scss +579 -579
package/styles/components/_navbar.scss +765 -765
package/styles/components/_passenger-picker.scss +306 -306
package/styles/components/_phone-input.scss +8 -8
package/styles/components/_placeholders.scss +165 -165
package/styles/components/_pricing-summary.scss +163 -163
package/styles/components/_qsm.scss +17 -17
package/styles/components/_radiobutton.scss +170 -170
package/styles/components/_search.scss +2197 -2197
package/styles/components/_select-wrapper.scss +81 -81
package/styles/components/_slider.scss +120 -120
package/styles/components/_spinner.scss +29 -29
package/styles/components/_step-indicators.scss +187 -187
package/styles/components/_table.scss +81 -81
package/styles/components/_tide-form.scss +578 -578
package/styles/components/_tree.scss +648 -648
package/styles/components/_typeahead.scss +275 -275
package/styles/components/_variables.scss +89 -89
package/styles/content-blocks-variables.scss +543 -543
package/styles/content-blocks.scss +66 -66
package/styles/font.scss +2 -2
package/styles/qsm/_calendar.scss +274 -274
package/styles/qsm/_qsm.scss +1097 -1097
package/styles/search.scss +1200 -1200
package/styles/tide-form-variables.scss +275 -275
package/styles/tide-form.scss +56 -56

package/styles/components/_placeholders.scss CHANGED Viewed

@@ -1,165 +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;
-}
+// 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 CHANGED Viewed

@@ -1,163 +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;
-}
+.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 CHANGED Viewed

@@ -1,17 +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);
-  }
-}
+.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);
+  }
+}