@qite/tide-components 1.0.9 → 1.0.10

package/styles/content-blocks.scss

@@ -1,66 +1,66 @@
-body {
-  margin: 0;
-}
-#tide-content {
-  @import './components/mixins';
-  @import './components/placeholders';
-  @import './components/base';
-  @import './components/form';
-  @import './components/button';
-  @import './components/cta';
-
-  @import './components/checkbox';
-  @import './components/radiobutton';
-  @import './components/tree';
-  @import './components/input';
-  @import './components/radiobutton';
-  @import './components/content';
-  @import './components/navbar';
-  @import './components/header';
-  @import './components/contact';
-  @import './components/img-slider';
-  @import './components/image-with-text';
-  @import './components/breadcrumb';
-  @import './components/gallery';
-  @import './components/faq';
-  @import './components/login';
-  @import './components/accordion';
-  @import './components/footer';
-  @import './components/error';
-  @import './components/map-view';
-
-  @import './qsm/qsm';
-
-  @extend %reset;
-  @include body;
-  @extend %scrollbar-thin;
-
-  %scrollbar-none {
-    &::-webkit-scrollbar {
-      width: 0px;
-      height: 0px;
-    }
-
-    &::-webkit-scrollbar-track {
-      padding: 0;
-      background: transparent;
-    }
-  }
-
-  %scrollbar-thin {
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-      padding: 2px;
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      background-color: #cbcbcb;
-    }
-  }
-}
+body {
+  margin: 0;
+}
+#tide-content {
+  @import './components/mixins';
+  @import './components/placeholders';
+  @import './components/base';
+  @import './components/form';
+  @import './components/button';
+  @import './components/cta';
+
+  @import './components/checkbox';
+  @import './components/radiobutton';
+  @import './components/tree';
+  @import './components/input';
+  @import './components/radiobutton';
+  @import './components/content';
+  @import './components/navbar';
+  @import './components/header';
+  @import './components/contact';
+  @import './components/img-slider';
+  @import './components/image-with-text';
+  @import './components/breadcrumb';
+  @import './components/gallery';
+  @import './components/faq';
+  @import './components/login';
+  @import './components/accordion';
+  @import './components/footer';
+  @import './components/error';
+  @import './components/map-view';
+
+  @import './qsm/qsm';
+
+  @extend %reset;
+  @include body;
+  @extend %scrollbar-thin;
+
+  %scrollbar-none {
+    &::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+    }
+
+    &::-webkit-scrollbar-track {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  %scrollbar-thin {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      padding: 2px;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: #cbcbcb;
+    }
+  }
+}

package/styles/font.scss

@@ -1,2 +1,2 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
-@import url('https://use.typekit.net/kyz2klm.css');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+@import url('https://use.typekit.net/kyz2klm.css');

package/styles/qsm/_calendar.scss

