@qite/tide-booking-component 1.2.3 → 1.2.5

package/styles/components/_date-range-picker.scss

@@ -1,224 +1,225 @@
-.date-range-picker {
-  display: flex;
-  width: 100%;
-  padding: 15px;
-  gap: 30px;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-
-  @include media-md {
-    flex-flow: row;
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  &__from,
-  &__to {
-    flex-basis: 50%;
-  }
-}
-
-.calendar {
-  display: flex;
-  flex-flow: column;
-
-  &__header {
-    display: flex;
-    flex-flow: column;
-  }
-
-  &__pager {
-    @include h4;
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 30px;
-    gap: 5px;
-    color: var(--tide-booking-datepicker-month-color);
-    font-family: var(--tide-booking-datepicker-month-font);
-  }
-
-  &__current-month {
-    flex-grow: 1;
-    text-align: center;
-
-    &:first-letter {
-      text-transform: uppercase;
-    }
-  }
-
-  &__previous,
-  &__next {
-    width: auto;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--tide-booking-datepicker-prev-next-color);
-    fill: var(--tide-booking-datepicker-prev-next-color);
-    background: var(--tide-booking-datepicker-prev-next-background);
-    cursor: pointer;
-
-    &--disabled {
-      visibility: hidden;
-    }
-
-    .icon {
-      position: relative !important;
-      top: 0 !important;
-      left: 0 !important;
-      width: 15px !important;
-      height: 15px !important;
-      display: block !important;
-    }
-  }
-
-  &__next {
-    @media (max-width: 991px) {
-      position: absolute;
-      top: initial;
-      right: 0;
-      justify-content: flex-end;
-    }
-  }
-
-  &__previous {
-    transform: rotate(180deg);
-  }
-
-  &__day-labels {
-    display: flex;
-    justify-content: stretch;
-    margin: 10px 0;
-    font-size: 16px;
-    color: var(--tide-booking-datepicker-day-labels-color);
-
-    @include media-lg {
-      font-size: 18px;
-    }
-  }
-
-  &__day-label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    width: 55px;
-  }
-
-  &__body {
-    display: flex;
-    flex-flow: column;
-    gap: 3px;
-  }
-
-  &__week {
-    display: flex;
-    gap: 3px;
-  }
-
-  &__day {
-    position: relative;
-    width: calc(100% / 7);
-    height: 45px;
-    padding: 2px 0;
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--tide-booking-datepicker-day-border-radius);
-    border: var(--tide-booking-datepicker-day-border);
-    font-size: 16px;
-    line-height: 1;
-    background: var(--tide-booking-datepicker-day-background);
-    color: var(--tide-booking-datepicker-day-color);
-    transition-property: border, background-color, color;
-    transition-duration: 200ms;
-    box-sizing: border-box;
-    cursor: pointer;
-    overflow: hidden;
-
-    @include media-lg {
-      font-size: 18px;
-    }
-
-    &:hover {
-      color: var(--tide-booking-datepicker-day-color-hover);
-      background: var(--tide-booking-datepicker-day-background-hover);
-      border: var(--tide-booking-datepicker-day-border-hover);
-    }
-
-    &--selected {
-      border: var(--tide-booking-datepicker-day-border-selected);
-      background-color: var(--tide-booking-datepicker-day-background-selected);
-      color: var(--tide-booking-datepicker-day-color-selected);
-
-      &:hover {
-        border: var(--tide-booking-datepicker-day-border-selected-hover);
-        background: var(--tide-booking-datepicker-day-background-selected-hover);
-        color: var(--tide-booking-datepicker-day-color-selected-hover);
-      }
-    }
-
-    &--disabled {
-      color: var(--tide-booking-datepicker-day-color-disabled);
-      background: var(--tide-booking-datepicker-day-background-disabled);
-      border: var(--tide-booking-datepicker-day-border-disabled);
-      cursor: not-allowed;
-
-      &:hover {
-        color: var(--tide-booking-datepicker-day-color-disabled);
-        background: var(--tide-booking-datepicker-day-background-disabled);
-        border: var(--tide-booking-datepicker-day-border-disabled);
-      }
-    }
-
-    &--outside-month {
-      color: var(--tide-booking-datepicker-day-color-outside-month);
-      background: var(--tide-booking-datepicker-day-background-outside-month);
-      border: var(--tide-booking-datepicker-day-border-outside-month);
-      opacity: var(--tide-booking-datepicker-day-opacity-outside-month);
-
-
-      &:hover {
-        color: var(--tide-booking-datepicker-day-color-outside-month);
-        background: var(--tide-booking-datepicker-day-background-outside-month);
-        border: var(--tide-booking-datepicker-day-border-outside-month);
-      }
-    }
-  }
-
-}
-
-.qsm__panel--mobile {
-  top: 0;
-  position: fixed;
-  bottom: 0;
-}
-
-.qsm__panel .date-range-picker {
-  margin: auto;
-
-  &__from,
-  &__to {
-    width: 100%;
-    flex-basis: initial;
-  }
-}
-
-.product-intro .qsm--inline .qsm__panel--dates-pricing {
-  @include media-sm {
-    width: 100% !important;
-    left: 2px !important;
-  }
-
-  @include media-lg {
-    width: auto !important;
-    left: initial !important;
-    padding: 15px;
-  }
-}
+.date-range-picker {
+  display: flex;
+  width: 100%;
+  padding: 15px;
+  gap: 30px;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  @include media-md {
+    flex-flow: row;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &__from,
+  &__to {
+    flex-basis: 50%;
+  }
+}
+
+.calendar {
+  display: flex;
+  flex-flow: column;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+  }
+
+  &__pager {
+    @include h4;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 30px;
+    gap: 5px;
+    color: var(--tide-booking-datepicker-month-color);
+    font-family: var(--tide-booking-datepicker-month-font);
+  }
+
+  &__current-month {
+    flex-grow: 1;
+    text-align: center;
+
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  &__previous,
+  &__next {
+    width: auto;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--tide-booking-datepicker-prev-next-color);
+    fill: var(--tide-booking-datepicker-prev-next-color);
+    background: var(--tide-booking-datepicker-prev-next-background);
+    cursor: pointer;
+
+    &--disabled {
+      visibility: hidden;
+    }
+
+    .icon {
+      position: relative !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 15px !important;
+      height: 15px !important;
+      display: block !important;
+    }
+  }
+
+  &__next {
+    @media (max-width: 991px) {
+      position: absolute;
+      top: initial;
+      right: 0;
+      justify-content: flex-end;
+    }
+  }
+
+  &__previous {
+    transform: rotate(180deg);
+  }
+
+  &__day-labels {
+    display: flex;
+    justify-content: stretch;
+    margin: 10px 0;
+    font-size: 16px;
+    color: var(--tide-booking-datepicker-day-labels-color);
+
+    @include media-lg {
+      font-size: 18px;
+    }
+  }
+
+  &__day-label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 55px;
+  }
+
+  &__body {
+    display: flex;
+    flex-flow: column;
+    gap: 3px;
+    width: 100%;
+  }
+
+  &__week {
+    display: flex;
+    gap: 3px;
+  }
+
+  &__day {
+    position: relative;
+    width: calc(100% / 7);
+    height: 45px;
+    padding: 2px 0;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--tide-booking-datepicker-day-border-radius);
+    border: var(--tide-booking-datepicker-day-border);
+    font-size: 16px;
+    line-height: 1;
+    background: var(--tide-booking-datepicker-day-background);
+    color: var(--tide-booking-datepicker-day-color);
+    transition-property: border, background-color, color;
+    transition-duration: 200ms;
+    box-sizing: border-box;
+    cursor: pointer;
+    overflow: hidden;
+
+    @include media-lg {
+      font-size: 18px;
+    }
+
+    &:hover {
+      color: var(--tide-booking-datepicker-day-color-hover);
+      background: var(--tide-booking-datepicker-day-background-hover);
+      border: var(--tide-booking-datepicker-day-border-hover);
+    }
+
+    &--selected {
+      border: var(--tide-booking-datepicker-day-border-selected);
+      background-color: var(--tide-booking-datepicker-day-background-selected);
+      color: var(--tide-booking-datepicker-day-color-selected);
+
+      &:hover {
+        border: var(--tide-booking-datepicker-day-border-selected-hover);
+        background: var(
+          --tide-booking-datepicker-day-background-selected-hover
+        );
+        color: var(--tide-booking-datepicker-day-color-selected-hover);
+      }
+    }
+
+    &--disabled {
+      color: var(--tide-booking-datepicker-day-color-disabled);
+      background: var(--tide-booking-datepicker-day-background-disabled);
+      border: var(--tide-booking-datepicker-day-border-disabled);
+      cursor: not-allowed;
+
+      &:hover {
+        color: var(--tide-booking-datepicker-day-color-disabled);
+        background: var(--tide-booking-datepicker-day-background-disabled);
+        border: var(--tide-booking-datepicker-day-border-disabled);
+      }
+    }
+
+    &--outside-month {
+      color: var(--tide-booking-datepicker-day-color-outside-month);
+      background: var(--tide-booking-datepicker-day-background-outside-month);
+      border: var(--tide-booking-datepicker-day-border-outside-month);
+      opacity: var(--tide-booking-datepicker-day-opacity-outside-month);
+
+      &:hover {
+        color: var(--tide-booking-datepicker-day-color-outside-month);
+        background: var(--tide-booking-datepicker-day-background-outside-month);
+        border: var(--tide-booking-datepicker-day-border-outside-month);
+      }
+    }
+  }
+}
+
+.qsm__panel--mobile {
+  top: 0;
+  position: fixed;
+  bottom: 0;
+}
+
+.qsm__panel .date-range-picker {
+  margin: auto;
+
+  &__from,
+  &__to {
+    width: 100%;
+    flex-basis: initial;
+  }
+}
+
+.product-intro .qsm--inline .qsm__panel--dates-pricing {
+  @include media-sm {
+    width: 100% !important;
+    left: 2px !important;
+  }
+
+  @include media-lg {
+    width: auto !important;
+    left: initial !important;
+    padding: 15px;
+  }
+}

