monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 8.92 kB
JavaScript
var e={datepickerContainer:"datepickerContainer",monthYearSelection:"monthYearSelection",rangePickerMode:"rangePickerMode",withWeekNumber:"withWeekNumber",calendarDayWeekNumber:"calendarDayWeekNumber"};!function(e){const n="s_id-08c822721057_2_149_4";if("undefined"!=typeof document){const r=document.head||document.getElementsByTagName("head")[0];if(r.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('.datepickerContainer {\n position: relative;\n min-height: 302px;\n}\n.datepickerContainer table tbody {\n border-spacing: 0;\n border-collapse: collapse;\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n box-shadow: none;\n}\n.datepickerContainer td {\n border: none;\n}\n.datepickerContainer.monthYearSelection table tbody {\n opacity: 0;\n}\n.datepickerContainer.monthYearSelection .DayPicker_transitionContainer__horizontal {\n transition: none;\n}\n.datepickerContainer .CalendarMonthGrid {\n background-color: var(--secondary-background-color);\n}\n.datepickerContainer .CalendarMonth {\n background-color: var(--secondary-background-color);\n}\n.datepickerContainer .DayPicker__horizontal {\n background-color: var(--secondary-background-color);\n}\n.datepickerContainer .DayPicker {\n box-shadow: none;\n border: none;\n border-radius: 0;\n}\n.datepickerContainer .CalendarDay__default {\n border: none;\n font-size: 16px;\n font-weight: 300;\n color: var(--primary-text-on-secondary-color);\n background-color: var(--secondary-background-color);\n border-top: 1px solid var(--secondary-background-color);\n border-bottom: 1px solid var(--secondary-background-color);\n z-index: 1;\n position: relative;\n}\n.datepickerContainer .CalendarDay__default:hover {\n background: none;\n border: none;\n border-top: 1px solid var(--secondary-background-color);\n border-bottom: 1px solid var(--secondary-background-color);\n}\n.datepickerContainer .CalendarDay__default:hover::before {\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n box-sizing: border-box;\n content: "";\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: 50%;\n border: none;\n background-color: var(--primary-background-hover-color);\n}\n.datepickerContainer .CalendarDay__default.CalendarDay__selected {\n color: var(--text-color-on-primary);\n}\n.datepickerContainer .CalendarDay__default.CalendarDay__selected::before {\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n box-sizing: border-box;\n content: "";\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: 50%;\n border: none;\n background: var(--primary-color);\n}\n.datepickerContainer .CalendarDay__default.CalendarDay__selected::before:hover {\n color: var(--text-color-on-primary);\n background: var(--primary-color);\n}\n.datepickerContainer .CalendarMonth_caption {\n color: var(--primary-text-on-secondary-color);\n}\n.datepickerContainer .CalendarDay__today::before {\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n box-sizing: border-box;\n content: "";\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: 50%;\n border: 1px solid var(--primary-color);\n}\n.datepickerContainer .CalendarDay__today:hover::before {\n border: 1px solid var(--primary-color);\n}\n.datepickerContainer .CalendarDay__blocked_calendar, .datepickerContainer .CalendarDay__blocked_calendar:active, .datepickerContainer .CalendarDay__blocked_calendar:hover {\n background-color: var(--secondary-background-color);\n color: var(--primary-text-color);\n opacity: 0.2;\n pointer-events: none;\n}\n.datepickerContainer .DayPicker_weekHeader_li small {\n font-size: 12px;\n color: var(--secondary-text-on-secondary-color);\n font-weight: 300;\n cursor: default;\n}\n.datepickerContainer .DayPickerNavigation_rightButton__horizontal {\n right: 22px;\n}\n.datepickerContainer .DayPickerNavigation .DayPickerNavigation_button:nth-child(1) {\n left: 12px;\n}\n.datepickerContainer .DayPickerNavigation .DayPickerNavigation_button:nth-child(2) {\n right: 12px;\n}\n.datepickerContainer .DayPickerNavigation_button__horizontal {\n position: absolute;\n top: 15px;\n line-height: 0.78;\n border-radius: 3px;\n padding: 6px 9px;\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected.CalendarDay__selected_start {\n border-radius: 0;\n background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n z-index: 1;\n position: relative;\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected.CalendarDay__selected_start:hover {\n background: linear-gradient(90deg, var(--secondary-background-color) 50%, var(--primary-selected-color) 50%);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected.CalendarDay__selected_start::before {\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n box-sizing: border-box;\n content: "";\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: 50%;\n background-color: var(--primary-color);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected.CalendarDay__selected_end {\n border-radius: 0;\n background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n z-index: 1;\n position: relative;\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected.CalendarDay__selected_end:hover {\n background: linear-gradient(90deg, var(--primary-selected-color) 50%, var(--secondary-background-color) 50%);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected.CalendarDay__selected_end::before {\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n box-sizing: border-box;\n content: "";\n width: 100%;\n height: 100%;\n z-index: -1;\n border-radius: 50%;\n background-color: var(--primary-color);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__hovered_span, .datepickerContainer.rangePickerMode .CalendarDay__hovered_span:hover {\n border-radius: 0;\n color: var(--primary-text-color);\n background: var(--primary-selected-color);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__hovered_span:hover::before, .datepickerContainer.rangePickerMode .CalendarDay__hovered_span:hover:hover::before {\n border-radius: 0;\n background: var(--primary-selected-color);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected_span {\n background: var(--primary-selected-color);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected_span:hover {\n color: var(--primary-text-color);\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected_span.CalendarDay__today::before {\n border-radius: 0;\n}\n.datepickerContainer.rangePickerMode .CalendarDay__selected_span:hover::before {\n border-radius: 0;\n}\n.datepickerContainer.rangePickerMode.range-single-date-selected .CalendarDay__hovered_span {\n background: var(--primary-background-hover-color);\n}\n.datepickerContainer.rangePickerMode.range-single-date-selected .CalendarDay__hovered_span.CalendarDay__today::before {\n border-radius: 0;\n}\n.datepickerContainer.rangePickerMode.range-single-date-selected .CalendarDay__hovered_span:hover::before {\n background: var(--primary-background-hover-color);\n}\n.datepickerContainer.withWeekNumber {\n padding: 0 4px 0 8px;\n}\n.datepickerContainer.withWeekNumber .CalendarDay .calendarDayWeekNumber {\n color: rgba(177, 177, 184, 0.7490196078);\n pointer-events: none;\n visibility: visible;\n display: none;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: -1px;\n font-size: 14px;\n width: 40px;\n height: 37px;\n left: 0px;\n transform: translateX(-100%);\n}\n.datepickerContainer.withWeekNumber .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay .calendarDayWeekNumber {\n display: flex;\n}\n.datepickerContainer.withWeekNumber .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) tr > td.CalendarDay ~ td.CalendarDay .calendarDayWeekNumber {\n display: none;\n}\n.datepickerContainer.withWeekNumber .DayPicker_weekHeader:before {\n content: "Wk";\n position: absolute;\n font-size: 12px;\n width: 40px;\n top: 3px;\n left: -28px;\n height: 24px;\n}\n.datepickerContainer.withWeekNumber .DayPicker__horizontal {\n margin: 4px;\n}\n.datepickerContainer.withWeekNumber .CalendarMonthGrid_month__horizontal:not(.CalendarMonthGrid_month__hidden) {\n margin-left: 17px;\n}\n.datepickerContainer.withWeekNumber .DayPicker_weekHeader {\n padding: 0 !important;\n left: 30px !important;\n}\n.datepickerContainer.withWeekNumber .CalendarMonth_caption {\n margin-right: 20px;\n}');export{e as default};
//# sourceMappingURL=DatePicker.module.scss.js.map