]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Time Picker |
2 | * | |
3 | * Styling the Time Picker consists of the following: | |
4 | * | |
5 | * 1. minor time values | |
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 | |
9 | * | |
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 | |
14 | * | |
15 | * 3. up and down arrow buttons | |
16 | * .dijitTimePicker .dijitButtonNode - background-color, border | |
17 | * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state | |
18 | * | |
19 | * Other classes provide the fundamental structure of the TimePicker and should not be modified. | |
20 | */ | |
21 | /* override Button.css */ | |
2f01fe57 | 22 | .claro .dijitTimePicker .dijitButtonNode { |
81bea17a AD |
23 | padding: 0 0; |
24 | -moz-border-radius: 0; | |
25 | border-radius: 0; | |
26 | } | |
27 | .claro .dijitTimePicker { | |
28 | border: 1px #b5bcc7 solid; | |
29 | border-top: none; | |
30 | border-bottom: none; | |
31 | background-color: #fff; | |
32 | /* TODO: useless? Appears to be overridden by settings on individual elements */ | |
33 | ||
2f01fe57 | 34 | } |
81bea17a AD |
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) */ | |
37 | ||
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; | |
43 | margin-right: -1px; | |
44 | margin-left: -1px; | |
45 | margin-top: -1px; | |
46 | } | |
47 | /* to make up for lack of alpha transparency in IE6 */ | |
2f01fe57 | 48 | .dj_ie6 .claro .dijitTimePickerItem { |
81bea17a | 49 | background-image: none; |
2f01fe57 AD |
50 | } |
51 | .claro .dijitTimePickerTick { | |
81bea17a AD |
52 | /* minor value */ |
53 | ||
54 | color: #818181; | |
55 | background-color: #efefef; | |
56 | font-size: 0.818em; | |
2f01fe57 AD |
57 | } |
58 | .claro .dijitTimePickerMarker { | |
81bea17a AD |
59 | /* major value - 1:00, 2:00, times on the hour */ |
60 | ||
1354d172 | 61 | background-color: #e5f2fe; |
81bea17a AD |
62 | font-size: 1em; |
63 | white-space: nowrap; | |
2f01fe57 AD |
64 | } |
65 | .claro .dijitTimePickerTickHover, | |
66 | .claro .dijitTimePickerMarkerHover, | |
67 | .claro .dijitTimePickerMarkerSelected, | |
68 | .claro .dijitTimePickerTickSelected { | |
1354d172 | 69 | background-color: #7dbdfa; |
81bea17a AD |
70 | border: solid 1px #b5bcc7; |
71 | margin-left: -7px; | |
72 | margin-right: -7px; | |
73 | color: #000000; | |
74 | } | |
75 | .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { | |
76 | font-size: 1em; | |
2f01fe57 | 77 | } |
2f01fe57 AD |
78 | .dj_ie .claro .dijitTimePickerTickHover, |
79 | .dj_ie .claro .dijitTimePickerMarkerHover, | |
80 | .dj_ie .claro .dijitTimePickerMarkerSelected, | |
81bea17a AD |
81 | .dj_ie .claro .dijitTimePickerTickSelected { |
82 | width: 114%; | |
2f01fe57 AD |
83 | } |
84 | .dj_ie6 .claro .dijitTimePickerTickHover, | |
85 | .dj_ie6 .claro .dijitTimePickerMarkerHover, | |
86 | .dj_ie6 .claro .dijitTimePickerMarkerSelected, | |
81bea17a AD |
87 | .dj_ie6 .claro .dijitTimePickerTickSelected { |
88 | position: relative; | |
89 | /* creates widening of element */ | |
90 | zoom: 1; | |
91 | /* creates widening of element */ | |
92 | ||
2f01fe57 AD |
93 | } |
94 | .claro .dijitTimePickerTick .dijitTimePickerItemInner { | |
81bea17a AD |
95 | padding: 1px; |
96 | margin: 0; | |
2f01fe57 AD |
97 | } |
98 | .claro .dijitTimePicker .dijitButtonNode { | |
81bea17a AD |
99 | border-left: none; |
100 | border-right: none; | |
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; | |
2f01fe57 AD |
106 | } |
107 | .dj_ie6 .claro .dijitTimePicker .dijitButtonNode { | |
81bea17a | 108 | background-image: none; |
2f01fe57 | 109 | } |
81bea17a AD |
110 | .claro .dijitTimePicker .dijitArrowButtonInner { |
111 | height: 100%; | |
112 | /* hack claro.button.css */ | |
113 | ||
114 | background-image: url("form/images/commonFormArrows.png"); | |
115 | background-repeat: no-repeat; | |
116 | background-position: -140px 45%; | |
2f01fe57 | 117 | } |
81bea17a AD |
118 | .claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner { |
119 | background-position: -35px 45%; | |
2f01fe57 | 120 | } |
81bea17a AD |
121 | /* hover */ |
122 | .claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover { | |
123 | background-color: #abd6ff; | |
2f01fe57 AD |
124 | } |
125 | .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { | |
81bea17a | 126 | background-position: -175px 45%; |
2f01fe57 AD |
127 | } |
128 | .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { | |
81bea17a | 129 | background-position: -70px 45%; |
2f01fe57 | 130 | } |