@qite/tide-components 1.0.10 → 1.0.12

package/styles/components/_img-slider.scss

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

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

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