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.
21 /* override Button.css */
22 .claro .dijitTimePicker .dijitButtonNode {
24 -moz-border-radius: 0;
27 .claro .dijitTimePicker {
28 border: 1px #b5bcc7 solid
;
31 background-color: #fff;
32 /* 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 background-image: url
("images/commonHighlight.png");
39 background-position: 0 -1px;
40 background-repeat: repeat-x
;
41 border-top: solid
1px #b5bcc7;
42 border-bottom: solid
1px #b5bcc7;
47 /* to make up for lack of alpha transparency in IE6 */
48 .dj_ie6 .claro .dijitTimePickerItem {
49 background-image: none
;
51 .claro .dijitTimePickerTick {
55 background-color: #efefef;
58 .claro .dijitTimePickerMarker {
59 /* major value - 1:00, 2:00, times on the hour */
61 background-color: #e5f2fe;
65 .claro
.dijitTimePickerTickHover
,
66 .claro
.dijitTimePickerMarkerHover
,
67 .claro
.dijitTimePickerMarkerSelected
,
68 .claro .dijitTimePickerTickSelected {
69 background-color: #7dbdfa;
70 border: solid
1px #b5bcc7;
75 .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected {
78 .dj_ie
.claro
.dijitTimePickerTickHover
,
79 .dj_ie
.claro
.dijitTimePickerMarkerHover
,
80 .dj_ie
.claro
.dijitTimePickerMarkerSelected
,
81 .dj_ie .claro .dijitTimePickerTickSelected {
84 .dj_ie6
.claro
.dijitTimePickerTickHover
,
85 .dj_ie6
.claro
.dijitTimePickerMarkerHover
,
86 .dj_ie6
.claro
.dijitTimePickerMarkerSelected
,
87 .dj_ie6 .claro .dijitTimePickerTickSelected {
89 /* creates widening of element */
91 /* creates widening of element */
94 .claro .dijitTimePickerTick .dijitTimePickerItemInner {
98 .claro .dijitTimePicker .dijitButtonNode {
101 border-color: #b5bcc7;
102 background-color: #efefef;
103 background-image: url
("images/commonHighlight.png");
104 background-position: 0 -1px;
105 background-repeat: repeat-x
;
107 .dj_ie6 .claro .dijitTimePicker .dijitButtonNode {
108 background-image: none
;
110 .claro .dijitTimePicker .dijitArrowButtonInner {
112 /* hack claro.button.css */
114 background-image: url
("form/images/commonFormArrows.png");
115 background-repeat: no-repeat
;
116 background-position: -140px 45%;
118 .claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner {
119 background-position: -35px 45%;
122 .claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover {
123 background-color: #abd6ff;
125 .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner {
126 background-position: -175px 45%;
128 .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {
129 background-position: -70px 45%;