logging.html style improvement

Wrapped date input fields in a new container and added FontAwesome calendar icons for better UI clarity. Updated SCSS to style the date input wrappers and position the icons appropriately.
mazdak/UX-2362
Mazdak Gibran 7 days ago
parent 6f5b56b61e
commit 447d15cef6

@ -27,24 +27,30 @@
{{ "fromDate" | translate }}
<span class="mandatory">*</span>
</label>
<div class="date-input-wrapper">
<input
type="date"
formControlName="fromDate"
class="form-control"
[max]="maxDate"
/>
<i class="fas fa-calendar calendar-icon"></i>
</div>
</div>
<div class="col-md-6">
<label>
{{ "toDate" | translate }} <span class="mandatory">*</span>
</label>
<div class="date-input-wrapper">
<input
type="date"
formControlName="toDate"
class="form-control"
[max]="maxDate"
/>
<i class="fas fa-calendar calendar-icon"></i>
</div>
</div>
</div>

@ -0,0 +1,29 @@
.date-input-wrapper {
position: relative;
input[type="date"] {
cursor: pointer;
padding-right: 35px;
&::-webkit-calendar-picker-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
}
}
.calendar-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #6c757d;
}
}
Loading…
Cancel
Save