@qite/tide-components 1.0.1

package/styles/components/_typeahead.scss

@@ -0,0 +1,275 @@
+.typeahead {
+  position: relative;
+  width: 100%;
+  @include column;
+  z-index: 97;
+
+  &__trigger {
+    position: relative;
+    width: 100%;
+    @include flex--centerY;
+
+    &:focus,
+    &:active {
+      .form__input {
+        border: var(--tide-booking-form-typeahead-agent-border-hover);
+      }
+
+      svg {
+        fill: var(--tide-booking-form-typeahead-agent-icon-color-hover);
+      }
+    }
+
+    &--icon {
+      .icon {
+        width: 18px;
+        height: 24px;
+        position: absolute;
+        left: 15px;
+
+        fill: var(--tide-booking-form-typeahead-agent-icon-color);
+
+        @include media-md {
+          display: flex;
+        }
+      }
+
+      .form__input {
+        padding-top: 0;
+        padding-left: 15px * 3;
+
+        @include media-md {
+        }
+      }
+    }
+  }
+
+  &__options {
+    width: 100%;
+    max-height: 25vh;
+    @include column;
+    border-radius: var(--tide-booking-form-typeahead-agent-options-border-radius);
+    backdrop-filter: blur(30px);
+    background-color: var(--tide-booking-form-typeahead-agent-options-background);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+    border: var(--tide-booking-form-typeahead-agent-options-border);
+    overflow-y: auto;
+    // position: absolute;
+    // top: 45px;
+    @extend %scrollbar-thin;
+
+    @include media-sm {
+      max-height: 35vh !important;
+    }
+
+    @include media-md {
+      max-height: 350px !important;
+    }
+
+    @include media-xl {
+      max-height: 400px !important;
+    }
+
+    @include media-xxl {
+      max-height: 500px !important;
+    }
+  }
+
+  &__options-body {
+    @extend %reset;
+    width: 100%;
+    @include column;
+  }
+
+  &__options-actions {
+    @extend %reset;
+    position: sticky;
+    width: 100%;
+    bottom: 0;
+    padding: 0 15px * 0.7 15px * 0.7 15px * 0.7;
+    margin-top: auto;
+    // background-color: yellow;
+  }
+
+  &__option {
+    @extend %reset;
+    width: 100%;
+    @include column;
+    flex-shrink: 0;
+    color: var(--tide-booking-form-typeahead-agent-options-color);
+    transition-duration: 0.2s;
+    transition-property: color, background-color;
+    transition-timing-function: ease-out;
+
+    &:hover,
+    &:focus,
+    &:active {
+      // background-color: yellow;
+    }
+  }
+
+  .typeahead__option + .typeahead__option {
+    border-top: var(--tide-booking-form-typeahead-agent-options-border);
+  }
+
+  &__option-description {
+    display: flex;
+    flex-flow: row wrap;
+    font-size: 14px;
+    white-space: pre-wrap;
+  }
+
+  &__option-header {
+    display: flex;
+  }
+
+  &__option-heading {
+    @include lineclamp($lineclamp-amount: 2);
+    line-height: 1.4;
+    white-space: pre-wrap;
+  }
+
+  &__option-highlight {
+    font-style: normal;
+    font-weight: var(--tide-booking-form-typeahead-agent-options-font-weight-highlight);
+    color: var(--tide-booking-form-typeahead-agent-options-color-highlight);
+    margin-right: 5px;
+    @extend %transition-easing;
+  }
+
+  &__option-label {
+    margin-top: 15px * 0.3;
+    margin-left: 15px * 0.7;
+    font-size: 14px;
+    font-style: italic;
+    line-height: 1;
+    @include lineclamp();
+  }
+
+  &__option-heading + &__option-label {
+    flex-shrink: 0;
+  }
+
+  &__option--icon {
+    position: relative;
+    padding: 10px 15px 10px 45px;
+    font-size: 16px;
+
+    &:hover,
+    &:focus,
+    &:active {
+      .typeahead__option-highlight {
+        // color: yellow;
+      }
+    }
+  }
+
+  &__option--icon + &__option {
+    padding-bottom: 15px;
+    border-top: 0;
+  }
+
+  &__region {
+    @extend %reset;
+    width: 100%;
+
+    & + & {
+      // border-top: 1.5px solid yellow;
+    }
+  }
+
+  &--active {
+    .typeahead__options {
+      display: flex;
+    }
+  }
+}
+
+.booking__panel .typeahead__options {
+  // border: 0.1rem solid yellow;
+}
+
+.qsm--inline .typeahead__trigger--icon .form__input {
+  padding-top: 1.6rem;
+}
+
+.qsm--inline .typeahead--active .typeahead__options {
+  display: flex;
+}
+
+.qsm--inline .typeahead {
+  @include media-sm {
+    z-index: initial;
+  }
+
+  &__options {
+    max-height: 60vh;
+    backdrop-filter: none;
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+    overflow-y: auto;
+
+    @include media-sm {
+      min-height: auto;
+      backdrop-filter: none;
+      background-color: transparent;
+      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &__trigger {
+    .typeahead__trigger {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  .qsm__panel {
+    &--active {
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      max-height: 100%;
+      padding: 1.5rem;
+      display: flex;
+      backdrop-filter: blur(1rem);
+      background-color: rgba(255, 255, 255, 0.8);
+      box-sizing: border-box;
+      pointer-events: initial;
+      z-index: 9999999999999999;
+
+      @media (max-width: 767px) {
+        transform: none !important;
+      }
+
+      @include media-sm {
+        height: auto;
+        max-height: 60vh;
+        padding: 0;
+      }
+    }
+
+    .form__input {
+      padding-top: 0;
+    }
+  }
+}
+
+/*.section--home-qsm {
+    .typeahead__options {
+        position: absolute;
+        transform: translateY(-100%);
+        display: none;
+    }
+}*/
+
+.typeahead__option .link {
+  &:hover,
+  &:focus,
+  &:active {
+    .typeahead__option-highlight {
+      // color: yellow;
+    }
+  }
+}

package/styles/components/_variables.scss

@@ -0,0 +1,89 @@
+// COLOR DEFINITIONS
+$jelly-bean: #26809b;
+$cerulean: #12aad8;
+$limed-oak: #8f8345;
+
+// COLOR ASSIGNMENTS
+$color-primary: $cerulean;
+$color-secondary: $limed-oak;
+$color-star: #9e914f;
+$invalid: #e74c3c;
+$price-increase: #e81212;
+$price-decrease: #19a364;
+
+$white: #ffffff;
+$gray-light: #f5f5f5;
+$gray-xlight: #fbfbfb;
+$gray--medium-light: #efefef;
+$gray-background-light: #e2e2e2;
+$gray-border-light: #f3f3f3;
+$gray-border-medium: #e5e5e5;
+$gray-border-tree: #b9b9b9;
+$gray-checkbox-bg: #bdbdbd;
+$gray-medium: #cbcbcb;
+$gray-timeline: #808080;
+$gray-dark: #666666;
+$tree-border-selected: #e0ecff;
+$tree-background-selected: #edfbff;
+$black: #0a0a0a;
+$transparent: transparent;
+
+$economy: #334eac;
+$economy-background: #ebedf7;
+$premium: #85204b;
+$premium-background: #f1e6eb;
+$business: #8e8347;
+$business-background: #f5f4ed;
+
+// BACKGROUNDS
+$bg-secondary: lighten(#f1efe5, 3%);
+$btn-hover: darken($color-primary, 3%);
+
+// TYPOGRAPHY
+$font-heading: 'Prata', serif;
+$font-body: 'proxima-nova', sans-serif;
+$font-handwritten: 'caliban-std', sans-serif;
+
+// GRID
+$container-wide: 169rem;
+$container-medium: 120rem;
+$container-small: 90rem;
+$container-article: 65rem;
+$gutter: 1.5rem;
+
+// MEDIA QUERIES
+$screen-xs: 576px;
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+$screen-xl: 1650px;
+$screen-xxl: 1920px;
+
+%scrollbar-none {
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+
+  &::-webkit-scrollbar-track {
+    padding: 0;
+    background: transparent;
+  }
+}
+
+%scrollbar-thin {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    padding: 2px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: fade-out($black, 0.75);
+  }
+}