@@ -1,274 +1,274 @@
-// @use './abstracts/variables' as variables;
-@use '../components/mixins' as mixins;
-
-.date-range-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  width: 52rem;
-  padding: 2.5rem;
-  padding-bottom: 6.5rem;
-  position: absolute;
-  top: 3.5rem;
-  left: 0;
-  z-index: 22;
-
-  background-color: var(tide-booking-white);
-  border-bottom: 4px solid var(tide-booking-primary-color);
-
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-  &--align-right {
-    right: 0;
-    left: auto;
-  }
-
-  @include media-xl {
-    max-width: 240%;
-  }
-
-  @media (max-width: 1347px) {
-    max-width: 200%;
-  }
-
-  @include mixins.media-lg {
-    width: 40rem;
-  }
-
-  @media (max-width: 1028px) {
-    width: 30rem;
-  }
-
-  @include mixins.media-md {
-    max-width: 100%;
-  }
-
-  @include mixins.media-sm {
-    width: 100%;
-    top: 12rem;
-    padding-bottom: 7rem;
-    box-shadow: none;
-  }
-
-  &__actions {
-    position: absolute;
-    bottom: 2.5rem;
-    left: 2.5rem;
-
-    display: flex;
-    gap: 0.5rem;
-
-    @include mixins.media-sm {
-      display: none;
-    }
-
-    &-button {
-      @extend %cta;
-
-      &--disabled {
-        opacity: 50%;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      // &--clear {
-      //   background-color: variables.$white;
-      //   color: variables.$secondary-color;
-      //   border: 2px solid variables.$secondary-color--light;
-
-      //   &:hover {
-      //     background: variables.$secondary-color--extralight;
-      //     border: 2px solid variables.$secondary-color--light;
-      //   }
-      // }
-    }
-  }
-
-  &__months {
-    display: flex;
-    gap: 2rem;
-    width: 100%;
-
-    @include mixins.media-md {
-      flex-direction: column;
-      gap: 1rem;
-    }
-  }
-
-  &__month {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  &-flex-days {
-    display: flex;
-    gap: 1rem;
-    width: 100%;
-    flex-wrap: wrap;
-
-    &__tag {
-      padding: 0.75rem 1rem;
-      border-radius: 0.5rem;
-      border: 2px solid var(--tide-booking-color-primary-extra-fade);
-
-      font-size: 16px;
-      font-weight: 400;
-      color: var(--tide-booking-color-primary);
-
-      cursor: pointer;
-      transition: all 0.2s;
-
-      // &:hover {
-      //   background: variables.$secondary-color;
-      //   color: variables.$white;
-      //   border: 2px solid variables.$secondary-color;
-      // }
-
-      // &--active {
-      //   background: variables.$secondary-color--extralight;
-      //   border: 2px solid variables.$secondary-color;
-      //   color: variables.$secondary-color;
-      // }
-    }
-  }
-
-  &__flexible-range {
-    background-color: #fff9de;
-  }
-}
-
-.calendar {
-  width: 100%;
-  font-family: inherit;
-
-  &__header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    margin-bottom: 1rem;
-
-    .calendar__pager {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 100%;
-      margin-bottom: 1.25rem;
-
-      position: relative;
-
-      &-icon {
-        position: absolute;
-        top: 50%;
-        left: 0;
-
-        fill: var(--tide-booking-color-primary);
-        cursor: pointer;
-        transition: all 0.2s;
-        transform: translateY(-50%);
-
-        &--right {
-          right: 0;
-          left: auto;
-          transform: rotate(180deg);
-        }
-      }
-
-      .calendar__current-month {
-        font-weight: 700;
-        color: var(--tide-booking-color-primary);
-      }
-    }
-
-    .calendar__day-labels {
-      display: flex;
-      width: 100%;
-
-      padding: 1rem;
-      border-radius: 0.25rem;
-      background: var(--tide-booking-gray-background-light);
-
-      .calendar__day-label {
-        flex: 1;
-        text-align: center;
-
-        font-size: 16px;
-        font-weight: 400;
-        color: var(--tide-booking-color-primary);
-
-        &:nth-last-child(2),
-        &:last-child {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-
-  &__body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  &__week {
-    display: flex;
-  }
-
-  &__day {
-    flex: 1;
-    aspect-ratio: 1 / 1;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    font-size: 16px;
-
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &--outside-month {
-      color: #d3d3d3;
-    }
-
-    &--disabled {
-      color: #ccc;
-      cursor: not-allowed;
-    }
-
-    &--range {
-      background-color: #fff9de;
-    }
-
-    &--selected {
-      background-color: #ffde40;
-
-      &:first-child {
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-      }
-
-      &:last-child {
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-      }
-    }
-
-    &:hover:not(.calendar__day--disabled) {
-      background-color: #f3f3f3;
-    }
-  }
-}
-
-.single-date-picker {
-  &__wrapper {
-    position: absolute;
-    z-index: 22; // was 10
-    padding: 1rem;
-    width: 100%;
-    background: var(--tide-booking-white);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-  }
-}
+// @use './abstracts/variables' as variables;
+@use '../components/mixins' as mixins;
+
+.date-range-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 52rem;
+  padding: 2.5rem;
+  padding-bottom: 6.5rem;
+  position: absolute;
+  top: 3.5rem;
+  left: 0;
+  z-index: 22;
+
+  background-color: var(tide-booking-white);
+  border-bottom: 4px solid var(tide-booking-primary-color);
+
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  &--align-right {
+    right: 0;
+    left: auto;
+  }
+
+  @include media-xl {
+    max-width: 240%;
+  }
+
+  @media (max-width: 1347px) {
+    max-width: 200%;
+  }
+
+  @include mixins.media-lg {
+    width: 40rem;
+  }
+
+  @media (max-width: 1028px) {
+    width: 30rem;
+  }
+
+  @include mixins.media-md {
+    max-width: 100%;
+  }
+
+  @include mixins.media-sm {
+    width: 100%;
+    top: 12rem;
+    padding-bottom: 7rem;
+    box-shadow: none;
+  }
+
+  &__actions {
+    position: absolute;
+    bottom: 2.5rem;
+    left: 2.5rem;
+
+    display: flex;
+    gap: 0.5rem;
+
+    @include mixins.media-sm {
+      display: none;
+    }
+
+    &-button {
+      @extend %cta;
+
+      &--disabled {
+        opacity: 50%;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      // &--clear {
+      //   background-color: variables.$white;
+      //   color: variables.$secondary-color;
+      //   border: 2px solid variables.$secondary-color--light;
+
+      //   &:hover {
+      //     background: variables.$secondary-color--extralight;
+      //     border: 2px solid variables.$secondary-color--light;
+      //   }
+      // }
+    }
+  }
+
+  &__months {
+    display: flex;
+    gap: 2rem;
+    width: 100%;
+
+    @include mixins.media-md {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+
+  &__month {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  &-flex-days {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    flex-wrap: wrap;
+
+    &__tag {
+      padding: 0.75rem 1rem;
+      border-radius: 0.5rem;
+      border: 2px solid var(--tide-booking-color-primary-extra-fade);
+
+      font-size: 16px;
+      font-weight: 400;
+      color: var(--tide-booking-color-primary);
+
+      cursor: pointer;
+      transition: all 0.2s;
+
+      // &:hover {
+      //   background: variables.$secondary-color;
+      //   color: variables.$white;
+      //   border: 2px solid variables.$secondary-color;
+      // }
+
+      // &--active {
+      //   background: variables.$secondary-color--extralight;
+      //   border: 2px solid variables.$secondary-color;
+      //   color: variables.$secondary-color;
+      // }
+    }
+  }
+
+  &__flexible-range {
+    background-color: #fff9de;
+  }
+}
+
+.calendar {
+  width: 100%;
+  font-family: inherit;
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    margin-bottom: 1rem;
+
+    .calendar__pager {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 100%;
+      margin-bottom: 1.25rem;
+
+      position: relative;
+
+      &-icon {
+        position: absolute;
+        top: 50%;
+        left: 0;
+
+        fill: var(--tide-booking-color-primary);
+        cursor: pointer;
+        transition: all 0.2s;
+        transform: translateY(-50%);
+
+        &--right {
+          right: 0;
+          left: auto;
+          transform: rotate(180deg);
+        }
+      }
+
+      .calendar__current-month {
+        font-weight: 700;
+        color: var(--tide-booking-color-primary);
+      }
+    }
+
+    .calendar__day-labels {
+      display: flex;
+      width: 100%;
+
+      padding: 1rem;
+      border-radius: 0.25rem;
+      background: var(--tide-booking-gray-background-light);
+
+      .calendar__day-label {
+        flex: 1;
+        text-align: center;
+
+        font-size: 16px;
+        font-weight: 400;
+        color: var(--tide-booking-color-primary);
+
+        &:nth-last-child(2),
+        &:last-child {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__week {
+    display: flex;
+  }
+
+  &__day {
+    flex: 1;
+    aspect-ratio: 1 / 1;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 16px;
+
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &--outside-month {
+      color: #d3d3d3;
+    }
+
+    &--disabled {
+      color: #ccc;
+      cursor: not-allowed;
+    }
+
+    &--range {
+      background-color: #fff9de;
+    }
+
+    &--selected {
+      background-color: #ffde40;
+
+      &:first-child {
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    }
+
+    &:hover:not(.calendar__day--disabled) {
+      background-color: #f3f3f3;
+    }
+  }
+}
+
+.single-date-picker {
+  &__wrapper {
+    position: absolute;
+    z-index: 22; // was 10
+    padding: 1rem;
+    width: 100%;
+    background: var(--tide-booking-white);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+  }
+}