// jt.timepicker // ================================================================ @import 'vars'; $jt-timepicker-selected-bg: $brand-primary; $jt-timepicker-wrapper-bg: $color-white; $jt-timepicker-border: $input-border; $jt-timepicker-shadow: $dropdown-box-shadow; // z-index $jt-timepicker-z-index: $zindex-dropdown; .ui-timepicker-wrapper { z-index: $jt-timepicker-z-index; width: 6.5em; height: 150px; margin: 0; overflow-y: auto; background: $jt-timepicker-wrapper-bg; border: 1px solid $jt-timepicker-border; outline: none; box-shadow: $jt-timepicker-shadow; } .ui-timepicker-wrapper.ui-timepicker-with-duration { width: 13em; } .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30, .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 { width: 11em; } .ui-timepicker-list { padding: 0; margin: 0; list-style: none; } .ui-timepicker-duration { margin-left: 5px; color: #888; } .ui-timepicker-list:hover .ui-timepicker-duration { color: #888; } .ui-timepicker-list li { padding: 3px 0 3px 5px; margin: 0; color: #000; white-space: nowrap; list-style: none; cursor: pointer; } .ui-timepicker-list:hover .ui-timepicker-selected { color: #000; background: #fff; } li.ui-timepicker-selected, .ui-timepicker-list li:hover, .ui-timepicker-list .ui-timepicker-selected:hover { color: #fff; background: $jt-timepicker-selected-bg; } li.ui-timepicker-selected .ui-timepicker-duration, .ui-timepicker-list li:hover .ui-timepicker-duration { color: #ccc; } .ui-timepicker-list li.ui-timepicker-disabled, .ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { color: #888; cursor: default; } .ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { background: #f2f2f2; }