3 * Styling Calendar mainly includes:
5 * 1. Calendar container
6 * .dijitCalendar - main container
7 * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
10 * .dijitCalendarMonthContainer
11 * .dijitCalendarMonthLabel
12 * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
13 * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
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
24 * .dijitCalendarYearContainer
25 * .dijitCalendarYearLabel
26 * .dijitCalendarPreviousYear /.dijitCalendarNextYear
27 * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
29 * 5. Dropdown Month Menu
30 * .dijitCalendarMonthMenu - menu container
31 * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
32 * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
34 .claro .dijitCalendar {
35 border: solid
1px #b5bcc7;
36 border-collapse: separate
;
37 -moz-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%);
47 padding: 6px 5px 3px 5px;
49 .dj_ie6 .claro .dijitCalendar {
50 background-image: none
;
52 .claro .dijitCalendar img {
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)
60 background-color: #abd6ff;
61 border: solid
1px #759dc0;
63 .claro .dijitCalendarMonthContainer th {
66 vertical-align: middle
;
68 .claro .dijitCalendarMonthLabel {
73 /* next/previous month arrows */
74 .claro .dijitCalendarIncrementControl {
77 background-image: url
("images/calendarArrows.png");
78 background-repeat: no-repeat
;
80 .dj_ie6 .claro .dijitCalendarIncrementControl {
81 background-image: url
("images/calendarArrows8bit.png");
83 .claro .dijitCalendarIncrease {
84 background-position: -18px 0;
86 .claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease {
87 background-position: -36px 0;
89 .claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease {
90 background-position: -55px 0;
92 .claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease {
93 background-position: -72px 0;
95 .claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease {
96 background-position: -91px 0;
98 .claro .dijitA11ySideArrow {
99 /* text +/- labels instead of arrow icons, for high contrast mode */
103 .claro .dijitCalendarDayLabelTemplate {
106 border-bottom: 1px solid
#b5bcc7;
109 .claro .dijitCalendarDayLabel {
110 padding: 0 4px 0 4px;
116 .claro .dijitCalendarDateTemplate {
118 background-color: #ffffff;
119 border-bottom: 1px solid
#d3d3d3;
124 letter-spacing: .05em;
128 .dj_ie6 .claro .dijitCalendarDateTemplate {
129 background-image: none
;
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 */
137 .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
138 text-decoration: none
;
140 padding: 3px 5px 3px 4px;
141 border: solid
1px #ffffff;
142 /* intentionally matches background-color, no visible border until hover/selection */
144 background-color: rgba
(171, 212, 251, 0);
145 /* transparent causes black-flash animation problem on webkit */
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;
154 .claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel {
156 border-color: #e5f2fe;
157 /* intentionally matches background-color, no visible border until hover/selection */
160 .claro .dijitCalendarYearContainer {
161 vertical-align: middle
;
163 .claro .dijitCalendarYearControl {
164 padding: 1px 2px 2px 2px;
166 .claro .dijitCalendarYearLabel {
171 .claro .dijitCalendarYearLabel span {
172 /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
174 vertical-align: middle
;
176 .claro .dijitCalendarSelectedYear {
179 .claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear {
180 padding: 1px 6px 1px 6px;
183 .claro .dijitCalendarSelectedYear {
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;
193 -webkit-transition-duration: 0.2s;
194 -moz-transition-duration: 0.2s;
195 transition-duration: 0.2s;
197 .claro
.dijitCalendarNextYearHover
,
198 .claro
.dijitCalendarNextYear:hover
,
199 .claro
.dijitCalendarPreviousYearHover
,
200 .claro .dijitCalendarPreviousYear:hover {
202 border: solid
1px #ffffff;
203 padding: 0 5px 0 5px;
204 /* reduced by 1 to make room for border */
206 background-color: #e5f2fe;
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 */
215 background-color: #7dbdfa;
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;
224 .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
225 background-image: none
;
227 /* End Active Calendar Style */
228 /* Selected Calendar Style */
229 .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
231 background-color: #abd6ff;
232 border-color: #759dc0;
234 /* End Selected Calendar Style */
235 /* Disabled Calendar Style*/
236 .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
238 text-decoration: line-through
;
240 /* End Disabled Calendar Style */
241 /* Styling for month DropDownButton */
242 .claro .dijitCalendar .dijitDropDownButton {
245 .claro .dijitCalendar .dijitButtonText {
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
;
258 .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
259 background-color: #e5f2fe;
260 border: solid
1px #ffffff;
262 /* Styling for month drop down list */
263 .claro .dijitCalendarMonthMenu {
264 border-color: #759dc0;
265 background-color: #ffffff;
267 background-image: none
;
269 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
270 border-top: solid
1px #ffffff;
271 /* intentionally invisible until hover */
273 border-bottom: solid
1px #ffffff;
276 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
277 border-color: #759dc0;
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 );