BB-18875: No calendar button in date fields on tablet and phone views…

… in view switcher on MacOS Safari (#34061)
Dylvn · Nov 2, 2022 · b578dc9 · b578dc9
1 parent 6925e24
commit b578dc9
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 7 deletions.
diff --git a/src/Oro/Bundle/FormBundle/Resources/public/default/scss/components/datepicker.scss b/src/Oro/Bundle/FormBundle/Resources/public/default/scss/components/datepicker.scss
@@ -21,6 +21,17 @@
         display: $datepicker-input-display;
         max-width: $datepicker-input-max-width;
         padding-left: $datepicker-input-padding-left;
+        position: $datepicker-input-position;
+
+        &::-webkit-calendar-picker-indicator {
+            width: $datepicker-input-padding-left;
+            height: auto;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: auto;
+            bottom: 0;
+        }
     }
 
     &--form-mode {

diff --git a/src/Oro/Bundle/FormBundle/Resources/public/default/scss/components/input.scss b/src/Oro/Bundle/FormBundle/Resources/public/default/scss/components/input.scss
@@ -23,6 +23,12 @@
         display: none;
     }
 
+    &[type='date'],
+    &[type='time'] {
+        display: flex;
+        align-items: center;
+    }
+
     &[type='date'] {
         min-height: $input-date-height;
 
@@ -31,21 +37,23 @@
         }
 
         &::-webkit-calendar-picker-indicator {
-            display: none;
+            opacity: 0;
         }
 
-        // Fix height Shadow DOM elements
+        // Fix height and text-align Shadow DOM elements
         &::-webkit-date-and-time-value,
         &::-webkit-datetime-edit {
             line-height: 1;
+            text-align: left;
         }
     }
 
     &[type='time'] {
-        // Fix height Shadow DOM elements
+        // Fix height and text-align Shadow DOM elements
         &::-webkit-date-and-time-value,
         &::-webkit-datetime-edit {
             line-height: 1;
+            text-align: left;
         }
     }
 
@@ -117,6 +125,7 @@
             &::before {
                 content: attr(placeholder);
                 color: $input-time-placeholder-color;
+                text-align: left;
                 flex: 1 1 0%;
             }
         }

diff --git a/src/Oro/Bundle/FormBundle/Resources/public/default/scss/variables/datepicker-config.scss b/src/Oro/Bundle/FormBundle/Resources/public/default/scss/variables/datepicker-config.scss
@@ -15,6 +15,7 @@ $datepicker-box-icon-pointer-events: none !default;
 $datepicker-input-display: block !default;
 $datepicker-input-max-width: 140px !default;
 $datepicker-input-padding-left: 39px !default;
+$datepicker-input-position: relative !default;
 
 $datepicker-input-form-mode-icon-top: 35px !default;
 $datepicker-box-form-mode-datepicker-input-max-width: none !default;

diff --git a/src/Oro/Bundle/UIBundle/Resources/public/css/scss/oro/form/base-input.scss b/src/Oro/Bundle/UIBundle/Resources/public/css/scss/oro/form/base-input.scss
@@ -58,8 +58,6 @@
     &::-webkit-search-cancel-button,
     &::-webkit-search-results-button,
     &::-webkit-search-results-decoration,
-    // Disable platform styles of "date" input
-    &::-webkit-calendar-picker-indicator,
     // Disable platform styles of "time" input
     &::-webkit-inner-spin-button {
         display: none;

diff --git a/src/Oro/Bundle/UIBundle/Resources/public/css/scss/settings/mixins/main.scss b/src/Oro/Bundle/UIBundle/Resources/public/css/scss/settings/mixins/main.scss
@@ -294,7 +294,7 @@
             $content: '#{$icon}';
         }
 
-        &:#{$state} {
+        &::#{$state} {
             content: $content;
             font-family: $fa-font-family, $font-family-sans-serif;
 

diff --git a/src/Oro/Bundle/UIBundle/Resources/public/default/scss/settings/mixins/fa-icon.scss b/src/Oro/Bundle/UIBundle/Resources/public/default/scss/settings/mixins/fa-icon.scss
@@ -17,7 +17,7 @@
             $content: '#{$icon}';
         }
 
-        &:#{$state} {
+        &::#{$state} {
             content: $content;
             font-family: $icon-font;