UNPKG

@mantine/dates

Version:

Calendars, date and time pickers based on Mantine components

850 lines (696 loc) 22.9 kB
.m_468e7eda { padding-top: 0; padding-bottom: 0; appearance: none; } .m_468e7eda::-webkit-calendar-picker-indicator { display: none; } .m_468e7eda::-webkit-clear-button { display: none; } .m_468e7eda::-webkit-datetime-edit-hour-field, .m_468e7eda::-webkit-datetime-edit-minute-field, .m_468e7eda::-webkit-datetime-edit-second-field, .m_468e7eda::-webkit-datetime-edit-ampm-field { padding-top: 0; max-height: calc(1.875rem * var(--mantine-scale)); display: inline; } .m_468e7eda::-webkit-datetime-edit-hour-field:focus, .m_468e7eda::-webkit-datetime-edit-minute-field:focus, .m_468e7eda::-webkit-datetime-edit-second-field:focus, .m_468e7eda::-webkit-datetime-edit-ampm-field:focus { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); } .m_7a8f1e6d { display: flex; align-items: center; height: 100%; overflow: hidden; } :where([dir="rtl"]) .m_7a8f1e6d { flex-direction: row-reverse; } .m_d6bb0a54 { display: flex; align-items: center; height: calc(var(--input-height) - 15px); } .m_b97ecb26 { display: flex; flex-direction: column; } .m_31fe42f9 { display: flex; gap: calc(0.25rem * var(--mantine-scale)); } .m_9c4817c3 { padding: calc(0.25rem * var(--mantine-scale)); } .m_154c536b { text-align: center; width: 2.5em; height: 2em; border-radius: var(--mantine-radius-default); font-size: var(--control-font-size, var(--mantine-font-size-sm)); } .m_154c536b:where([data-active]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); } @media (hover: hover) { .m_154c536b:hover:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_154c536b:hover:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_154c536b:hover:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } @media (hover: none) { .m_154c536b:active:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_154c536b:active:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_154c536b:active:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } .m_7be09d0c { text-align: center; height: 2em; padding-inline: 0.5em; border-radius: var(--mantine-radius-default); font-size: var(--control-font-size, var(--mantine-font-size-sm)); } .m_7be09d0c:where([data-active]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); } @media (hover: hover) { .m_7be09d0c:hover:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_7be09d0c:hover:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_7be09d0c:hover:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } @media (hover: none) { .m_7be09d0c:active:where(:not([data-active])) { color: var(--mantine-color-bright); } :where([data-mantine-color-scheme='dark']) .m_7be09d0c:active:where(:not([data-active])) { background-color: var(--mantine-color-dark-5); } :where([data-mantine-color-scheme='light']) .m_7be09d0c:active:where(:not([data-active])) { background-color: var(--mantine-color-gray-1); } } .m_7d00001d + .m_7d00001d { margin-top: var(--mantine-spacing-sm); } .m_d8d918d7 { margin-bottom: calc(0.25rem * var(--mantine-scale)); color: var(--mantine-color-dimmed); font-size: calc(var(--control-font-size, var(--mantine-font-size-sm)) - 2px); font-weight: 500; display: flex; align-items: center; padding-inline-start: calc(0.4375rem * var(--mantine-scale)); } .m_d8d918d7::after { content: ''; width: 100%; height: calc(0.0625rem * var(--mantine-scale)); flex: 1; margin-inline-start: var(--mantine-spacing-xs); } :where([data-mantine-color-scheme='light']) .m_d8d918d7::after { background-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_d8d918d7::after { background-color: var(--mantine-color-dark-4); } .m_6b43ba88 { width: calc(2ch + 0.3em); caret-color: transparent; font-variant-numeric: tabular-nums; position: relative; height: 100%; line-height: 1; padding-inline: 0.15em; border: 0; text-align: center; text-align-last: center; background-color: transparent; color: var(--input-color); border-radius: calc(0.125rem * var(--mantine-scale)); appearance: none; } .m_6b43ba88:where([data-am-pm]) { width: calc(3ch + 0.3em); } .m_6b43ba88:where(:disabled) { cursor: not-allowed; } .m_6b43ba88::selection { background-color: transparent; } .m_6b43ba88::placeholder { opacity: 1; color: inherit; } .m_6b43ba88:focus { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); outline: 0; } .m_6b43ba88:focus::placeholder { color: var(--mantine-color-white); } .m_396ce5cb { --day-size-xs: calc(1.875rem * var(--mantine-scale)); --day-size-sm: calc(2.25rem * var(--mantine-scale)); --day-size-md: calc(2.625rem * var(--mantine-scale)); --day-size-lg: calc(3rem * var(--mantine-scale)); --day-size-xl: calc(3.375rem * var(--mantine-scale)); --day-size: var(--day-size-sm); width: var(--day-size, var(--day-size-sm)); height: var(--day-size, var(--day-size-sm)); font-size: calc(var(--day-size) / 2.8); display: inline-flex; justify-content: center; align-items: center; user-select: none; cursor: pointer; background-color: transparent; border-radius: var(--mantine-radius-default); color: var(--mantine-color-text); opacity: 1; } @media (hover: hover) { [data-mantine-color-scheme='light'] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { [data-mantine-color-scheme='light'] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) { background-color: var(--mantine-color-dark-5); } } .m_396ce5cb:where([data-static]) { user-select: auto; cursor: default; } .m_396ce5cb:where([data-weekend]) { color: var(--mantine-color-red-6); } .m_396ce5cb:where([data-outside]) { color: var(--mantine-color-dimmed); opacity: 0.5; } .m_396ce5cb:where(:disabled, [data-disabled]) { color: var(--mantine-color-disabled-color); cursor: not-allowed; opacity: 0.5; } .m_396ce5cb:where([data-hidden]) { display: none; } :where([data-mantine-color-scheme='light']) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) { border: 1px solid var(--mantine-color-gray-4); } :where([data-mantine-color-scheme='dark']) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) { border: 1px solid var(--mantine-color-dark-4); } .m_396ce5cb:where([data-in-range]) { background-color: var(--mantine-primary-color-light-hover); border-radius: 0; } @media (hover: hover) { .m_396ce5cb:where([data-in-range]):hover:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-light); } } @media (hover: none) { .m_396ce5cb:where([data-in-range]):active:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-light); } } .m_396ce5cb:where([data-first-in-range]) { border-radius: 0; border-start-start-radius: var(--mantine-radius-default); border-end-start-radius: var(--mantine-radius-default); } .m_396ce5cb:where([data-last-in-range]) { border-radius: 0; border-end-end-radius: var(--mantine-radius-default); border-start-end-radius: var(--mantine-radius-default); } .m_396ce5cb:where([data-last-in-range][data-first-in-range]) { border-radius: var(--mantine-radius-default); } .m_396ce5cb:where([data-selected]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-primary-color-contrast); } @media (hover: hover) { .m_396ce5cb:where([data-selected]):hover:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-filled-hover); } } @media (hover: none) { .m_396ce5cb:where([data-selected]):active:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-filled-hover); } } .m_18a3eca { color: var(--mantine-color-dimmed); font-weight: normal; font-size: var(--wr-fz, var(--mantine-font-size-sm)); text-transform: capitalize; padding-bottom: calc(var(--wr-spacing, var(--mantine-spacing-sm)) / 2); } .m_cc9820d3 { border-collapse: collapse; table-layout: fixed; } .m_8f457cd5 { padding: 0; } .m_8f457cd5:where([data-with-spacing]) { padding: calc(0.03125rem * var(--mantine-scale)); } .m_6cff9dea { --wn-size-xs: calc(1.875rem * var(--mantine-scale)); --wn-size-sm: calc(2.25rem * var(--mantine-scale)); --wn-size-md: calc(2.625rem * var(--mantine-scale)); --wn-size-lg: calc(3rem * var(--mantine-scale)); --wn-size-xl: calc(3.375rem * var(--mantine-scale)); color: var(--mantine-color-dimmed); font-weight: normal; font-size: calc(var(--wn-size, var(--wn-size-sm)) / 2.8); text-align: center; width: var(--wn-size, var(--wn-size-sm)); } .m_dc6a3c71 { --dpc-size-xs: calc(1.875rem * var(--mantine-scale)); --dpc-size-sm: calc(2.25rem * var(--mantine-scale)); --dpc-size-md: calc(2.625rem * var(--mantine-scale)); --dpc-size-lg: calc(3rem * var(--mantine-scale)); --dpc-size-xl: calc(3.375rem * var(--mantine-scale)); --dpc-size: var(--dpc-size-sm); font-size: var(--dpc-fz, var(--mantine-font-size-sm)); height: var(--dpc-size); width: calc((var(--dpc-size) * 7) / 3 + calc(0.09375rem * var(--mantine-scale))); display: flex; justify-content: center; align-items: center; user-select: none; cursor: pointer; background-color: transparent; color: var(--mantine-color-text); opacity: 1; border-radius: var(--mantine-radius-default); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) { background-color: var(--mantine-color-dark-5); } } .m_dc6a3c71:where(:disabled, [data-disabled]) { color: var(--mantine-color-disabled-color); cursor: not-allowed; opacity: 0.5; } .m_dc6a3c71:where([data-selected]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-primary-color-contrast, var(--mantine-color-white)); } @media (hover: hover) { .m_dc6a3c71:where([data-selected]):hover { background-color: var(--mantine-primary-color-filled-hover); } } @media (hover: none) { .m_dc6a3c71:where([data-selected]):active { background-color: var(--mantine-primary-color-filled-hover); } } .m_dc6a3c71:where([data-in-range]) { background-color: var(--mantine-primary-color-light-hover); border-radius: 0; } @media (hover: hover) { .m_dc6a3c71:where([data-in-range]):hover { background-color: var(--mantine-primary-color-light); } } @media (hover: none) { .m_dc6a3c71:where([data-in-range]):active { background-color: var(--mantine-primary-color-light); } } .m_dc6a3c71:where([data-first-in-range]) { border-radius: 0; border-start-start-radius: var(--mantine-radius-default); border-end-start-radius: var(--mantine-radius-default); } .m_dc6a3c71:where([data-last-in-range]) { border-radius: 0; border-end-end-radius: var(--mantine-radius-default); border-start-end-radius: var(--mantine-radius-default); } .m_dc6a3c71:where([data-first-in-range][data-last-in-range]) { border-radius: var(--mantine-radius-default); } .m_9206547b { border-collapse: collapse; border-width: 0; } .m_c5a19c7d { padding: 0; } .m_c5a19c7d:where([data-with-spacing]) { padding: calc(0.03125rem * var(--mantine-scale)); } .m_2a6c32d { border-collapse: collapse; border-width: 0; cursor: pointer; } .m_fe27622f { padding: 0; } .m_fe27622f:where([data-with-spacing]) { padding: calc(0.03125rem * var(--mantine-scale)); } .m_730a79ed { --dch-control-size-xs: calc(1.875rem * var(--mantine-scale)); --dch-control-size-sm: calc(2.25rem * var(--mantine-scale)); --dch-control-size-md: calc(2.625rem * var(--mantine-scale)); --dch-control-size-lg: calc(3rem * var(--mantine-scale)); --dch-control-size-xl: calc(3.375rem * var(--mantine-scale)); --dch-control-size: var(--dch-control-size-sm); display: flex; max-width: calc(var(--dch-control-size) * 8 + calc(0.4375rem * var(--mantine-scale))); margin-bottom: var(--mantine-spacing-xs); } .m_f6645d97, .m_2351eeb0 { height: var(--dch-control-size); border-radius: var(--mantine-radius-default); display: flex; justify-content: center; align-items: center; user-select: none; opacity: 1; cursor: pointer; } .m_f6645d97:where([data-static]), .m_2351eeb0:where([data-static]) { cursor: default; } @media (hover: hover) { [data-mantine-color-scheme='light'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { [data-mantine-color-scheme='light'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-gray-0); } [data-mantine-color-scheme='dark'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) { background-color: var(--mantine-color-dark-5); } } .m_f6645d97:where(:disabled, [data-disabled]), .m_2351eeb0:where(:disabled, [data-disabled]) { opacity: 0.2; cursor: not-allowed; } .m_2351eeb0 { width: var(--dch-control-size); } .m_f6645d97 { flex: 1; font-size: var(--dch-fz, var(--mantine-font-size-sm)); font-weight: 500; text-transform: capitalize; } .m_367dc749 { width: 60%; height: 60%; } .m_367dc749:where([data-direction='next']) { transform: rotate(270deg); } :where([dir="rtl"]) .m_367dc749:where([data-direction='next']) { transform: rotate(90deg); } .m_367dc749:where([data-direction='previous']) { transform: rotate(90deg); } :where([dir="rtl"]) .m_367dc749:where([data-direction='previous']) { transform: rotate(270deg); } .m_30b26e33 { display: flex; gap: var(--mantine-spacing-md); } .m_6fa5e2aa { cursor: pointer; line-height: unset; } .m_6fa5e2aa:where([data-read-only]) { cursor: default; } .m_765a40cf { display: flex; font-size: var(--preset-font-size); } .m_d6a681e1 { display: flex; flex-direction: column; border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid; padding-inline-end: 0.5em; margin-inline-end: 0.5em; } :where([data-mantine-color-scheme='light']) .m_d6a681e1 { border-color: var(--mantine-color-gray-2); } :where([data-mantine-color-scheme='dark']) .m_d6a681e1 { border-color: var(--mantine-color-dark-5); } .m_acd30b22 { padding: 0.52em 0.8em; border-radius: var(--mantine-radius-default); font-size: var(--preset-font-size); white-space: nowrap; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_acd30b22:hover { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_acd30b22:hover { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_acd30b22:active { background-color: var(--mantine-color-gray-0); } :where([data-mantine-color-scheme='dark']) .m_acd30b22:active { background-color: var(--mantine-color-dark-5); } } .m_208d2562 { display: flex; align-items: stretch; margin-top: var(--mantine-spacing-md); } .m_62ee059 { flex: 1; margin-inline-end: var(--mantine-spacing-md); } .m_ac3f4d63 { text-align: center; padding-inline: 1em; padding-block: 0.25em; border: 1px solid var(--mantine-color-default-border); background-color: var(--mantine-color-default); color: var(--mantine-color-default-color); border-radius: var(--time-grid-radius, var(--mantine-radius-default)); font-size: var(--time-grid-fz, var(--mantine-font-size-sm)); } @media (hover: hover) { .m_ac3f4d63:hover:where(:not([data-disabled])) { background-color: var(--mantine-color-default-hover); } } @media (hover: none) { .m_ac3f4d63:active:where(:not([data-disabled])) { background-color: var(--mantine-color-default-hover); } } .m_ac3f4d63:where([data-active]) { background-color: var(--mantine-primary-color-filled); color: var(--mantine-color-white); border-color: transparent; } @media (hover: hover) { .m_ac3f4d63:where([data-active]):hover:where(:not([data-disabled])) { background-color: var(--mantine-primary-color-filled-hover); } } @media (hover: none) { .m_ac3f4d63:where([data-active]):active:where(:not([data-disabled])) { background-color: var(--mantine-primary-color-filled-hover); } } .m_ac3f4d63:where(:disabled, [data-disabled]) { opacity: 0.5; cursor: not-allowed; } .m_2a0c4eda { width: fit-content; display: flex; align-items: center; font-size: var(--mini-calendar-font-size); } .m_2a05be4f { display: flex; font-size: inherit; } .m_99d16a4 { display: flex; min-width: 3em; gap: 0.5em; font-size: inherit; flex-direction: column; align-items: center; line-height: 1; padding: 0.75em; border-radius: var(--mantine-radius-default); } .m_99d16a4:where([data-selected]) { color: var(--mantine-primary-color-contrast); background-color: var(--mantine-primary-color-filled); } @media (hover: hover) { .m_99d16a4:where([data-selected]):hover:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-filled-hover); } } @media (hover: none) { .m_99d16a4:where([data-selected]):active:where(:not([data-disabled], [data-static])) { background-color: var(--mantine-primary-color-filled-hover); } } .m_99d16a4:where([data-disabled]) { opacity: 0.3; cursor: not-allowed; } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_99d16a4:hover:where(:not([data-disabled], [data-selected])) { background-color: var(--mantine-color-gray-1); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_99d16a4:active:where(:not([data-disabled], [data-selected])) { background-color: var(--mantine-color-gray-1); } } @media (hover: hover) { :where([data-mantine-color-scheme='dark']) .m_99d16a4:hover:where(:not([data-disabled], [data-selected])) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='dark']) .m_99d16a4:active:where(:not([data-disabled], [data-selected])) { background-color: var(--mantine-color-dark-5); } } .m_176ca23c { font-size: 0.75em; font-weight: 500; opacity: 0.65; } .m_d830530d { font-size: 0.9em; font-weight: 500; } .m_14c23465 { align-self: stretch; font-size: inherit; width: 2em; border-radius: var(--mantine-radius-default); display: flex; align-items: center; justify-content: center; color: var(--mantine-color-bright); } .m_14c23465:where([data-disabled]) { opacity: 0.3; cursor: not-allowed; } .m_14c23465 [data-chevron] { font-size: inherit; width: 60%; } .m_14c23465[data-direction='previous'] [data-chevron] { transform: rotate(90deg); } [dir="rtl"] .m_14c23465[data-direction='previous'] [data-chevron] { transform: rotate(-90deg); } .m_14c23465[data-direction='next'] [data-chevron] { transform: rotate(-90deg); } [dir="rtl"] .m_14c23465[data-direction='next'] [data-chevron] { transform: rotate(90deg); } @media (hover: hover) { :where([data-mantine-color-scheme='light']) .m_14c23465:hover:where(:not([data-disabled])) { background-color: var(--mantine-color-gray-1); } } @media (hover: none) { :where([data-mantine-color-scheme='light']) .m_14c23465:active:where(:not([data-disabled])) { background-color: var(--mantine-color-gray-1); } } @media (hover: hover) { :where([data-mantine-color-scheme='dark']) .m_14c23465:hover:where(:not([data-disabled])) { background-color: var(--mantine-color-dark-5); } } @media (hover: none) { :where([data-mantine-color-scheme='dark']) .m_14c23465:active:where(:not([data-disabled])) { background-color: var(--mantine-color-dark-5); } }