Merge pull request #405 from 4site-interactive-studios/webkit-ecard-date-field

Fix webkit quirk on eCard future delivery date field

Author: fernanDOTdo

packages/styles/dist/main.css

@@ -71,12 +71,7 @@ button.en__ecarditems__addrecipient {
 }
 
 .en__ecarditems__thumb {
-  width: calc(
-    (
-        100% - var(--fields_spacing-inline) *
-          (var(--ecard_thumnail-row_count) * 2)
-      ) / var(--ecard_thumnail-row_count)
-  );
+  width: calc((100% - var(--fields_spacing-inline) * (var(--ecard_thumnail-row_count) * 2)) / var(--ecard_thumnail-row_count));
   margin-left: var(--fields_spacing-inline);
   margin-right: var(--fields_spacing-inline);
 }
@@ -124,11 +119,28 @@ button.en__ecarditems__prevclose {
   background-color: #323232;
   margin-bottom: 40px;
   color: #ffffff;
+
   :hover {
     color: #ffffff;
   }
 }
 
+/**
+  * This date entry field displays too wide on webkit iOS browsers. This is a fix for that.
+  */
+.en__ecardrecipients__futureDelivery input[type="date"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.en__ecardrecipients__futureDelivery input[type="date"]::-webkit-date-and-time-value {
+  text-align: left;
+}
+
 @media screen and (max-width: 700px) {
   button.en__ecarditems__prevclose {
     right: 17px;
@@ -139,4 +151,4 @@ button.en__ecarditems__prevclose {
 // Hides any section with the "send-if-ecard" class until the [data-engrid-show-ecard-options] data attribute is added
 body:not[data-engrid-show-ecard-options] .show-if-ecard {
   display: none;
-}
+}