feat: add mobile ui to calendar

components/DatePicker/date-picker.module.css

@@ -7,20 +7,6 @@
   }
 }
 
-.hideWrapper {
-  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-Large);
-  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
-  position: absolute;
-  /** 
-    BookingWidget padding + 
-    border-width + 
-    wanted space below booking widget
-   */
-  top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
-}
-
 .btn {
   background: none;
   border: none;
@@ -34,117 +20,42 @@
   opacity: 0.8;
 }
 
-div.months {
-  flex-wrap: nowrap;
+.hideWrapper {
+  background-color: var(--Main-Grey-White);
 }
 
-.monthCaption {
-  justify-content: center;
+@media screen and (max-width: 1366px) {
+  .container {
+    z-index: 10001;
+  }
+
+  .hideWrapper {
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: 100%;
+    transition: top 300ms ease;
+    z-index: 10001;
+  }
+
+  .container[data-isopen="true"] .hideWrapper {
+    top: 0;
+  }
 }
 
-.captionLabel {
-  text-transform: capitalize;
-}
-
-td.day,
-td.rangeEnd,
-td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
-}
-
-td.rangeEnd,
-td.rangeStart {
-  background: var(--Base-Background-Primary-Normal);
-}
-
-td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) {
-  border-radius: 0 50% 50% 0;
-}
-
-td.rangeStart[aria-selected="true"] {
-  border-radius: 50% 0 0 50%;
-}
-
-td.rangeEnd[aria-selected="true"] button.dayButton:hover,
-td.rangeStart[aria-selected="true"] button.dayButton:hover {
-  background: var(--Primary-Light-On-Surface-Accent);
-  border-radius: 50%;
-}
-
-td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
-  background: var(--Primary-Light-On-Surface-Accent);
-  border: none;
-  color: var(--Base-Button-Inverted-Fill-Normal);
-}
-
-td.day,
-td.day[data-today="true"] {
-  color: var(--UI-Text-High-contrast);
-  height: 40px;
-  padding: var(--Spacing-x-half);
-  width: 40px;
-}
-
-td.day button.dayButton:hover {
-  background: var(--Base-Surface-Secondary-light-Hover);
-}
-
-td.day[data-outside="true"] button.dayButton {
-  border: none;
-}
-
-td.day:not(td.rangeEnd, td.rangeStart)[aria-selected="true"],
-td.rangeMiddle[aria-selected="true"] button.dayButton {
-  background: var(--Base-Background-Primary-Normal);
-  border: none;
-  border-radius: 0;
-}
-
-td.day[data-disabled="true"],
-td.day[data-disabled="true"] button.dayButton,
-td.day[data-outside="true"] ~ td.day[data-disabled="true"],
-td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
-.week:has(td.day[data-outside="true"] ~ td.day[data-disabled="true"])
-  td.day[data-outside="true"]
-  button.dayButton {
-  background: none;
-  color: var(--Base-Text-Disabled);
-  cursor: not-allowed;
-}
-
-.weekDay {
-  color: var(--UI-Text-Placeholder);
-  font-family: var(--typography-Footnote-Labels-fontFamily);
-  font-size: var(--typography-Footnote-Labels-fontSize);
-  font-weight: var(--typography-Footnote-Labels-fontWeight);
-  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
-  line-height: var(--typography-Footnote-Labels-lineHeight);
-  text-decoration: var(--typography-Footnote-Labels-textDecoration);
-  text-transform: uppercase;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: var(--Spacing-x2);
-}
-
-.divider {
-  margin-top: var(--Spacing-x2);
-}
-
-.nextButton {
-  transform: rotate(180deg);
-  right: 0;
-}
-
-.previousButton {
-  left: 0;
+@media screen and (min-width: 1367px) {
+  .hideWrapper {
+    border-radius: var(--Corner-radius-Large);
+    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+    position: absolute;
+    /** 
+      BookingWidget padding + 
+      border-width + 
+      wanted space below booking widget
+     */
+    top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
+  }
 }