You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
429 lines
9.1 KiB
429 lines
9.1 KiB
@import "MatrixViewCommon.less"; |
|
|
|
@outer-border: 1px solid #CCCCCC; |
|
@inner-border: 1px solid #CCCCCC; |
|
|
|
@transparent-border: 1px solid transparent; |
|
|
|
@row-color-hover: #E5F2FE; |
|
@row-color-active: #A5D1FB; |
|
|
|
@today-label-color: #295BB3; |
|
|
|
@week-end-color: #EFEFEF; |
|
@disabled-day-color: #FAFAFA; |
|
|
|
@header-label-color: #CCCCCC; |
|
|
|
@horizontal-color: #9F0000; |
|
@horizontal-hover-color: #CC0000; |
|
@horizontal-selected-bg-color: #660000; |
|
@horizontal-border: 1px solid #260000; |
|
@expand-up-color: #73ABFA; |
|
@expand-down-color: #A5D1FB; |
|
|
|
@column-header-height: 30px; |
|
@row-header-width: 50px; |
|
|
|
.border-box(){ |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
|
|
.opacity(@op){ |
|
filter:formatstring("alpha(opacity={0})", @op); |
|
opacity:@op/100; |
|
} |
|
|
|
.transition-duration(@dur: 0s){ |
|
-webkit-transition-duration: @dur; |
|
-moz-transition-duration: @dur; |
|
transition-duration: @dur; |
|
} |
|
|
|
.select-none() { |
|
-moz-user-select: none; |
|
-webkit-user-select: none; |
|
khtml-user-select: none; |
|
user-select: none; |
|
} |
|
|
|
.glass-view(){ |
|
z-index: 2; |
|
background:#00FF00; |
|
.opacity(0); |
|
.select-none |
|
} |
|
|
|
.header-background(){ |
|
color: @header-label-color; |
|
} |
|
|
|
.rounded-corners (@radius: 5px) { |
|
border-radius: @radius; |
|
-webkit-border-radius: @radius; |
|
-moz-border-radius: @radius; |
|
} |
|
|
|
.dojoxCalendarMatrixView { |
|
cursor: default; |
|
.select-none; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGrid { |
|
position: absolute; |
|
left: @row-header-width; |
|
right: 0px; |
|
top: @column-header-height; |
|
bottom: 0px; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
margin: 0; |
|
padding: 0; |
|
border-collapse: collapse; |
|
table-layout: fixed; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable tr{ |
|
.border-box; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable td { |
|
text-align: right; |
|
vertical-align: top; |
|
border-bottom: @inner-border; |
|
border-right: @inner-border; |
|
.border-box; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable td span{ |
|
padding-right: 2px; |
|
padding-top: 2px; |
|
color: @header-label-color; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable td span.FirstVisibleDayOfMonth{ |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable tr.last-child td { |
|
border-bottom: @outer-border; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable td.last-child { |
|
border-right: @outer-border; |
|
} |
|
|
|
/* |
|
* The dojoxCalendarColToday & dojoxCalendarColWeekend classes is added by the |
|
* MatrixView.styleGridCell method that can be subclassed to add/remove css classes |
|
*/ |
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable td.dojoxCalendarToday { |
|
color: @today-label-color; |
|
} |
|
|
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarGridTable .dojoxCalendarDayDisabled { |
|
background-color: @disabled-day-color; |
|
color: @disabled-day-color - #777777; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarYearColumnHeader{ |
|
position: absolute; |
|
left: 0px; |
|
top: 0px; |
|
width: @row-header-width; |
|
height: @column-header-height; |
|
text-align: center; |
|
vertical-align: middle; |
|
border-bottom: @transparent-border; |
|
.border-box; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarYearColumnHeader table{ |
|
position: relative; |
|
width:100%; |
|
height: 100%; |
|
table-layout: fixed; |
|
border-collapse: collapse; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarYearColumnHeader table td{ |
|
text-align: center; |
|
vertical-align: middle; |
|
border-left: @transparent-border; |
|
border-top: @transparent-border; |
|
border-right: @transparent-border; |
|
.header-background; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarColumnHeader { |
|
position: absolute; |
|
left: @row-header-width; |
|
right: 0px; |
|
top: 0px; |
|
height: @column-header-height - 1px; |
|
cursor: default; |
|
border-bottom: @outer-border; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarColumnHeaderTable { |
|
position: relative; |
|
width:100%; |
|
height: 100%; |
|
table-layout: fixed; |
|
border-collapse: collapse; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarColumnHeaderTable td { |
|
overflow:hidden; |
|
vertical-align: middle; |
|
text-align: center; |
|
.header-background; |
|
border-right: @transparent-border; |
|
border-top: @transparent-border; |
|
.select-none; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarRowHeader { |
|
position: absolute; |
|
left: 0px; |
|
top: @column-header-height; |
|
width: @row-header-width; |
|
bottom: 0; |
|
color: @header-label-color; |
|
.select-none; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
border-collapse: collapse; |
|
table-layout: fixed; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable tr{ |
|
.border-box; |
|
} |
|
|
|
/* |
|
* The MatrixView.styleRowHeaderCell method that can be subclassed to add/remove css classes per hour. |
|
*/ |
|
.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td { |
|
text-align: center; |
|
vertical-align: middle; |
|
border-left: @transparent-border; |
|
border-right: @outer-border; |
|
border-bottom: @transparent-border; |
|
.border-box; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td.last-child { |
|
border-bottom: @outer-border; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td.Hover { |
|
background-color: @row-color-hover; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td.Active { |
|
background-color: @row-color-active; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarContainer { |
|
position: absolute; |
|
top: @column-header-height; |
|
left: @row-header-width; |
|
right: 0px; |
|
bottom: 0px; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarContainerTable { |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
margin: 0; |
|
padding: 0; |
|
border-collapse: collapse; |
|
table-layout: fixed; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarContainerTable tr{ |
|
.border-box; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarContainerTable td{ |
|
vertical-align: top; |
|
border-bottom: solid 1px transparent; |
|
border-right: solid 1px transparent; |
|
.border-box; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarContainerTable td div.dojoxCalendarContainerRow{ |
|
position:relative; |
|
height:100%; |
|
width:100%; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEventContainer { |
|
position: absolute; |
|
overflow: hidden; |
|
.select-none; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent { |
|
position: absolute; |
|
text-align: left; |
|
color: #000000; |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
bottom: 0; |
|
white-space: nowrap; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal { |
|
color: #FFF; |
|
position: absolute; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal .bg { |
|
border: @horizontal-border; |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
bottom: 0; |
|
text-align: left; |
|
color: #000000; |
|
.rounded-corners(5px); |
|
background-color: @horizontal-color; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Hovered .bg { |
|
background-color: @horizontal-hover-color; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Selected .bg { |
|
background-color: @horizontal-selected-bg-color; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.Edited { |
|
color: #fff; |
|
font-weight: bold; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Edited .bg { |
|
border: dashed 1px #FFF; |
|
.opacity(50); |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Focused .bg { |
|
border: dashed 1px #FFF; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal .labels { |
|
position: absolute; |
|
left: 3px; |
|
right: 1px; |
|
bottom: 2px; |
|
overflow: hidden; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarHorizontal.Edited .labels { |
|
left: 33px; |
|
right: 31px; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel .labels { |
|
position: absolute; |
|
left: 2px; |
|
right: 2px; |
|
bottom: 0; |
|
overflow: hidden; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel.Selected { |
|
color: #F00; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel.Edited { |
|
color: #FFF; |
|
border: dashed 1px #FFF; |
|
background: #600; |
|
.opacity(30); |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxCalendarLabel.Focused { |
|
border: dashed 1px #000000; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent .resizeHandle { |
|
position: absolute; |
|
width:30px; |
|
height:100%; |
|
background-color: #fff; |
|
.opacity(0); |
|
.rounded-corners(5px); |
|
color: #000; |
|
text-align: center; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent .moveHandle { |
|
position: absolute; |
|
left:0; |
|
top:0; |
|
bottom:0; |
|
right:0; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent .resizeStartHandle { |
|
right: auto; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent .resizeEndHandle { |
|
right:0px; |
|
left:auto; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarEvent.Edited .resizeHandle { |
|
.opacity(30); |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarExpand { |
|
position: absolute; |
|
text-align: center; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarExpand span { |
|
display: inline-block; |
|
vertical-align: middle; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarExpand .bg { |
|
position: relative; |
|
margin-right: 5px; |
|
margin-left: 5px; |
|
height: 100%; |
|
.rounded-corners(5px); |
|
.transition-duration(0.2s); |
|
.border-box; |
|
border: 1px solid transparent; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarExpand.Up .bg { |
|
background-color: @expand-up-color; |
|
border: 1px solid @expand-up-color - #555555; |
|
} |
|
|
|
.dojoxCalendarMatrixView .dojoxCalendarExpand.Down .bg { |
|
background-color: @expand-down-color; |
|
border: 1px solid @expand-down-color - #555555; |
|
} |