Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-engine   php

Repository URL to install this package:

/ scss / forms.scss

div[data-control-name="_form_fields"] {
	> .cx-control__content {
		flex: 0 0 100%;
	}
	.cx-ui-container.form-field-control:not(.cx-ui-repeater-container) {
		display: flex;
		padding: 15px 0;
		border-top: 1px solid rgba( 0,0,0, .1 );
		> label {
			max-width: 15%;
			flex: 0 0 15%;
			margin: 5px 0;
		}
		> .cx-ui-select-wrapper {
			display: flex;
			max-width: 100%;
			flex: 0 0 100%;
			> label {
				max-width: 15%;
				flex: 0 0 15%;
				margin: 5px 0;
			}
		}
	}
	._name-wrap .cx-ui-container.form-field-control {
		border-top: none;
		padding-top: 0;
	}

	._field_options-wrap {
		padding: 20px 0;
		border-top: 1px solid rgba( 0,0,0, .1 );
		.cheryr-ui-repeater-content-box {
			display: flex;
			justify-content: space-between;
			> div {
				width: 49%;
			}
		}
	}
	.form-field-child {
		display: none;
		&._type-active {
			display: block;
		}
		&._hidden_value-active {
			display: block;
		}
		&._field_options_from-active {
			display: block;
		}
	}
	.form-field-controls-list {
		> label {
			display: none;
		}
	}
}

div[data-control-name="_submit_label"],
div[data-control-name="_build_layout"] {
	> .cx-control__content {
		flex: 0 0 100%;
	}
}

#_build_layout {
	width: 100%;
	margin: 5px 0 0 0;
}

.jet-post-field-control {
	display: flex;
	padding: 3px 0 0 0;
	select {
		margin: 0 4px 0 0;
		.rtl & {
			margin: 0 0 0 4px;
		}
	}
	input {
		margin: 0;
	}
}


#form_builder,
#notifications_builder,
.notifications-builder {
	* {
		box-sizing: border-box;
	}
	.jet-form-canvas {
		&__field {
			background: #fafafa;
			padding: 8px 15px 8px;
			font-size: 14px;
			overflow: hidden;
			border: 1px solid #ddd;
			&-start {
				display: flex;
				align-items: center;
			}
			&-end {
				display: flex;
				align-items: center;
			}
			&-label {
				margin: 0 0 2px;
			}
			&-name {
				font-weight: bold;
				margin: 0 5px 0 0;
				.rtl & {
					margin: 0 0 0 5px;
				}
			}
			&-type {
				font-style: italic;
			}
			&-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 100%;
			}
			&-remove {
				color: #a00;
				cursor: pointer;
				font-size: 18px;
				line-height: 20px;
				margin: 0 10px 0 0;
				.rtl & {
					margin: 0 0 0 10px;
				}
				&:hover {
					color: #dc3232;
				}
				&:before {
					content: "\f153";
					font-family: dashicons;
				}
			}
			&-tooltip {
				background: #23282d;
				box-shadow: 0 1px 4px rgba(35,40,45,.24);
				border-radius: 3px;
				padding: 5px 10px;
				font-size: 12px;
				line-height: 15px;
				color: #fff;
				right: 100%;
				position: absolute;
				margin: 0 20px 0 0;
				opacity: 0;
				text-align: center;
				pointer-events: none;
				white-space: nowrap;
				transition: all 150ms linear;
				.rtl & {
					left: 100%;
					right: auto;
					margin: 0 0 0 20px;
				}
				&:after {
					left: 100%;
					content: '';
					position: absolute;
					top: 50%;
					margin: -4px 0 0 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 4px 0 4px 4px;
					border-color: transparent transparent transparent #23282d;
					.rtl & {
						left: auto;
						right: 100%;
						border-width: 4px 4px 4px 0;
						border-color: transparent #23282d transparent transparent;
					}
				}
			}

			&-has-conditions {
				position: absolute;
				background: #fff;
				border: 1px solid #46B450;
				width: 16px;
				height: 16px;
				box-sizing: border-box;
				border-radius: 10px;
				right: -7px;
				top: -7px;
				color: #46B450;
				text-align: center;
				font-size: 9px;
				&:before {
					content: "\2714";
				}
			}

			&-conditional-logic,
			&-copy {
				cursor: pointer;
				margin: 0 15px 0 0;
				color: #0071a1;
				border: 1px solid #0071a1;
				background: #f3f5f6;
				text-decoration: none;
				border-radius: 3px;
				height: 30px;
				width: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				.rtl & {
					margin: 0 0 0 15px;
				}
				svg {
					width: 22px;
					height: 22px;
				}
				&:hover {
					background: #f1f1f1;
					border-color: #016087;
					color: #016087;
					.jet-form-canvas__field-tooltip {
						margin: 0 10px 0 0;
						opacity: 1;
						.rtl & {
							margin: 0 0 0 10px;
						}
					}
				}
			}
			&-copy {
				margin: 0 10px 0 0;
				.rtl & {
					margin: 0 0 0 10px;
				}

				svg {
					fill: currentColor;
					width: 15px;
					height: 15px;
				}
			}
			&-edit {
				cursor: pointer;
				margin: 0 10px 0 10px;
				background: #0085ba;
				border: 1px solid;
				border-color: #0073aa #006799 #006799;
				color: #fff;
				text-decoration: none;
				text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
				border-radius: 3px;
				height: 30px;
				width: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				&:hover {
					background: #008ec2;
					border-color: #006799;
					.jet-form-canvas__field-tooltip {
						margin: 0 10px 0 0;
						opacity: 1;
						.rtl & {
							margin: 0 0 0 10px;
						}
					}
				}
			}
		}
		&__actions {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 5px 0 0 0;
			flex-wrap: wrap;
		}
		&__captcha {
			padding: 6px 0 0 0;
			&-fields {
				flex: 0 0 100%;
				display: flex;
				flex-wrap: wrap;
				label {
					width: 350px;
					margin: 0 10px 0 0;
					.rtl & {
						margin: 0 0 0 10px;
					}

					input {
						width: 100%;
					}
				}
			}
			&-info {
				flex: 0 0 100%;
				padding: 10px 0 0 0;
			}
		}
		&__preset {
			margin: 10px 0 0 0;
			padding: 10px;
			background: #fafafa;
			border: 1px solid #ddd;
			&-heading {
				display: flex;
				align-content: center;
				margin: 0;
				input {
					margin: 1px 10px 0 0;
					.rtl & {
						margin: 1px 0 0 10px;
					}
				}
			}
			&-controls {
				padding: 10px 0 0 0;
			}
			&-row {
				padding: 10px 0;
				display: flex;
				border-bottom: 1px solid #ddd;
				align-items: flex-start;
				&:last-child {
					border-bottom: none;
				}
				> span {
					flex: 0 0 140px;
					max-width: 140px;
					display: block;
					padding: 6px 0 0 0;
				}
			}
		}
		&__buttons {
Loading ...