@qite/tide-booking-component 1.2.4 → 1.2.5

package/styles/components/_radiobutton.scss

@@ -0,0 +1,170 @@
+.radiobutton {
+  position: relative;
+  padding-left: 30px;
+  @include row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  font-family: var(--tide-booking-radiobutton-font-family);
+  user-select: none;
+  color: var(--tide-booking-radiobutton-color-text);
+  @extend %transition-easing;
+  cursor: pointer;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: var(--tide-booking-radiobutton-color-text);
+  }
+
+  & + & {
+    margin-top: 10px;
+  }
+
+  &-group {
+    @include row--md;
+
+    .radiobutton {
+      margin-right: 15px * 2;
+      margin-bottom: 15px;
+
+      & + .radiobutton {
+        margin-top: 0;
+      }
+    }
+  }
+
+  // &-group--pricings {
+  //   @include media-md {
+  //     flex-direction: column;
+  //   }
+
+  //   .radiobutton {
+  //     padding: 15px;
+  //     margin-right: 0;
+  //     margin-bottom: 10px;
+  //     align-items: center;
+  //     border-radius: 5px;
+  //     border: 1px solid $bg-secondary;
+  //   }
+
+  //   .radiobutton--selected {
+  //     background-color: fade-out($bg-secondary, 0.15);
+  //   }
+
+  //   .radiobutton__input {
+  //     position: relative;
+  //     left: 0;
+  //     margin: 0 10px 0 0;
+  //   }
+
+  //   .radiobutton__label {
+  //     width: 100%;
+  //     padding: 0;
+  //     display: flex;
+  //     align-items: center;
+  //   }
+
+  //   .radiobutton__label-text {
+  //     @extend h5;
+  //     margin: 0;
+  //     color: $black;
+  //   }
+  // }
+
+  &__label {
+    padding-top: 15px * 0.4;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  &__label-header {
+    width: 100%;
+    display: flex;
+  }
+
+  &__input {
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    min-height: auto;
+    top: 0;
+    left: 0;
+    padding: 0;
+    margin-right: 10px;
+    margin-left: 0;
+    @include flex--centerXY;
+    border-radius: 50%;
+    border: var(--tide-booking-radiobutton-border);
+    background: var(--tide-booking-radiobutton-background);
+    transition: border-color ease-out 0.2s;
+    appearance: none;
+
+    &:checked {
+      border: var(--tide-booking-radiobutton-input-checked-border);
+      background: var(--tide-booking-radiobutton-input-checked-background);
+
+      &:after {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      opacity: 0;
+      visibility: hidden;
+      border-radius: 50%;
+      background: var(--tide-booking-radiobutton-input-checked-after-color);
+      @include transitionEasing($duration: 0.2s);
+    }
+  }
+
+  &__value {
+    padding-left: 10px;
+    margin-left: auto;
+    font-style: normal;
+    text-align: right;
+    white-space: nowrap;
+    @include transitionEasing($duration: 0.2s);
+  }
+
+  &--label {
+    cursor: default;
+
+    .radiobutton__input {
+      border: none;
+      background-color: transparent;
+      cursor: default;
+      appearance: none;
+    }
+
+    .radiobutton__label {
+      cursor: default;
+    }
+  }
+
+  &--package-label {
+    padding-top: 15px !important;
+
+    @include media-xl {
+      padding-top: 20px !important;
+    }
+  }
+}
+
+.form {
+  &__region-header .radiobutton {
+    margin-top: -5px;
+    margin-left: auto;
+    margin-bottom: 15px;
+    white-space: nowrap;
+
+    @include media-xs {
+      margin-bottom: initial;
+      margin-left: auto;
+    }
+  }
+}

package/styles/components/_select-wrapper.scss

@@ -1,66 +1,80 @@
-.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);
-    }
-  }
-
-  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;
-    }
-
-    option{
-      font-family: var(--tide-booking-room-options-dropdown-select-font-family);
-      font-size: 16px;
-      color: var(--tide-booking-room-options-dropdown-select-option-color);
-    }
-  }
-}
-
-.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);
+    }
+  }
+
+  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;
+    }
+
+    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/_spinner.scss

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

