@qite/tide-booking-component 1.4.92 → 1.4.93

package/styles/components/_breadcrumb.scss

@@ -1,92 +1,92 @@
-@use '../components/mixins' as mixins;
-
-.breadcrumb {
-  font-size: 12px;
-  color: #fff;
-  position: absolute;
-  z-index: 2;
-  top: 60px;
-  left: 0px;
-  width: 100%;
-
-  @include mixins.media-md {
-    font-size: 14px;
-    top: 120px;
-  }
-
-  &__container {
-    @include mixins.container-wide();
-    padding-top: 30px !important;
-  }
-
-  &__list {
-    display: flex;
-    align-items: center;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    display: inline-flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  &__separator {
-    margin: 0 5px;
-    color: #ffffff;
-    user-select: none;
-  }
-
-  &__link,
-  &__current {
-    display: inline-flex;
-    align-items: center;
-    padding: 2.5px 5px;
-    border-radius: 0.5rem;
-    white-space: nowrap;
-  }
-
-  &__link {
-    color: #ffffffca;
-    text-decoration: none;
-
-    &:hover {
-      background-color: transparent;
-      color: #fff;
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  &__current {
-    font-weight: 600;
-  }
-
-  &__icon {
-    svg {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  &--no-header {
-    color: var(--tide-booking-color-primary);
-    .breadcrumb {
-      &__separator {
-        color: var(--tide-booking-color-primary-light);
-      }
-
-      &__link {
-        color: var(--tide-booking-color-primary-light);
-
-        &:hover {
-          color: var(--tide-booking-color-primary);
-        }
-      }
-    }
-  }
-}
+@use '../components/mixins' as mixins;
+
+.breadcrumb {
+  font-size: 12px;
+  color: #fff;
+  position: absolute;
+  z-index: 2;
+  top: 60px;
+  left: 0px;
+  width: 100%;
+
+  @include mixins.media-md {
+    font-size: 14px;
+    top: 120px;
+  }
+
+  &__container {
+    @include mixins.container-wide();
+    padding-top: 30px !important;
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__separator {
+    margin: 0 5px;
+    color: #ffffff;
+    user-select: none;
+  }
+
+  &__link,
+  &__current {
+    display: inline-flex;
+    align-items: center;
+    padding: 2.5px 5px;
+    border-radius: 0.5rem;
+    white-space: nowrap;
+  }
+
+  &__link {
+    color: #ffffffca;
+    text-decoration: none;
+
+    &:hover {
+      background-color: transparent;
+      color: #fff;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &__current {
+    font-weight: 600;
+  }
+
+  &__icon {
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &--no-header {
+    color: var(--tide-booking-color-primary);
+    .breadcrumb {
+      &__separator {
+        color: var(--tide-booking-color-primary-light);
+      }
+
+      &__link {
+        color: var(--tide-booking-color-primary-light);
+
+        &:hover {
+          color: var(--tide-booking-color-primary);
+        }
+      }
+    }
+  }
+}

package/styles/components/_button.scss

@@ -1,238 +1,238 @@
-.button {
-  @extend %reset;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  outline: none;
-  @extend %transition-easing;
-
-  &:hover,
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  // &--close {
-  //   width: 4.5rem;
-  //   height: 4.5rem;
-  //   @include flex--centerXY;
-  //   border: none;
-  //   background: transparent;
-
-  //   &:before,
-  //   &:after {
-  //     content: "";
-  //     position: absolute;
-  //     width: 1.7rem;
-  //     height: 0.1rem;
-  //     background-color: $black;
-  //   }
-
-  //   &:before {
-  //     transform: rotate(45deg);
-  //   }
-
-  //   &:after {
-  //     transform: rotate(-45deg);
-  //   }
-  // }
-
-  // &--close-label {
-  //   position: relative;
-  //   height: $gutter * 2;
-  //   padding-right: $gutter * 1.33;
-  //   @include flex--centerY;
-  //   font-size: 1.3rem;
-  //   text-decoration: underline;
-  //   text-transform: uppercase;
-  //   color: $color-primary;
-
-  //   &:before,
-  //   &:after {
-  //     content: "";
-  //     position: absolute;
-  //     width: 1.2rem;
-  //     height: 0.1rem;
-  //     right: 0;
-  //     background-color: $black;
-  //   }
-
-  //   &:after {
-  //     transform: rotate(-45deg);
-  //   }
-
-  //   &:before {
-  //     transform: rotate(45deg);
-  //   }
-  // }
-
-  // &--collapse {
-  //   position: relative;
-  //   width: 3rem;
-  //   height: 3rem;
-  //   @include flex--centerXY;
-  //   border-radius: $gutter * 0.3;
-  //   border: 0.1rem solid fade-out($color-primary, 0.65);
-  //   background-color: $white;
-
-  //   &:before {
-  //     content: "";
-  //     width: 0.8rem;
-  //     height: 0.8rem;
-  //     margin-top: 0;
-  //     margin-left: -0.5rem;
-  //     border-bottom: 0.1rem solid $black;
-  //     border-left: 0.1rem solid $black;
-  //     transform-origin: 50%;
-  //     transform: rotate(-135deg);
-  //     @include transitionEasing($duration: 0.15s);
-  //   }
-  // }
-
-  &--clear {
-    width: 25px;
-    height: 25px;
-    @include flex--centerXY;
-    border: none;
-    background: transparent;
-
-    &:before,
-    &:after {
-      content: '';
-      position: absolute;
-      width: 16px;
-      height: 1px;
-      background-color: var(--tide-booking-form-typeahead-agent-clear-icon-color);
-    }
-
-    &:before {
-      transform: rotate(45deg);
-    }
-
-    &:after {
-      transform: rotate(-45deg);
-    }
-  }
-
-  &--decrement,
-  &--increment {
-    position: relative;
-    width: var(--tide-booking-decrement-increment-width);
-    height: var(--tide-booking-decrement-increment-height);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 var(--tide-booking-decrement-increment-width);
-    border-radius: var(--tide-booking-decrement-increment-border-radius);
-    border: var(--tide-booking-decrement-increment-border);
-    background: var(--tide-booking-decrement-increment-background);
-    transition: all 0.3s ease;
-
-    .icon {
-      position: relative;
-      left: auto;
-      top: auto;
-      width: var(--tide-booking-decrement-increment-icon-width);
-      height: var(--tide-booking-decrement-increment-icon-height);
-      fill: var(--tide-booking-decrement-increment-icon-color);
-    }
-
-    &:hover {
-      background: var(--tide-booking-decrement-increment-background-hover);
-      color: var(--tide-booking-decrement-increment-color-hover);
-      fill: var(--tide-booking-decrement-increment-icon-color-hover);
-      border: var(--tide-booking-decrement-increment-border-hover);
-
-      .icon {
-        fill: var(--tide-booking-decrement-increment-icon-color-hover);
-      }
-    }
-
-    &:focus,
-    &:active {
-      background: var(--tide-booking-decrement-increment-background-focus);
-      color: var(--tide-booking-decrement-increment-color-focus);
-      fill: var(--tide-booking-decrement-increment-icon-color-focus);
-      border: var(--tide-booking-decrement-increment-border-focus);
-
-      .icon {
-        fill: var(--tide-booking-decrement-increment-icon-color-focus);
-      }
-    }
-  }
-
-  &--disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  &--min,
-  &--plus {
-    position: relative;
-    width: 3.5rem;
-    height: 3.5rem;
-    @include flex--centerXY;
-    border-radius: 50%;
-    background-color: var(--tide-booking-bg-secondary);
-    @include activeToColor;
-
-    &:hover {
-      opacity: 1;
-      outline: none;
-      fill: var(--tide-booking-color-primary);
-      color: var(--tide-booking-color-primary);
-      background-color: var(--tide-booking-transparent);
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      width: 1.2rem;
-      height: 0.2rem;
-      display: inline-flex;
-      background-color: var(--tide-booking-color-primary);
-    }
-  }
-
-  &--plus {
-    &:after {
-      content: '';
-      position: absolute;
-      width: 1.2rem;
-      height: 0.2rem;
-      transform: rotate(90deg);
-      display: inline-flex;
-      background-color: var(--tide-booking-color-primary);
-    }
-  }
-}
-
-.typeahead__option .button {
-  width: 100%;
-  padding: 15px * 0.8 15px;
-  flex-shrink: 0;
-  text-align: left;
-  color: var(--tide-booking-form-typeahead-agent-options-color);
-  @extend %transition-easing;
-
-  &:hover {
-    color: var(--tide-booking-form-typeahead-agent-options-color-hover);
-    background-color: var(--tide-booking-form-typeahead-agent-options-background-hover);
-  }
-}
-
-.typeahead__option-header .button {
-  padding: 15px * 0.67 15px;
-  font-size: 15px;
-  font-style: normal;
-}
-
-.typeahead__option--tree .typeahead__option-header .button {
-  padding-left: 15px;
-}
-
-.form__group .typeahead .button--clear {
-  position: absolute;
-  right: 15px;
-}
+.button {
+  @extend %reset;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  @extend %transition-easing;
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  // &--close {
+  //   width: 4.5rem;
+  //   height: 4.5rem;
+  //   @include flex--centerXY;
+  //   border: none;
+  //   background: transparent;
+
+  //   &:before,
+  //   &:after {
+  //     content: "";
+  //     position: absolute;
+  //     width: 1.7rem;
+  //     height: 0.1rem;
+  //     background-color: $black;
+  //   }
+
+  //   &:before {
+  //     transform: rotate(45deg);
+  //   }
+
+  //   &:after {
+  //     transform: rotate(-45deg);
+  //   }
+  // }
+
+  // &--close-label {
+  //   position: relative;
+  //   height: $gutter * 2;
+  //   padding-right: $gutter * 1.33;
+  //   @include flex--centerY;
+  //   font-size: 1.3rem;
+  //   text-decoration: underline;
+  //   text-transform: uppercase;
+  //   color: $color-primary;
+
+  //   &:before,
+  //   &:after {
+  //     content: "";
+  //     position: absolute;
+  //     width: 1.2rem;
+  //     height: 0.1rem;
+  //     right: 0;
+  //     background-color: $black;
+  //   }
+
+  //   &:after {
+  //     transform: rotate(-45deg);
+  //   }
+
+  //   &:before {
+  //     transform: rotate(45deg);
+  //   }
+  // }
+
+  // &--collapse {
+  //   position: relative;
+  //   width: 3rem;
+  //   height: 3rem;
+  //   @include flex--centerXY;
+  //   border-radius: $gutter * 0.3;
+  //   border: 0.1rem solid fade-out($color-primary, 0.65);
+  //   background-color: $white;
+
+  //   &:before {
+  //     content: "";
+  //     width: 0.8rem;
+  //     height: 0.8rem;
+  //     margin-top: 0;
+  //     margin-left: -0.5rem;
+  //     border-bottom: 0.1rem solid $black;
+  //     border-left: 0.1rem solid $black;
+  //     transform-origin: 50%;
+  //     transform: rotate(-135deg);
+  //     @include transitionEasing($duration: 0.15s);
+  //   }
+  // }
+
+  &--clear {
+    width: 25px;
+    height: 25px;
+    @include flex--centerXY;
+    border: none;
+    background: transparent;
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      width: 16px;
+      height: 1px;
+      background-color: var(--tide-booking-form-typeahead-agent-clear-icon-color);
+    }
+
+    &:before {
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &--decrement,
+  &--increment {
+    position: relative;
+    width: var(--tide-booking-decrement-increment-width);
+    height: var(--tide-booking-decrement-increment-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 var(--tide-booking-decrement-increment-width);
+    border-radius: var(--tide-booking-decrement-increment-border-radius);
+    border: var(--tide-booking-decrement-increment-border);
+    background: var(--tide-booking-decrement-increment-background);
+    transition: all 0.3s ease;
+
+    .icon {
+      position: relative;
+      left: auto;
+      top: auto;
+      width: var(--tide-booking-decrement-increment-icon-width);
+      height: var(--tide-booking-decrement-increment-icon-height);
+      fill: var(--tide-booking-decrement-increment-icon-color);
+    }
+
+    &:hover {
+      background: var(--tide-booking-decrement-increment-background-hover);
+      color: var(--tide-booking-decrement-increment-color-hover);
+      fill: var(--tide-booking-decrement-increment-icon-color-hover);
+      border: var(--tide-booking-decrement-increment-border-hover);
+
+      .icon {
+        fill: var(--tide-booking-decrement-increment-icon-color-hover);
+      }
+    }
+
+    &:focus,
+    &:active {
+      background: var(--tide-booking-decrement-increment-background-focus);
+      color: var(--tide-booking-decrement-increment-color-focus);
+      fill: var(--tide-booking-decrement-increment-icon-color-focus);
+      border: var(--tide-booking-decrement-increment-border-focus);
+
+      .icon {
+        fill: var(--tide-booking-decrement-increment-icon-color-focus);
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &--min,
+  &--plus {
+    position: relative;
+    width: 3.5rem;
+    height: 3.5rem;
+    @include flex--centerXY;
+    border-radius: 50%;
+    background-color: var(--tide-booking-bg-secondary);
+    @include activeToColor;
+
+    &:hover {
+      opacity: 1;
+      outline: none;
+      fill: var(--tide-booking-color-primary);
+      color: var(--tide-booking-color-primary);
+      background-color: var(--tide-booking-transparent);
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: 1.2rem;
+      height: 0.2rem;
+      display: inline-flex;
+      background-color: var(--tide-booking-color-primary);
+    }
+  }
+
+  &--plus {
+    &:after {
+      content: '';
+      position: absolute;
+      width: 1.2rem;
+      height: 0.2rem;
+      transform: rotate(90deg);
+      display: inline-flex;
+      background-color: var(--tide-booking-color-primary);
+    }
+  }
+}
+
+.typeahead__option .button {
+  width: 100%;
+  padding: 15px * 0.8 15px;
+  flex-shrink: 0;
+  text-align: left;
+  color: var(--tide-booking-form-typeahead-agent-options-color);
+  @extend %transition-easing;
+
+  &:hover {
+    color: var(--tide-booking-form-typeahead-agent-options-color-hover);
+    background-color: var(--tide-booking-form-typeahead-agent-options-background-hover);
+  }
+}
+
+.typeahead__option-header .button {
+  padding: 15px * 0.67 15px;
+  font-size: 15px;
+  font-style: normal;
+}
+
+.typeahead__option--tree .typeahead__option-header .button {
+  padding-left: 15px;
+}
+
+.form__group .typeahead .button--clear {
+  position: absolute;
+  right: 15px;
+}