dojox/calendar/themes/nihilo/ColumnView.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 .dojoxCalendarColumnView {
	cursor: default;
	-webkit-user-select: none;

	.dojoxCalendarHeader {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: @column-header-height - 1px;
		.border-box;
	}

	.dojoxCalendarScrollContainer {
		left: 0;
		right: 0;
		bottom: 0;
		top: @sheet-top;
		position: absolute;
		overflow-y: hidden;
		overflow-x: hidden;
		border-top: @outer-border;
		border-bottom: @outer-border;
		.border-box;
	}

	.dojoxCalendarGrid {
		position: absolute;
		left: @row-header-width;
		right: 0;
		overflow: hidden;
	}

	.dojoxCalendarGrid.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}

	.dojoxCalendarGridTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;

	 	td {
			border-top: dotted 1px @outer-border;
			border-right: @inner-border;
			.border-box;
		}

		tr:first-child td	{
			border-top: 1px solid transparent;
		}

		.dojoxCalendarToday {
			background-color: @today-color;
		}

		tr td.last-child	{
			border-right: @outer-border;
		}

		.tr:first-child td.dojoxCalendarToday	{
			border-top: 1px solid @today-color;
		}

		.dojoxCalendarWeekend {
			background-color: @week-end-color;
		}

		tr:first-child td.dojoxCalendarWeekend	{
			border-top: 1px solid @week-end-color;
		}
	}


	td.hour {
		border-top: @hour-stroke;
	}

	td.halfhour{
		border-top: @half-hour-stroke;
	}

	td.quarterhour{
		border-top: @quarter-hour-stroke;
	}

	span.hour {
		color: @label-color;
		background-color: @row-color;
	}

	span.halfhour,
	span.quarterhour{
		color: @secondary-label-color;
		background-color: @row-color;
	}

	.dojoxCalendarContainer {
		position: absolute;
		top: 0;
		left: @row-header-width;
		right: 0;
		cursor: default;
		overflow: hidden;

		table {
			background-color: transparent;

			tr {
				background-color: transparent;

				td {
					background-color: transparent;
				}
			}
		}
	}

	.dojoxCalendarContainer.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}

	.dojoxCalendarContainerTable {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;
		position: relative;
		margin: 0;
		padding: 0;

		td {
			height: 100%;
			padding: 0;
			vertical-align: top;
			border-right: 1px solid transparent;
		}
	}

	.dojoxCalendarContainerColumn {
		position: relative;
		width:100%;
	}

	.dojoxCalendarSubContainerColumn {
		position: absolute;
		top: 0;
		.border-box;
		height:100%;
	}

	.dojoxCalendarEventContainerColumn {
		position: absolute;
		height: 100%;
		left:0;
		top:0;
		right:0;
		margin-left: 1px;
		margin-right: 5px;
	}

	.dojoxCalendarDecorationContainerColumn {
		position: absolute;
		height: 100%;
		left:0;
		top:0;
		right:0;
	}

	.dojoxCalendarSubContainerColumn.subColumn {
		border-right: @sub-column-border;
	}

	.dojoxCalendarEventContainer {
		position: absolute;
		overflow: hidden;
		.select-none;
	}

	.dojoxCalendarYearColumnHeader{
		position: absolute;
		height: @column-header-height - 1px;
		left: 0;
		width: @row-header-width - 2px;
		top: 0;
		border-left: @outer-border;
		border-top: @outer-border;
		border-right: @outer-border;

		table {
			position:relative;
			width:100%;
			height:100%;
		}

		table td {
			text-align: center;
			vertical-align: middle;
			border-bottom: @outer-border;
			color: @label-color;
			.header-background;
		}
	}

	.dojoxCalendarColumnHeader {
		position: absolute;
		height: @column-header-height;
		left: @row-header-width;
		right: 0;
		top: 0;
		cursor: default;
		overflow: hidden;
	}

	.dojoxCalendarColumnHeader.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}

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

		.dojoxCalendarToday {
			font-weight: bold;
			color: @today-label-color;
		}

		.dojoxCalendarWeekend {
			color: @week-end-label-color;
		}

		td.Hover{
			cursor: pointer;
			.header-hover-background;
		}

		td.Active{
			.header-active-background;
		}
	}

	.dojoxCalendarSubHeader {
		position: absolute;
		left: 0;
		right: 0;
		top: 72px;
		height: @sub-column-header-height;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: none;
	}

	.dojoxCalendarSubColumnHeader {
		position: absolute;
		height: @sub-column-header-height;
		left: @row-header-width;
		right: 0;
		top: 0px;
		cursor: default;
		overflow: hidden;
	}

	.dojoxCalendarSubColumnHeader.dojoxCalendarHorizontalScroll {
		border-right: @outer-border;
	}

	.dojoxCalendarSubColumnHeaderTable {
		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;
			border-right: @inner-border;
			border-top: @outer-border;
			-moz-user-select: none;
			-webkit-user-select: none;
			khtml-user-select: none;
			user-select: none;
			color: #000000;
		}
		td.last-child {
			border-right: @outer-border;
		}
		td.dojoxCalendarToday {
			background-color: @today-color;
		}
		td.dojoxCalendarWeekend {
			background-color: @week-end-color;
		}
	}

	.dojoxCalendarSubHeaderContainer {
		position: relative;
		width:100%;
		height: @sub-column-header-height - 2px;
	}

	.dojoxCalendarSubHeaderCell {
		position: absolute;
		top: 0;
		.border-box;
		height:100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dojoxCalendarSubHeaderCell.subColumn {
		border-right: @sub-column-border;
	}

	.dojoxCalendarSubHeaderLabel {
		font-size: 0.9em;
		color: #555;
	}

	.dojoxCalendarSubRowHeader {
		position: absolute;
		height: @sub-column-header-height;
		left: 0;
		width: @row-header-width - 2px;
		top: 0;
		border-left: @outer-border;
		border-right: @outer-border;

		table {
			position: relative;
			width: 100%;
			height: 100%;

			td {
				border-top: @outer-border;
				background-color: #efefef;
			}
		}
	}

	.dojoxCalendarRowHeader {
		position: absolute;
		width: @row-header-width - 2px;
		cursor: default;
		border-left: @outer-border;
		border-right: @outer-border;
		height: 100%;
		.select-none;
	}

	.dojoxCalendarRowHeaderLabelContainer{
		width: 100%;
		height: 100%;
		z-index: 10;
	}

	.dojoxCalendarRowHeaderLabel{
		right: 4px;
		position: absolute;
	}

	.dojoxCalendarRowHeaderTable {
		border-collapse: collapse;
		table-layout: fixed;
		position: relative;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;

		td.dummy{
			border-top: 1px solid @row-color;
		}

		td {
			background-color: @row-color;
			color: @label-color;
			.border-box;
		}

		tr:first-child td	{
			border-top: 1px solid @row-color;
		}
	}

	.dojoxCalendarDecoration {
		position:absolute;
		background-color: rgb(167, 233, 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);
		}

		.endTime {
			position: absolute;
			font-weight: bold;
			bottom:3px;
			left: 6px;
			white-space:nowrap;
		}

		.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: @event-hovered-bg-color;
	}

	.dojoxCalendarEvent.Selected .bg {
		background-color: @event-selected-bg-color;
	}

	.dojoxCalendarEvent.Edited .bg {
		border: @event-border-focused;
		.opacity(70);
	}

	.dojoxCalendarEvent.Focused .bg {
		border: @event-border-focused;
	}

	.dojoxCalendarEvent .startTime {
		.event-header;
		background-color: @event-header-bg-color;
		.top-left-right-border(@event-border);
	}

	.dojoxCalendarEvent.Focused .startTime {
		.top-left-right-border(@event-border-focused);
	}

	.dojoxCalendarEvent.Hovered .startTime {
		background-color: @event-header-hovered-bg-color;
	}

	.dojoxCalendarEvent.Selected .startTime {
		background-color: @event-header-selected-bg-color;
	}

	.dojoxCalendarEvent.Edited .startTime {
		background-color: @event-header-bg-color;
		.top-left-right-border(@event-border-focused);
	}

	.dojoxCalendarVScrollBar {
		position: absolute;
		top: @sheet-top;
		bottom: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.dojoxCalendarHScrollBar {
		position: absolute;
		bottom: 0;
		left: @row-header-width;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.dojoxCalendarMatrixView {
		position: absolute;
		left: 0;
		right: 0;
		top: @column-header-height;
		height: @secondary-sheet-height;

		.dojoxCalendarGrid {
			position: absolute;
			left: @row-header-width;
			right: 0;
			top: 0;
			bottom: 0;
			.border-box;
		}

		.dojoxCalendarContainer {
			position: absolute;
			top: 0;
			left: @row-header-width;
			right: 0;
			bottom: 0;
			cursor: default;
		}

		.dojoxCalendarRowHeader {
			position: absolute;
			left: 0;
			top: 0;
			width: @row-header-width;
			bottom: 0;

			border-right: none;
			border-left: none;
			.border-box;
		}

		.dojoxCalendarGridTable{

			td {
				text-align: right;
				vertical-align: top;
				border-top: @inner-border;
				border-bottom: @inner-border;
				border-right: @inner-border;
				.border-box;
			}

			tr.last-child td	{
				border-bottom: @outer-border;
			}

			td.last-child	{
				border-right: @outer-border;
			}

		}

		.dojoxCalendarRowHeaderTable td {
			border-top: @inner-border;
			border-left: @outer-border;
			border-right: @outer-border;
			border-bottom: @outer-border;
			background-color: @row-color;
		}

		.dojoxCalendarEvent {
			.handle {
				.glass-view;
				position: absolute;
				width:5px;
				height:100%;
				cursor:e-resize;
			}

			.moveHandle {
				left:0;
				top:0;
				width:100%;
				cursor:move;
			}

			.resizeEndHandle {
				right:0px;
			}

			.afterIcon {
				width:auto;
			}

			.endTime {
				position: relative;
				bottom:auto;
				left: auto;
			}
		}

		.dojoxCalendarEvent.dojoxCalendarHorizontal .labels {
			position: absolute;
			left: 3px;
			right: 1px;
			bottom: 2px;
			overflow: hidden;
		}

		.dojoxCalendarExpand {
			position: absolute;
			text-align: center;

			.bg {
				position: relative;
				margin-right: 10%;
				margin-left: 10%;
				border-radius: 5px;
				height: 100%;
				.select-none;
				border: 1px solid transparent;
				-moz-border-radius: 5px;
				-webkit-transition-duration: 0.2s;
				-moz-transition-duration: 0.2s;
				transition-duration: 0.2s;
			}
		}

		.dojoxCalendarExpand.Up .bg {
			background-color: @expand-up-color;
			border: 1px solid @expand-up-color - #555;
		}

		.dojoxCalendarExpand.Down .bg {
			background-color: @expand-down-color;
			border: 1px solid @expand-down-color - #555;
		}

		.dojoxCalendarEvent div {
			white-space:nowrap;
		}
	}

	.dojoxCalendarTimeIndicator {
		position: absolute;
		left:0;
		height: 2px;
		width:100%;
		background-color: red;
	}
}

.nihilo .dojoxCalendarColumnView.subColumns {
	.dojoxCalendarScrollContainer {
		top: @sheet-top-subcolumns;
	}
	.dojoxCalendarSubHeader {
		top: @column-header-height + 3px;
		display: block;
	}
	.dojoxCalendarVScrollBar {
		top: @sheet-top-subcolumns;
	}
}

.nihilo .dojoxCalendarColumnView.secondarySheet {
	.dojoxCalendarScrollContainer {
		top: @sheet-top-secondary-sheet;
	}
	.dojoxCalendarSubHeader {
		top: @column-header-height + @secondary-sheet-height + 3px;
		display: none;
	}
	.dojoxCalendarVScrollBar {
		top: @sheet-top-secondary-sheet;
	}
}

.nihilo .dojoxCalendarColumnView.subColumns.secondarySheet {
	.dojoxCalendarScrollContainer {
		top: @sheet-top-subcolumns-secondary-sheet;
	}
	.dojoxCalendarSubHeader {
		top: @column-header-height + @secondary-sheet-height + 3px;
		display: block;
	}
	.dojoxCalendarVScrollBar {
		top: @sheet-top-subcolumns-secondary-sheet;
	}
}