dhtmlx-scheduler/codebase/sources/less/skins/basic/layout.less

JavaScript event calendar. Allows to manage events and appointments in different views

/* bootstrap CSS fix start */
.dhx_cal_navline div,
.dhx_cal_header,
.dhx_cal_header div,
.dhx_cal_data,
.dhx_cal_data div,
.dhx_cal_data table *,
.dhx_multi_day,
.dhx_multi_day div,
.dhx_tooltip_line div,
.dhx_cal_quick_info,
.dhx_cal_quick_info div,
.dhtmlx_modal_box *{
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.dhx_cal_light .dhx_wrap_section,
.dhx_cal_light .dhx_cal_lsection
{
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.dhx_form_repeat label{
  margin-bottom:0;
}

.dhx_cal_data div.dhx_scale_hour,
.dhx_cal_data table .dhx_matrix_cell, .dhx_cal_data table .dhx_matrix_scell{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.dhx_cal_event div {
  line-height: normal;
}

.dhx_cal_data table{
  border-collapse: separate;
}

// .dhx_cal_light .dhx_cal_radio label{
// 	margin-bottom: 0;
// }

.dhx_cal_light .dhx_cal_radio input[type="radio"] {
	margin: @lightbox-input-radio-margin;
}

.dhx_cal_light_rtl .dhx_cal_radio input[type="radio"] {
	margin: @lightbox-input-radio-margin-rtl;
}

.dhx_cal_light .dhx_cal_radio label {
	display: @lightbox-input-label-display;
	margin: @lightbox-input-label-margin;
	position: @lightbox-input-label-position;
	top: @lightbox-input-label-top;
}

.dhx_cal_light_rtl .dhx_cal_radio label {
	margin: @lightbox-input-label-margin-rtl;
}

.dhx_cal_event div {
  line-height: normal;
}
/* bootstrap CSS fix end */


.dhx_cal_container {
	position:relative;
	overflow:hidden;
	background-color:@container-background;
	font-family:@container-font-family;
	font-size:@container-font-size;
}

.dhx_cal_container div{
	-moz-user-select:none;
	-moz-user-select:-moz-none;
}

.dhx_cal_navline {
	height:@navline-height;
	position:absolute;
	z-index:3;
	width:750px;
	color:@navline-font-color;
}

.dhx_cal_navline div{
	position:absolute;
	white-space:nowrap;
	top: @navline-btn-top-position;
}

.dhx_cal_navline .dhx_cal_date {
	border: @nav-cal-date-border;
	font-size: @nav-cal-date-font-size;
	font-weight:@nav-cal-date-font-weight;
	font-family: @default-font-family;
	width: @nav-cal-date-width;
	text-align: @nav-cal-date-text-align;
	left:@nav-cal-date-position;
	padding: @nav-cal-date-padding;

	color: @nav-cal-date-font-color;
	z-index: @nav-cal-date-index;
}

.dhx_cal_button .dhx_left_bg{
	width:1px;
	overflow:hidden;
	height:17px;
	z-index:5;
	top:0px;
}

.dhx_cal_prev_button {
	cursor:pointer;
	right: @nav-prev-btn-position;
	background-color: @nav-btn-background;
	background-image:@nav-prev-btn-bg-img;
	background-position:@nav-prev-btn-bg-position;
	background-repeat: no-repeat;
	height:@nav-btn-height;
	width:@nav-btn-width;
	border: @nav-btn-border;
	border-radius: @nav-prev-btn-border-radius;
}

.dhx_cal_today_button {
	cursor:pointer;
	text-align:center;
	font-size: @nav-today-btn-font-size;
	font-weight: @nav-today-btn-font-weight;
	color: @nav-today-btn-font-color;
	right:@nav-today-btn-position;
	background-color: @nav-btn-background;
	background-image:@nav-today-btn-bg-img;
	background-position: @nav-today-btn-bg-position;
	background-repeat: no-repeat;
	height:@nav-btn-height;
	width:@nav-today-btn-width;
	border: @nav-today-btn-border;
	border-radius: @nav-today-btn-border-radius;
	text-decoration: @nav-today-btn-text-decor;
	text-transform: @nav-today-btn-text-transform;
}

.dhx_cal_next_button{
	cursor:pointer;
	right: @nav-next-btn-position;
	background-color: @nav-btn-background;
	background-image:@nav-next-btn-bg-img;
	background-position: @nav-next-btn-bg-position;
	background-repeat: no-repeat;
	height:@nav-btn-height;
	width:@nav-btn-width;
	border: @nav-btn-border;
	border-radius: @nav-next-btn-border-radius;
}


.dhx_cal_tab {
	width:@nav-tab-width;
	height:@nav-tab-height;
	background-color: @nav-tab-background;
	text-align:@nav-tab-text-align;
	text-decoration:@nav-tab-text-decor;
	text-transform:@nav-tab-text-transform;
	font-weight: @nav-tab-font-weight;
	padding-top:@nav-tab-padding;
	border-radius: @nav-tab-border-radius;
	cursor:@nav-tab-cursor;
	border: @nav-tab-border;
	color: @nav-tab-font-color;
	font-size: @nav-tab-font-size;

	&:hover {
		/*color: @nav-tab-text-hov-text-color;*/

	}
}

.dhx_cal_tab.active{
	text-decoration:@nav-act-tab-text-decor;
	cursor:@nav-act-tab-cursor;
	font-weight:@nav-act-tab-font-weight;
	font-size: @nav-act-tab-font-size;
	color: @nav-act-tab-font-color;
	border: @nav-act-tab-border;
	border-bottom: @nav-act-tab-border-botom;
	background-color: @nav-act-tab-background;
	z-index: 25;
}

.dhx_cal_tab_first {
	border-radius: @nav-tab-first-border-radius;
	border-right: 0;
}

.dhx_cal_tab_last {
	border-radius: @nav-tab-last-border-radius;
}

.dhx_cal_tab, .dhx_cal_date, .dhx_cal_today_button, .dhx_cal_prev_button, .dhx_cal_next_button {
	line-height: @nav-tab-line-height;
}

.dhx_cal_header {
	position:absolute;
	overflow:hidden;
	left: @col-header-left-pos;
	background: @col-header-background;
	border-top: @col-header-border-top;
	border-right: @col-header-border-right;
	z-index: @col-header-index;
}

.dhx_cal_container_rtl .dhx_cal_header {
	left: unset;
}

.dhx_cal_data {
	-webkit-tap-highlight-color:transparent;
	border-top: @data-container-border-top;
	position:absolute;
	width:600px;
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
}

.dhx_cal_container_rtl .dhx_cal_data {
	direction: rtl;
}

.dhx_cal_data,
.dhx_cal_event, .dhx_cal_event_line, .dhx_cal_event_clear{
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}

.dhx_scale_bar {
	position:absolute;
	text-align: @col-header-cell-text-align;
	background-color:@col-header-cell-background;
	padding:@col-header-cell-padding;
	border-left:@col-header-cell-border-left;
	font-size: @col-header-cell-font-size;
	font-weight: @col-header-cell-font-weight;
	line-height: @col-header-cell-line-height;
	color: @col-header-font-color;
}

.scheduler_container_resize_watcher{
	background:transparent;
	width: 100%;
	height:100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	pointer-events:none;
	border:0;
	box-sizing: border-box;
	opacity: 0;
}


.dhx_scale_holder{
	position:absolute;
	border-right: @scale-column-border-right;
	background-image: @scale-column-background-img;
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.dhx_cal_container_rtl .dhx_scale_holder {
	border-left: @scale-column-border-right;
	border-right: 0;
}
.dhx_cal_container_rtl .dhx_cal_header {
	border-right: 0;
	border-left: @col-header-border-right;
}
.dhx_cal_container_rtl .dhx_scale_bar {
	border-left: 0;
	border-right: @scale-column-border-right;
}
.dhx_cal_container_rtl .dhx_month_head{
	border-right: 0;
	border-left: @scale-column-border-right;
}
.dhx_cal_container_rtl .dhx_month_body{
	border-right: 0;
	border-left: @scale-column-border-right;
}

.dhx_scale_holder_now {
	position:absolute;
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.dhx_scale_holder_now {
	position:absolute;
	border-right: @scale-column-border-right;
	background-image: @scale-column-now-background-img;
}

.dhx_cal_container_rtl .dhx_scale_holder_now{
	border-right: 0;
	border-left: @scale-column-border-right;
}

.dhx_scale_hour {
	border-bottom: @scale-hour-border-bottom;
	background-color: @scale-hour-background;
	text-align: @scale-hour-text-align;
	line-height: @scale-hour-line-height;
	color: @scale-hour-font-color;
	font-size: @scale-time-font-size;
	font-weight: @scale-time-font-weight;
	overflow:hidden;

}




.dhx_month_head {
	height: @daybox-title-height;
	padding: @daybox-title-padding;
	font-size: @daybox-title-font-size;
	font-weight: @daybox-title-font-weight;
	line-height: @daybox-title-line-height;
	color: @daybox-title-color;
	border-right: @daybox-title-border-right;
	background-color: @daybox-title-background;
	text-align: @daybox-title-text-align;
}

.dhx_cal_container_rtl .dhx_month_head {
	text-align: @daybox-title-text-align-rtl;
	padding: @daybox-title-padding-rtl;
}

.dhx_after  .dhx_month_head, .dhx_before .dhx_month_head{
	background-color:@other-month-daybox-title-background;
	color: @other-month-daybox-title-font-color;
}

.dhx_now .dhx_month_head{
	background-color: @current-daybox-title-background;
	font-weight: @current-daybox-title-font-weight;
}

.dhx_scale_hour_border { 							// was is daas ?
	border-left: 1px dotted #8894A3;
}

.dhx_month_body{
	border-right: @daybox-body-border-right;
	border-bottom: @daybox-body-border-bottom;
	background-color: @daybox-body-background;
}

.dhx_after  .dhx_month_body, .dhx_before .dhx_month_body{
	background-color: @other-month-daybox-body-background;
}

.dhx_now .dhx_month_body{
	background-color: @current-daybox-body-background;
}

.dhx_now .dhx_month_head{
	background-color: @current-daybox-body-background;
}

.dhx_scale_ignore{
	display: none;
}

.dhx_cal_drag{
	position:absolute;
	z-index:13;
	background-color:#FFE763;
	border:1px solid #B7A543;
	opacity:0.5;
	filter:alpha(opacity=50);
}
.dhx_loading{
	position:absolute;
	width:128px;
	height:15px;
	background-image:url(imgs/loading.gif);
	z-index:13;
}

.dhx_multi_day_icon, .dhx_multi_day{
	background-color: @multi-day-background;
	border-right:@multi-day-border-right;
}

.dhx_multi_day{
	position: absolute;
	border-top: @multi-day-border-top;
	background-color: @multi-day-icon-background;
	border-right: none;
	box-shadow: none;
}

.dhx_cal_container_rtl .dhx_multi_day {
	direction: rtl;
}

.dhx_multi_day_icon, .dhx_multi_day_icon_small{
	background-color: @multi-day-icon-background;
	background-position: @multi-day-icon-bg-position;
	border-bottom: @multi-day-icon-border-bottom;
	border-right: @multi-day-icon-border-right;
	background-repeat: @multi-day-icon-bg-repeat;
}

.dhx_cal_container_rtl {
	.dhx_multi_day_icon, .dhx_multi_day_icon_small{
		border-right: 0;
		border-left: @multi-day-icon-border-right;
	}
}

.dhx_multi_day_icon {
	background-image: @multi-day-large-icon-img;
}

.dhx_multi_day_icon_small{
	background-image: @multi-day-small-icon-img;
}

.dhtmlxLayoutPolyContainer_dhx_skyblue 	.dhx_cal_container {
	background-color: #d0e5ff;
}

/* left border config option support */
.dhx_scale_hour_border, .dhx_month_body_border, .dhx_scale_bar_border, .dhx_month_head_border {
	border-left: 1px dotted #8894A3;
}

/* export to PDF and iCal buttons start */
.dhx_cal_navline .dhx_cal_export{
    width:18px;
    height:18px;
    margin:2px;
    cursor:pointer;
    top: 0px;
}
.dhx_cal_navline .dhx_cal_export.pdf{
    left: 2px;
    background-image:url('imgs/export_pdf.png');
}
.dhx_cal_navline .dhx_cal_export.ical{
    left: 24px;
    background-image:url('imgs/export_ical.png');
}
/* export to PDF and iCal buttons end */


.dhx_cal_navline.dhx_cal_navline_flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 1vw;
	box-sizing: border-box;


	.dhx_cal_tab{
		box-sizing: border-box;
		height:32px;
	}


	.dhx_cal_tab_last{
		margin-right: 14px;
	}

	/*.dhx_cal_tab_standalone{
		margin-left: 14px;
	}*/

	.dhx_cal_tab{
		border-left-style:none;
		box-shadow: -1px 0 0 @nav-tab-border-color;
	}

	.dhx_cal_date{
		width: auto;
		flex-grow: 1;
	}

	div{
		position: static;
	}

	.dhx_cal_navbar_row{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 1vw;
		box-sizing: border-box;
		height:100%;
		width:100%;
		flex-grow: 1;
		flex-shrink: 1;
	}

	.dhx_cal_prev_button + .dhx_cal_next_button{
		border-left-style:none;
	}

	.dhx_cal_navbar_rows_container{
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
		flex-grow:1;
		height: 100%;
	}
	.dhx_cal_line_break, .dhx_cal_line_spacer{
		display:block;
		width: auto;
		flex-grow: 1;
	}
}

.dhx_cal_navline.dhx_cal_navline_flex {
	.dhx_cal_today_button, .dhx_cal_tab_standalone{
		margin: 0 7px;
	}
}

@media only screen and (max-width: 1023px) {
	.dhx_cal_navline.dhx_cal_navline_flex {

		.dhx_cal_tab, .dhx_cal_tab.active, .dhx_cal_today_button {
			min-width: 4vw;
			font-size: 1.3vw;
			box-sizing: content-box;
			padding: 0 0.5vw;
			width: auto;
		}

		.dhx_cal_tab,
		.dhx_cal_tab.active,
		.dhx_cal_today_button,
		.dhx_cal_prev_button,
		.dhx_cal_next_button{
			height: 2.5vw;
			line-height: 2.5vw;
		}

		.dhx_cal_tab_last{
			margin-right: 2vw;
		}
	}
}

@media only screen and (max-width: 840px) {
	.dhx_cal_navline.dhx_cal_navline_flex {

		.dhx_cal_tab, .dhx_cal_tab.active, .dhx_cal_today_button {
			min-width: 4vw;
			font-size: 1.5vw;
			box-sizing: content-box;
			padding: 0 0.5vw;
			width: auto;
		}

		.dhx_cal_tab,
		.dhx_cal_tab.active,
		.dhx_cal_today_button,
		.dhx_cal_prev_button,
		.dhx_cal_next_button{
			height: 4vw;
			line-height: 4vw;
		}

		.dhx_cal_tab_last{
			margin-right: 1vw;
		}

		.dhx_cal_date{
			font-size: 2.5vw;
		}
	}
}

@media only screen and (max-width: 480px) {
	.dhx_cal_navline.dhx_cal_navline_flex {
		.dhx_cal_tab, .dhx_cal_tab.active, .dhx_cal_today_button {
			font-size: 0.8rem;
			padding: 0 2vw;
		}

		.dhx_cal_tab,
		.dhx_cal_tab.active,
		.dhx_cal_today_button,
		.dhx_cal_prev_button,
		.dhx_cal_next_button{
			height: 6vw;
			line-height: 6vw;
		}

		.dhx_cal_prev_button,
		.dhx_cal_next_button{
			width: 2rem;
		}

		.dhx_cal_date{
			font-size: 4vw;
		}
	}
}

.dhx_cal_touch_active{
	overscroll-behavior: none;
}