package/styles/components/_decrement-increment.scss

@@ -1,37 +1,35 @@
-.decrement-increment {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 15px;
-  min-height: var(--tide-booking-decrement-increment-height);
-
-  @include media-xs {
-    display: grid;
-    grid-template-columns: 125px auto;
-    justify-content: flex-start;
-  }
-
-  &__label {
-    margin-bottom: 0;
-    display: flex;
-    font-family: var(--tide-booking-decrement-increment-label-font);
-    font-weight: var(--tide-booking-decrement-increment-label-font-weight);
-    color: var(--tide-booking-decrement-increment-label-color);
-  }
-
-  &__ui {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    span{
-      min-width: 30px;
-      text-align: center;
-      font-family: var(--tide-booking-decrement-increment-number-font);
-      font-weight: var(--tide-booking-decrement-increment-number-font-weight);
-      color: var(--tide-booking-decrement-increment-number-color);
-    }
-  }
-}
-
-
+.decrement-increment {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 15px;
+  min-height: var(--tide-booking-decrement-increment-height);
+
+  @include media-xs {
+    display: grid;
+    grid-template-columns: 125px auto;
+    justify-content: flex-start;
+  }
+
+  &__label {
+    margin-bottom: 0;
+    display: flex;
+    font-family: var(--tide-booking-decrement-increment-label-font);
+    font-weight: var(--tide-booking-decrement-increment-label-font-weight);
+    color: var(--tide-booking-decrement-increment-label-color);
+  }
+
+  &__ui {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    span {
+      min-width: 30px;
+      text-align: center;
+      font-family: var(--tide-booking-decrement-increment-number-font);
+      font-weight: var(--tide-booking-decrement-increment-number-font-weight);
+      color: var(--tide-booking-decrement-increment-number-color);
+    }
+  }
+}

