silverstripe-userforms/css/FieldEditor.css

/**
 * User Defined Form Builder CSS
 *
 */
li.class-UserDefinedForm > a .jstree-pageicon { background-position: 0 -64px; }

.page-icon.class-UserDefinedForm {
	background-position: 0 -64px;
}

/* Add a Field Menu 
---------------------------------------- */
.MenuHolder {
	color: #999;
	border: 1px solid #ddd;
	background: #f4f4f4;
	overflow: hidden;
	width: 100%;
}
	.MenuHolder h2 {
		float: left;
		margin-left: 10px;
	}
	
	.MenuHolder select {
		float: left;
		width: 240px;
		margin: 18px 0 0 8px;
		font-size: 11px;
	}
	
	.MenuHolder .action {
		float: left;
		margin: 14px 0 0 4px;
		font-size: 11px;
	}
	
/* Options / Settings Area 
---------------------------------------- */
.FormOptions {
	padding: 10px 0 0 0;
}
/*
#ShowClearButton, #DisableSaveSubmissions{
	padding-left:0;
}
#ShowClearButton label, #DisableSaveSubmissions label{
	float:left;
	font-weight:bold;
	margin-right:43px;
}
*/

/* Email Recipient Form
---------------------------------------- */
.EmailRecipientForm .fieldgroup .fieldgroup-field {
	padding-top: 0;
}

.EmailRecipientForm .fieldgroup .fieldgroup-field.last {
	padding-bottom: 0;
}

.EmailRecipientForm .ss-ui-button {
	margin-bottom: 4px;
}


/* Field Listing
---------------------------------------- */	
.FieldEditor .FieldList {
	padding: 10px 0;
}

	.FieldEditor .FieldList .EditableFormField {
		margin: 2px;
		padding: 3px 0;
		border-top: 1px dotted #ccc;
		width: 100%;
		overflow: hidden;
	}
		.FieldEditor .FieldList .EditableFormField * {
			vertical-align: middle;
		}

		.FieldEditor .FieldList .EditableFormField .fieldHandler,
		.FieldEditor .FieldList .EditableFormField .handle {
			cursor: move;
		}
		.FieldEditor .FieldList .EditableFormField .fieldInfo {
			float: left;
			padding-right: 10px;
		}
		.FieldEditor .FieldList .EditableFormField .fieldActions {
			float: left;
			margin-top: 10px;
		}
			.FieldEditor .FieldList .EditableFormField .fieldActions a {
				padding: 0 5px 5px 20px;
				font-size: 12px;
			}
				.FieldEditor .FieldList .EditableFormField .moreOptions {
					background: url(../../cms/images/edit.gif) no-repeat top left;
				}
					.FieldEditor .FieldList .EditableFormField .moreOptions.showing {
						color: #666;
						text-decoration: none;
					}
				.FieldEditor .FieldList .EditableFormField .delete {
					background: url(../../cms/images/delete.gif) no-repeat top left;
				}

		.FieldEditor .FieldList .EditableFormField input {
			width: 250px;
			margin-left: 0px;
		}
	
		/** Field Options **/
		
		.FieldEditor .FieldList .EditableFormField div.extraOptions {
			display: block;
			overflow:hidden;
			margin: 3px 0px 3px 38px;
			background-color: #F4F4F4;
			padding: 3px;
			clear: both;			
		}
				.FieldEditor .FieldList .EditableFormField .extraOptions .handle {
					float: left;
					margin-right: 3px;
				}
				.FieldEditor .FieldList .EditableFormField .extraOptions ul {
					padding: 5px 0;
				}
					.FieldEditor .FieldList .EditableFormField .extraOptions li {
						padding: 3px 0;
						width: 100%;
						overflow: hidden;
					}
				.FieldEditor .FieldList .EditableFormField .extraOptions a {
					background: none;
				}
				.FieldEditor .FieldList .EditableFormField .extraOptions input {
					font-size: 11px;
					padding: 2px;
					float: left;
				}
				.FieldEditor .FieldList .EditableFormField .extraOptions .deleteOption {
					width: 20px;
					margin: 4px 0 0 4px;
					background: none;
					height: 20px;
					float: left;
					display: block;
				}
				.FieldEditor .FieldList .EditableFormField .extraOptions select {
					width: 221px;
				}
				.FieldEditor .FieldList .EditableFormField .extraOptions .chzn-drop input {
					font-size: 12px;
					padding: 4px 20px 4px 5px;
					float: none;
				}
				.FieldEditor .FieldList .EditableFormField a.addableOption,
				.FieldEditor .FieldList .EditableFormField a.addCondition {
					background: url(../../cms/images/add.gif) no-repeat top left;
					padding: 1px 0 2px 20px;
					font-size: 12px;
					width: auto;
					margin-left: 3px;
				}
				/* Field Options Group */
				.FieldEditor .FieldList .fieldOptionsGroup {
					padding: 4px 8px 8px 8px;
					margin: 5px;
					border: 1px solid #bbb;
				}
					.FieldEditor .FieldList .fieldOptionsGroup legend {
						font-size: 15px;
						padding: 0 4px;
					}
				/* Field Lengths */
				.FieldEditor .FieldList .EditableFormField .fieldgroupField {
					float: left;
				}
					.FieldEditor .FieldList .EditableFormField .fieldgroupField label {
						float: left;
						padding: 0 4px;
					}
					.FieldEditor .FieldList .EditableFormField .fieldgroupField input {
						width: 80px;
					}
			.FieldEditor .FieldList .EditableFormField .middleColumn {
				background: none;
			}
			/* CHECKBOX */
			.FieldEditor .FieldList .EditableFormField .checkbox { }
			
				.FieldEditor .FieldList .EditableFormField .checkbox input {
					float: left;
					width:auto;
					margin: 0 8px 0 0;
				}
			
		/* CUSTOM RULES */
		.FieldEditor .FieldList .customRules {
			clear: both;
		}
			.FieldEditor .FieldList .customRules li {
				clear: both;
			}
				.FieldEditor .FieldList .customRules li.firstField {
					padding-bottom: 5px;
					margin: 0 5px;
					border-bottom: 1px solid #bbb;
				}
				.FieldEditor .FieldList .customRules label {
					float: left;
					margin: 0;
					padding: 2px 4px;
					font-size: 11px;
				}
				.FieldEditor .FieldList .customRules select {
					float: left;
					font-size: 11px;
					width: 120px;
					margin-right: 4px;
				}
				.FieldEditor .FieldList .customRules a {
					background: none;
					width: 20px;
					float: left;
				}
				
		/* HIDE */
		.FieldEditor .FieldList li.EditableFormField .hidden {
			display: none !important;
		}

		/* Holder to prevent form from collapsing */
		.FieldEditor .FieldList .removed-form-field {
			height: 40px;
			display: block;
			overflow: hidden;
		}