123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- .datepicker {
- display: none;
- }
- .datepicker.active {
- display: block;
- }
- .datepicker-dropdown {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 20;
- padding-top: 4px;
- }
- .datepicker-dropdown.datepicker-orient-top {
- padding-top: 0;
- padding-bottom: 4px;
- }
- .datepicker-picker {
- display: inline-block;
- border-radius: 4px;
- background-color: white;
- }
- .datepicker-dropdown .datepicker-picker {
- box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
- }
- .datepicker-picker span {
- display: block;
- flex: 1;
- border: 0;
- border-radius: 4px;
- cursor: default;
- text-align: center;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .datepicker-main {
- padding: 2px;
- }
- .datepicker-footer {
- box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
- background-color: whitesmoke;
- }
- .datepicker-controls, .datepicker-view, .datepicker-view .days-of-week, .datepicker-grid {
- display: flex;
- }
- .datepicker-grid {
- flex-wrap: wrap;
- }
- .datepicker-view .dow, .datepicker-view .days .datepicker-cell {
- flex-basis: 14.28571%;
- }
- .datepicker-view.datepicker-grid .datepicker-cell {
- flex-basis: 25%;
- }
- .datepicker-view .week, .datepicker-cell {
- height: 2.25rem;
- line-height: 2.25rem;
- }
- .datepicker-title {
- box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
- background-color: whitesmoke;
- padding: 0.375rem 0.75rem;
- text-align: center;
- font-weight: 700;
- }
- .datepicker-header .datepicker-controls {
- padding: 2px 2px 0;
- }
- .datepicker-header .datepicker-controls .button {
- border-color: transparent;
- font-weight: bold;
- }
- .datepicker-header .datepicker-controls .button:hover {
- background-color: #f9f9f9;
- }
- .datepicker-header .datepicker-controls .button:focus:not(:active) {
- box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
- }
- .datepicker-header .datepicker-controls .button:active {
- background-color: #f2f2f2;
- }
- .datepicker-header .datepicker-controls .button[disabled] {
- box-shadow: none;
- }
- .datepicker-footer .datepicker-controls .button {
- margin: calc(0.375rem - 1px) 0.375rem;
- border-radius: 2px;
- width: 100%;
- font-size: 0.75rem;
- }
- .datepicker-controls .view-switch {
- flex: auto;
- }
- .datepicker-controls .prev-btn,
- .datepicker-controls .next-btn {
- padding-right: 0.375rem;
- padding-left: 0.375rem;
- width: 2.25rem;
- }
- .datepicker-controls .prev-btn.disabled,
- .datepicker-controls .next-btn.disabled {
- visibility: hidden;
- }
- .datepicker-view .dow {
- height: 1.5rem;
- line-height: 1.5rem;
- font-size: 0.875rem;
- font-weight: 700;
- }
- .datepicker-view .week {
- width: 2.25rem;
- color: #b5b5b5;
- font-size: 0.75rem;
- }
- @media (max-width: 22.5rem) {
- .datepicker-view .week {
- width: 1.96875rem;
- }
- }
- .datepicker-grid {
- width: 15.75rem;
- }
- @media (max-width: 22.5rem) {
- .calendar-weeks + .days .datepicker-grid {
- width: 13.78125rem;
- }
- }
- .datepicker-cell:not(.disabled):hover {
- background-color: #f9f9f9;
- cursor: pointer;
- }
- .datepicker-cell.focused:not(.selected) {
- background-color: #e8e8e8;
- }
- .datepicker-cell.selected, .datepicker-cell.selected:hover {
- background-color: #3273dc;
- color: #fff;
- font-weight: 600;
- }
- .datepicker-cell.disabled {
- color: #dbdbdb;
- }
- .datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
- color: #7a7a7a;
- }
- .datepicker-cell.prev.selected, .datepicker-cell.next.selected {
- color: #e6e6e6;
- }
- .datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
- border-radius: 0;
- background-color: whitesmoke;
- }
- .datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
- background-color: #eeeeee;
- }
- .datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
- background-color: #e8e8e8;
- }
- .datepicker-cell.today:not(.selected) {
- background-color: #00d1b2;
- }
- .datepicker-cell.today:not(.selected):not(.disabled) {
- color: #fff;
- }
- .datepicker-cell.today.focused:not(.selected) {
- background-color: #00c4a7;
- }
- .datepicker-cell.range-start:not(.selected), .datepicker-cell.range-end:not(.selected) {
- background-color: #b5b5b5;
- color: #fff;
- }
- .datepicker-cell.range-start.focused:not(.selected), .datepicker-cell.range-end.focused:not(.selected) {
- background-color: #afafaf;
- }
- .datepicker-cell.range-start {
- border-radius: 4px 0 0 4px;
- }
- .datepicker-cell.range-end {
- border-radius: 0 4px 4px 0;
- }
- .datepicker-cell.range {
- border-radius: 0;
- background-color: #dbdbdb;
- }
- .datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
- background-color: #d5d5d5;
- }
- .datepicker-cell.range.disabled {
- color: #c2c2c2;
- }
- .datepicker-cell.range.focused {
- background-color: #cfcfcf;
- }
- .datepicker-view.datepicker-grid .datepicker-cell {
- height: 4.5rem;
- line-height: 4.5rem;
- }
- .datepicker-input.in-edit {
- border-color: #2366d1;
- }
- .datepicker-input.in-edit:focus, .datepicker-input.in-edit:active {
- box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
- }
|