package/styles/components/_dropdown.scss

@@ -1,74 +1,72 @@
-.dropdown {
-  position: relative;
-  @include column;
-
-  &:after {
-    content: "";
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    right: 10px;
-    top: 43%;
-    border-bottom: 1.5px solid;
-    border-left: 1.5px solid;
-    border-color: var(--tide-booking-dropdown-arrow-color);
-    transform: rotate(-45deg) translateY(-50%);
-    @include transitionEasing($duration: 0.2s);
-  }
-
-  &:hover {
-    &:after {
-      border-color: var(--tide-booking-dropdown-arrow-color-hover);
-    }
-  }
-
-  select {
-    @extend %reset;
-    width: 100%;
-    height: 45px;
-    border: var(--tide-booking-dropdown-border);
-    border-radius: var(--tide-booking-dropdown-border-radius);
-    font-family: var(--tide-booking-dropdown-font-family);
-    font-size: 16px;
-    background: var(--tide-booking-dropdown-background);
-    outline: none;
-    box-shadow: none;
-    cursor: pointer;
-    @extend %transition-easing;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-
-    @include media-lg {
-      font-size: 18px;
-    }
-
-    &:focus,
-    &:active {
-      border: var(--tide-booking-dropdown-border-focus);
-      outline: none;
-      box-shadow: none;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-
-      .dropdown::after {
-        border-color: var(--tide-booking-dropdown-arrow-color-disabled);
-
-        &hover {
-          border-color: var(--tide-booking-dropdown-arrow-color-disabled);
-        }
-      }
-    }
-  }
-
-  &--small {
-    select {
-      padding-right: 30px;
-      padding-left: 10px;
-    }
-  }
-
-}
-
-
+.dropdown {
+  position: relative;
+  @include column;
+
+  &:after {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    right: 10px;
+    top: 43%;
+    border-bottom: 1.5px solid;
+    border-left: 1.5px solid;
+    border-color: var(--tide-booking-dropdown-arrow-color);
+    transform: rotate(-45deg) translateY(-50%);
+    @include transitionEasing($duration: 0.2s);
+  }
+
+  &:hover {
+    &:after {
+      border-color: var(--tide-booking-dropdown-arrow-color-hover);
+    }
+  }
+
+  select {
+    @extend %reset;
+    width: 100%;
+    height: 45px;
+    border: var(--tide-booking-dropdown-border);
+    border-radius: var(--tide-booking-dropdown-border-radius);
+    font-family: var(--tide-booking-dropdown-font-family);
+    font-size: 16px;
+    background: var(--tide-booking-dropdown-background);
+    outline: none;
+    box-shadow: none;
+    cursor: pointer;
+    @extend %transition-easing;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-left: 15px;
+
+    @include media-lg {
+      font-size: 18px;
+    }
+
+    &:focus,
+    &:active {
+      border: var(--tide-booking-dropdown-border-focus);
+      outline: none;
+      box-shadow: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      .dropdown::after {
+        border-color: var(--tide-booking-dropdown-arrow-color-disabled);
+
+        &hover {
+          border-color: var(--tide-booking-dropdown-arrow-color-disabled);
+        }
+      }
+    }
+  }
+
+  &--small {
+    select {
+      padding-right: 30px;
+      padding-left: 10px;
+    }
+  }
+}