dojox/calendar/themes/iphone/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";

.dojoxCalendarColumnView {
  cursor: default;
	-webkit-user-select: none;
}

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

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

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

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

.dojoxCalendarColumnView .dojoxCalendarGridTable td {
	border-top: dotted 1px #B5BCC7;
	border-right: @outer-border;
	.border-box;
}

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

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

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

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

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

.dojoxCalendarColumnView .dojoxCalendarContainer {
	position: absolute;
	top: 0;
	left: @row-header-width;
	right: 0;
	cursor: default;
    
	table {
		background-color: transparent;

		tr {
			background-color: transparent;

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

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

.dojoxCalendarColumnView .dojoxCalendarContainerTable td {
	height: 100%;
	padding: 0;
	vertical-align: top;
}

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

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

.dojoxCalendarColumnView .dojoxCalendarEventContainerColumn {
	position: relative;
	height:100%;
	margin-left: 1px;
	margin-right: 5px;
}

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

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

.dojoxCalendarColumnView .dojoxCalendarYearColumnHeader{
	position: absolute;
	height: @column-header-height;
	left: 0;
	width: @row-header-width;
	top: 0;
	text-align: center;
	.header-background;
	.border-box;
}

.dojoxCalendarColumnView .dojoxCalendarYearColumnHeader table {
	position:relative;
	width:100%;
	height:100%;
}

.dojoxCalendarColumnView .dojoxCalendarYearColumnHeader table td {
	text-align: center;
	vertical-align: middle;
	color: @header-label-color;
}

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

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

.dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable td {
	overflow:hidden;
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
	.header-background;
	color: @header-label-color;
	border-right: @transparent-border;
	border-top: @transparent-border;
	border-bottom: @outer-border;
	.select-none;
	.transition-duration(0.2s);
}

/*
 * The dojoxCalendarToday & dojoxCalendarWeekend classes is added by the
 * ColumnView.styleColumnHeaderCell method that can be subclassed to add/remove css classes
 */
.dojoxCalendarColumnView .dojoxCalendarColumnHeaderTable .dojoxCalendarToday {
	color: @today-label-color;
}

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

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

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

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

/*
 * The ColumnView.styleRowHeaderCell method that can be subclassed to add/remove css classes per hour.
 */
.dojoxCalendarColumnView .dojoxCalendarRowHeaderTable td {
	vertical-align: top;
	text-align: right;
	color: @header-label-color;
	border-top: 1px solid transparent;
}

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

.dojoxCalendarColumnView .dojoxCalendarRowHeaderTable td span {
 	padding-top: 2px;
	padding-right: 4px;
}

.dojoxCalendarColumnView .dojoxCalendarEvent {
	position: absolute;
	text-align: left;
	color: #FFF;
	cursor: default;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	border: 1px solid #260000;
	.rounded-corners;
	background-color: #9F0000;
	.opacity(90);
}

.dojoxCalendarColumnView .dojoxCalendarEvent.Hovered .bg {
	background-color: #CC0000;
}

.dojoxCalendarColumnView .dojoxCalendarEvent.Selected .bg {
	background-color: #660000;
}

.dojoxCalendarColumnView .dojoxCalendarEvent.Edited .bg {
	border: dashed 1px #FFFFFF;
	.opacity(70);
}

.dojoxCalendarColumnView .dojoxCalendarEvent.Focused .bg {
	border: dashed 1px #FFFFFF;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .summary {
}

.dojoxCalendarColumnView .dojoxCalendarEvent .startTime {
	font-weight: bold;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .endTime {
	position: absolute;
	font-weight: bold;
	bottom:10px;
	left: 3px;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .beforeIcon {
	text-align: center;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .afterIcon {
	position: absolute;
	bottom: 2px;
	width: 100%;
	text-align: center;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .handle {
	.glass-view;
}

.dojoxCalendarEvent .resizeHandle div {
	position:absolute;
	left: 3px;
	right: 3px;
	top: 2px;
	height: 24px;
	background-color: #fff;
	.opacity(30);
	.rounded-corners(5px);
}

.dojoxCalendarEvent .resizeHandle div:active {
	.opacity(60);
}

.dojoxCalendarColumnView .dojoxCalendarEvent .moveHandle {
	position: absolute;
	top:0;
	width:100%;
	bottom:0;
	cursor:move;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .resizeStartHandle {
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	height:30px;
	z-index: 2;
}

.dojoxCalendarColumnView .dojoxCalendarEvent .resizeEndHandle {
	position: absolute;
	bottom:0;
	left: 0;
	right: 0;
	height:30px;
	z-index: 2;
}

.dojoxCalendarColumnView .dojoxCalendarEvent dl {
	margin: 0;
}

.dojoxCalendarColumnView .dojoxCalendarEvent dd {
	margin: 0;
	padding: 0 3px;
	text-align: left;
}

.dojoxCalendarEvent.Edited dd {
	margin-top: 7px
}

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

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

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

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

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

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

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

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

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

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarRowHeaderTable td {
	border-top: @inner-border;
	border-right: @outer-border;
	border-bottom: @outer-border;
}

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

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxHorizontal.Edited .labels {
	left: 33px;
	right: 31px;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent.dojoxLabel .labels {
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 0;
	overflow: hidden;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeHandle {
	top: auto;
	text-align: auto;
	position: absolute;
	width:30px;
	height:100%;
	background-color: #fff;
	.opacity(0);
	.rounded-corners(5px);
	color: #000;
	text-align: center;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeHandle div {
	position:auto;
	width: auto;
	height: auto;
	left:auto;
	right: auto;
	top: auto;
	bottom:auto;
	background-color: none;
	.opacity(100);
	border: none;
}


.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeStartHandle span {
	position: absolute;
	bottom: 2px;
	left: 10px;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeEndHandle span {
	position: absolute;
	bottom: 2px;
	left: 10px;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .moveHandle {

	position: absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeStartHandle {
	right: auto;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .resizeEndHandle {
	right:0px;
	left:auto;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent.Edited .resizeHandle {
	.opacity(30);
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .afterIcon {
	width:auto;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarEvent .endTime {
	position: relative;
	bottom:auto;
	left: auto;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand {
	position: absolute;
	text-align: center;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand .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;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand.Up .bg {
	background-color: @expand-up-color;
	border: @inner-border;
}

.dojoxCalendarColumnView .dojoxCalendarMatrixView .dojoxCalendarExpand.Down .bg {
	background-color: @expand-down-color;
	border: @inner-border;
}

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