3 * Styling the Time Picker consists of the following:
6 * .dijitTimePickerTick - set text color, size, background color of minor values
7 * .dijitTimePickerTickHover - set hover style of minor time values
8 * dijitTimePickerTickSelected - set selected style of minor time values
10 * 2. major time values - 1:00, 2:00, times on the hour
11 * set text color, size, background color, left/right margins for "zoom" affect
12 * .dijitTimePickerMarkerHover - to set hover style of major time values
13 * .dijitTimePickerMarkerSelected - set selected style of major time values
15 * 3. up and down arrow buttons
16 * .dijitTimePicker .dijitButtonNode - background-color, border
17 * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
19 * Other classes provide the fundamental structure of the TimePicker and should not be modified.
24 /* override Button.css */
25 .claro .dijitTimePicker .dijitButtonNode {
29 .claro .dijitTimePicker {
30 border:1px @border-color solid;
33 background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */
35 .claro .dijitTimePickerItem {
36 /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */
38 border-top:solid 1px @border-color;
39 border-bottom:solid 1px @border-color;
42 .claro .dijitTimePickerTick {
44 color:@timepicker-minorvalue-text-color;
45 background-color:@timepicker-minorvalue-background-color;
48 .claro .dijitTimePickerMarker {
49 /* major value - 1:00, 2:00, times on the hour */
50 background-color: @timepicker-majorvalue-background-color;
54 .claro .dijitTimePickerTickHover,
55 .claro .dijitTimePickerMarkerHover,
56 .claro .dijitTimePickerMarkerSelected,
57 .claro .dijitTimePickerTickSelected {
58 background-color: @timepicker-value-hovered-background-color;
59 color:@timepicker-value-hovered-text-color;
61 .claro .dijitTimePickerMarkerSelected,
62 .claro .dijitTimePickerTickSelected {
66 .claro .dijitTimePickerTick .dijitTimePickerItemInner {
70 .claro .dijitTimePicker .dijitButtonNode {
73 border-color:@border-color;
74 background-color: @unselected-background-color;
77 .claro .dijitTimePicker .dijitArrowButtonInner {
78 height: 100%; /* hack claro.button.css */
79 background-image: url(@image-form-common-arrows);
80 background-repeat: no-repeat;
81 background-position:-140px 45%;
83 .claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner {
84 background-position:-35px 45%;
87 .claro .dijitTimePicker .dijitUpArrowHover,
88 .claro .dijitTimePicker .dijitDownArrowHover {
89 background-color: @timepicker-arrow-hovered-background-color;
91 .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner {
92 background-position:-175px 45%;
94 .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {
95 background-position:-70px 45%;
98 // TODO: should have active rule, for clicking a .dijitTimePickerItem