]>
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 | */ | |
34 | ||
35 | @import "variables"; | |
36 | ||
37 | .claro .dijitCalendar { | |
f0cfe83e AD |
38 | border: solid 1px @border-color; |
39 | border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables | |
40 | .border-radius(4px); | |
41 | ||
42 | // Background color and alpha-gradient | |
81bea17a | 43 | background-color: @calendar-background-color; |
f0cfe83e AD |
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%); | |
47 | ||
81bea17a AD |
48 | text-align:center; |
49 | padding:6px 5px 3px 5px; | |
81bea17a AD |
50 | } |
51 | .dj_ie6 .claro .dijitCalendar { | |
f0cfe83e | 52 | background-image:none; // because on IE6 background-image overrides background-color |
81bea17a AD |
53 | } |
54 | .claro .dijitCalendar img { | |
55 | border:none; | |
56 | } | |
1354d172 | 57 | .claro .dijitCalendarHover, .claro .dijitCalendar:hover, |
81bea17a | 58 | .claro .dijitCalendarActive { |
f0cfe83e | 59 | /* treat dijitCalendarActive like hover since there's |
81bea17a AD |
60 | * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) |
61 | */ | |
62 | background-color: @hovered-background-color; | |
63 | border:solid 1px @hovered-border-color; | |
64 | } | |
65 | .claro .dijitCalendarMonthContainer th { | |
66 | text-align:center; | |
67 | padding-bottom:4px; | |
68 | vertical-align:middle; | |
69 | } | |
70 | .claro .dijitCalendarMonthLabel { | |
71 | color: @text-color; | |
72 | font-size: 1.091em; | |
73 | padding: 0 4px; | |
74 | } | |
75 | ||
76 | /* next/previous month arrows */ | |
77 | .claro .dijitCalendarIncrementControl { | |
78 | width:18px; | |
79 | height:16px; | |
1354d172 | 80 | background-image: url(@image-calendar-arrows); |
81bea17a AD |
81 | background-repeat: no-repeat; |
82 | } | |
83 | .dj_ie6 .claro .dijitCalendarIncrementControl { | |
1354d172 | 84 | background-image: url(@image-calendar-arrows-ie6); |
81bea17a AD |
85 | } |
86 | .claro .dijitCalendarIncrease { | |
87 | background-position:-18px 0; | |
88 | } | |
1354d172 AD |
89 | .claro .dijitCalendarArrowHover .dijitCalendarDecrease, |
90 | .claro .dijitCalendarArrow:hover .dijitCalendarDecrease { | |
81bea17a AD |
91 | background-position:-36px 0; |
92 | } | |
1354d172 AD |
93 | .claro .dijitCalendarArrowHover .dijitCalendarIncrease, |
94 | .claro .dijitCalendarArrow:hover .dijitCalendarIncrease { | |
81bea17a AD |
95 | background-position:-55px 0; |
96 | } | |
1354d172 AD |
97 | .claro .dijitCalendarArrowActive .dijitCalendarDecrease, |
98 | .claro .dijitCalendarArrow:active .dijitCalendarDecrease { | |
81bea17a AD |
99 | background-position:-72px 0; |
100 | } | |
1354d172 AD |
101 | .claro .dijitCalendarArrowActive .dijitCalendarIncrease, |
102 | .claro .dijitCalendarArrow:active .dijitCalendarIncrease { | |
81bea17a AD |
103 | background-position:-91px 0; |
104 | } | |
105 | .claro .dijitA11ySideArrow { | |
106 | /* text +/- labels instead of arrow icons, for high contrast mode */ | |
107 | display: none; | |
108 | } | |
109 | ||
81bea17a AD |
110 | .claro .dijitCalendarDayLabelTemplate { |
111 | padding-bottom:0; | |
112 | text-align:center; | |
113 | border-bottom:1px solid @border-color; | |
81bea17a AD |
114 | padding:0 3px 2px; |
115 | } | |
1354d172 AD |
116 | .claro .dijitCalendarDayLabel { |
117 | padding:0 4px 0 4px; | |
118 | font-weight:bold; | |
119 | font-size:0.909em; | |
120 | text-align:center; | |
121 | color: @text-color; | |
122 | } | |
81bea17a AD |
123 | .claro .dijitCalendarDateTemplate { |
124 | text-align:center; | |
125 | background-color:@calendar-currentmonth-background-color; | |
81bea17a AD |
126 | border-bottom: 1px solid @minor-border-color; |
127 | padding-top:0; | |
128 | font-size:0.909em; | |
129 | font-family: Arial; | |
130 | font-weight:bold; | |
131 | letter-spacing:.05em; | |
132 | text-align:center; | |
1354d172 | 133 | color: @text-color; |
81bea17a AD |
134 | } |
135 | .dj_ie6 .claro .dijitCalendarDateTemplate { | |
136 | background-image: none; | |
137 | } | |
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 */ | |
143 | } | |
144 | .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { | |
145 | text-decoration:none; | |
146 | display:block; | |
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); | |
152 | } | |
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 */ | |
157 | } | |
158 | ||
159 | .claro .dijitCalendarYearContainer { | |
160 | vertical-align:middle; | |
161 | } | |
162 | .claro .dijitCalendarYearControl { | |
163 | padding: 1px 2px 2px 2px; | |
164 | } | |
165 | .claro .dijitCalendarYearLabel { | |
1354d172 AD |
166 | padding: 2px 0 0 0; |
167 | margin: 0; | |
168 | font-size: 1.17em; | |
81bea17a AD |
169 | } |
170 | .claro .dijitCalendarYearLabel span { | |
171 | /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ | |
172 | vertical-align:middle; | |
173 | } | |
174 | .claro .dijitCalendarSelectedYear { | |
175 | padding:0 3px; | |
176 | } | |
177 | .claro .dijitCalendarNextYear, | |
178 | .claro .dijitCalendarPreviousYear { | |
179 | padding: 1px 6px 1px 6px; | |
180 | font-size:0.909em; | |
181 | } | |
182 | .claro .dijitCalendarSelectedYear { | |
183 | font-size:1.091em; | |
184 | color:@selected-text-color; | |
185 | } | |
186 | /* End Normal Calendar Style */ | |
187 | /* Hovered Calendar Style */ | |
1354d172 AD |
188 | .claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, |
189 | .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { | |
81bea17a AD |
190 | background-color:@hovered-background-color; |
191 | border:solid 1px @hovered-border-color; | |
192 | color:@hovered-text-color; | |
193 | .transition-duration(.2s); | |
194 | } | |
1354d172 AD |
195 | .claro .dijitCalendarNextYearHover, .claro .dijitCalendarNextYear:hover, |
196 | .claro .dijitCalendarPreviousYearHover, .claro .dijitCalendarPreviousYear:hover { | |
81bea17a AD |
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; | |
201 | } | |
202 | /* End Hovered Calendar Style */ | |
203 | /* Active Calendar Style */ | |
1354d172 AD |
204 | .claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active |
205 | .claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active { | |
81bea17a AD |
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; | |
209 | } | |
1354d172 AD |
210 | .claro .dijitCalendarActiveDate .dijitCalendarDateLabel, |
211 | .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { | |
81bea17a AD |
212 | background-color: @calendar-date-pressed-background-color; |
213 | border:solid 1px @calendar-date-pressed-border-color; | |
214 | .transition-duration(.1s); | |
215 | } | |
216 | .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { | |
217 | background-image:none; | |
218 | } | |
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; | |
225 | } | |
226 | /* End Selected Calendar Style */ | |
227 | /* Disabled Calendar Style*/ | |
228 | .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { | |
81bea17a | 229 | color: @disabled-text-color; |
1354d172 | 230 | text-decoration:line-through; |
81bea17a AD |
231 | } |
232 | ||
233 | /* End Disabled Calendar Style */ | |
234 | ||
235 | /* Styling for month DropDownButton */ | |
236 | ||
237 | .claro .dijitCalendar .dijitDropDownButton { | |
238 | margin: 0; | |
239 | } | |
240 | .claro .dijitCalendar .dijitButtonText { | |
241 | padding: 1px 0 3px; | |
242 | margin-right:-4px; | |
243 | } | |
244 | .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { | |
81bea17a AD |
245 | padding: 0 3px 0 2px; |
246 | border:solid 1px @border-color; | |
247 | .box-shadow(0 0 0 rgba(0,0,0,0)); | |
f0cfe83e AD |
248 | |
249 | // Override background settings from vanilla .dijitButtonNode. We want to inherit background of Calendar. | |
250 | background-color: transparent; | |
251 | background-image: none; | |
81bea17a | 252 | } |
1354d172 AD |
253 | .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, |
254 | .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { | |
81bea17a AD |
255 | background-color: @calendar-button-hovered-background-color; |
256 | border:solid 1px @calendar-button-hovered-border-color; | |
257 | } | |
258 | ||
259 | /* Styling for month drop down list */ | |
260 | ||
261 | .claro .dijitCalendarMonthMenu { | |
262 | border-color: @popup-border-color; | |
263 | background-color: @menu-background-color; | |
264 | text-align:center; | |
265 | background-image: none; | |
266 | } | |
267 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { | |
268 | border-top: solid 1px @menu-background-color; /* intentionally invisible until hover */ | |
269 | border-bottom: solid 1px @menu-background-color; | |
270 | padding: 2px 0; | |
271 | } | |
1354d172 AD |
272 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, |
273 | .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { | |
81bea17a AD |
274 | border-color: @hovered-border-color; |
275 | border-width:1px 0; | |
f0cfe83e | 276 | .gradient-and-filter(@hovered-background-color, 70, 0); |
81bea17a | 277 | } |