c1-cms/styles/default/dialogs/dialogs.less

Contains React components distributed with C1 CMS.

ui|dialogset,
ui|dialog,
ui|dialoghead,
ui|dialogbody,
ui|dialogpage,
ui|wizardpage {
	display: block;
}

ui|dialogcover {
	position: absolute;
	height: 100%; /* adjusted by script */
	width: 100%; /* adjusted by script */
	left: 0;
	top: 0;
	z-index: 2; /* adjusted by script */
	background-color: #000;
	.opacity(0.3);
}

ui|dialogset {
	overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: @dialogset-zindex; /* below popupset */
}

ui|dialog {
	background-color: @dialog-bg-color;
	overflow: hidden;
	position: absolute;
	z-index: @dialog-zindex; /* above shadow - adjusted by script */
	margin-top: -10000px;
	padding: 0px; /* override chrome user agent stylesheet 1em */
	border-radius: @dialog-border-radius;
	border: solid 1px @dialog-border-color;
}

ui|dialoghead {
	background: @dialog-header-bg-color;

	ui|titlebarbody {
		padding: 20px 15px 18px 0px;
	}
}

ui|dialogbody {
	padding-top: 0 !important;
	width: 100%; /* ie bug */
	overflow: hidden;
}

//== Dialog Page and Wizard Page
ui|dialogpage, ui|wizardpage {
	height: 100%;
	width: 100%;
	overflow: hidden;
	visibility: hidden;

	&.auto {
		height: auto;
	}

	ui|scrollbox {
		ui|fields {
			padding: 20px 25px;
		}

		.padded ui|fields {
			padding: 0;
		}
	}

	ui|pagebody {
		padding: 20px 25px;
		border-top: 1px solid @dialog-border-color;

		&.filled {
			padding: 0;
		}
	}
}

ui|dialogpage {

	&.with-top-toolbar {

		ui|toolbar:first-child {
			padding-top: 0;
			background: @dialog-header-bg-color;
		}

		ui|pagebody {
			border-top: 0;
		}
	}

	&.tabboxed {

		ui|pagebody {
			padding-top: 0;
			border-top: 0;
		}

		ui|tabs {
			background: @dialog-header-bg-color;
		}

		ui|pagebody > ui|tabbox {
			margin: 0 -25px;
		}

		ui|tabpanels {

			ui|fields {
				padding: 20px 25px;
			}

			.padded ui|fields {
				padding: 0;
			}
		}
	}
}


@media (min-width: 700px) { // usage: fix dialog UI for Compsoite.Forms.FormBuilder function properties
	ui|dialogpage ui|field, .dialogsubpage ui|field {
		width: 430px;
		border: solid 1px @fields-group-border-color;
		border-width: 0 1px;
		background: transparent;
		padding: 0 17px;

		&.first {
			padding-top: 8px;
			border-top-width: 1px;
			border-top-left-radius: @base-border-radius;
			border-top-right-radius: @base-border-radius;
		}

		&:last-of-type {
			padding-bottom: 25px;
			border-bottom-width: 1px;
			border-bottom-left-radius: @base-border-radius;
			border-bottom-right-radius: @base-border-radius;
		}
	}
}

// Basic Function View
@functionsbasic-column-width: 365px;
@functionsbasic-column-gap: 20px;

ui|dialogpage.functionview-basic {

	ui|field {
		width: @functionsbasic-column-width;
		border-radius: @base-border-radius;
		border: 0;
		padding: 0;
		display: table;
		overflow: visible;
		position: relative;
		-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
		page-break-inside: avoid; /* Firefox */
		break-inside: avoid; /* IE 10+ */
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
			display: inline-block;
		}
		/* IE 10, 11 */


		ui|fielddata {
			width: @functionsbasic-column-width;
		}

		&.fieldhelp {
			ui|fielddata {
				width: @functionsbasic-column-width - 30px;
			}
		}
	}


	ui|fieldgroup {
		-webkit-column-width: @functionsbasic-column-width; /* Chrome, Safari, Opera */
		-moz-column-width: @functionsbasic-column-width; /* Firefox */
		column-width: @functionsbasic-column-width;
		-moz-column-gap: @functionsbasic-column-gap;
		-webkit-column-gap: @functionsbasic-column-gap;
		column-gap: @functionsbasic-column-gap;
	}
}

.dialogsubpage {
	height: auto;
	min-height: 100%; /* IE relies on flexibility instead */
	&.with-top-toolbar {
		ui|toolbar {
			padding-top: 0;
			background: @dialog-header-bg-color;
		}
	}

	ui|fieldgroup {
		width: 100%;
	}
}


ui|dialogborder {
	position: absolute;
	overflow: hidden;
	z-index: 4;

	&.n {
		top: 0;
		left: 0;
		width: 100%;
		height: 4px;
	}

	&.s {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4px;
	}

	&.w {
		top: 0;
		left: 0;
		width: 4px;
		height: 100%;
	}

	&.e {
		top: 0;
		right: 0;
		width: 4px;
		height: 100%;
	}
}

ui|dialog.resizable ui|dialogborder {

	&.n {
		cursor: n-resize;
	}

	&.s {
		cursor: s-resize;
	}

	&.w {
		cursor: w-resize;
	}

	&.e {
		cursor: e-resize;
	}
}