/* Time Picker * * Styling the Time Picker consists of the following: * * 1. minor time values * .dijitTimePickerTick - set text color, size, background color of minor values * .dijitTimePickerTickHover - set hover style of minor time values * dijitTimePickerTickSelected - set selected style of minor time values * * 2. major time values - 1:00, 2:00, times on the hour * set text color, size, background color, left/right margins for "zoom" affect * .dijitTimePickerMarkerHover - to set hover style of major time values * .dijitTimePickerMarkerSelected - set selected style of major time values * * 3. up and down arrow buttons * .dijitTimePicker .dijitButtonNode - background-color, border * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state * * Other classes provide the fundamental structure of the TimePicker and should not be modified. */ @import "variables"; /* override Button.css */ .claro .dijitTimePicker .dijitButtonNode { padding: 0 0; .border-radius(0); } .claro .dijitTimePicker { border:1px @border-color solid; border-top:none; border-bottom:none; background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */ } .claro .dijitTimePickerItem { /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ .standard-gradient; border-top:solid 1px @border-color; border-bottom:solid 1px @border-color; margin-top:-1px; } .claro .dijitTimePickerTick { /* minor value */ color:@timepicker-minorvalue-text-color; background-color:@timepicker-minorvalue-background-color; font-size:0.818em; } .claro .dijitTimePickerMarker { /* major value - 1:00, 2:00, times on the hour */ background-color: @timepicker-majorvalue-background-color; font-size: 1em; white-space: nowrap; } .claro .dijitTimePickerTickHover, .claro .dijitTimePickerMarkerHover, .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { background-color: @timepicker-value-hovered-background-color; color:@timepicker-value-hovered-text-color; } .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { font-size: 1em; } .claro .dijitTimePickerTick .dijitTimePickerItemInner { padding:1px; margin:0; } .claro .dijitTimePicker .dijitButtonNode { border-left:none; border-right:none; border-color:@border-color; background-color: @unselected-background-color; .standard-gradient; } .claro .dijitTimePicker .dijitArrowButtonInner { height: 100%; /* hack claro.button.css */ background-image: url(@image-form-common-arrows); background-repeat: no-repeat; background-position:-140px 45%; } .claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner { background-position:-35px 45%; } /* hover */ .claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover { background-color: @timepicker-arrow-hovered-background-color; } .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { background-position:-175px 45%; } .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { background-position:-70px 45%; } // TODO: should have active rule, for clicking a .dijitTimePickerItem