1@import "MatrixViewCommon.less";
2
3@outer-border: 1px solid #CCCCCC;
4@inner-border: 1px solid #CCCCCC;
5
6@transparent-border: 1px solid transparent;
7
8@row-color-hover: #E5F2FE;
9@row-color-active: #A5D1FB;
10
11@today-label-color: #295BB3;
12
13@week-end-color: #EFEFEF;
14@disabled-day-color: #FAFAFA;
15
16@header-label-color: #CCCCCC;
17
18@horizontal-color: #9F0000;
19@horizontal-hover-color: #CC0000;
20@horizontal-selected-bg-color: #660000;
21@horizontal-border: 1px solid #260000;
22@expand-up-color: #73ABFA;
23@expand-down-color: #A5D1FB;
24
25@column-header-height: 30px;
26@row-header-width: 50px;
27
28.border-box(){
29	-webkit-box-sizing: border-box;
30	-moz-box-sizing: border-box;
31	box-sizing: border-box;
32}
33
34.opacity(@op){
35	filter:formatstring("alpha(opacity={0})", @op);
36	opacity:@op/100;
37}
38
39.transition-duration(@dur: 0s){
40	-webkit-transition-duration: @dur;
41	-moz-transition-duration: @dur;
42	transition-duration: @dur;
43}
44
45.select-none() {
46	-moz-user-select: none;
47	-webkit-user-select: none;
48	khtml-user-select: none;
49	user-select: none;
50}
51
52.glass-view(){
53	z-index: 2;
54	background:#00FF00;
55	.opacity(0);
56	.select-none
57}
58
59.header-background(){
60	color: @header-label-color;
61}
62
63.rounded-corners (@radius: 5px) {
64  border-radius: @radius;
65  -webkit-border-radius: @radius;
66  -moz-border-radius: @radius;
67}
68
69.dojoxCalendarMatrixView {
70	cursor: default;
71	.select-none;
72}
73
74.dojoxCalendarMatrixView .dojoxCalendarGrid {
75	position: absolute;
76	left: @row-header-width;
77	right: 0px;
78	top: @column-header-height;
79	bottom: 0px;
80}
81
82.dojoxCalendarMatrixView .dojoxCalendarGridTable {
83	position: relative;
84	width: 100%;
85	height: 100%;
86	margin: 0;
87	padding: 0;
88	border-collapse: collapse;
89	table-layout: fixed;
90}
91
92.dojoxCalendarMatrixView .dojoxCalendarGridTable tr{
93	.border-box;
94}
95
96.dojoxCalendarMatrixView .dojoxCalendarGridTable td {
97	text-align: right;
98	vertical-align: top;
99	border-bottom: @inner-border;
100	border-right: @inner-border;
101	.border-box;
102}
103
104.dojoxCalendarMatrixView .dojoxCalendarGridTable td span{
105	padding-right: 2px;
106	padding-top: 2px;
107	color: @header-label-color;
108}
109
110.dojoxCalendarMatrixView .dojoxCalendarGridTable td span.FirstVisibleDayOfMonth{
111}
112
113.dojoxCalendarMatrixView .dojoxCalendarGridTable tr.last-child td	{
114	border-bottom: @outer-border;
115}
116
117.dojoxCalendarMatrixView .dojoxCalendarGridTable td.last-child	{
118	border-right: @outer-border;
119}
120
121/*
122 * The dojoxCalendarColToday & dojoxCalendarColWeekend classes is added by the
123 * MatrixView.styleGridCell method that can be subclassed to add/remove css classes
124 */
125.dojoxCalendarMatrixView .dojoxCalendarGridTable td.dojoxCalendarToday	{
126	color: @today-label-color;
127}
128
129
130.dojoxCalendarMatrixView .dojoxCalendarGridTable .dojoxCalendarDayDisabled {
131	background-color: @disabled-day-color;
132	color: @disabled-day-color - #777777;
133}
134
135.dojoxCalendarMatrixView .dojoxCalendarYearColumnHeader{
136	position: absolute;
137	left: 0px;
138	top: 0px;
139	width: @row-header-width;
140	height: @column-header-height;
141	text-align: center;
142	vertical-align: middle;
143	border-bottom: @transparent-border;
144	.border-box;
145}
146
147.dojoxCalendarMatrixView .dojoxCalendarYearColumnHeader table{
148	position: relative;
149	width:100%;
150	height: 100%;
151	table-layout: fixed;
152	border-collapse: collapse;
153}
154
155.dojoxCalendarMatrixView .dojoxCalendarYearColumnHeader table td{
156	text-align: center;
157	vertical-align: middle;
158	border-left: @transparent-border;
159	border-top: @transparent-border;
160	border-right: @transparent-border;
161	.header-background;
162}
163
164.dojoxCalendarMatrixView .dojoxCalendarColumnHeader {
165	position: absolute;
166	left: @row-header-width;
167	right: 0px;
168	top: 0px;
169	height: @column-header-height - 1px;
170	cursor: default;
171	border-bottom: @outer-border;
172}
173
174.dojoxCalendarMatrixView .dojoxCalendarColumnHeaderTable {
175	position: relative;
176	width:100%;
177	height: 100%;
178	table-layout: fixed;
179	border-collapse: collapse;
180}
181
182.dojoxCalendarMatrixView .dojoxCalendarColumnHeaderTable td {
183	overflow:hidden;
184	vertical-align: middle;
185	text-align: center;
186	.header-background;
187	border-right: @transparent-border;
188	border-top: @transparent-border;
189	.select-none;
190}
191
192.dojoxCalendarMatrixView .dojoxCalendarRowHeader {
193	position: absolute;
194	left: 0px;
195	top: @column-header-height;
196	width: @row-header-width;
197	bottom: 0;
198	color: @header-label-color;
199	.select-none;
200}
201
202.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable {
203	position: relative;
204	width: 100%;
205	height: 100%;
206	border-collapse: collapse;
207	table-layout: fixed;
208	margin: 0;
209	padding: 0;
210}
211
212.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable tr{
213	.border-box;
214}
215
216/*
217 * The MatrixView.styleRowHeaderCell method that can be subclassed to add/remove css classes per hour.
218 */
219.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td {
220	text-align: center;
221	vertical-align: middle;
222	border-left: @transparent-border;
223	border-right: @outer-border;
224	border-bottom: @transparent-border;
225	.border-box;
226}
227
228.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td.last-child {
229	border-bottom: @outer-border;
230}
231
232.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td.Hover {
233	background-color: @row-color-hover;
234}
235
236.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td.Active {
237	background-color: @row-color-active;
238}
239
240.dojoxCalendarMatrixView .dojoxCalendarContainer {
241	position: absolute;
242	top: @column-header-height;
243	left: @row-header-width;
244	right: 0px;
245	bottom: 0px;
246}
247
248.dojoxCalendarMatrixView .dojoxCalendarContainerTable {
249	position: relative;
250	width: 100%;
251	height: 100%;
252	margin: 0;
253	padding: 0;
254	border-collapse: collapse;
255	table-layout: fixed;
256}
257
258.dojoxCalendarMatrixView .dojoxCalendarContainerTable tr{
259	.border-box;
260}
261
262.dojoxCalendarMatrixView .dojoxCalendarContainerTable td{
263	vertical-align: top;
264	border-bottom: solid 1px transparent;
265	border-right: solid 1px transparent;
266	.border-box;
267}
268
269.dojoxCalendarMatrixView .dojoxCalendarContainerTable td div.dojoxCalendarContainerRow{
270	position:relative;
271	height:100%;
272	width:100%;
273}
274
275.dojoxCalendarMatrixView .dojoxCalendarEventContainer {
276	position: absolute;
277	overflow: hidden;
278 	.select-none;
279}
280
281.dojoxCalendarMatrixView .dojoxCalendarEvent {
282	position: absolute;
283	text-align: left;
284	color: #000000;
285	left: 0;
286	right: 0;
287	top: 0;
288	bottom: 0;
289	white-space: nowrap;
290}
291
292.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal {
293	color: #FFF;
294	position: absolute;
295}
296
297.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal .bg {
298	border: @horizontal-border;
299	position: absolute;
300	left: 0;
301	right: 0;
302	top: 0;
303	bottom: 0;
304	text-align: left;
305	color: #000000;
306	.rounded-corners(5px);
307	background-color: @horizontal-color;
308}
309
310.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Hovered  .bg {
311	background-color: @horizontal-hover-color;
312}
313
314.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Selected .bg {
315	background-color: @horizontal-selected-bg-color;
316}
317
318.dojoxCalendarMatrixView .dojoxCalendarEvent.Edited {
319	color: #fff;
320	font-weight: bold;
321}
322
323.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Edited .bg {
324	border: dashed 1px #FFF;
325	.opacity(50);
326}
327
328.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Focused .bg {
329	border: dashed 1px #FFF;
330}
331
332.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal .labels {
333	position: absolute;
334	left: 3px;
335	right: 1px;
336	bottom: 2px;
337	overflow: hidden;
338}
339
340.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Edited .labels {
341	left: 33px;
342	right: 31px;
343}
344
345.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel .labels {
346	position: absolute;
347	left: 2px;
348	right: 2px;
349	bottom: 0;
350	overflow: hidden;
351}
352
353.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel.Selected {
354	color: #F00;
355}
356
357.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel.Edited {
358	color: #FFF;
359	border: dashed 1px #FFF;
360	background: #600;
361	.opacity(30);
362}
363
364.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel.Focused {
365	border: dashed 1px #000000;
366}
367
368.dojoxCalendarMatrixView .dojoxCalendarEvent .resizeHandle {
369	position: absolute;
370	width:30px;
371	height:100%;
372	background-color: #fff;
373	.opacity(0);
374	.rounded-corners(5px);
375	color: #000;
376	text-align: center;
377}
378
379.dojoxCalendarMatrixView .dojoxCalendarEvent .moveHandle {
380	position: absolute;
381	left:0;
382	top:0;
383	bottom:0;
384	right:0;
385}
386
387.dojoxCalendarMatrixView .dojoxCalendarEvent .resizeStartHandle {
388	right: auto;
389}
390
391.dojoxCalendarMatrixView .dojoxCalendarEvent .resizeEndHandle {
392	right:0px;
393	left:auto;
394}
395
396.dojoxCalendarMatrixView .dojoxCalendarEvent.Edited .resizeHandle {
397	.opacity(30);
398}
399
400.dojoxCalendarMatrixView .dojoxCalendarExpand {
401	position: absolute;
402	text-align: center;
403}
404
405.dojoxCalendarMatrixView .dojoxCalendarExpand span {
406	display: inline-block;
407	vertical-align: middle;
408}
409
410.dojoxCalendarMatrixView .dojoxCalendarExpand .bg {
411	position: relative;
412	margin-right: 5px;
413	margin-left: 5px;
414	height: 100%;
415	.rounded-corners(5px);
416	.transition-duration(0.2s);
417	.border-box;
418	border: 1px solid transparent;
419}
420
421.dojoxCalendarMatrixView .dojoxCalendarExpand.Up .bg {
422	background-color: @expand-up-color;
423	border: 1px solid @expand-up-color - #555555;
424}
425
426.dojoxCalendarMatrixView .dojoxCalendarExpand.Down .bg {
427	background-color: @expand-down-color;
428	border: 1px solid @expand-down-color - #555555;
429}