.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #ddd; font-size: .9em; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #def2fa; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } /* ------------------------------------------------- Datepicker cells ------------------------------------------------- */ .datepicker--cells { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .datepicker--cell { border-radius: 2px; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 32px; z-index: 1; } .datepicker--cell:hover { background: #eee; } .datepicker--cell.-current- { color: #60C4F5; } .datepicker--cell.-current-:hover { background: rgba(96, 196, 245, 0.05); } .datepicker--cell.-disabled- { cursor: default; color: #ddd; background: none; } .datepicker--cell.-selected- { color: #fff; background: skyblue; } .datepicker--cell.-selected-.-current- { color: #fff; background: skyblue; } .datepicker--days-names { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .datepicker--day-name { color: #f5a33a; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 32px; text-align: center; text-transform: uppercase; font-size: 13px; } .datepicker--cell-day { border-radius: 50%; width: 14.28571%; } .datepicker--cells-months { height: 170px; } .datepicker--cell-month { width: 33.33%; height: 25%; } .datepicker--years { height: 170px; } .datepicker--cells-years { height: 170px; } .datepicker--cell-year { width: 25%; height: 33.33%; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #ddd; font-size: .9em; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #def2fa; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } /* ------------------------------------------------- Datepicker ------------------------------------------------- */ .datepickers-container { position: absolute; left: 0; top: 0; } .datepicker { background: #fff; border: 1px solid #ddd; border-radius: 2px; box-sizing: content-box; font-family: Tahoma, sans-serif; font-size: 14px; color: #4a4a4a; width: 232px; position: absolute; left: -100000px; opacity: 0; transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease; } .datepicker.-from-top- { -webkit-transform: translateY(-8px); transform: translateY(-8px); } .datepicker.-from-right- { -webkit-transform: translateX(8px); transform: translateX(8px); } .datepicker.-from-bottom- { -webkit-transform: translateY(8px); transform: translateY(8px); } .datepicker.-from-left- { -webkit-transform: translateX(-8px); transform: translateX(-8px); } .datepicker.active { opacity: 1; -webkit-transform: translate(0); transform: translate(0); transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; } .datepicker-inline .datepicker { position: static; left: auto; right: auto; opacity: 1; -webkit-transform: none; transform: none; } .datepicker-inline .datepicker--pointer { display: none; } .datepicker--content { padding: 2px; } .datepicker--pointer { position: absolute; background: #fff; border-top: 1px solid #ddd; border-right: 1px solid #ddd; width: 10px; height: 10px; } .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer { top: calc(100% - 4px); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer { right: calc(100% - 4px); -webkit-transform: rotate(225deg); transform: rotate(225deg); } .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer { bottom: calc(100% - 4px); -webkit-transform: rotate(315deg); transform: rotate(315deg); } .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer { left: calc(100% - 4px); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer { left: 8px; } .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer { right: 8px; } .-top-center- .datepicker--pointer, .-bottom-center- .datepicker--pointer { left: calc(50% - 10px / 2); } .-left-top- .datepicker--pointer, .-right-top- .datepicker--pointer { top: 8px; } .-left-bottom- .datepicker--pointer, .-right-bottom- .datepicker--pointer { bottom: 8px; } .-left-center- .datepicker--pointer, .-right-center- .datepicker--pointer { top: calc(50% - 10px / 2); } .datepicker--body { display: none; } .datepicker--body.active { display: block; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #ddd; font-size: .9em; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #def2fa; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; } /* ------------------------------------------------- Navigation ------------------------------------------------- */ .datepicker--nav { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 2px; height: 32px; } .datepicker--nav-title, .datepicker--nav-action { display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .datepicker--nav-action { width: 32px; border-radius: 2px; } .datepicker--nav-action:hover { background: #eee; } .datepicker--nav-action.-disabled- { visibility: hidden; } .datepicker--nav-title { border-radius: 2px; padding: 0 8px; } .datepicker--nav-title:hover { background: #eee; } .datepicker--nav-title.-disabled- { cursor: default; background: none; } .datepicker--buttons { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 1px 2px; } .datepicker--button { background: #f2f2f2; cursor: pointer; border-radius: 2px; margin: 0 1px; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 24px; } .datepicker--button:hover { background: #eaeaea; } .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- { color: #ddd; font-size: .9em; } .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- { color: #fff; background: #def2fa; } .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty { background: none; border: none; }