DateRangeInputField desktop styles

src/components/DateRangeInputField/DateRangeInput.css

@@ -21,6 +21,12 @@
     width: 100%;
     min-height: calc(100vh - var(--datepickerDistanceToTop));
     background-color: var(--marketplaceColor);
+
+    @media (--viewportMedium) {
+      top: 41px;
+      min-height: auto;
+      box-shadow: var(--boxShadowPopup);
+    }
   }
   & :global(.DateRangePickerInput) {
     width: 100%;
@@ -40,6 +46,10 @@
     display: block;
     width: 100%;
     padding: 5px 0 2px 0;
+
+    @media (--viewportMedium) {
+      padding: 6px 0 9px 0;
+    }
   }
   & :global(.DayPicker__week-header) {
     color: var(--matterColorLight);
@@ -55,6 +65,11 @@
     @apply --marketplaceH2FontStyles;
     margin: 1px 0 14px;
     font-weight: 400;
+
+    @media (--viewportMedium) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
   }
   & :global(.DayPickerNavigation__prev),
   & :global(.DayPickerNavigation__next) {
@@ -191,14 +206,28 @@
   & :global(.DateRangePickerInput) {
     width: calc(100% - 48px);
     margin: 0 24px 3px 24px;
+
+    @media (--viewportMedium) {
+      width: 100%;
+      margin: 0;
+    }
   }
 
   /* Create gutter between inputs */
   & :global(.DateInput) {
     width: calc(100% - 6px);
+
+    @media (--viewportMedium) {
+      width: calc(100% - 12px);
+    }
   }
+
   & :global(.DateInput:first-of-type) {
     margin-right: 12px;
+
+    @media (--viewportMedium) {
+      margin-right: 24px;
+    }
   }
 }
 

src/components/DateRangeInputField/DateRangeInputField.css

@@ -50,6 +50,10 @@
     border-bottom-color: var(--matterColor);
     outline: none;
   }
+
+  @media (--viewportMedium) {
+    border-bottom-width: 3px;
+  }
 }
 
 .inputSuccess {
@@ -82,4 +86,23 @@
     flex-basis: calc(50% - 6px);
     transition: all 0.15s ease-out;
   }
+
+  @media (--viewportMedium) {
+    width: 100%;
+    margin: 0;
+
+
+    /* Gutter between inputs (when calendar is not visible) */
+    & .startDateLabel,
+    & .endDateLabel {
+      flex-basis: calc(50% - 12px);
+    }
+
+    & .input {
+      flex-basis: calc(50% - 12px);
+      transition: all 0.15s ease-out;
+    }
+
+  }
+
 }