@qite/tide-booking-component 1.2.0 → 1.2.1

package/styles/components/_button.scss

@@ -0,0 +1,185 @@
+.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);
+  //   }
+  // }
+
+  &--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 {
+      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;
+    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);
+    }
+  }
+}
+
+
+

package/styles/components/_cta.scss

@@ -0,0 +1,67 @@
+.cta {
+  @extend %cta;
+  @extend %transition-easing;
+
+  &:not(&--disabled) {
+      opacity: 1;
+      outline: none;
+      fill: var(--tide-booking-cta-icon-color);
+      color: var(--tide-booking-cta-color);
+      background: var(--tide-booking-cta-background);
+  }
+
+  @include media-xl {
+    //font-size: 1.7rem;
+  }
+
+  &--add {
+    @include media-xs {
+      margin: var(--tide-booking-cta-margin-secondary);
+    }
+    span {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+
+    &:hover,
+    &:focus,
+    &:active {
+      opacity: 0.5;
+    }
+  }
+
+  &--icon {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+
+  &--secondary {
+    @extend %cta--secondary;
+
+    &:not(&--disabled) {
+      opacity: 1;
+      outline: none;
+      fill: var(--tide-booking-cta-icon-color-secondary);
+      color: var(--tide-booking-cta-color-secondary);
+      background: var(--tide-booking-cta-background-secondary);
+    }
+
+    .icon{
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+}
+
+
+

package/styles/components/_date-range-picker.scss

@@ -0,0 +1,224 @@
+.date-range-picker {
+  display: flex;
+  width: 100%;
+  padding: 15px;
+  gap: 30px;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  @include media-md {
+    flex-flow: row;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &__from,
+  &__to {
+    flex-basis: 50%;
+  }
+}
+
+.calendar {
+  display: flex;
+  flex-flow: column;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+  }
+
+  &__pager {
+    @include h4;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 30px;
+    gap: 5px;
+    color: var(--tide-booking-datepicker-month-color);
+    font-family: var(--tide-booking-datepicker-month-font);
+  }
+
+  &__current-month {
+    flex-grow: 1;
+    text-align: center;
+
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  &__previous,
+  &__next {
+    width: auto;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--tide-booking-datepicker-prev-next-color);
+    fill: var(--tide-booking-datepicker-prev-next-color);
+    background: var(--tide-booking-datepicker-prev-next-background);
+    cursor: pointer;
+
+    &--disabled {
+      visibility: hidden;
+    }
+
+    .icon {
+      position: relative !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 15px !important;
+      height: 15px !important;
+      display: block !important;
+    }
+  }
+
+  &__next {
+    @media (max-width: 991px) {
+      position: absolute;
+      top: initial;
+      right: 0;
+      justify-content: flex-end;
+    }
+  }
+
+  &__previous {
+    transform: rotate(180deg);
+  }
+
+  &__day-labels {
+    display: flex;
+    justify-content: stretch;
+    margin: 10px 0;
+    font-size: 16px;
+    color: var(--tide-booking-datepicker-day-labels-color);
+
+    @include media-lg {
+      font-size: 18px;
+    }
+  }
+
+  &__day-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 55px;
+  }
+
+  &__body {
+    display: flex;
+    flex-flow: column;
+    gap: 3px;
+  }
+
+  &__week {
+    display: flex;
+    gap: 3px;
+  }
+
+  &__day {
+    position: relative;
+    width: calc(100% / 7);
+    height: 45px;
+    padding: 2px 0;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--tide-booking-datepicker-day-border-radius);
+    border: var(--tide-booking-datepicker-day-border);
+    font-size: 16px;
+    line-height: 1;
+    background: var(--tide-booking-datepicker-day-background);
+    color: var(--tide-booking-datepicker-day-color);
+    transition-property: border, background-color, color;
+    transition-duration: 200ms;
+    box-sizing: border-box;
+    cursor: pointer;
+    overflow: hidden;
+
+    @include media-lg {
+      font-size: 18px;
+    }
+
+    &:hover {
+      color: var(--tide-booking-datepicker-day-color-hover);
+      background: var(--tide-booking-datepicker-day-background-hover);
+      border: var(--tide-booking-datepicker-day-border-hover);
+    }
+
+    &--selected {
+      border: var(--tide-booking-datepicker-day-border-selected);
+      background-color: var(--tide-booking-datepicker-day-background-selected);
+      color: var(--tide-booking-datepicker-day-color-selected);
+
+      &:hover {
+        border: var(--tide-booking-datepicker-day-border-selected-hover);
+        background: var(--tide-booking-datepicker-day-background-selected-hover);
+        color: var(--tide-booking-datepicker-day-color-selected-hover);
+      }
+    }
+
+    &--disabled {
+      color: var(--tide-booking-datepicker-day-color-disabled);
+      background: var(--tide-booking-datepicker-day-background-disabled);
+      border: var(--tide-booking-datepicker-day-border-disabled);
+      cursor: not-allowed;
+
+      &:hover {
+        color: var(--tide-booking-datepicker-day-color-disabled);
+        background: var(--tide-booking-datepicker-day-background-disabled);
+        border: var(--tide-booking-datepicker-day-border-disabled);
+      }
+    }
+
+    &--outside-month {
+      color: var(--tide-booking-datepicker-day-color-outside-month);
+      background: var(--tide-booking-datepicker-day-background-outside-month);
+      border: var(--tide-booking-datepicker-day-border-outside-month);
+      opacity: var(--tide-booking-datepicker-day-opacity-outside-month);
+
+
+      &:hover {
+        color: var(--tide-booking-datepicker-day-color-outside-month);
+        background: var(--tide-booking-datepicker-day-background-outside-month);
+        border: var(--tide-booking-datepicker-day-border-outside-month);
+      }
+    }
+  }
+
+}
+
+.qsm__panel--mobile {
+  top: 0;
+  position: fixed;
+  bottom: 0;
+}
+
+.qsm__panel .date-range-picker {
+  margin: auto;
+
+  &__from,
+  &__to {
+    width: 100%;
+    flex-basis: initial;
+  }
+}
+
+.product-intro .qsm--inline .qsm__panel--dates-pricing {
+  @include media-sm {
+    width: 100% !important;
+    left: 2px !important;
+  }
+
+  @include media-lg {
+    width: auto !important;
+    left: initial !important;
+    padding: 15px;
+  }
+}

package/styles/components/_decrement-increment.scss

@@ -0,0 +1,37 @@
+.decrement-increment {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+  min-height: var(--tide-booking-decrement-increment-height);
+
+  @include media-xs {
+    display: grid;
+    grid-template-columns: 125px auto;
+    justify-content: flex-start;
+  }
+
+  &__label {
+    margin-bottom: 0;
+    display: flex;
+    font-family: var(--tide-booking-decrement-increment-label-font);
+    font-weight: var(--tide-booking-decrement-increment-label-font-weight);
+    color: var(--tide-booking-decrement-increment-label-color);
+  }
+
+  &__ui {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    span{
+      min-width: 30px;
+      text-align: center;
+      font-family: var(--tide-booking-decrement-increment-number-font);
+      font-weight: var(--tide-booking-decrement-increment-number-font-weight);
+      color: var(--tide-booking-decrement-increment-number-color);
+    }
+  }
+}
+
+

package/styles/components/_dropdown.scss

@@ -0,0 +1,74 @@
+.dropdown {
+  position: relative;
+  @include column;
+
+  &:after {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    right: 10px;
+    top: 43%;
+    border-bottom: 1.5px solid;
+    border-left: 1.5px solid;
+    border-color: var(--tide-booking-dropdown-arrow-color);
+    transform: rotate(-45deg) translateY(-50%);
+    @include transitionEasing($duration: 0.2s);
+  }
+
+  &:hover {
+    &:after {
+      border-color: var(--tide-booking-dropdown-arrow-color-hover);
+    }
+  }
+
+  select {
+    @extend %reset;
+    width: 100%;
+    height: 45px;
+    border: var(--tide-booking-dropdown-border);
+    border-radius: var(--tide-booking-dropdown-border-radius);
+    font-family: var(--tide-booking-dropdown-font-family);
+    font-size: 16px;
+    background: var(--tide-booking-dropdown-background);
+    outline: none;
+    box-shadow: none;
+    cursor: pointer;
+    @extend %transition-easing;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+
+    @include media-lg {
+      font-size: 18px;
+    }
+
+    &:focus,
+    &:active {
+      border: var(--tide-booking-dropdown-border-focus);
+      outline: none;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      .dropdown::after {
+        border-color: var(--tide-booking-dropdown-arrow-color-disabled);
+
+        &hover {
+          border-color: var(--tide-booking-dropdown-arrow-color-disabled);
+        }
+      }
+    }
+  }
+
+  &--small {
+    select {
+      padding-right: 30px;
+      padding-left: 10px;
+    }
+  }
+
+}
+
+

package/styles/components/_form.scss

@@ -0,0 +1,136 @@
+.form {
+  @extend %reset;
+
+  &__label {
+    @extend %reset;
+    margin-bottom: 15px * 0.5;
+    display: flex;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__input {
+    width: 100%;
+    border: 1.5px solid var(--tide-booking-gray--medium-light);
+    background-color: var(--tide-booking-gray-xlight);
+    box-sizing: border-box;
+    @extend %transition-easing;
+  }
+
+  &__group {
+    @extend %reset;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    &-input {
+      position: relative;
+      width: 100%;
+    }
+
+    &--icon {
+      &:focus,
+      &:focus-within,
+      &:active {
+        .icon {
+          svg {
+            fill: var(--tide-booking-color-secondary);
+          }
+        }
+      }
+
+      .form {
+        &__label {
+          position: absolute;
+          top: 3px;
+          left: 47.5px;
+          font-size: 14px;
+          pointer-events: none;
+          color: var(--tide-booking-datepicker-input-label-color);
+
+          @include media-sm {
+            left: 17.5px;
+          }
+
+          @include media-lg {
+            font-size: 16px;
+          }
+
+          @include media-xl {
+            left: 47.5px;
+          }
+        }
+
+        &__input {
+          @include input;
+          padding-left: 20px;
+          padding-top: 16px;
+
+          @include media-sm {
+            padding-left: 20px;
+          }
+
+          @include media-md {
+            padding-left: 20px;
+          }
+
+          @include media-xl {
+            font-size: 15.5px;
+          }
+        }
+
+        .typeahead {
+          &__trigger {
+            height: 4.5rem;
+            max-height: 4.5rem;
+            padding-left: 4rem;
+            font-size: 1.6rem;
+            background-color: var(--tide-booking-white);
+
+            @include media-sm {
+              padding-left: 1rem;
+            }
+
+            @include media-md {
+              padding-left: 4rem;
+            }
+          }
+        }
+      }
+    }
+
+
+    &--datepicker {
+      .form__group-input {
+        width: 50%;
+      }
+    }
+
+    &--submit {
+      .cta {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    &--success-message {
+      &:before {
+        content: "";
+        width: 15px * 3.33;
+        height: 15px * 1.33;
+        border-left: 0.25rem solid var(--tide-booking-black);
+        border-bottom: 0.25rem solid var(--tide-booking-black);
+        margin: 0 auto 15px * 3 auto;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+
+
+}
+
+