plane/web/styles/react-day-picker.css
Aaryan Khandelwal b1592adc66
[WEB-371]: Implemented react-day-picker for date selections (#3679)
* dev: initialize new date picker

* style: selected date focus state

* chore: replace custom date filter modal components

* chore: replaced inbox snooze popover datepicker

* chore: replaced the custom date picker

* style: date range picker designed

* chore: date range picker implemented throughout the platform

* chore: updated tab indices

* chore: range-picker in the issue layouts

* chore: passed due date color

* chore: removed range picker from issue dates
2024-02-21 19:55:18 +05:30

368 lines
6.9 KiB
CSS

.rdp {
font-size: 12px;
--rdp-cell-size: 40px;
/* Size of the day cells. */
--rdp-caption-font-size: 1.15rem;
/* Font size for the caption labels. */
--rdp-caption-navigation-size: 1.25rem;
/* Font size for the caption labels. */
--rdp-accent-color: rgba(var(--color-primary-100));
/* Accent color for the background of selected days. */
--rdp-background-color: rgba(var(--color-primary-100), 0.2);
/* Background color for the hovered/focused elements. */
--rdp-dark-background-color: rgba(var(--color-primary-300));
/* Background color for the hovered/focused, already selected elements. */
--rdp-outline: 2px solid var(--rdp-accent-color);
/* Outline border for focused elements */
--rdp-selected-color: #ffffff;
/* Color of selected day text */
background: transparent;
}
/* Hide elements for devices that are not screen readers */
.rdp-vhidden {
box-sizing: border-box;
padding: 0;
margin: 0;
background: transparent;
border: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
position: absolute !important;
top: 0;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
border: 0 !important;
}
/* Buttons */
.rdp-button_reset {
appearance: none;
position: relative;
margin: 0;
padding: 0;
cursor: default;
color: inherit;
background: none;
font: inherit;
-moz-appearance: none;
-webkit-appearance: none;
}
.rdp-button_reset:focus-visible {
/* Make sure to reset outline only when :focus-visible is supported */
outline: none;
}
.rdp-button {
border: 2px solid transparent;
}
.rdp-button[disabled]:not(.rdp-day_selected) {
opacity: 0.25;
}
.rdp-button:not([disabled]) {
cursor: pointer;
}
.rdp-button:focus-visible:not([disabled]):not(.rdp-day_selected) {
color: inherit;
background-color: var(--rdp-background-color);
}
.rdp-button:focus-visible:not([disabled]).rdp-day_selected:not(.rdp-day_range_middle) {
outline: var(--rdp-outline);
outline-offset: 2px;
background-color: var(--rdp-dark-background-color);
outline-width: thin;
}
.rdp-button:hover:not([disabled]).rdp-day_selected {
background-color: var(--rdp-dark-background-color);
}
.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
background-color: var(--rdp-background-color);
}
.rdp-months {
display: flex;
}
.rdp-month {
margin: 0 1em;
}
.rdp-month:first-child {
margin-left: 0;
}
.rdp-month:last-child {
margin-right: 0;
}
.rdp-table {
margin: 0;
max-width: calc(var(--rdp-cell-size) * 7);
border-collapse: collapse;
}
.rdp-with_weeknumber .rdp-table {
max-width: calc(var(--rdp-cell-size) * 8);
border-collapse: collapse;
}
.rdp-caption {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
text-align: left;
}
.rdp-multiple_months .rdp-caption {
position: relative;
display: block;
text-align: center;
}
.rdp-caption_dropdowns {
position: relative;
display: inline-flex;
}
.rdp-caption_label {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
margin: 0;
padding: 0 0.25em;
white-space: nowrap;
color: currentColor;
border: 0;
border: 2px solid transparent;
font-family: inherit;
font-size: var(--rdp-caption-font-size);
font-weight: 600;
}
.rdp-nav {
white-space: nowrap;
}
.rdp-multiple_months .rdp-caption_start .rdp-nav {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.rdp-multiple_months .rdp-caption_end .rdp-nav {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.rdp-nav_button {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--rdp-caption-navigation-size);
height: var(--rdp-caption-navigation-size);
padding: 0.25em;
border-radius: 2px;
}
.rdp-nav_button:hover,
.rdp-nav_button:focus-visible {
background-color: rgba(var(--color-background-80)) !important;
}
/* ---------- */
/* Dropdowns */
/* ---------- */
.rdp-dropdown_year,
.rdp-dropdown_month {
position: relative;
display: inline-flex;
align-items: center;
}
.rdp-dropdown {
appearance: none;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0;
cursor: inherit;
opacity: 0;
border: none;
background-color: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.rdp-dropdown[disabled] {
opacity: unset;
color: unset;
}
.rdp-dropdown:focus-visible:not([disabled])+.rdp-caption_label {
background-color: var(--rdp-background-color);
border: var(--rdp-outline);
border-radius: 6px;
}
.rdp-dropdown_icon {
margin: 0 0 0 5px;
}
.rdp-head {
border: 0;
}
.rdp-head_row,
.rdp-row {
height: 100%;
}
.rdp-head_cell {
vertical-align: middle;
font-size: 0.75em;
font-weight: 700;
text-align: center;
height: 100%;
height: var(--rdp-cell-size);
padding: 0;
text-transform: uppercase;
}
.rdp-tbody {
border: 0;
}
.rdp-tfoot {
margin: 0.5em;
}
.rdp-cell {
width: var(--rdp-cell-size);
height: 100%;
height: var(--rdp-cell-size);
padding: 0;
text-align: center;
}
.rdp-weeknumber {
font-size: 0.75em;
}
.rdp-weeknumber,
.rdp-day {
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: var(--rdp-cell-size);
max-width: var(--rdp-cell-size);
height: var(--rdp-cell-size);
margin: 0;
border: 2px solid transparent;
border-radius: 100%;
}
.rdp-day_today:not(.rdp-day_outside) {
position: relative;
}
.rdp-day_today:not(.rdp-day_outside)::after {
content: '';
position: absolute;
left: 50%;
bottom: 2px;
width: 0.5em;
height: 0.5em;
background-color: var(--rdp-background-color);
border-radius: 100%;
transform: translate(-50%, 0);
}
.rdp-day_selected,
.rdp-day_selected:focus-visible,
.rdp-day_selected:hover {
color: var(--rdp-selected-color);
opacity: 1;
background-color: var(--rdp-accent-color);
}
.rdp-day_outside:not(.rdp-day_selected) {
opacity: 0.5;
}
.rdp-day_selected:focus-visible {
z-index: 1;
}
td:has(.rdp-day_range_start),
td:has(.rdp-day_range_middle),
td:has(.rdp-day_range_end) {
position: relative;
}
td:has(.rdp-day_range_start)::before,
td:has(.rdp-day_range_middle)::before,
td:has(.rdp-day_range_end)::before {
content: '';
position: absolute;
background-color: var(--rdp-background-color);
top: 50%;
height: 100%;
width: 50%;
transform: translate(0, -50%);
}
td:has(.rdp-day_range_start)::before {
left: 50%;
}
td:has(.rdp-day_range_middle)::before {
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
td:has(.rdp-day_range_end)::before {
right: 50%;
}
td:has(.rdp-day_range_start.rdp-day_range_end)::before {
display: none;
}
.rdp-day_range_middle {
background-color: transparent;
color: inherit;
}
.rdp-day_range_middle:hover,
.rdp-day_range_middle:focus-visible {
background-color: var(--rdp-background-color) !important;
color: inherit !important;
}