@qite/tide-booking-component 1.2.5 → 1.3.0

package/styles/components/_radiobutton.scss

@@ -1,170 +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;
-    }
-  }
-}
+.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,80 +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 {
-      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);
+    }
+  }
+
+  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

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