[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
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
e86d2ba743
commit
b1592adc66
32 changed files with 1018 additions and 998 deletions
|
|
@ -1,142 +0,0 @@
|
|||
.react-datepicker-wrapper input::placeholder {
|
||||
color: rgba(var(--color-text-200));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper input:-ms-input-placeholder {
|
||||
color: rgba(var(--color-text-200));
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper .react-datepicker__close-icon::after {
|
||||
background: transparent;
|
||||
color: rgba(var(--color-text-200));
|
||||
}
|
||||
|
||||
.react-datepicker-popper {
|
||||
z-index: 30 !important;
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
position: relative;
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper,
|
||||
.react-datepicker__input-container {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.react-datepicker {
|
||||
font-family: "Inter" !important;
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
border: 0.5px solid rgba(var(--color-border-300)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__month-container {
|
||||
width: 300px;
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
color: rgba(var(--color-text-100)) !important;
|
||||
border-radius: 10px !important;
|
||||
/* border: 1px solid rgba(var(--color-background-80)) !important; */
|
||||
}
|
||||
|
||||
.react-datepicker__header {
|
||||
border-radius: 10px !important;
|
||||
background-color: rgba(var(--color-background-100)) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.react-datepicker__navigation {
|
||||
line-height: 0.78;
|
||||
}
|
||||
|
||||
.react-datepicker__triangle {
|
||||
border-color: rgba(var(--color-background-100)) transparent transparent transparent !important;
|
||||
}
|
||||
|
||||
.react-datepicker__triangle:before {
|
||||
border-bottom-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
.react-datepicker__triangle:after {
|
||||
border-bottom-color: rgba(var(--color-background-100)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__current-month {
|
||||
font-weight: 500 !important;
|
||||
color: rgba(var(--color-text-100)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__month {
|
||||
border-collapse: collapse;
|
||||
color: rgba(var(--color-text-100)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__day-names {
|
||||
margin-top: 10px;
|
||||
margin-left: 14px;
|
||||
width: 280px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.react-datepicker__day-name {
|
||||
color: rgba(var(--color-text-200)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__week {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.react-datepicker__day {
|
||||
color: rgba(var(--color-text-100)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__day {
|
||||
border-radius: 50% !important;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.react-datepicker__day:hover {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
color: rgba(var(--color-text-100)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__day--selected,
|
||||
.react-datepicker__day--selected:hover {
|
||||
background-color: #216ba5 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.react-datepicker__day--disabled,
|
||||
.react-datepicker__day--disabled:hover {
|
||||
background: transparent !important;
|
||||
color: rgba(var(--color-text-400)) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.react-datepicker__day--today {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.react-datepicker__day--highlighted {
|
||||
background-color: rgba(var(--color-background-80)) !important;
|
||||
}
|
||||
|
||||
.react-datepicker__day--keyboard-selected {
|
||||
background-color: #216ba5 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.react-datepicker__day--in-range-start,
|
||||
.react-datepicker__day--in-range-end {
|
||||
background-color: rgba(var(--color-primary-100)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.react-datepicker__day--in-range:not(.react-datepicker__day--in-range-start):not(.react-datepicker__day--in-range-end) {
|
||||
background-color: rgba(var(--color-primary-100)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
368
web/styles/react-day-picker.css
Normal file
368
web/styles/react-day-picker.css
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
.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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue