espterm-front-end/sass/form/_form_layout.scss

// Unified Form wrapper
form { @include naked(); }

.Box.errors {
	.list {
		color: crimson;
		font-weight: bold;
	}

	.lead {
		color: white;
	}
}

.Box.message {
	font-weight: bold;
	color: #0fca50;
	transition: opacity linear 1s;
	opacity: 1;
	&.hiding {
		opacity: 0;
	}
}

.Row {
	vertical-align: middle;
	margin: 12px auto;
	text-align: left;
	line-height: 1.35em;

	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;

	.SubRow {
		display: flex;
		flex-direction: row;

		@include media($phone) {
			flex-direction: column;
			margin: 6px auto;
			width: 100%;
		}
	}

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}

	&.v {
		display: block;
	}

	.aside {
		float: right;
		margin-left: 5px;
		margin-bottom: 5px;

		@include media($phone) {
			margin: 0; float: none;
		}
	}

	.spacer {
		width: $form-label-w;

		@include media($phone) {
			display: none;
		}
	}

	// buttons2 is the same style, but different selector for use in the admin page
	&.buttons, &.buttons2 {
		margin: 16px auto;
		input, .button {
			margin-right: dist(-1);
		}
	}

	&.buttons2 {
		display:block;
	}

	&.centered {
		justify-content: center;
	}

	&.message {
		font-size: 1em;
		//margin-left: $label-gap + $w-labels;
		text-shadow: 1px 1px 3px black;
		text-align: center;

		&.error {
			color: crimson;
		}

		&.ok {
			color: #0fe851;
		}
	}

	&.separator {
		padding-top: 14px;
		border-top: 2px solid rgba(255, 255, 255, 0.1);
	}

	.filewrap {
		background: $c-form-field-bg;
		padding: 6px 10px;
		border-radius: 3px;
		border: 1px solid #666666;
	}

	textarea {
		display: inline-block;
		vertical-align: top;
		min-height: 10rem;
		flex-grow: 1;

		resize: vertical;
	}

	label {
		font-weight: bold;
		color: $c-form-label-fg;
		display: inline-block;
		width: $form-label-w;
		text-align: right;
		text-shadow: 1px 1px 3px black;

		padding: $form-label-gap;
		align-self: flex-start;

		@include noselect;
		@include nowrap;
	}

	label.error {
		color: crimson;
	}

	//.checkbox-wrap {
	//	display: inline-block;
	//	width: $form-label-w;
	//	padding: $form-label-gap;
	//	text-align: right;
	//	align-self: flex-start;
	//
	//	input[type=checkbox] {
	//		margin: auto;
	//		width: auto;
	//		height: auto;
	//	}
	//
	//	& + label {
	//		width: $form-field-w;
	//		padding-left: 0;
	//		text-align: left;
	//		cursor: pointer;
	//	}
	//}

	input[type="range"] {
		width: 200px;
	}

	// special phone style
	@include media($phone) {
		flex-direction: column;
		margin: 6px auto;

		&.buttons, &.centered, &.checkbox {
			flex-direction: row;
		}

		&.buttons {
			justify-content: center;

			// remove margin on lats button
			:last-child {
				margin-right:0;
			}
		}

		label {
			padding-left: 0;
			text-align: left;
			width: auto;
		}

		.checkbox-wrap {
			order: 1;
			text-align: left;
			padding-bottom: 0;

			border-radius: .4px;
			width: auto;

			& + label {
				width: auto;
			}
		}

		#{$all-text-inputs}, input[type="range"], textarea, select {
			width: 100%;
		}
	}
}

// red asterisk
form span.required {
	color: red;
}

.RadioGroup {
	display: inline-block;
	line-height: 1.5em;
	vertical-align: middle;

	label {
		width: auto;
		text-align: left;
		cursor: pointer;
		font-weight: normal;
	}

	input[type="radio"] {
		vertical-align: middle;
		margin: 0 0 0 5px;
	}
}