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

package/styles/components/_select-wrapper.scss

@@ -1,81 +1,81 @@
-.select-wrapper {
-  &__select {
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      width: 8px;
-      height: 8px;
-      right: 15px;
-      top: 13px;
-      display: inline-flex;
-      border-left: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
-      border-bottom: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
-      transform: rotate(-45deg);
-      pointer-events: none;
-    }
-  }
-
-  select {
-    width: 100%;
-    height: 40px;
-    padding: 0 40px 0 10px;
-    border-radius: var(--tide-booking-room-options-dropdown-select-border-radius);
-    border: var(--tide-booking-room-options-dropdown-select-border);
-    font-family: var(--tide-booking-room-options-dropdown-select-font-family);
-    appearance: none;
-
-    &:focus {
-      outline: none;
-      border: --tide-booking-room-options-dropdown-select-border-focus;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    option {
-      appearance: none;
-      display: flex;
-      justify-content: space-between;
-      gap: 20px;
-
-      font-family: var(--tide-booking-room-options-dropdown-select-font-family);
-      font-size: 16px;
-      color: var(--tide-booking-room-options-dropdown-select-option-color);
-    }
-  }
-
-  ::picker(select) {
-    top: calc(anchor(bottom) + 1px);
-    left: anchor(10%);
-  }
-}
-
-.productcard--accommodation .select-wrapper {
-  select {
-    font-size: 14.5px;
-
-    @include media-xs {
-      font-size: 15.5px;
-    }
-  }
-}
-
-.tree .select-wrapper {
-  width: 100%;
-
-  // @include media-lg {
-  //   transform: translateY(-5px);
-  // }
-
-  // @include media-xl {
-  //   transform: translateY(-7px);
-  // }
-}
-
-select {
-  font-family: --tide-booking-font-body;
-  font-size: 16px;
-}
+.select-wrapper {
+  &__select {
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      right: 15px;
+      top: 13px;
+      display: inline-flex;
+      border-left: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
+      border-bottom: 2px solid var(--tide-booking-room-options-dropdown-select-icon-color);
+      transform: rotate(-45deg);
+      pointer-events: none;
+    }
+  }
+
+  select {
+    width: 100%;
+    height: 40px;
+    padding: 0 40px 0 10px;
+    border-radius: var(--tide-booking-room-options-dropdown-select-border-radius);
+    border: var(--tide-booking-room-options-dropdown-select-border);
+    font-family: var(--tide-booking-room-options-dropdown-select-font-family);
+    appearance: none;
+
+    &:focus {
+      outline: none;
+      border: --tide-booking-room-options-dropdown-select-border-focus;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    option {
+      appearance: none;
+      display: flex;
+      justify-content: space-between;
+      gap: 20px;
+
+      font-family: var(--tide-booking-room-options-dropdown-select-font-family);
+      font-size: 16px;
+      color: var(--tide-booking-room-options-dropdown-select-option-color);
+    }
+  }
+
+  ::picker(select) {
+    top: calc(anchor(bottom) + 1px);
+    left: anchor(10%);
+  }
+}
+
+.productcard--accommodation .select-wrapper {
+  select {
+    font-size: 14.5px;
+
+    @include media-xs {
+      font-size: 15.5px;
+    }
+  }
+}
+
+.tree .select-wrapper {
+  width: 100%;
+
+  // @include media-lg {
+  //   transform: translateY(-5px);
+  // }
+
+  // @include media-xl {
+  //   transform: translateY(-7px);
+  // }
+}
+
+select {
+  font-family: --tide-booking-font-body;
+  font-size: 16px;
+}

package/styles/components/_slider.scss

