@mokcj0825/react-date-picker
Version:
A customizable date picker component for React applications with locale support and viewport-aware positioning
1 lines • 3.93 kB
CSS
select{background:none;border:none;text-align:center}.Datepicker-module_datepicker__Y5-YA{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative}.Datepicker-module_rhombus__hi4oU{background:#f0f0f0;border-left:1px solid #d1d5db;border-top:1px solid #d1d5db;height:12px;left:20px;position:absolute;top:-6px;transform:rotate(45deg);width:12px;z-index:1001}.Datepicker-module_dropdownContainer__W9qdB{left:0;position:absolute;top:calc(100% + 10px);z-index:1000}.Datepicker-module_triggerButton__2ic3S{align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#6c6c6c;cursor:pointer;display:flex;gap:8px;padding:8px 12px;position:relative;transition:border-color .2s}.Datepicker-module_triggerButton__2ic3S:hover{border-color:#9ca3af}.Datepicker-module_calendarIcon__pw-UK{color:#6c6c6c}.Datepicker-module_dropdown__p4NB7{background:#f0f0f0;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);box-sizing:border-box;height:auto;left:0;padding-top:8px;position:relative;top:0;width:253px}.Datepicker-module_header__4D1FA{align-items:center;box-sizing:border-box;display:flex;height:33px;justify-content:space-between;padding:8px 0}.Datepicker-module_navigation__evFU3{align-items:center;display:flex;gap:8px}.Datepicker-module_navButton__3hhsv{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;transition:background-color .2s;width:32px}.Datepicker-module_navButton__3hhsv:disabled{cursor:not-allowed;opacity:.5}.Datepicker-module_selectors__GxD8S{display:flex;gap:8px}.Datepicker-module_monthSelect__GOdV-,.Datepicker-module_yearSelect__dJzrt{background:#fff;border:1px solid #d1d5db;border-radius:4px;font-size:14px;padding:4px 8px}.Datepicker-module_weekdays__O5HQ0{border-bottom:1px solid #aeaeae;display:flex;flex-direction:row;justify-content:center}.Datepicker-module_weekday__wV60W{color:#000;font-size:12px;font-weight:500;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.Datepicker-module_calendar__0oolv{background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px;display:grid;gap:2px;grid-template-columns:repeat(7,1fr);padding:8px}.Datepicker-module_calendarDay__AL-A-{align-items:center;background:transparent;border:none;border-radius:4px;cursor:pointer;display:flex;font-size:12.8px;font-weight:400;justify-content:center;line-height:27.2px;transition:background-color .2s;width:27.1875px}.Datepicker-module_calendarDay__AL-A-:hover:not(.Datepicker-module_disabled__P-BNw){background-color:#464646;color:#fff}.Datepicker-module_selected__rZyX5{background-color:#3b82f6;color:#fff}.Datepicker-module_today__SDVBG{border:2px solid #3b82f6}.Datepicker-module_disabled__P-BNw{color:#d1d5db;cursor:not-allowed}.Datepicker-module_disabled__P-BNw:hover{background-color:transparent}[data-theme=dark] .Datepicker-module_triggerButton__2ic3S{background:#a5a5a5;border-color:transparent;color:#fff}[data-theme=dark] .Datepicker-module_calendarIcon__pw-UK,[data-theme=dark] select{color:#fff}[data-theme=dark] .Datepicker-module_dropdown__p4NB7{background:#464646;border-color:#374151;color:#fff}[data-theme=dark] .Datepicker-module_rhombus__hi4oU{background:#464646;border-left-color:#374151;border-top-color:#374151}[data-theme=dark] .Datepicker-module_navButton__3hhsv:not(:disabled){color:#fff}[data-theme=dark] .Datepicker-module_monthSelect__GOdV-,[data-theme=dark] .Datepicker-module_yearSelect__dJzrt{background:#374151;border-color:#4b5563;color:#fff}[data-theme=dark] .Datepicker-module_calendarDay__AL-A-:hover:not(.Datepicker-module_disabled__P-BNw),[data-theme=dark] .Datepicker-module_calendar__0oolv{background-color:#464646;color:#fff}[data-theme=dark] .Datepicker-module_disabled__P-BNw{color:#4b5563}[data-theme=dark] .Datepicker-module_weekday__wV60W{color:#d1d5db}