@qite/tide-components 1.0.1

package/styles/components/_img-slider.scss

@@ -0,0 +1,175 @@
+@use '../components/mixins' as mixins;
+
+.slider {
+  margin-bottom: 60px;
+
+  &__container {
+    @include mixins.container-wide();
+    position: relative;
+  }
+
+  &__viewport {
+    overflow: hidden;
+    border: var(--tide-booking-slider-border);
+    border-radius: var(--tide-booking-slider-border-radius);
+    box-shadow: var(--tide-booking-slider-box-shadow);
+    background: var(--tide-booking-slider-background);
+    position: relative;
+
+    touch-action: pan-y;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: var(--tide-booking-slider-overlay-background);
+      height: 100%;
+      width: 100%;
+      top: 0px;
+      left: 0px;
+
+      will-change: opacity;
+    }
+  }
+
+  &__track {
+    display: flex;
+    transition: transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+  }
+
+  &__slide {
+    flex: 0 0 100%;
+    position: relative;
+    user-select: none;
+  }
+
+  &__img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+    display: block;
+    pointer-events: none;
+
+    transform: translateZ(0);
+
+    @include mixins.media-md {
+      height: 800px;
+    }
+  }
+
+  &__empty {
+    padding: 24px;
+    border: 1px dashed #bbb;
+    border-radius: 12px;
+    text-align: center;
+  }
+
+  &__controls {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__btn {
+    appearance: none;
+    border: var(--tide-booking-slider-btn-border);
+    border-radius: var(--tide-booking-slider-btn-border-radius);
+    color: var(--tide-booking-slider-btn-color);
+    background: var(--tide-booking-slider-btn-background);
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    cursor: pointer;
+    line-height: 1;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: all 150ms ease-in-out;
+
+    &--prev {
+      left: 35px;
+      transform: translateY(-50%) rotate(180deg);
+
+      @include mixins.media-sm {
+        left: 60px;
+      }
+
+      @include mixins.media-lg {
+        left: 75px;
+      }
+    }
+
+    &--next {
+      right: 35px;
+
+      @include mixins.media-sm {
+        right: 60px;
+      }
+
+      @include mixins.media-lg {
+        right: 75px;
+      }
+    }
+
+    &:hover {
+      background: var(--tide-booking-slider-btn-hover-background);
+      color: var(--tide-booking-slider-btn-hover-color);
+      border: var(--tide-booking-slider-btn-hover-border);
+    }
+  }
+
+  &__dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    @include mixins.media-sm {
+      bottom: 30px;
+    }
+  }
+
+  &__dot {
+    min-width: 12px;
+    min-height: 12px;
+    max-width: 12px;
+    max-height: 12px;
+    border-radius: 999px;
+    border: 0;
+    cursor: pointer;
+    background: var(--tide-booking-slider-dot-background);
+
+    &.is-active {
+      background: var(--tide-booking-slider-dot-active-background);
+      transform: scale(1.1);
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  /* ---- MODIFIERS ---- */
+  &--auto {
+    .slider__controls {
+      display: none;
+    }
+  }
+
+  &--manual {
+    .slider__controls {
+      display: grid;
+    }
+  }
+}

package/styles/components/_info-message.scss

@@ -0,0 +1,75 @@
+.info-message {
+  display: flex;
+
+  &__copy {
+    padding-left: 15px;
+    @include column;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  &--error {
+    color: var(--tide-booking-invalid);
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    margin-top: -15px * 0.2;
+  }
+
+  &__voucher {
+    margin-top: 15px;
+
+    &__input {
+      min-height: 45px;
+    }
+
+    &__valid {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    &__list {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+}
+
+.booking .info-message {
+  &__copy {
+    padding-left: 0;
+
+    p {
+      font-size: 16px;
+      line-height: 1.6;
+    }
+
+    .checkbox {
+      font-size: 16px;
+      line-height: 1.6;
+
+      &__label {
+        align-items: flex-start;
+      }
+    }
+  }
+
+  .checkbox + .checkbox {
+    margin-top: 10px;
+
+    @include media-xl {
+      margin-top: 5px;
+    }
+  }
+
+  .icon--ui-tooltip {
+    display: none;
+  }
+}

package/styles/components/_input.scss

@@ -0,0 +1,35 @@
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+input::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+input[type='date']::-webkit-input-placeholder {
+  visibility: hidden !important;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+input[type='search']::-ms-clear {
+  display: none;
+}
+
+input,
+select,
+textarea {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}

package/styles/components/_list.scss

@@ -0,0 +1,185 @@
+.list {
+  display: flex;
+  flex-direction: column;
+
+  &--booking-summary {
+    .list__item {
+      margin: 5px 0;
+    }
+  }
+
+  &--usps {
+    li {
+      position: relative;
+      padding-left: 20px;
+      list-style-type: none;
+      @extend %transition-easing;
+
+      @include media-xs {
+        padding-left: 20px;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        width: 18px;
+        height: 6px;
+        left: 0;
+        top: 3px;
+        transform: rotate(-45deg);
+        // border-left: 0.2rem solid $color-primary;
+        // border-bottom: 0.2rem solid $color-primary;
+        @extend %transition-easing;
+
+        @include media-xs {
+          width: 22px;
+          height: 8px;
+        }
+      }
+    }
+
+    .list {
+      &__item {
+        position: relative;
+        padding-left: 20px;
+        list-style-type: none;
+        @extend %transition-easing;
+        margin-right: 10px;
+        font-weight: 400;
+        line-height: 18px;
+        font-size: 14px;
+        font-weight: var(--tide-booking-room-options-usp-list-font-weight);
+        color: var(--tide-booking-room-options-usp-list-color);
+
+        @include media-xs {
+          padding-left: 20px;
+          font-size: 16px;
+          line-height: 20px;
+        }
+
+        &:before {
+          content: '';
+          position: absolute;
+          width: 12px;
+          height: 6px;
+          left: 0rem;
+          top: 35%;
+          transform: rotate(-45deg) translateY(-50%);
+          border-left: 2px solid var(--tide-booking-room-options-usp-list-icon-color);
+          border-bottom: 2px solid var(--tide-booking-room-options-usp-list-icon-color);
+          @extend %transition-easing;
+
+          @include media-xs {
+            height: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  &--inline {
+    flex-direction: row;
+    margin: 0;
+    list-style-type: none;
+
+    .list__item {
+      & + .list__item {
+        margin-bottom: 30px;
+      }
+    }
+  }
+
+  &--plain {
+    list-style-type: none;
+    margin: 0;
+
+    li {
+      font-size: 16px;
+      line-height: 1.6;
+    }
+  }
+
+  &--socials {
+    svg {
+      // fill: $color-primary;
+    }
+
+    .list__item {
+      & + .list__item {
+        margin-left: 15px * 2;
+      }
+    }
+  }
+
+  &--summary {
+    margin-bottom: 30px;
+  }
+
+  &--two-column {
+    margin-bottom: -15px;
+    flex-flow: row wrap;
+
+    .list__item {
+      width: 100%;
+      margin-bottom: 15px;
+
+      @include media-xs {
+        width: 50%;
+        padding-right: 15px * 3;
+      }
+    }
+
+    ul {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      margin-bottom: -15px;
+      display: flex;
+      flex-flow: row wrap;
+    }
+
+    li {
+      width: 100%;
+      margin-bottom: 15px;
+
+      @include media-xs {
+        width: 50%;
+        padding-right: 15px * 3;
+      }
+    }
+  }
+
+  &--three-column {
+    ul {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      margin-bottom: -15px;
+      display: flex;
+      flex-flow: row wrap;
+    }
+
+    li {
+      width: 100%;
+      margin-bottom: 15px;
+
+      @include media-xs {
+        width: 100%;
+        padding-right: 0;
+      }
+
+      @include media-sm {
+        width: 100%;
+      }
+
+      @include media-lg {
+        width: 50%;
+        padding-right: 15px * 3;
+      }
+
+      @include media-xxl {
+        width: 33%;
+      }
+    }
+  }
+}

package/styles/components/_loader.scss

@@ -0,0 +1,152 @@
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  z-index: 1;
+
+  &__spinner {
+    max-width: 50px;
+    max-height: 50px;
+    min-width: 50px;
+    min-height: 50px;
+    border: var(--tide-booking-spinner-border);
+    border-top-color: var(--tide-booking-spinner-border-top-color);
+    border-radius: 50%;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+
+    &--dots {
+      width: auto;
+      height: auto;
+      border: none;
+      border-radius: initial;
+      animation: initial;
+
+      &:after {
+        content: ' .';
+        font-size: 20px;
+        animation: dots 1s steps(5, end) infinite;
+      }
+    }
+  }
+
+  &--centered {
+    width: 100%;
+    align-items: center;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+    padding: 30px;
+  }
+
+  &__line {
+    width: 45px;
+    display: flex;
+    justify-content: space-evenly;
+
+    &__text {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-transform: lowercase;
+      font-weight: 500;
+      font-size: 14px;
+      letter-spacing: 0.2px;
+
+      &::before,
+      &::after {
+        content: attr(data-text);
+      }
+
+      &::before {
+        color: var(--tide-booking-color-primary-light);
+      }
+
+      &::after {
+        color: var(--tide-booking-color-primary);
+        animation: text-animation 3.6s ease infinite;
+        position: absolute;
+        left: 0;
+      }
+    }
+  }
+
+  &__ball {
+    list-style: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--tide-booking-color-primary-light);
+
+    animation: bounce 2.1s ease-in-out infinite;
+
+    &--1 {
+      animation-delay: 0s;
+    }
+
+    &--2 {
+      animation-delay: 0.3s;
+    }
+
+    &--3 {
+      animation-delay: 0.6s;
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dots {
+  0%,
+  20% {
+    color: rgba(0, 0, 0, 0);
+    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+
+  40% {
+    color: var(--tide-booking-spinner-animation-color);
+    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+
+  60% {
+    text-shadow: 0.25em 0 0 var(--tide-booking-spinner-animation-color), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+
+  80%,
+  100% {
+    text-shadow: 0.25em 0 0 var(--tide-booking-spinner-animation-color), 0.5em 0 0 var(--tide-booking-spinner-animation-color);
+  }
+}
+
+@keyframes bounce {
+  50% {
+    transform: translateY(-18px);
+    background-color: var(--tide-booking-color-primary);
+  }
+}
+
+@keyframes text-animation {
+  0% {
+    clip-path: inset(0 100% 0 0);
+  }
+  50% {
+    clip-path: inset(0);
+  }
+  100% {
+    clip-path: inset(0 0 0 100%);
+  }
+}