Merge pull request #554 from bcgov/ccfri-3743-css-update-date-time-input

Minor css change to move icon to the start of AppDateInput and AppTimeInput

Author: vietle-cgi

frontend/src/components/guiComponents/AppDateInput.vue

@@ -31,10 +31,19 @@ export default {
 };
 </script>
 
-<style>
-input[type='date']::-webkit-datetime-edit-year-field:focus,
-input[type='date']::-webkit-datetime-edit-month-field:focus,
-input[type='date']::-webkit-datetime-edit-day-field:focus {
+<style scoped>
+:deep(input[type='date']::-webkit-datetime-edit-year-field:focus),
+:deep(input[type='date']::-webkit-datetime-edit-month-field:focus),
+:deep(input[type='date']::-webkit-datetime-edit-day-field:focus) {
   background-color: #3367d1;
 }
+
+:deep(input[type='date']::-webkit-calendar-picker-indicator) {
+  position: absolute;
+}
+
+:deep(input::-webkit-datetime-edit) {
+  position: relative;
+  left: 30%;
+}
 </style>

frontend/src/components/guiComponents/AppTimeInput.vue

@@ -33,11 +33,20 @@ export default {
 };
 </script>
 
-<style>
-input[type='time']::-webkit-datetime-edit-hour-field:focus,
-input[type='time']::-webkit-datetime-edit-minute-field:focus,
-input[type='time']::-webkit-datetime-edit-second-field:focus,
-input[type='time']::-webkit-datetime-edit-ampm-field:focus {
+<style scoped>
+:deep(input[type='time']::-webkit-datetime-edit-hour-field:focus),
+:deep(input[type='time']::-webkit-datetime-edit-minute-field:focus),
+:deep(input[type='time']::-webkit-datetime-edit-second-field:focus),
+:deep(input[type='time']::-webkit-datetime-edit-ampm-field:focus) {
   background-color: #3367d1;
 }
+
+:deep(input[type='time']::-webkit-calendar-picker-indicator) {
+  position: absolute;
+}
+
+:deep(input::-webkit-datetime-edit) {
+  position: relative;
+  left: 50%;
+}
 </style>