/* Table of Contents ================================================== # Datepicker */ /* # Datepicker ================================================== */ .datepicker { left: 0; margin-top: 1px; position: fixed; top: 0; z-index: 1060; } .datepicker-dropdown.dropdown-menu { @include animation-duration(0.5s); @include animation-fill-mode(both); @include animation-name(animation-bounce-in); display: block; padding: 0; position: fixed; } .datepicker:before { border-bottom: 7px solid; border-bottom-color: inherit; border-right: 7px solid $color-transparent; border-left: 7px solid $color-transparent; content: ''; display: inline-block; position: absolute; } .datepicker:after { border-bottom: 6px solid; border-bottom-color: inherit; border-right: 6px solid $color-transparent; border-left: 6px solid $color-transparent; content: ""; display: inline-block; position: absolute; } .datepicker.datepicker-orient-left:before { left: 6px; } .datepicker.datepicker-orient-left:after { left: 7px; } .datepicker.datepicker-orient-right:before { right: 6px; } .datepicker.datepicker-orient-right:after { right: 7px; } .datepicker.datepicker-orient-top:before { top: -7px; } .datepicker.datepicker-orient-top:after { top: -6px; } .datepicker.datepicker-orient-bottom:before { bottom: -7px; border-bottom: 0; border-top: 7px solid; border-top-color: inherit; } .datepicker.datepicker-orient-bottom:after { bottom: -6px; border-bottom: 0; border-top: 6px solid; border-top-color: inherit; } .dow { font-weight: bold; } .datepicker > div { display: none; } .datepicker table { margin: 0; @include user-select(none); width: 100%; } .datepicker table th, .datepicker table td { height: 20px; line-height: 1 !important; text-align: center; width: 20px; } .datepicker table th { padding: 7px 0 !important; } .datepicker table td { font-size: 12px !important; font-weight: bold; } .datepicker table td.new, .datepicker table td.old { color: $color-gray; } .datepicker table td > span { border-radius: 2px; display: block; height: 30px; float: left; line-height: 30px; margin: 2px; width: 51px; } .datepicker table td.active, .datepicker table td.day:hover, .datepicker table td.day.active, .datepicker table td.day:active, .datepicker table td.day:focus, .datepicker table td > span:hover, .datepicker table td > span.active, .datepicker table td > span:active, .datepicker table td > span:focus, .datepicker table > thead > tr:first-child > th:hover, .datepicker table > thead > tr:first-child > th:active, .datepicker table > thead > tr:first-child > th:focus { background: $color-primary; color: $color-white; cursor: pointer; } .datepicker table td.active, .datepicker table td.day, .datepicker table > thead > tr:first-child > th { border-radius: 2px; } .datepicker table > thead > tr:first-child > th:nth-child(2) { font-weight: bold; } .datepicker table th.next, .datepicker table th.prev { font-size: 20px !important; } .datepicker table th.switch { font-weight: bold; width: 145px; } .datepicker table th.datepicker-switch { padding-bottom: 3px !important; } .datepicker table td.day.disabled { color: $color-dark-haze; } .datepicker table td.day.disabled:hover, .datepicker table td.day.disabled.active, .datepicker table td.day.disabled:active, .datepicker table td.day.disabled:focus { background: $color-transparent; cursor: not-allowed; }