.datepicker-container { position: relative; z-index: 11; width: 0; height: 0; } .datepicker-container.on-right { left: calc(100% - 392px); } .datepicker-calendar-view, .datepicker-collapse-view { position: absolute; width: 392px; padding: 0 16px; background-color: #fff; background-clip: border-box; border: 1px solid #e2e2e2; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(119, 119, 119, 0.1), 0 4px 8px 0 rgba(119, 119, 119, 0.2); } .datepicker-calendar-view { height: 320px; } .datepicker-collapse-view { height: 244px; } .datepicker-header { display: flex; align-items: center; height: 52px; text-align: center; } .datepicker-header-title { flex-grow: 5; font-weight: 500; cursor: pointer; } .datepicker-previous-button { flex-grow: 1; padding-right: 16px; text-align: left; } .datepicker-previous-button .ic:hover { cursor: pointer; } .datepicker-next-button { flex-grow: 1; padding-left: 16px; text-align: right; } .datepicker-next-button .ic:hover { cursor: pointer; } .datepicker-row .datepicker-cell .datepicker-date-cell.current-date, .datepicker-row .datepicker-cell .datepicker-month-cell.current-month, .datepicker-row .datepicker-cell .datepicker-year-cell.current-year { border-radius: 100%; box-shadow: inset 0 0 0 1px #005fbf; } .datepicker-row .datepicker-cell .datepicker-date-cell.selected-date, .datepicker-row .datepicker-cell .datepicker-month-cell.selected-month, .datepicker-row .datepicker-cell .datepicker-year-cell.selected-year { color: #fff; background-color: #005fbf; border-radius: 100%; } .datepicker-row .datepicker-cell .datepicker-date-cell:hover, .datepicker-row .datepicker-cell .datepicker-month-cell:hover, .datepicker-row .datepicker-cell .datepicker-year-cell:hover { color: #212121; cursor: pointer; background-color: #f2f4f7; border-radius: 100%; box-shadow: none; } .datepicker-row { display: flex; } .datepicker-row .datepicker-cell { flex: 1 1 0; text-align: center; } .datepicker-row .datepicker-cell .datepicker-date-cell { width: 32px; height: 32px; margin: 2px auto; line-height: 32px; } .datepicker-row .datepicker-cell .datepicker-month-cell { width: 40px; height: 40px; margin: 0 auto; margin-bottom: 12px; line-height: 40px; } .datepicker-row .datepicker-cell .datepicker-year-cell { width: 48px; height: 48px; margin: 0 auto; margin-bottom: 4px; line-height: 48px; } .datepicker-day-container { display: flex; margin-bottom: 16px; } .datepicker-day-container .datepicker-day { flex: 1 1 0; color: #777; text-align: center; } .datepicker-shortcut-button { position: absolute; bottom: 16px; width: 360px; color: #777; text-align: center; cursor: pointer; } .datepicker-shortcut-button.disabled { color: #b4b4b4; cursor: not-allowed; } /*# sourceMappingURL=mekari-ui-date-picker.css.map */