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}