]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Calendar |
2 | * | |
3 | * Styling Calendar mainly includes: | |
4 | * | |
5 | * 1. Calendar container | |
6 | * .dijitCalendar - main container | |
7 | * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active | |
8 | * | |
9 | * 2. Month | |
10 | * .dijitCalendarMonthContainer | |
11 | * .dijitCalendarMonthLabel | |
12 | * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month | |
13 | * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active | |
14 | * | |
15 | * 3. Date | |
16 | * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S | |
17 | * .dijitCalendarDateTemplate - date label wrapper | |
18 | * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month | |
19 | * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date | |
20 | * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date | |
21 | * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active | |
22 | * | |
23 | * 4. Year | |
24 | * .dijitCalendarYearContainer | |
25 | * .dijitCalendarYearLabel | |
26 | * .dijitCalendarPreviousYear /.dijitCalendarNextYear | |
27 | * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active | |
28 | * | |
29 | * 5. Dropdown Month Menu | |
30 | * .dijitCalendarMonthMenu - menu container | |
31 | * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item | |
32 | * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state | |
33 | */ | |
2f01fe57 | 34 | .claro .dijitCalendar { |
81bea17a AD |
35 | border: solid 1px #b5bcc7; |
36 | background-color: #cfe5fa; | |
37 | background-image: url("images/calendarContainerImages.png"); | |
38 | background-position: 0 -448px; | |
39 | background-repeat: repeat-x; | |
40 | text-align: center; | |
41 | padding: 6px 5px 3px 5px; | |
42 | -moz-border-radius: 4px; | |
43 | border-radius: 4px; | |
1354d172 | 44 | border-collapse: separate; |
2f01fe57 AD |
45 | } |
46 | .dj_ie6 .claro .dijitCalendar { | |
81bea17a | 47 | background-image: none; |
2f01fe57 AD |
48 | } |
49 | .claro .dijitCalendar img { | |
81bea17a | 50 | border: none; |
2f01fe57 | 51 | } |
1354d172 | 52 | .claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive { |
81bea17a AD |
53 | /* treat dijitCalenderActive like hover since there's |
54 | * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) | |
55 | */ | |
56 | ||
57 | background-color: #abd6ff; | |
1354d172 | 58 | border: solid 1px #759dc0; |
2f01fe57 AD |
59 | } |
60 | .claro .dijitCalendarMonthContainer th { | |
81bea17a AD |
61 | text-align: center; |
62 | padding-bottom: 4px; | |
63 | vertical-align: middle; | |
2f01fe57 AD |
64 | } |
65 | .claro .dijitCalendarMonthLabel { | |
81bea17a AD |
66 | color: #000000; |
67 | font-size: 1.091em; | |
68 | padding: 0 4px; | |
2f01fe57 | 69 | } |
81bea17a | 70 | /* next/previous month arrows */ |
2f01fe57 | 71 | .claro .dijitCalendarIncrementControl { |
81bea17a AD |
72 | width: 18px; |
73 | height: 16px; | |
74 | background-image: url("images/calendarArrows.png"); | |
75 | background-repeat: no-repeat; | |
2f01fe57 AD |
76 | } |
77 | .dj_ie6 .claro .dijitCalendarIncrementControl { | |
81bea17a | 78 | background-image: url("images/calendarArrows8bit.png"); |
2f01fe57 AD |
79 | } |
80 | .claro .dijitCalendarIncrease { | |
81bea17a | 81 | background-position: -18px 0; |
2f01fe57 | 82 | } |
1354d172 | 83 | .claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease { |
81bea17a | 84 | background-position: -36px 0; |
2f01fe57 | 85 | } |
1354d172 | 86 | .claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease { |
81bea17a | 87 | background-position: -55px 0; |
2f01fe57 | 88 | } |
1354d172 | 89 | .claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease { |
81bea17a | 90 | background-position: -72px 0; |
2f01fe57 | 91 | } |
1354d172 | 92 | .claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease { |
81bea17a | 93 | background-position: -91px 0; |
2f01fe57 AD |
94 | } |
95 | .claro .dijitA11ySideArrow { | |
81bea17a AD |
96 | /* text +/- labels instead of arrow icons, for high contrast mode */ |
97 | ||
98 | display: none; | |
2f01fe57 | 99 | } |
2f01fe57 | 100 | .claro .dijitCalendarDayLabelTemplate { |
81bea17a AD |
101 | padding-bottom: 0; |
102 | text-align: center; | |
103 | border-bottom: 1px solid #b5bcc7; | |
81bea17a | 104 | padding: 0 3px 2px; |
2f01fe57 | 105 | } |
1354d172 AD |
106 | .claro .dijitCalendarDayLabel { |
107 | padding: 0 4px 0 4px; | |
108 | font-weight: bold; | |
109 | font-size: 0.909em; | |
110 | text-align: center; | |
111 | color: #000000; | |
112 | } | |
2f01fe57 | 113 | .claro .dijitCalendarDateTemplate { |
81bea17a AD |
114 | text-align: center; |
115 | background-color: #ffffff; | |
116 | background-image: url("images/calendarContainerImages.png"); | |
117 | background-position: 0 0; | |
118 | background-repeat: repeat-x; | |
119 | border-bottom: 1px solid #d3d3d3; | |
120 | padding-top: 0; | |
121 | font-size: 0.909em; | |
122 | font-family: Arial; | |
123 | font-weight: bold; | |
124 | letter-spacing: .05em; | |
125 | text-align: center; | |
1354d172 | 126 | color: #000000; |
2f01fe57 AD |
127 | } |
128 | .dj_ie6 .claro .dijitCalendarDateTemplate { | |
81bea17a | 129 | background-image: none; |
2f01fe57 | 130 | } |
81bea17a | 131 | .claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth { |
1354d172 | 132 | background-color: #e5f2fe; |
81bea17a AD |
133 | background-image: none; |
134 | border-bottom: solid 1px #d3d3d3; | |
135 | /* todo: redundant with above .dijitCalendarDateTemplate rule */ | |
2f01fe57 AD |
136 | } |
137 | .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { | |
81bea17a AD |
138 | text-decoration: none; |
139 | display: block; | |
140 | padding: 3px 5px 3px 4px; | |
141 | border: solid 1px #ffffff; | |
142 | /* intentionally matches background-color, no visible border until hover/selection */ | |
143 | ||
144 | background-color: rgba(171, 212, 251, 0); | |
145 | /* transparent causes black-flash animation problem on webkit */ | |
146 | ||
147 | -webkit-transition-property: background-color, border; | |
148 | -moz-transition-property: background-color, border; | |
149 | transition-property: background-color, border; | |
150 | -webkit-transition-duration: 0.35s; | |
151 | -moz-transition-duration: 0.35s; | |
152 | transition-duration: 0.35s; | |
153 | } | |
154 | .claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel { | |
1354d172 AD |
155 | color: #759dc0; |
156 | border-color: #e5f2fe; | |
81bea17a AD |
157 | /* intentionally matches background-color, no visible border until hover/selection */ |
158 | ||
2f01fe57 AD |
159 | } |
160 | .claro .dijitCalendarYearContainer { | |
81bea17a | 161 | vertical-align: middle; |
2f01fe57 AD |
162 | } |
163 | .claro .dijitCalendarYearControl { | |
81bea17a | 164 | padding: 1px 2px 2px 2px; |
2f01fe57 AD |
165 | } |
166 | .claro .dijitCalendarYearLabel { | |
81bea17a AD |
167 | padding: 2px 0 0 0; |
168 | margin: 0; | |
1354d172 | 169 | font-size: 1.17em; |
2f01fe57 AD |
170 | } |
171 | .claro .dijitCalendarYearLabel span { | |
81bea17a AD |
172 | /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ |
173 | ||
174 | vertical-align: middle; | |
2f01fe57 AD |
175 | } |
176 | .claro .dijitCalendarSelectedYear { | |
81bea17a | 177 | padding: 0 3px; |
2f01fe57 | 178 | } |
81bea17a AD |
179 | .claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear { |
180 | padding: 1px 6px 1px 6px; | |
181 | font-size: 0.909em; | |
2f01fe57 AD |
182 | } |
183 | .claro .dijitCalendarSelectedYear { | |
81bea17a AD |
184 | font-size: 1.091em; |
185 | color: #000000; | |
186 | } | |
187 | /* End Normal Calendar Style */ | |
188 | /* Hovered Calendar Style */ | |
1354d172 | 189 | .claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { |
81bea17a | 190 | background-color: #abd6ff; |
1354d172 | 191 | border: solid 1px #759dc0; |
81bea17a AD |
192 | color: #000000; |
193 | -webkit-transition-duration: 0.2s; | |
194 | -moz-transition-duration: 0.2s; | |
195 | transition-duration: 0.2s; | |
196 | } | |
1354d172 AD |
197 | .claro .dijitCalendarNextYearHover, |
198 | .claro .dijitCalendarNextYear:hover, | |
199 | .claro .dijitCalendarPreviousYearHover, | |
200 | .claro .dijitCalendarPreviousYear:hover { | |
81bea17a AD |
201 | color: #000000; |
202 | border: solid 1px #ffffff; | |
203 | padding: 0 5px 0 5px; | |
204 | /* reduced by 1 to make room for border */ | |
205 | ||
1354d172 | 206 | background-color: #e5f2fe; |
81bea17a AD |
207 | } |
208 | /* End Hovered Calendar Style */ | |
209 | /* Active Calendar Style */ | |
1354d172 AD |
210 | .claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active { |
211 | border: solid 1px #759dc0; | |
81bea17a AD |
212 | padding: 0 5px 0 5px; |
213 | /* reduced by 1 to make room for border */ | |
214 | ||
1354d172 | 215 | background-color: #7dbdfa; |
2f01fe57 | 216 | } |
1354d172 | 217 | .claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { |
81bea17a AD |
218 | background-image: url("images/calendarContainerImages.png"); |
219 | background-position: 0 -300px; | |
1354d172 | 220 | background-color: #7dbdfa; |
81bea17a AD |
221 | border: solid 1px #ffffff; |
222 | -webkit-transition-duration: 0.1s; | |
223 | -moz-transition-duration: 0.1s; | |
224 | transition-duration: 0.1s; | |
2f01fe57 AD |
225 | } |
226 | .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { | |
81bea17a | 227 | background-image: none; |
2f01fe57 | 228 | } |
81bea17a AD |
229 | /* End Active Calendar Style */ |
230 | /* Selected Calendar Style */ | |
2f01fe57 | 231 | .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { |
81bea17a AD |
232 | color: #000000; |
233 | background-color: #abd6ff; | |
1354d172 | 234 | border-color: #759dc0; |
2f01fe57 | 235 | } |
81bea17a AD |
236 | /* End Selected Calendar Style */ |
237 | /* Disabled Calendar Style*/ | |
2f01fe57 | 238 | .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { |
81bea17a | 239 | color: #818181; |
1354d172 | 240 | text-decoration: line-through; |
81bea17a AD |
241 | } |
242 | /* End Disabled Calendar Style */ | |
243 | /* Styling for month DropDownButton */ | |
244 | .claro .dijitCalendar .dijitDropDownButton { | |
245 | margin: 0; | |
246 | } | |
247 | .claro .dijitCalendar .dijitButtonText { | |
248 | padding: 1px 0 3px; | |
249 | margin-right: -4px; | |
250 | } | |
251 | .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { | |
252 | background-color: transparent; | |
253 | background-image: none; | |
254 | padding: 0 3px 0 2px; | |
255 | border: solid 1px #b5bcc7; | |
256 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
257 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
258 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
259 | } | |
1354d172 AD |
260 | .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { |
261 | background-color: #e5f2fe; | |
81bea17a AD |
262 | border: solid 1px #ffffff; |
263 | } | |
264 | /* Styling for month drop down list */ | |
265 | .claro .dijitCalendarMonthMenu { | |
1354d172 | 266 | border-color: #759dc0; |
81bea17a AD |
267 | background-color: #ffffff; |
268 | text-align: center; | |
269 | background-image: none; | |
270 | } | |
271 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { | |
272 | border-top: solid 1px #ffffff; | |
273 | /* intentionally invisible until hover */ | |
274 | ||
275 | border-bottom: solid 1px #ffffff; | |
276 | padding: 2px 0; | |
277 | } | |
1354d172 | 278 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { |
81bea17a | 279 | background-color: #abd6ff; |
1354d172 | 280 | border-color: #759dc0; |
81bea17a AD |
281 | border-width: 1px 0; |
282 | background-image: url("images/commonHighlight.png"); | |
283 | background-repeat: repeat-x; | |
2f01fe57 | 284 | } |