sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI Datepicker Design Adjustments

Browse Source
This commit is contained in:
Nino
2025-04-11 13:44:49 +02:00
parent a93251f082
commit 82e04917b7
3 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
libs/ui/datepicker/src/lib/_selected-range.scss
View File

@@ -1,5 +1,5 @@
.ui-selected-range {
@apply w-full h-[4.5rem] flex items-center justify-center border-b-[0.0625rem] border-isa-neutral-400;
@apply w-full h-[4.5rem] flex items-end justify-center border-b-[0.0625rem] border-isa-neutral-400 pb-[0.75rem];
}
.ui-selected-range__input-wrapper {
@@ -19,7 +19,7 @@
.ui-selected-range__start-focus-indicator,
.ui-selected-range__stop-focus-indicator {
@apply hidden absolute -bottom-[1.25rem] w-[5.125rem] h-[0.25rem] bg-isa-neutral-700 rounded-[3.125rem];
@apply hidden absolute -bottom-[0.77rem] w-[5.125rem] h-[0.25rem] bg-isa-neutral-700 rounded-[3.125rem];
}
&:has(input#start:focus) {

12
libs/ui/datepicker/src/lib/body/calendar-body/calendar-body.component.html
View File

@@ -1,4 +1,6 @@
<div class="flex flex-row justify-between items-center pl-[1.475rem] pr-4 mb-1">
<div
class="flex flex-row justify-between items-center pl-[1.475rem] pr-[1.1rem] mb-1"
>
<button
type="button"
(click)="viewState.displayedView.set(DatepickerView.Month)"
@@ -7,7 +9,7 @@
<span class="isa-text-body-1-bold-big text-isa-neutral-900">
{{ viewState.displayedDate() | date: 'MMMM YYYY' }}
</span>
<ng-icon size="0.75rem" name="isaActionChevronDown"></ng-icon>
<ng-icon size="1.25rem" name="isaActionChevronDown"></ng-icon>
</button>
<div class="flex flex-row gap-4 items-center">
@@ -32,7 +34,11 @@
<div class="ui-calendar-body__cell-container">
@for (day of calendarDays(); let i = $index; track i) {
<button [uiCalendarBodyCell]="day" type="button" class="ui-calendar-body__cell">
<button
[uiCalendarBodyCell]="day"
type="button"
class="ui-calendar-body__cell"
>
{{ day | date: 'd' }}
</button>
}

34
libs/ui/search-bar/src/lib/search-bar.component.scss
View File

@@ -10,32 +10,32 @@
display: none;
}
}
}
input[type='text'] {
appearance: none;
flex-grow: 1;
input[type='text'] {
appearance: none;
flex-grow: 1;
font-size: 0.875rem;
font-style: normal;
font-weight: 700;
line-height: 1.25rem; /* 142.857% */
@apply text-isa-neutral-900;
&::placeholder {
@apply text-isa-neutral-500;
font-size: 0.875rem;
font-style: normal;
font-weight: 700;
line-height: 1.25rem; /* 142.857% */
@apply text-isa-neutral-900;
&:hover,
&:focus {
@apply text-isa-neutral-900;
&::placeholder {
@apply text-isa-neutral-500;
font-size: 0.875rem;
font-style: normal;
font-weight: 700;
line-height: 1.25rem; /* 142.857% */
&:hover,
&:focus {
@apply text-isa-neutral-900;
}
}
}
@apply focus:outline-none;
@apply focus:outline-none;
}
}
.ui-search-bar__actions {