mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-28 03:10:55 +00:00
223 lines
6.6 KiB
CSS
223 lines
6.6 KiB
CSS
/* Restyle the react-day-picker month/year dropdown caption to match Mantine
|
|
inputs — the library ships it as bare text + an invisible <select>, with
|
|
no border/box affordance and a hardcoded blue chevron. */
|
|
.amharic-daypicker {
|
|
--rdp-accent-color: var(--mantine-primary-color-filled);
|
|
--rdp-day-height: 36px;
|
|
--rdp-day-width: 36px;
|
|
--rdp-day_button-height: 34px;
|
|
--rdp-day_button-width: 34px;
|
|
--rdp-weekday-padding: 0.25rem 0;
|
|
--rdp-nav-height: 2.25rem;
|
|
--rdp-nav_button-width: 2rem;
|
|
--rdp-nav_button-height: 2rem;
|
|
}
|
|
|
|
/* 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);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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;
|
|
position: relative;
|
|
z-index: 10;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.amharic-daypicker .rdp-dropdowns {
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.amharic-daypicker .rdp-dropdown_root {
|
|
border: 1px solid var(--mantine-color-default-border);
|
|
border-radius: var(--mantine-radius-sm);
|
|
background-color: var(--mantine-color-body);
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.amharic-daypicker .rdp-dropdown_root:hover {
|
|
background-color: var(--mantine-color-default-hover);
|
|
}
|
|
|
|
[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-dropdown {
|
|
color-scheme: dark;
|
|
background-color: var(--mantine-color-dark-7);
|
|
color: var(--mantine-color-gray-1);
|
|
}
|
|
|
|
[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-dropdown option {
|
|
background-color: var(--mantine-color-dark-7);
|
|
color: var(--mantine-color-gray-1);
|
|
}
|
|
|
|
.amharic-daypicker .rdp-caption_label {
|
|
gap: 0.25rem;
|
|
font-size: var(--mantine-font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--mantine-color-text);
|
|
}
|
|
|
|
.amharic-daypicker .rdp-dropdown_root .rdp-chevron {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: var(--mantine-color-dimmed);
|
|
}
|
|
|
|
/* Prev/next month buttons: bigger tap target + visible button box (border,
|
|
background, accent-colored chevron) instead of the default bare, tiny
|
|
blue arrow — the dropdown captions replaced them as the primary nav, so
|
|
they need to stay easy to spot and hit. */
|
|
.amharic-daypicker .rdp-button_previous,
|
|
.amharic-daypicker .rdp-button_next {
|
|
border: 1px solid var(--mantine-color-default-border);
|
|
border-radius: var(--mantine-radius-sm);
|
|
background-color: var(--mantine-color-body);
|
|
}
|
|
|
|
.amharic-daypicker .rdp-button_previous:not([aria-disabled='true']):hover,
|
|
.amharic-daypicker .rdp-button_next:not([aria-disabled='true']):hover {
|
|
background-color: var(--mantine-color-default-hover);
|
|
}
|
|
|
|
.amharic-daypicker .rdp-nav .rdp-chevron {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: var(--mantine-primary-color-filled);
|
|
}
|
|
|
|
.amharic-daypicker .rdp-month_caption {
|
|
font-size: inherit;
|
|
font-weight: 600;
|
|
margin-inline-end: calc(var(--rdp-nav_button-width) * 2 + 0.5rem);
|
|
}
|
|
|
|
/* Day cells are already circular (--rdp-day_button-border-radius: 100%);
|
|
the library only outlines the selected one by default — fill it instead
|
|
so the selection reads as a solid, unambiguous mark. */
|
|
.amharic-daypicker .rdp-selected .rdp-day_button {
|
|
background-color: var(--mantine-primary-color-filled);
|
|
border-color: var(--mantine-primary-color-filled);
|
|
color: var(--mantine-color-white);
|
|
}
|
|
|
|
/* Today indicator — a solid accent-coloured ring that stays clearly visible
|
|
in both light and dark themes. The border uses the primary filled colour so
|
|
it stands out against the popup background on either scheme. The text gets
|
|
the primary colour so the digit is unambiguously "special" even without the
|
|
ring being thick. */
|
|
.amharic-daypicker .rdp-today .rdp-day_button {
|
|
border: 2px solid var(--mantine-primary-color-filled) !important;
|
|
color: var(--mantine-primary-color-filled);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* When today is also the selected day, keep the filled background but add a
|
|
contrasting inner ring so the "today" mark isn't lost. */
|
|
.amharic-daypicker .rdp-today.rdp-selected .rdp-day_button {
|
|
background-color: var(--mantine-primary-color-filled);
|
|
border-color: var(--mantine-primary-color-filled) !important;
|
|
color: var(--mantine-color-white);
|
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Dark-mode: use a bright filled background so the "today" cell is
|
|
immediately visible on dark popup surfaces where a thin ring alone
|
|
would disappear into the background. */
|
|
[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-today .rdp-day_button {
|
|
background-color: var(--mantine-primary-color-light-color, #1c7ed6);
|
|
border: 2px solid #74c0fc !important;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
[data-mantine-color-scheme='dark'] .amharic-daypicker .rdp-today.rdp-selected .rdp-day_button {
|
|
background-color: var(--mantine-primary-color-filled);
|
|
border: 2px solid #74c0fc !important;
|
|
color: #fff;
|
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
/* Ensure no scrollbar appears on the datepicker popover dropdown */
|
|
.amharic-daypicker-dropdown {
|
|
overflow: hidden !important;
|
|
scrollbar-width: none !important;
|
|
-ms-overflow-style: none !important;
|
|
}
|
|
|
|
.amharic-daypicker-dropdown::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|