@qite/tide-components 1.0.1

package/styles/qsm/_calendar.scss

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