@qite/tide-components 1.0.13-preview.0 → 1.0.14

package/styles/components/_typeahead.scss

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