Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-08-26 19:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(AmharicDatePicker): enhance CSS styles for improved calendar layout and button accessibility

Browse Source
This commit is contained in:
Estifo77
2026-08-05 14:05:44 +03:00
parent 92166a8754
commit 5752362174
1 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
libs/ui/src/lib/input/AmharicDatePicker.css
View File

@@ -3,10 +3,93 @@
no border/box affordance and a hardcoded blue chevron. */
.amharic-daypicker {
--rdp-accent-color: var(--mantine-primary-color-filled);
--rdp-day-height: 44px;
--rdp-day-width: 44px;
--rdp-day_button-height: 42px;
--rdp-day_button-width: 42px;
--rdp-weekday-padding: 0.5rem 0;
--rdp-nav-height: 2.75rem;
--rdp-nav_button-width: 2.75rem;
--rdp-nav_button-height: 2.75rem;
}
/* Backoffice loads Tailwind's preflight after the package stylesheet. That
reset can strip the day-picker table layout, leaving every weekday and day
stacked in a single column. Keep the calendar's structural styles local to
the component so it renders consistently in every app. */
.amharic-daypicker .rdp-months {
position: relative;
display: flex;
max-width: fit-content;
}
.amharic-daypicker .rdp-month {
position: relative;
}
.amharic-daypicker .rdp-month_grid {
display: table;
border-collapse: collapse;
}
.amharic-daypicker .rdp-month_grid thead {
display: table-header-group;
}
.amharic-daypicker .rdp-month_grid tbody {
display: table-row-group;
}
.amharic-daypicker .rdp-month_grid tr {
display: table-row;
}
.amharic-daypicker .rdp-weekday,
.amharic-daypicker .rdp-day {
display: table-cell;
width: var(--rdp-day-width);
height: var(--rdp-day-height);
text-align: center;
}
.amharic-daypicker .rdp-weekday {
padding: var(--rdp-weekday-padding);
}
.amharic-daypicker .rdp-day_button {
padding: 0;
margin: 0;
border: 2px solid transparent;
border-radius: 100%;
background: none;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--rdp-day_button-width);
height: var(--rdp-day_button-height);
}
.amharic-daypicker .rdp-nav {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
height: var(--rdp-nav-height);
}
.amharic-daypicker .rdp-button_previous,
.amharic-daypicker .rdp-button_next {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--rdp-nav_button-width);
height: var(--rdp-nav_button-height);
padding: 0;
margin: 0;
}
.amharic-daypicker .rdp-dropdowns {
gap: 0.375rem;
}