dojox/calendar/themes/iphone/MatrixView.less

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

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