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

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

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

	@labelFontSize: 3.906vw;
	@lineHeight: 3.906vw;
	@textFontSize: 3.5vw;
	@labelWidth: 23.438vw;
	@inputPaddingLeft: 26.5vw;

	@buttonVerticalMargin: 1.953vw;
	@buttonHorizontalMargin: 1.563vw;


	.dhx_cal_overflow_container {
		overflow: auto !important;
	}

	.dhx_cal_light.dhx_cal_light_responsive {
		width: 98vw !important;
		height: auto !important;
		left: 1% !important;
		top: @buttonVerticalMargin !important;
		font-size: @labelFontSize !important;
		line-height: @labelFontSize !important;
		padding-bottom: 2vw;

		.dhx_btn_set  {
			margin-bottom: @buttonVerticalMargin !important;
			font-size: @labelFontSize;
			height: auto !important;
			padding: @buttonVerticalMargin @buttonHorizontalMargin @buttonVerticalMargin @buttonHorizontalMargin;
		}

		.dhx_btn_set div{
			height: 2.93vw;
			line-height: 2.93vw;
			padding: 0 1.563vw;
		}

		.dhx_cal_larea {
			width: auto !important;
			margin-left: 0 !important;
			height: 100% !important;
			label{
				display: inline;
			}
		}

		.dhx_cal_lsection {
			font-size: @labelFontSize !important;
			width: @labelWidth !important;
			margin-left: 3vw;
			line-height: @lineHeight !important;
			margin-right: 0;
			.dhx_custom_button {
				padding: @lightbox-responsive-btn-rec-padding;
				min-width: 25.391vw !important;
				min-height: 5.371vw;
			}
		}

		.dhx_cal_ltitle {
			height: 2rem !important;
			line-height: 2rem !important;
			span {
				font-size: @labelFontSize !important;
			}
			margin-bottom:0.5rem;
		}

		textarea, select,
		.dhx_wrap_section .dhx_section_time select,
		.dhx_cal_lsection div.dhx_custom_button,
		.dhx_cal_template,
		.dhx_cal_radio {
			font-size: @textFontSize;
			line-height: @textFontSize;

			label {
				margin: 1vw 3vw 1vw 0.5vw;
				vertical-align: top;
			}
		}

		select,
		.dhx_section_time select {
			min-height: 5.859vw;
		}

		.dhx_cal_ltext {
			margin-left: @inputPaddingLeft !important;
			height: 100% !important;
			min-height: 4.883vw;
		}

		.dhx_repeat_center,
		.dhx_repeat_left,
		.dhx_repeat_divider,
		.dhx_repeat_right{
			height:11.23vw;
		}

		.dhx_wrap_section .dhx_section_time {
			padding-left: 28.5vw !important;
			width: auto !important;
			min-height: 19.531vw !important;
			select {
				float: left;
				margin: 1.465vw 0.5vw 1.465vw 0.5vw !important;
			}
			.dhx_lightbox_time_select {
				width: @lightbox-responsive-time-select-width;
				padding-left: @lightbox-responsive-time-select-padding;
			}
			.dhx_lightbox_day_select {
				min-width: 7.813vw !important;
			}
			.dhx_lightbox_year_select {
				min-width: @lightbox-responsive-year-select-width;
			}
			.dhx_lightbox_month_select {
				width: @ligthbox-responsive-month-select-width;
			}
		}

		.dhx_cal_wide_checkbox {
			height: 100% !important;
		}

		.dhx_multi_select_control {
			height: 100% !important;

			input {
				vertical-align: middle;
			}
			vertical-align: middle;
		}

		input {
			width: 4.883vw;
			height: 4.883vw;
		}

		.dhx_custom_button div{
			height: auto;
		}

		.dhx_custom_button .dhx_custom_button_recurring {
			background-size: 7.813vw !important;
			width: 6.836vw !important;
			height: 6.836vw !important;
			background-repeat: no-repeat !important;
			background-position: -25px -1px !important;
			padding-top: 0 !important;
		}



		.dhx_wrap_section {
			min-height: 7.813vw !important;
			max-width: 92.773vw !important;
			margin: 0.977vw 0;
		}

		.dhx_form_repeat {
			margin: 6.836vw 0 0 @labelWidth !important;
			form {
				height: 48.828vw !important;
			}
			div {
				width: @lightbox-responsive-form-repeat-width;
			}
			.dhx_repeat_left br{
				content:' ';
			}
			input{
				top: 1.465vw !important;
			}
			select {
				width: 14.648vw !important;
			}
			label {
				padding-right: @lightbox-responsive-repeat-label-padding;//15px;
				white-space: nowrap;
			}
			form,
			form select,
			.dhx_repeat_date,
			.dhx_repeat_text,
			label {
				font-size: 2.93vw !important;
				line-height: 2.93vw !important;
			}

			.dhx_repeat_center,
			.dhx_repeat_left,
			.dhx_repeat_divider,
			.dhx_repeat_right {
				height: auto;
				float: none;
			}

			.dhx_repeat_center {
				height: auto !important;
			}

			.dhx_repeat_center,
			.dhx_repeat_left {
				padding-bottom: 10px;
			}

			.dhx_repeat_text {
				width: 6.836vw !important;
				height: 5.859vw !important;
				border: @lightbox-responsive-repeat-text-border;
				background-color: @lightbox-responsive-repeat-text-back;
			}
			.dhx_repeat_checkbox {
				width: 2.93vw !important;
				height: 2.93vw !important;
			}

			.dhx_repeat_days label {
				font-size: 2.441vw !important;
				line-height: 2.5vw !important;
			}
			.dhx_repeat_right {
				height: auto !important;
				float: left;
				.dhx_repeat_date {
					width: 19.531vw !important;
					height: 7.813vw !important;
					padding-left: 1.465vw !important;
					margin-top: 1.465vw;
				}
			}
			.dhx_repeat_divider {
				border-top: 1px solid #CECECE;
				border-left: 0;
				width: 70vw;
				height: 1px;
			}
		}

		.dhx_custom_button div {
			/*padding-top: @ligthbox-responsive-recurring-btn-div-padding;*/
		}

		.dhx_fullday input {
			vertical-align:middle;
		}
		.combo {
			height: auto !important;
		}

		.dhx_custom_button .dhx_custom_button_recurring {
			background-position: -14px -1px !important;
			width: 4.836vw !important;
			height: 4.836vw !important;
		}
	}

	.dhx_cal_light_rtl.dhx_cal_light_responsive {

		.dhx_cal_larea {
			margin-right: 0 !important;
		}

		.dhx_cal_lsection {
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		.dhx_cal_ltext {
			margin-right: @labelWidth !important;
			margin-left: 0 !important;
		}

		.dhx_wrap_section .dhx_cal_wide_checkbox input[type="checkbox"] {
			margin:0.781vw 1.367vw 0 0;
		}

		.dhx_wrap_section .dhx_section_time {
			padding-right: @labelWidth !important;
			padding-left: 0 !important;
			select {
				float: right;
			}
			.dhx_lightbox_time_select {
				padding-right: @lightbox-responsive-time-select-padding;
				padding-left: 0 !important;
			}
			span {
				display: none;
			}
		}

		.dhx_form_repeat {
			margin: 6.836vw @labelWidth 0 0 !important;
			label {
				padding-left: @lightbox-responsive-repeat-label-padding;
				padding-right: 0 !important;
			}

			.dhx_repeat_right {
				float: left;
				.dhx_repeat_date {
					padding-right: 1.465vw !important;
					padding-left: 0 !important;
				}
			}
		}

		.dhx_multi_select_control.dhx_multi_select_control_vertical {
			float: right;
		}

		.dhx_multi_select_control {
			float: auto;
			float: unset;
		}
	}
}