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
37 .claro .dijitCalendar {
38 border: solid 1px @border-color;
39 border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables
42 // Background color and alpha-gradient
43 background-color: @calendar-background-color;
44 background-image: url("images/calendar.png"); // fallback for browsers that don't support CSS gradients
45 background-repeat: repeat-x; // so bottom of calendar isn't affected by gradient image repeating
46 .alpha-white-gradient(1, 0px, 0.4, 2px, 0, 100%);
49 padding:6px 5px 3px 5px;
51 .dj_ie6 .claro .dijitCalendar {
52 background-image:none; // because on IE6 background-image overrides background-color
54 .claro .dijitCalendar img {
57 .claro .dijitCalendarHover, .claro .dijitCalendar:hover,
58 .claro .dijitCalendarActive {
59 /* treat dijitCalendarActive like hover since there's
60 * no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
62 background-color: @hovered-background-color;
63 border:solid 1px @hovered-border-color;
65 .claro .dijitCalendarMonthContainer th {
68 vertical-align:middle;
70 .claro .dijitCalendarMonthLabel {
76 /* next/previous month arrows */
77 .claro .dijitCalendarIncrementControl {
80 background-image: url(@image-calendar-arrows);
81 background-repeat: no-repeat;
83 .dj_ie6 .claro .dijitCalendarIncrementControl {
84 background-image: url(@image-calendar-arrows-ie6);
86 .claro .dijitCalendarIncrease {
87 background-position:-18px 0;
89 .claro .dijitCalendarArrowHover .dijitCalendarDecrease,
90 .claro .dijitCalendarArrow:hover .dijitCalendarDecrease {
91 background-position:-36px 0;
93 .claro .dijitCalendarArrowHover .dijitCalendarIncrease,
94 .claro .dijitCalendarArrow:hover .dijitCalendarIncrease {
95 background-position:-55px 0;
97 .claro .dijitCalendarArrowActive .dijitCalendarDecrease,
98 .claro .dijitCalendarArrow:active .dijitCalendarDecrease {
99 background-position:-72px 0;
101 .claro .dijitCalendarArrowActive .dijitCalendarIncrease,
102 .claro .dijitCalendarArrow:active .dijitCalendarIncrease {
103 background-position:-91px 0;
105 .claro .dijitA11ySideArrow {
106 /* text +/- labels instead of arrow icons, for high contrast mode */
110 .claro .dijitCalendarDayLabelTemplate {
113 border-bottom:1px solid @border-color;
116 .claro .dijitCalendarDayLabel {
123 .claro .dijitCalendarDateTemplate {
125 background-color:@calendar-currentmonth-background-color;
126 border-bottom: 1px solid @minor-border-color;
131 letter-spacing:.05em;
135 .dj_ie6 .claro .dijitCalendarDateTemplate {
136 background-image: none;
138 .claro .dijitCalendarPreviousMonth,
139 .claro .dijitCalendarNextMonth {
140 background-color: @calendar-adjacentmonth-background-color;
141 background-image:none;
142 border-bottom:solid 1px @minor-border-color; /* todo: redundant with above .dijitCalendarDateTemplate rule */
144 .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
145 text-decoration:none;
147 padding:3px 5px 3px 4px;
148 border:solid 1px @calendar-currentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
149 background-color:rgba(171,212,251,0); /* transparent causes black-flash animation problem on webkit */
150 .transition-property(background-color, border);
151 .transition-duration(.35s);
153 .claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
154 .claro .dijitCalendarNextMonth .dijitCalendarDateLabel{
155 color: @calendar-adjacentmonth-text-color;
156 border-color: @calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
159 .claro .dijitCalendarYearContainer {
160 vertical-align:middle;
162 .claro .dijitCalendarYearControl {
163 padding: 1px 2px 2px 2px;
165 .claro .dijitCalendarYearLabel {
170 .claro .dijitCalendarYearLabel span {
171 /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
172 vertical-align:middle;
174 .claro .dijitCalendarSelectedYear {
177 .claro .dijitCalendarNextYear,
178 .claro .dijitCalendarPreviousYear {
179 padding: 1px 6px 1px 6px;
182 .claro .dijitCalendarSelectedYear {
184 color:@selected-text-color;
186 /* End Normal Calendar Style */
187 /* Hovered Calendar Style */
188 .claro .dijitCalendarHoveredDate .dijitCalendarDateLabel,
189 .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
190 background-color:@hovered-background-color;
191 border:solid 1px @hovered-border-color;
192 color:@hovered-text-color;
193 .transition-duration(.2s);
195 .claro .dijitCalendarNextYearHover, .claro .dijitCalendarNextYear:hover,
196 .claro .dijitCalendarPreviousYearHover, .claro .dijitCalendarPreviousYear:hover {
197 color:@hovered-text-color;
198 border:solid 1px @calendar-button-hovered-border-color;
199 padding: 0 5px 0 5px; /* reduced by 1 to make room for border */
200 background-color: @calendar-button-hovered-background-color;
202 /* End Hovered Calendar Style */
203 /* Active Calendar Style */
204 .claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active
205 .claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active {
206 border: solid 1px @calendar-button-pressed-border-color;
207 padding: 0 5px 0 5px; /* reduced by 1 to make room for border */
208 background-color:@calendar-button-pressed-background-color;
210 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel,
211 .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
212 background-color: @calendar-date-pressed-background-color;
213 border:solid 1px @calendar-date-pressed-border-color;
214 .transition-duration(.1s);
216 .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
217 background-image:none;
219 /* End Active Calendar Style */
220 /* Selected Calendar Style */
221 .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
222 color:@selected-text-color;
223 background-color: @calendar-date-selected-background-color;
224 border-color: @calendar-date-selected-border-color;
226 /* End Selected Calendar Style */
227 /* Disabled Calendar Style*/
228 .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
229 color: @disabled-text-color;
230 text-decoration:line-through;
233 /* End Disabled Calendar Style */
235 /* Styling for month DropDownButton */
237 .claro .dijitCalendar .dijitDropDownButton {
240 .claro .dijitCalendar .dijitButtonText {
244 .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
245 padding: 0 3px 0 2px;
246 border:solid 1px @border-color;
247 .box-shadow(0 0 0 rgba(0,0,0,0));
249 // Override background settings from vanilla .dijitButtonNode. We want to inherit background of Calendar.
250 background-color: transparent;
251 background-image: none;
253 .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,
254 .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
255 background-color: @calendar-button-hovered-background-color;
256 border:solid 1px @calendar-button-hovered-border-color;
259 /* Styling for month drop down list */
261 .claro .dijitCalendarMonthMenu {
262 border-color: @popup-border-color;
263 background-color: @menu-background-color;
265 background-image: none;
267 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
268 border-top: solid 1px @menu-background-color; /* intentionally invisible until hover */
269 border-bottom: solid 1px @menu-background-color;
272 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,
273 .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
274 border-color: @hovered-border-color;
276 .gradient-and-filter(@hovered-background-color, 70, 0);