package/styles/components/_step-indicators.scss

@@ -1,160 +1,168 @@
-.step-indicators {
-  @extend %reset;
-  width: 100%;
-  max-width: 100%;
-  display: flex;
-  padding-bottom: 15px;
-  margin-bottom: 20px;
-  overflow: hidden;
-
-  &__items {
-    position: relative;
-    width: 100%;
-    max-width: 100vw;
-    padding-bottom: 15px;
-    margin-bottom: 22.5px;
-    display: flex;
-    flex-grow: 0;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    &:before {
-      content: "";
-      position: absolute;
-      width: 95%;
-      height: 0;
-      left: 2.5%;
-      top: 20px;
-      border-bottom: var(--tide-booking-step-indicators-line-trough);
-    }
-  }
-
-  &__item {
-    position: relative;
-    padding-bottom: 1.05rem;
-    @include column;
-    align-items: center;
-    text-align: center;
-    text-decoration: none;
-    color: inherit !important;
-
-    &:first-child {
-      align-items: flex-start;
-      text-align: left;
-    }
-
-    &:last-child {
-      align-items: flex-end;
-      text-align: right;
-    }
-  }
-
-  &__item--active {
-    &:before {
-      content: "";
-      position: absolute;
-      width: 200%;
-      height: 1.5px;
-      margin-top: .75px;
-      top: 15px;
-      left: 35px;
-    }
-
-    .step-indicators {
-      &__icon {
-        border: var(--tide-booking-step-indicators-icon-border-active);
-        color: transparent;
-        background-color: var(--tide-booking-step-indicators-icon-background-active);
-        animation: pulse 7s infinite;
-
-        &:before {
-          content: "";
-          position: absolute;
-          width: 17px;
-          height: 6px;
-          margin-top: -5px;
-          margin-left: -2px;
-          border-left: 2px solid;
-          border-bottom: 2px solid;
-          border-color: var(--tide-booking-step-indicators-icon-check-color-active);
-          transform: rotate(-45deg);
-        }
-      }
-
-      &__text {
-        color: var(--tide-booking-step-indicators-icon-color-text-active);
-      }
-    }
-  }
-
-  &__item--completed {
-    &:before {
-      content: "";
-      position: absolute;
-      width: 200%;
-      height: 1.5px;
-      margin-top: .75px;
-      top: 15px;
-      left: 35px;
-    }
-
-    .step-indicators__icon {
-      border: var(--tide-booking-step-indicators-icon-color-completed);
-      color: transparent;
-      background-color: var(--tide-booking-step-indicators-icon-background-completed);
-
-      &:before {
-        content: "";
-        position: absolute;
-        width: 17px;
-        height: 6px;
-        margin-top: -5px;
-        margin-left: -2px;
-        border-left: 2px solid;
-        border-bottom: 2px solid;
-        border-color: var(--tide-booking-step-indicators-icon-check-color-completed);
-        transform: rotate(-45deg);
-      }
-    }
-  }
-
-  &__icon {
-    @extend %reset;
-    position: relative;
-    width: 40px;
-    height: 40px;
-    padding-top: 2px;
-    @include flex--centerXY;
-    flex: 0 0 40px;
-    border-radius: var(--tide-booking-step-indicators-icon-border-radius);
-    font-family: var(--tide-booking-step-indicators-icon-font-family);
-    color: var(--tide-booking-step-indicators-icon-color);
-    background-color: var(--tide-booking-step-indicators-icon-background);
-    @extend %transition-easing;
-    z-index: 1;
-  }
-
-  &__text {
-    position: absolute;
-    max-width: 20vw;
-    top: 50px;
-    font-family: var(--tide-booking-step-indicators-icon-font-family);
-    font-size: 10px;
-    line-height: 1.2;
-    text-overflow: ellipsis;
-    overflow: hidden;
-
-    @include media-xs {
-      font-size: 12px;
-    }
-
-    @include media-sm {
-      font-size: 14px;
-    }
-
-    @include media-md {
-      //font-size: 1.8rem;
-      font-size: 16px;
-    }
-  }
-}
+.step-indicators {
+  @extend %reset;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  padding-bottom: 15px;
+  margin-bottom: 20px;
+  overflow: hidden;
+
+  &__items {
+    position: relative;
+    width: 100%;
+    max-width: 100vw;
+    padding-bottom: 15px;
+    margin-bottom: 22.5px;
+    display: flex;
+    flex-grow: 0;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    &:before {
+      content: "";
+      position: absolute;
+      width: 95%;
+      height: 0;
+      left: 2.5%;
+      top: 20px;
+      border-bottom: var(--tide-booking-step-indicators-line-trough);
+    }
+  }
+
+  &__item {
+    position: relative;
+    padding-bottom: 1.05rem;
+    @include column;
+    align-items: center;
+    text-align: center;
+    text-decoration: none;
+    color: inherit !important;
+
+    &:first-child {
+      align-items: flex-start;
+      text-align: left;
+    }
+
+    &:last-child {
+      align-items: flex-end;
+      text-align: right;
+    }
+  }
+
+  &__item--active {
+    &:before {
+      content: "";
+      position: absolute;
+      width: 200%;
+      height: 1.5px;
+      margin-top: 0.75px;
+      top: 15px;
+      left: 35px;
+    }
+
+    .step-indicators {
+      &__icon {
+        border: var(--tide-booking-step-indicators-icon-border-active);
+        color: transparent;
+        background-color: var(
+          --tide-booking-step-indicators-icon-background-active
+        );
+        animation: pulse 7s infinite;
+
+        &:before {
+          content: "";
+          position: absolute;
+          width: 17px;
+          height: 6px;
+          margin-top: -5px;
+          margin-left: -2px;
+          border-left: 2px solid;
+          border-bottom: 2px solid;
+          border-color: var(
+            --tide-booking-step-indicators-icon-check-color-active
+          );
+          transform: rotate(-45deg);
+        }
+      }
+
+      &__text {
+        color: var(--tide-booking-step-indicators-icon-color-text-active);
+      }
+    }
+  }
+
+  &__item--completed {
+    &:before {
+      content: "";
+      position: absolute;
+      width: 200%;
+      height: 1.5px;
+      margin-top: 0.75px;
+      top: 15px;
+      left: 35px;
+    }
+
+    .step-indicators__icon {
+      border: var(--tide-booking-step-indicators-icon-color-completed);
+      color: transparent;
+      background-color: var(
+        --tide-booking-step-indicators-icon-background-completed
+      );
+
+      &:before {
+        content: "";
+        position: absolute;
+        width: 17px;
+        height: 6px;
+        margin-top: -5px;
+        margin-left: -2px;
+        border-left: 2px solid;
+        border-bottom: 2px solid;
+        border-color: var(
+          --tide-booking-step-indicators-icon-check-color-completed
+        );
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  &__icon {
+    @extend %reset;
+    position: relative;
+    width: 40px;
+    height: 40px;
+    padding-top: 2px;
+    @include flex--centerXY;
+    flex: 0 0 40px;
+    border-radius: var(--tide-booking-step-indicators-icon-border-radius);
+    font-family: var(--tide-booking-step-indicators-icon-font-family);
+    color: var(--tide-booking-step-indicators-icon-color);
+    background-color: var(--tide-booking-step-indicators-icon-background);
+    @extend %transition-easing;
+    z-index: 1;
+  }
+
+  &__text {
+    position: absolute;
+    max-width: 20vw;
+    top: 50px;
+    font-family: var(--tide-booking-step-indicators-icon-font-family);
+    font-size: 10px;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    @include media-xs {
+      font-size: 12px;
+    }
+
+    @include media-sm {
+      font-size: 14px;
+    }
+
+    @include media-md {
+      //font-size: 1.8rem;
+      font-size: 16px;
+    }
+  }
+}