landmark-serve/public/styles/landmark/forms.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

//
// FORM ELEMENTS
// --------------------------------------------------

/*
	Form control wrapper
	==============================
	
	.form-control-wrapper should be exclusively used for attaching validation to
	when no other ancestor is applicable. It has no ornamental styles of it's own.
*/

@input-vspacing: 12px;

// Adding vertical spacing between form elements
.field, .form-indent, .field-ui .row, #signin-form .row {
	margin-top: @input-vspacing;
}

// Form headings
.form-heading {
	margin-top: 30px;
}

// Indentation
.form-indent {
	margin-left: 20px;
}

// Alerts
.alert {
	padding: @padding-large-vertical @padding-large-horizontal;
}

// Initially hidden fields
.overwrite,
.extras,
.field-message,
.change-password {
	display: none;
}

// Initially "invisible" but not hidden, workaround for wysiwyg init issue
// *actually* hidden after page has initialised by JS
.field-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

// Big ass fields (name fields)
.item-name .form-control {
	color: @brand-primary;
	margin-bottom: 20px;
}

// Disabled fields
.form-control.disabled {
	background-color: @input-bg-disabled;
}

// The note that sits beneath a field
.field-note {
	.help-block;
}

// Field value. Used for non-editable fields
.field-value {
	background-color: mix(white, @input-bg-disabled, 10%);
	border: 1px solid mix(white, @input-border, 40%);
	border-radius: @input-border-radius;
	color: @input-color;
	display: inline-block;
	font-size: @font-size-base;
	line-height: @line-height-base;
	height: auto;
	min-height: @input-height-base;
	padding: @padding-base-vertical @padding-base-horizontal;
	vertical-align: middle;
	width: auto;
	min-width: 180px;
	
	&.no-value {
		color: @gray-light;
		cursor: default;
	}
}

.field .help-block {
	margin-bottom: 0px;
}

// align label copy with field text
label {
	.inline-align();
	font-weight: normal; // bold's a bit intense
}
.field-label {
	margin: 0;
	
	// so fields don't jump on reveal
	padding-bottom: @padding-base-vertical + 1;
	padding-top: @padding-base-vertical + 1;
}

// label companion
// sits next to a label, keeps him company
.field-label-companion {
	padding-left: @padding-base-horizontal;
}

// limit textareas to be vertically resizable only, set heights
textarea {
	.resizable(vertical);
	min-height: 100px;
	
	&.tall {
		min-height: 200px;
	}
}

input,
textarea {
	&.code {
		font-size: @font-size-small !important;
	}
}

// radios + checkboxes
.radio,
.checkbox {
	margin-bottom: 0;
	margin-top: 0;
}
label.checkbox {
	padding-top: 0;
}

// columns separated fields
// need space when the form collapses
.form-row {
	.col-spacing(0,0 5px);
	.make-row(10px);
	
	@media (max-width: @screen-sm) {
		.col-spacing(0 0 .8em,0 5px);
	}
}

// location specific
.field-postcode {
	@media (min-width: @screen-sm) {
		text-align: right;
	}
}

.input-xs {
  .input-size(22px; 1px; 5px; 12px; @line-height-small; @border-radius-small);
}


// FIELD TYPES
// =======================================
.field {
	.make-row();
}
.field-label {
	.make-sm-column(3);
	.make-md-column(2);
}
.field-ui {
	.make-sm-column(9);
	.make-md-column(10);
	
	&.width-long {
		.make-sm-column(8);
		.make-md-column(6);
	}
	&.width-medium {
		.make-sm-column(5);
		.make-md-column(4);
	}
	&.width-short {
		.make-sm-column(3);
		.make-md-column(2);
	}
}

.field.type-number,
.field.type-money,
.field.type-date {
	.field-ui {
		.make-sm-column(3);
		.make-md-column(2);
	}
}

.field.type-datetime {
	.field-ui {
		.make-sm-column(6);
		.make-md-column(4);
	}
}

.field.type-name,
.field.type-password {
	.field-ui {
		.make-sm-column(7);
		.make-md-column(5);
	}
}

// Short Strings
.field.type-url,
.field.type-email,
.field.type-key {
	.field-ui.width-full {
		.make-sm-column(7);
		.make-md-column(5);
	}
}

