]>
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 | 35 | border: solid 1px #b5bcc7; |
f0cfe83e AD |
36 | border-collapse: separate; |
37 | -moz-border-radius: 4px; | |
38 | border-radius: 4px; | |
81bea17a | 39 | background-color: #cfe5fa; |
f0cfe83e | 40 | background-image: url("images/calendar.png"); |
81bea17a | 41 | background-repeat: repeat-x; |
f0cfe83e AD |
42 | background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); |
43 | background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); | |
44 | background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); | |
45 | background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); | |
81bea17a AD |
46 | text-align: center; |
47 | padding: 6px 5px 3px 5px; | |
2f01fe57 AD |
48 | } |
49 | .dj_ie6 .claro .dijitCalendar { | |
81bea17a | 50 | background-image: none; |
2f01fe57 AD |
51 | } |
52 | .claro .dijitCalendar img { | |
81bea17a | 53 | border: none; |
2f01fe57 | 54 | } |
1354d172 | 55 | .claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive { |
f0cfe83e | 56 | /* treat dijitCalendarActive like hover since there's |
81bea17a AD |
57 | * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) |
58 | */ | |
59 | ||
60 | background-color: #abd6ff; | |
1354d172 | 61 | border: solid 1px #759dc0; |
2f01fe57 AD |
62 | } |
63 | .claro .dijitCalendarMonthContainer th { | |
81bea17a AD |
64 | text-align: center; |
65 | padding-bottom: 4px; | |
66 | vertical-align: middle; | |
2f01fe57 AD |
67 | } |
68 | .claro .dijitCalendarMonthLabel { | |
81bea17a AD |
69 | color: #000000; |
70 | font-size: 1.091em; | |
71 | padding: 0 4px; | |
2f01fe57 | 72 | } |
81bea17a | 73 | /* next/previous month arrows */ |
2f01fe57 | 74 | .claro .dijitCalendarIncrementControl { |
81bea17a AD |
75 | width: 18px; |
76 | height: 16px; | |
77 | background-image: url("images/calendarArrows.png"); | |
78 | background-repeat: no-repeat; | |
2f01fe57 AD |
79 | } |
80 | .dj_ie6 .claro .dijitCalendarIncrementControl { | |
81bea17a | 81 | background-image: url("images/calendarArrows8bit.png"); |
2f01fe57 AD |
82 | } |
83 | .claro .dijitCalendarIncrease { | |
81bea17a | 84 | background-position: -18px 0; |
2f01fe57 | 85 | } |
1354d172 | 86 | .claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease { |
81bea17a | 87 | background-position: -36px 0; |
2f01fe57 | 88 | } |
1354d172 | 89 | .claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease { |
81bea17a | 90 | background-position: -55px 0; |
2f01fe57 | 91 | } |
1354d172 | 92 | .claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease { |
81bea17a | 93 | background-position: -72px 0; |
2f01fe57 | 94 | } |
1354d172 | 95 | .claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease { |
81bea17a | 96 | background-position: -91px 0; |
2f01fe57 AD |
97 | } |
98 | .claro .dijitA11ySideArrow { | |
81bea17a AD |
99 | /* text +/- labels instead of arrow icons, for high contrast mode */ |
100 | ||
101 | display: none; | |
2f01fe57 | 102 | } |
2f01fe57 | 103 | .claro .dijitCalendarDayLabelTemplate { |
81bea17a AD |
104 | padding-bottom: 0; |
105 | text-align: center; | |
106 | border-bottom: 1px solid #b5bcc7; | |
81bea17a | 107 | padding: 0 3px 2px; |
2f01fe57 | 108 | } |
1354d172 AD |
109 | .claro .dijitCalendarDayLabel { |
110 | padding: 0 4px 0 4px; | |
111 | font-weight: bold; | |
112 | font-size: 0.909em; | |
113 | text-align: center; | |
114 | color: #000000; | |
115 | } | |
2f01fe57 | 116 | .claro .dijitCalendarDateTemplate { |
81bea17a AD |
117 | text-align: center; |
118 | background-color: #ffffff; | |
81bea17a AD |
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 { |
1354d172 | 218 | background-color: #7dbdfa; |
81bea17a AD |
219 | border: solid 1px #ffffff; |
220 | -webkit-transition-duration: 0.1s; | |
221 | -moz-transition-duration: 0.1s; | |
222 | transition-duration: 0.1s; | |
2f01fe57 AD |
223 | } |
224 | .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { | |
81bea17a | 225 | background-image: none; |
2f01fe57 | 226 | } |
81bea17a AD |
227 | /* End Active Calendar Style */ |
228 | /* Selected Calendar Style */ | |
2f01fe57 | 229 | .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { |
81bea17a AD |
230 | color: #000000; |
231 | background-color: #abd6ff; | |
1354d172 | 232 | border-color: #759dc0; |
2f01fe57 | 233 | } |
81bea17a AD |
234 | /* End Selected Calendar Style */ |
235 | /* Disabled Calendar Style*/ | |
2f01fe57 | 236 | .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { |
81bea17a | 237 | color: #818181; |
1354d172 | 238 | text-decoration: line-through; |
81bea17a AD |
239 | } |
240 | /* End Disabled Calendar Style */ | |
241 | /* Styling for month DropDownButton */ | |
242 | .claro .dijitCalendar .dijitDropDownButton { | |
243 | margin: 0; | |
244 | } | |
245 | .claro .dijitCalendar .dijitButtonText { | |
246 | padding: 1px 0 3px; | |
247 | margin-right: -4px; | |
248 | } | |
249 | .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { | |
81bea17a AD |
250 | padding: 0 3px 0 2px; |
251 | border: solid 1px #b5bcc7; | |
252 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
253 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
254 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
f0cfe83e AD |
255 | background-color: transparent; |
256 | background-image: none; | |
81bea17a | 257 | } |
1354d172 AD |
258 | .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { |
259 | background-color: #e5f2fe; | |
81bea17a AD |
260 | border: solid 1px #ffffff; |
261 | } | |
262 | /* Styling for month drop down list */ | |
263 | .claro .dijitCalendarMonthMenu { | |
1354d172 | 264 | border-color: #759dc0; |
81bea17a AD |
265 | background-color: #ffffff; |
266 | text-align: center; | |
267 | background-image: none; | |
268 | } | |
269 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { | |
270 | border-top: solid 1px #ffffff; | |
271 | /* intentionally invisible until hover */ | |
272 | ||
273 | border-bottom: solid 1px #ffffff; | |
274 | padding: 2px 0; | |
275 | } | |
1354d172 | 276 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { |
1354d172 | 277 | border-color: #759dc0; |
81bea17a | 278 | border-width: 1px 0; |
f0cfe83e AD |
279 | background-color: #abd6ff; |
280 | background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); | |
281 | background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); | |
282 | background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); | |
283 | background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); | |
284 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffffff , endColorstr= #abd6ff ); | |
2f01fe57 | 285 | } |