@@ -1,128 +1,120 @@
-@use '../components/mixins' as mixins;
-
-.double-slider-box {
-  background-color: transparent;
-  border-radius: 10px;
-  width: 100%;
-  max-width: 97%;
-  margin-left: 10px;
-
-  // @include media-xs {
-  //   max-width: 342px;
-  // }
-}
-
-.range-slider {
-  position: relative;
-  width: 100%;
-  height: 3px;
-  margin: 25px 0;
-  background-color: var(--tide-booking-slider-range-background);
-  border-radius: 5px;
-
-  input {
-    padding: 0rem;
-  }
-}
-
-.slider-track {
-  height: 100%;
-  position: absolute;
-  background-color: var(--tide-booking-slider-track-background);
-  left: 0;
-  right: 100%;
-  border-radius: 5px;
-}
-
-.range-slider input[type='range'] {
-  position: absolute;
-  width: 100%;
-  left: 0px;
-  top: 0;
-  transform: translateY(-47%);
-  background: none;
-  pointer-events: none;
-  border: none;
-  margin: 0px;
-  appearance: none;
-  height: 5px;
-}
-
-input[type='range']::-webkit-slider-thumb {
-  height: 25px;
-  width: 25px;
-  border-radius: 50%;
-  border: 3px solid var(--tide-booking-slider-thumb-border-color);
-  background: var(--tide-booking-slider-thumb-background);
-  pointer-events: auto;
-  appearance: none;
-  cursor: pointer;
-  box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
-  position: relative;
-  z-index: 2; /* Ensure thumbs appear above the track */
-}
-
-input[type='range']::-moz-range-thumb {
-  height: 25px;
-  width: 25px;
-  border-radius: 50%;
-  border: 3px solid var(--tide-booking-slider-thumb-border-color);
-  background: var(--tide-booking-slider-thumb-background);
-  pointer-events: auto;
-  cursor: pointer;
-  box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
-  position: relative;
-  z-index: 2;
-}
-
-.input-box {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.min-box,
-.max-box {
-  width: 50%;
-  font-size: 16px;
-}
-
-.min-box {
-  margin-right: 10px;
-}
-
-.max-box {
-  text-align: right;
-}
-
-input[type='number'] {
-  width: 40px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  text-align: center;
-}
-
-.min-tooltip,
-.max-tooltip {
-  position: absolute;
-  bottom: -35px;
-  font-size: 12px;
-  color: #555;
-  background-color: #fff;
-  padding: 5px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  white-space: nowrap;
-  z-index: 1;
-}
-
-.min-tooltip {
-  left: 20px;
-  transform: translateX(-50%);
-}
-
-.max-tooltip {
-  right: 20px;
-  transform: translateX(50%);
-}
+@use '../components/mixins' as mixins;
+
+.double-slider-box {
+  background-color: transparent;
+  border-radius: 10px;
+  width: 100%;
+  max-width: 97%;
+  margin-left: 10px;
+
+  // @include media-xs {
+  //   max-width: 342px;
+  // }
+}
+
+.range-slider {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  margin: 25px 0;
+  background-color: var(--tide-booking-slider-range-background);
+  border-radius: 5px;
+
+  input {
+    padding: 0rem;
+  }
+}
+
+.slider-track {
+  height: 100%;
+  position: absolute;
+  background-color: var(--tide-booking-slider-track-background);
+  left: 0;
+  right: 100%;
+  border-radius: 5px;
+}
+
+.range-slider input[type='range'] {
+  position: absolute;
+  width: 100%;
+  left: 0px;
+  top: 0;
+  transform: translateY(-47%);
+  background: none;
+  pointer-events: none;
+  border: none;
+  margin: 0px;
+  appearance: none;
+  height: 5px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  height: 25px;
+  width: 25px;
+  border-radius: 50%;
+  border: 3px solid var(--tide-booking-slider-thumb-border-color);
+  background: var(--tide-booking-slider-thumb-background);
+  pointer-events: auto;
+  appearance: none;
+  cursor: pointer;
+  box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
+  position: relative;
+  z-index: 2; /* Ensure thumbs appear above the track */
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 25px;
+  width: 25px;
+  border-radius: 50%;
+  border: 3px solid var(--tide-booking-slider-thumb-border-color);
+  background: var(--tide-booking-slider-thumb-background);
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
+  position: relative;
+  z-index: 2;
+}
+
+.input-box {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.min-box,
+.max-box {
+  width: 50%;
+  font-size: 16px;
+}
+
+.min-box {
+  margin-right: 10px;
+}
+
+.max-box {
+  text-align: right;
+}
+
+.min-tooltip,
+.max-tooltip {
+  position: absolute;
+  bottom: -35px;
+  font-size: 12px;
+  color: #555;
+  background-color: #fff;
+  padding: 5px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.min-tooltip {
+  left: 20px;
+  transform: translateX(-50%);
+}
+
+.max-tooltip {
+  right: 20px;
+  transform: translateX(50%);
+}

package/styles/components/_spinner.scss

@@ -1,29 +1,29 @@
-.spinner {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  @include flex--centerXY;
-  display: none;
-  background: rgba(255, 255, 255, 0.75);
-
-  &__icon {
-    width: 50px;
-    height: 50px;
-    @include flex--centerXY;
-
-    .icon {
-      position: static !important;
-      width: 100% !important;
-      height: 100% !important;
-      top: initial !important;
-      left: initial !important;
-      animation: spinner 1.5s infinite ease-in-out both;
-    }
-  }
-
-  &--active {
-    display: flex;
-  }
-}
+.spinner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  @include flex--centerXY;
+  display: none;
+  background: rgba(255, 255, 255, 0.75);
+
+  &__icon {
+    width: 50px;
+    height: 50px;
+    @include flex--centerXY;
+
+    .icon {
+      position: static !important;
+      width: 100% !important;
+      height: 100% !important;
+      top: initial !important;
+      left: initial !important;
+      animation: spinner 1.5s infinite ease-in-out both;
+    }
+  }
+
+  &--active {
+    display: flex;
+  }
+}