// Booleans
.field.type-boolean {
	.field-ui {
		.make-sm-column(9);
		.make-md-column(10);
		
		&.field-indented {
			.make-sm-column-offset(3);
			.make-md-column-offset(2);
		}
	}
}

// Locations
.field.type-location {
	label {
		margin: 0;
	}
	label+.row {
		margin-top: 12px;
	}
	.field-ui {
		.make-sm-column(12);
		.make-md-column(12);
	}
	.noedit {
		.make-sm-column(9);
		.make-md-column(10);
	}
	.row label {
		padding-top: @padding-base-vertical;
	}
}

// HTML
.field.type-html {
	textarea {
		.form-control;
	}
}



// Code
.field.type-code {
	.CodeMirror {
		.form-control;
		height: 300px;
		padding: 0px;
	}

	.CodeMirror-gutters {
		background-color: transparent;
	}
}



// Cloudinary Images

// - Singluar
.field.type-cloudinaryimage {
	.image-preview {
		position: relative;
		line-height: 0px;
		float: left;
		margin-right: 10px;
		.placeholder-wrap {
			position: relative;
			height: 100px;
			overflow: hidden;
			
			.placeholder {
				height: 90px;
				opacity: 0.25;
				
				&.no-preview {
					width: 100px;
					display: block;
				}
			}
		}
		.img-loading, .img-uploading, .upload-pending, .delete-pending {
			.square(40px);
			color: rgba(0,0,0,0.66);
			font-size: 40px;
			left: 50%;
			margin: -20px 0 0 -20px;
			position: absolute;
			text-align: center;
			top: 50%;
		}
		.img-thumbnail {
			img {
				display: block;
			}
		}
		&.removed {
			.img-thumbnail {
				img {
					opacity: 0.25;
				}
			}
		}
	}
	
	.image-details {
		overflow: hidden;
		.image-values {
			.field-value {
				width: auto;
				min-width: 1px;
				float: left;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		.image-message {
			margin-left: 0px;
			font-size: 12px;
			width: 110px;
			text-align: center;
			width: 100%;
		}
	}
	
	.image-details + .image-toolbar {
		margin-top: @input-vspacing;
	}
	
	.image-select {
		clear: both;
		padding-top: 10px;
	}
	
	.upload-queued, .delete-queued, .select-queued {
		display: none;
		.alert {
			margin-right: 10px;
			margin-bottom: 10px;
			float: left;
			padding: 6px 12px;
		}
	}
}

// - Multiple
.field.type-cloudinaryimages {
	.image-field {
		width: auto;
		float: left;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 10px;
		
		&.image-upload {
			cursor: pointer;
			.img-thumbnail {
				.img-dropzone {
					width: 90px;
					height: 90px;
					display: block;
					position: relative;
					z-index: 1;
				}
			}
			&:hover, &.hover {
				.img-thumbnail {
					border: 1px solid #C8EECD;
					background: #EFFDF0;
					.img-uploading {
						color: #0B851A;
					}
				}
				.image-message {
					text-decoration: underline;
				}
			}
		}
	}
	.image-preview {
		line-height: 0px;
		.placeholder-wrap {
			height: 100px;
			overflow: hidden;
			
			.placeholder {
				height: 90px;
				opacity: 0.25;
				
				&.no-preview {
					width: 100px;
					display: block;
				}
			}
		}
		.img-loading, .img-uploading, .upload-pending, .delete-pending {
			color: #6A6A6A;
			font-size: 23px;
			left: 50%;
			top: 50%;
			position: absolute;
			margin-left: -11px;
			margin-top: -27px;
			line-height: 23px;
			text-shadow: 0 0 50px #FFFFFF;
		}
		.image-message {
			margin-left: 0px;
			font-size: 12px;
			width: 110px;
			text-align: center;
			width: 100%;
		}
		.img-thumbnail {
			img {
				display: block;
			}
		}
		&.removed {
			.img-thumbnail {
				img {
					opacity: 0.25;
				}
			}
		}
	}
	.image-details {
		.image-message {
			display: inline-block;
			padding: @padding-base-vertical @padding-base-horizontal;
			margin-bottom: 0;
			font-size: 12px;
			font-weight: @btn-font-weight;
			line-height: @line-height-base;
			text-align: center;
			vertical-align: middle;
			white-space: nowrap;
			margin-left: 0px;
			font-size: 12px;
			width: 100%;
		}
	}
	.field-value {
		width: auto;
		float: left;
		margin-right: 10px;
		margin-bottom: 15px;
	}
	.upload-queued {
		display: none;
		margin-left: 10px;
	}
	.delete-queued {
		display: none;
		margin-left: 10px;
	}
	.btn-cancel {
		margin-left: 0px;
		font-size: 12px;
		width: 110px;
		text-align: center;
		width: 100%;
	}
	.images-toolbar {
		.alert {
			margin-bottom: 10px;
			float: left;
			padding: 6px 12px;
			margin-bottom: 0px;
		}
	}
	.sortable-placeholder {
		border: 1px dashed #777;
		background: none;
		margin-top: 0px;
		margin-left: 3px;
		margin-right: 12px;
		margin-bottom: 0px;
		float: left;
	}
}

.field-upload {
	position: absolute;
	left: -9999px;
}

// S3 File
.field.type-s3file {
	.file-preview {
		position: relative;
		line-height: 0px;
		float: left;
		margin-right: 10px;
	}
	
	.file-details {
		overflow: hidden;
		.file-values {
			.field-value {
				width: auto;
				min-width: 1px;
				float: left;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		.file-message {
			margin-left: 0px;
			font-size: 12px;
			width: 110px;
			text-align: center;
			width: 100%;
		}
	}
	
	.file-details + .file-toolbar {
		margin-top: @input-vspacing;
	}
	
	.upload-queued, .delete-queued {
		display: none;
		.alert {
			margin-right: 10px;
			margin-bottom: 10px;
			float: left;
			padding: 6px 12px;
		}
	}
}


// Azure File
.field.type-azurefile	 {
	.file-preview {
		position: relative;
		line-height: 0px;
		float: left;
		margin-right: 10px;
	}
	
	.file-details {
		overflow: hidden;
		.file-values {
			.field-value {
				width: auto;
				min-width: 1px;
				float: left;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		.file-message {
			margin-left: 0px;
			font-size: 12px;
			width: 110px;
			text-align: center;
			width: 100%;
		}
	}
	
	.file-details + .file-toolbar {
		margin-top: @input-vspacing;
	}
	
	.upload-queued, .delete-queued {
		display: none;
		.alert {
			margin-right: 10px;
			margin-bottom: 10px;
			float: left;
			padding: 6px 12px;
		}
	}
}


// Local File
.field.type-localfile {
  .file-preview {
    position: relative;
    line-height: 0px;
    float: left;
    margin-right: 10px;
  }

  .file-details {
    overflow: hidden;
    .file-values {
      .field-value {
        width: auto;
        min-width: 1px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
    .file-message {
      margin-left: 0px;
      font-size: 12px;
      width: 110px;
      text-align: center;
      width: 100%;
    }
  }

  .file-details + .file-toolbar {
    margin-top: @input-vspacing;
  }

  .upload-queued, .delete-queued {
    display: none;
    .alert {
      margin-right: 10px;
      margin-bottom: 10px;
      float: left;
      padding: 6px 12px;
    }
  }
}

// Related Items
.ui-related-item {
	.field-value;
	background: white;
	//border: 1px solid #72b3d8;
	color: #0089cb;
	margin-right: 5px;
	text-decoration: none;
	
	&:hover {
		background-color: #f0f8fc;
		border-color: #80c4e5;
		color: #0c699e;
	};
}

// Messages
.field-message {
	display: none;
	min-height: 30px;
	
	span {
		display: inline-block;
		background: #f9f9f9;
		border: 1px solid #ccc;
		color: #999;
		margin-right: 10px;
		padding: 5px 10px;
		// .border-radius(3px);
		cursor: default;
	}
}

// widths for fields inside '.form-inline'
.form-inline .field-inline--xs,
.form-inline .field-inline--sm,
.form-inline .field-inline--md,
.form-inline .field-inline--lg,
.form-inline .field-inline--xl {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    
    > .form-control {
        width: 100%;
    }
}
.form-inline .field-inline--xs { width: 60px; }
.form-inline .field-inline--sm { width: 136px; }
.form-inline .field-inline--md { width: 200px; }
.form-inline .field-inline--lg { width: 300px; }
.form-inline .field-inline--xl { width: 400px; }