c1-cms/styles/default/fields/selectors.less

Contains React components distributed with C1 CMS.

.arrow-base() {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.arrow-down() {
	&:before {
		.arrow-base();
		top: 12px;
		right: 10px;
		border-width: 5px 5px 0 5px;
		border-color: @btn-border-color transparent transparent transparent;
	}

	&:after {
		.arrow-base();
		top: 12px;
		right: 11px;
		border-width: 4px 4px 0 4px;
		border-color: @btn-bg-color transparent transparent transparent;
	}
}

.arrow-up() {
	&:before {
		top: 12px;
		border-width: 0px 5px 5px 5px;
		border-color: transparent transparent @btn-hover-border-color transparent;
	}

	&:after {
		top: 13px;
		border-width: 0px 4px 4px 4px;
		border-color: transparent transparent @btn-hover-bg-color transparent;
	}
}


ui|selection,
ui|selector input {
	display: none;
}

ui|selector {
	display: block;

	ui|clickbutton {
		float: none;
		margin: 0;

		>ui|labelbox {
			padding: 6px 30px 8px 11px;
			border-color: @field-border-color;
			text-transform: none;
			color: @btn-toolbar-color;

			.arrow-down();
		}

		&.hover {

			>ui|labelbox:before {
				border-color: @btn-hover-border-color transparent transparent transparent;
			}

			>ui|labelbox:after {
				border-color: @btn-hover-bg-color transparent transparent transparent;
			}
		}

		&.active {
			>ui|labelbox{
				.arrow-up();
			}
		}

		&.infobox {
			ui|clickbutton ui|labeltext {
				font-style: italic;
			}
		}
	}

	&[single='true'] {
		ui|clickbutton {

			> ui|labelbox{
				text-transform: uppercase;

				&:before,
				&:after {
					display:none;
				}
			}
		}
	}
}


ui|fields ui|field.fieldhelp ui|selector ui|clickbutton ui|labelbox {
	overflow: hidden;
	float: none;
}

/* SIMPLESELECTORS ............................................ */

ui|simpleselector {
	display: block;
	position: relative;
	overflow: visible;
}


/* MULTISELECTORS ............................................. */

ui|multiselector {
	padding: 0;

	ui|box {
		display: block;
		height: 100px;
		.user-select(none);
		padding: 5px 0 5px 0;
		overflow: auto;

		div {
			padding: 1px 5px 2px 7px;
			width: 100%;

			&.selected {
				background: @primary-color;
				color: #FFF;
			}
		}
	}

	input {
		display: none;
	}

	ui|datadialog, ui|postbackdialog {
		padding: 1px 0 2px 0;
	}
}

/* DATAINPUTSELECTORS ......................................... */
ui|datainputselector,
ui|datainputdialog,
ui|datainputbutton,
ui|urlinputdialog {
	display: block;
	position: relative;

	ui|toolbarbutton {
		margin: 0;
		padding: 5px;
		border: none;
		position: absolute;
		right: 3px;
		top: 3px;

		ui|labelbox {
			padding: 0px;
		}
	}
}


ui|datainputselector {
	&.with-image {
		input {
			padding-left: 30px;
		}

		ui|box ui|labelbox {
			position: absolute;
			left: 8px;
			top: 8px;
		}
	}

	ui|toolbarbutton[image='popup'] {
		ui|labelbox {
			ui|labelbody {
				visibility: hidden;
			}

			.arrow-down();
		}

		&[ischecked='true']{
			ui|labelbox {
				.arrow-up();
			}
		}
	}
}

ui|field.fieldhelp ui|fielddata {
	position: relative;
}

ui|field.fieldhelp ui|fielddata ui|datainputselector input,
ui|field.fieldhelp ui|fielddata ui|datainputdialog input,
ui|field.fieldhelp ui|fielddata ui|datainputbutton input,
ui|field.fieldhelp ui|fielddata ui|urlinputdialog input {
	width: 100%;
}


/* Hierarchical Selector */
ui|hierarchicalselector {

	&[hascounter='true'] {

		@counter-height: 30px;

		ui|box {
			margin-bottom: @counter-height;
		}
		> ui|labelbox{
			margin-top: -@counter-height;
			height: @counter-height;
			width: 100%;
			line-height: @counter-height;
			border-top: 1px solid @base-border-color;

			ui|labelbody {
				padding-right: 11px;
				padding-left: 11px;
				float: right;

				font-family: @heading-font-family;
				text-transform: uppercase;
				color: @primary-color;
				font-size: 13px;
			}
		}
	}


	ui|treenode {

		ui|treenode {
			padding-left: 46px;

			&.checkbox {
				ui|checkbutton {
					left: 59px;
				}
			}

			&.open::before,
			&.closed::before {
				width: 20px;
			}

			ui|treenode {
				&::before,
				&::after {
					left: 25px;
				}

				ui|labelbox {
					&:before,
					&:after {
						left: 1px;
					}
				}
			}

			> ui|labelbox {
				svg {
					margin-left: 4px;
				}
			}
		}

		> ui|labelbox {
			ui|labeltext{
				display: inline;
			}

			&.textonly {
				ui|labeltext{
					padding-left: 4px;
				}
			}

			&.open:after {
				border-top-color: @dialog-bg-color;
			}

			&.closed:after {
				border-left-color: @dialog-bg-color;
			}

			svg {
				margin-right: 2px;
			}
		}

		&::before{
			width: 30px;
		}


		&::before,
		&::after {
			border-color: #D5D5D5;
			left: 21px;
		}

		&.checkbox {

			> ui|labelbox {
				padding-left: 40px;
			}

			> ui|checkbutton {
				position: absolute;
				float: none;
				top: 2px;
				left: 18px;
				height: 20px;

				&[ischecked='true'] {
					ui|labelbody {
						&:before {
							background: @primary-color;
							border-color: @primary-color;
						}

						&:after {
							content: "";
							top: 1px;
							left: 5px;
							height: 8px;
							width: 4px;
							border-bottom: 2px solid @btn-primary-color;
							border-right: 2px solid @btn-primary-color;
							-ms-transform: scale(0.9, 1) rotate(40deg);
							transform: scale(0.9, 1) rotate(40deg);
						}
					}
				}

			}
		}
	}

	ui|treebody {
		background: @dialog-bg-color;
		padding-top: 22px;
	}

	> input {
		display: none;
	}

	ui|box {
		height: auto;
	}

	&.invalid {
		ui|labeltext {
			font-weight: inherit;
		}
	}
}

ui|wizardpage,
ui|dialogpage {
	ui|hierarchicalselector {
		ui|box {
			height: 530px;
		}
	}

	ui|pagebody {
		&.filled {
			> ui|hierarchicalselector{
				padding: 0;

				ui|box {
					border-color: transparent;
				}

				&.invalid{
					ui|box {
						border-color: @field-error-color;
					}
				}
			}
		}
	}
}