]>
Commit | Line | Data |
---|---|---|
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 | */ | |
34 | .claro .dijitCalendar { | |
35 | border: solid 1px #b5bcc7; | |
36 | border-collapse: separate; | |
37 | -moz-border-radius: 4px; | |
38 | border-radius: 4px; | |
39 | background-color: #cfe5fa; | |
40 | background-image: url("images/calendar.png"); | |
41 | background-repeat: repeat-x; | |
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%); | |
46 | text-align: center; | |
47 | padding: 6px 5px 3px 5px; | |
48 | } | |
49 | .dj_ie6 .claro .dijitCalendar { | |
50 | background-image: none; | |
51 | } | |
52 | .claro .dijitCalendar img { | |
53 | border: none; | |
54 | } | |
55 | .claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive { | |
56 | /* treat dijitCalendarActive like hover since there's | |
57 | * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) | |
58 | */ | |
59 | ||
60 | background-color: #abd6ff; | |
61 | border: solid 1px #759dc0; | |
62 | } | |
63 | .claro .dijitCalendarMonthContainer th { | |
64 | text-align: center; | |
65 | padding-bottom: 4px; | |
66 | vertical-align: middle; | |
67 | } | |
68 | .claro .dijitCalendarMonthLabel { | |
69 | color: #000000; | |
70 | font-size: 1.091em; | |
71 | padding: 0 4px; | |
72 | } | |
73 | /* next/previous month arrows */ | |
74 | .claro .dijitCalendarIncrementControl { | |
75 | width: 18px; | |
76 | height: 16px; | |
77 | background-image: url("images/calendarArrows.png"); | |
78 | background-repeat: no-repeat; | |
79 | } | |
80 | .dj_ie6 .claro .dijitCalendarIncrementControl { | |
81 | background-image: url("images/calendarArrows8bit.png"); | |
82 | } | |
83 | .claro .dijitCalendarIncrease { | |
84 | background-position: -18px 0; | |
85 | } | |
86 | .claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease { | |
87 | background-position: -36px 0; | |
88 | } | |
89 | .claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease { | |
90 | background-position: -55px 0; | |
91 | } | |
92 | .claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease { | |
93 | background-position: -72px 0; | |
94 | } | |
95 | .claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease { | |
96 | background-position: -91px 0; | |
97 | } | |
98 | .claro .dijitA11ySideArrow { | |
99 | /* text +/- labels instead of arrow icons, for high contrast mode */ | |
100 | ||
101 | display: none; | |
102 | } | |
103 | .claro .dijitCalendarDayLabelTemplate { | |
104 | padding-bottom: 0; | |
105 | text-align: center; | |
106 | border-bottom: 1px solid #b5bcc7; | |
107 | padding: 0 3px 2px; | |
108 | } | |
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 | } | |
116 | .claro .dijitCalendarDateTemplate { | |
117 | text-align: center; | |
118 | background-color: #ffffff; | |
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; | |
126 | color: #000000; | |
127 | } | |
128 | .dj_ie6 .claro .dijitCalendarDateTemplate { | |
129 | background-image: none; | |
130 | } | |
131 | .claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth { | |
132 | background-color: #e5f2fe; | |
133 | background-image: none; | |
134 | border-bottom: solid 1px #d3d3d3; | |
135 | /* todo: redundant with above .dijitCalendarDateTemplate rule */ | |
136 | } | |
137 | .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { | |
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 { | |
155 | color: #759dc0; | |
156 | border-color: #e5f2fe; | |
157 | /* intentionally matches background-color, no visible border until hover/selection */ | |
158 | ||
159 | } | |
160 | .claro .dijitCalendarYearContainer { | |
161 | vertical-align: middle; | |
162 | } | |
163 | .claro .dijitCalendarYearControl { | |
164 | padding: 1px 2px 2px 2px; | |
165 | } | |
166 | .claro .dijitCalendarYearLabel { | |
167 | padding: 2px 0 0 0; | |
168 | margin: 0; | |
169 | font-size: 1.17em; | |
170 | } | |
171 | .claro .dijitCalendarYearLabel span { | |
172 | /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ | |
173 | ||
174 | vertical-align: middle; | |
175 | } | |
176 | .claro .dijitCalendarSelectedYear { | |
177 | padding: 0 3px; | |
178 | } | |
179 | .claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear { | |
180 | padding: 1px 6px 1px 6px; | |
181 | font-size: 0.909em; | |
182 | } | |
183 | .claro .dijitCalendarSelectedYear { | |
184 | font-size: 1.091em; | |
185 | color: #000000; | |
186 | } | |
187 | /* End Normal Calendar Style */ | |
188 | /* Hovered Calendar Style */ | |
189 | .claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { | |
190 | background-color: #abd6ff; | |
191 | border: solid 1px #759dc0; | |
192 | color: #000000; | |
193 | -webkit-transition-duration: 0.2s; | |
194 | -moz-transition-duration: 0.2s; | |
195 | transition-duration: 0.2s; | |
196 | } | |
197 | .claro .dijitCalendarNextYearHover, | |
198 | .claro .dijitCalendarNextYear:hover, | |
199 | .claro .dijitCalendarPreviousYearHover, | |
200 | .claro .dijitCalendarPreviousYear:hover { | |
201 | color: #000000; | |
202 | border: solid 1px #ffffff; | |
203 | padding: 0 5px 0 5px; | |
204 | /* reduced by 1 to make room for border */ | |
205 | ||
206 | background-color: #e5f2fe; | |
207 | } | |
208 | /* End Hovered Calendar Style */ | |
209 | /* Active Calendar Style */ | |
210 | .claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active { | |
211 | border: solid 1px #759dc0; | |
212 | padding: 0 5px 0 5px; | |
213 | /* reduced by 1 to make room for border */ | |
214 | ||
215 | background-color: #7dbdfa; | |
216 | } | |
217 | .claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { | |
218 | background-color: #7dbdfa; | |
219 | border: solid 1px #ffffff; | |
220 | -webkit-transition-duration: 0.1s; | |
221 | -moz-transition-duration: 0.1s; | |
222 | transition-duration: 0.1s; | |
223 | } | |
224 | .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { | |
225 | background-image: none; | |
226 | } | |
227 | /* End Active Calendar Style */ | |
228 | /* Selected Calendar Style */ | |
229 | .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { | |
230 | color: #000000; | |
231 | background-color: #abd6ff; | |
232 | border-color: #759dc0; | |
233 | } | |
234 | /* End Selected Calendar Style */ | |
235 | /* Disabled Calendar Style*/ | |
236 | .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { | |
237 | color: #818181; | |
238 | text-decoration: line-through; | |
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 { | |
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); | |
255 | background-color: transparent; | |
256 | background-image: none; | |
257 | } | |
258 | .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { | |
259 | background-color: #e5f2fe; | |
260 | border: solid 1px #ffffff; | |
261 | } | |
262 | /* Styling for month drop down list */ | |
263 | .claro .dijitCalendarMonthMenu { | |
264 | border-color: #759dc0; | |
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 | } | |
276 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { | |
277 | border-color: #759dc0; | |
278 | border-width: 1px 0; | |
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 ); | |
285 | } |