@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;
|
}
|
