dojox/calendar/themes/nihilo/MonthColumnView.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 "ColumnViewCommon.less";

.nihilo .dojoxCalendarMonthColumnView {	
  cursor: default;
	-webkit-user-select: none;

	.dojoxCalendarScrollContainer {
		left: 0;
		right: 0;
		bottom: 0;
		top: @column-header-height;
		position: absolute;
		overflow-y: hidden;
		overflow-x: hidden;	
		border-bottom: @outer-border;
		.border-box;
	}
		
	.dojoxCalendarGrid {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	
	.dojoxCalendarGridTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
	
	
		td {
			border-top: dotted 1px #B5BCC7;	
			border-right: @inner-border;
			.border-box;
		}
		
		td span {
		  padding-left:3px;
		}
		
		tr:first-child td	{
			border-top: 1px solid transparent;
		}
		
		/* 
		 * The dojoxCalendarToday & dojoxCalendarWeekend classes is added by the 
		 * ColumnView.styleGridColumn method that can be subclassed to add/remove css classes
		 */
		.dojoxCalendarToday {
			background-color: @today-color;
			font-weight: bold;
			color: @today-label-color;
		}
		
		.dojoxCalendarHiddenEvents	{	
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVQYlWP4z8Dw/1dU1H8GXGBkKAAA+IglWfcls2QAAAAASUVORK5CYII=) repeat-y;	
		}
		
		.dojoxCalendarToday.dojoxCalendarHiddenEvents	{	
			background: @today-color url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVQYlWP4z8Dw/1dU1H8GXGBkKAAA+IglWfcls2QAAAAASUVORK5CYII=) repeat-y;	
		}
		
		tr td.last-child	{
			border-right: @outer-border;
		}
		
		tr td.first-child	{
			border-left: @outer-border;
		}
		
		
		tr:first-child td.dojoxCalendarToday	{
			border-top: 1px solid @today-color;
		}
		
		.dojoxCalendarWeekend {
			background-color: @week-end-color;
			color: @week-end-label-color;
		}
		
		tr:first-child td.dojoxCalendarWeekend	{
			border-top: 1px solid @week-end-color;
		}
		
	}
	
	.dojoxCalendarContainer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		cursor: default;
	}
	
	.dojoxCalendarContainerTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;
	}
	
	.dojoxCalendarContainerTable td {
		height: 100%;
		padding: 0;
		vertical-align: top;
	}
	
	.dojoxCalendarContainerColumn {
		position:	relative;
		margin-left: 35px;
		margin-right: 5px;
	}
	
	.dojoxCalendarEventContainer {
		position: absolute;
		overflow: hidden;
		.select-none;
	}
	
	.dojoxCalendarColumnHeader {
		position: absolute;
		height: @column-header-height;	 
		left: 0;
		right: 0;
		top: 0;
		cursor: default;
	}
	
	.dojoxCalendarColumnHeaderTable {
		border-collapse: collapse;
		table-layout: fixed;
		position: relative;
		margin: 0;
		padding: 0;			
		width: 100%;
		height: 100%;	
	
		td {	
			overflow:hidden;
			white-space: nowrap;
			vertical-align: middle;
			text-align: center;
			.header-background;
			border-right: @inner-border;
			border-top: @outer-border;
			border-bottom: @outer-border;
			.select-none;
			color: @label-color;
			.transition-duration(0.2s);
		}
	
		td.last-child {	
			border-right: @outer-border;	
		}
		
		td.first-child {	
			border-left: @outer-border;	
		}
		
		td.Hover{	
			cursor: pointer;		
			.header-hover-background;
		}
		
		td.Active{	
			.header-active-background;
		}
	}
	
	.dojoxCalendarDecoration {
		position: absolute;
		background-color: rgb(167, 23, 68);
		.opacity(20);
	}	
	 
	.dojoxCalendarEvent {
		position: absolute;	
		text-align: left;
		color: #FFF;
		cursor: default;
		overflow: hidden;
		
		.bg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;
			border: @event-border;
			.rounded-corners;
			background-color: @event-bg-color;
			.opacity(90);
		}
	
		.startTime {
			font-weight: bold;
		}
		
		.endTime {
			position: absolute;		
			font-weight: bold;	
			bottom:3px;
			left: 6px;
		}
		
		.beforeIcon {
			text-align: center;
		}
		
		.afterIcon {
			position: absolute;
			bottom: 2px;
			width: 100%;
			text-align: center;
		}
		
		.handle {
			.glass-view;
		}
		
		.moveHandle {
			position: absolute;
			top:0;
			width:100%;
			bottom:0;
			cursor:move;	
		}
		
		.resizeStartHandle {
			position: absolute;
			top:0;
			width:100%;
			height:10px;
			cursor:n-resize;	
		}
		
		.resizeEndHandle {
			position: absolute;
			bottom:0;
			width:100%;
			height:10px;
			cursor:n-resize;	
		}
		
		dl {
			margin: 0;
		}
		
		dd {
			margin: 0;
			padding: 0 3px;
			text-align: left;
		}
	}
	
	.dojoxCalendarEvent.Hovered .bg {
		background-color: #CC0000;	
	}
	
	.dojoxCalendarEvent.Selected .bg {
		background-color: #660000;
	}
	
	.dojoxCalendarEvent.Edited .bg {
		border: dashed 1px #FFFFFF;
		.opacity(70);
	}
	
	.dojoxCalendarEvent.Focused .bg {
		border: dashed 1px #FFFFFF;
	}
	
	.dojoxCalendarVScrollBar {
		position: absolute;
		top: @column-header-height;
		bottom: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}

}