Gravity Forms basic styling via LESS

_gravity-forms.less

.gform_wrapper {
	@fieldBorder: @lightGray;
	@fieldBg: @xLightBlue;

	@focusBorder: @aqua;
	@focusBg: @white;

	@fieldGutter: 14px;
	@halfGutter: @fieldGutter / 2;

	@errorColor: @red;
	ul {
		margin: 0;
		padding: 0;
		background: none;
		list-style: none;
	}
	.gfield {
		margin-bottom: 1.35em;
		&.gfield_error {
			label {
				color: @errorColor;
			}
			input {
				border-color: @errorColor;
			}
		}
	}
	.gfield_description {
		font-size: 0.9em;
		&.validation_message {
			color: @errorColor;
		}
	}
	.gfield_required {
		color: @errorColor;
	}
	.gform_title {
		&:extend( h4 all );
		text-transform: none;
	}
	.gform_description {
		display: block;
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	.validation_error {
		color: @errorColor;
		border-bottom: 1px solid @errorColor;
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	label {
		display: block;
		margin-bottom: 0.4em;
		font-size: 0.9em;
		font-weight: bold;
	}
	.submit,
	input[type="submit"] {
		&:extend( .btn all, .btn.btn-green all );
		font-size: 15px;
	}
	textarea, select, input, button { outline: none; }
	textarea,
	input[type="text"],
	input[type="email"],
	input[type="tel"] {
		display: block;
		width: 100%;
		padding: 0.8em;
		border: 1px solid @fieldBorder;
		font-size: 1em;
		background: @fieldBg;
		border-radius: 4px;
		will-change: background-color, border-color;
		transition: all 0.2s ease;
		&:focus {
			border-color: @focusBorder;
			background-color: @focusBg;
		}
	}
	select {
		position: relative;
		width: 100%;
		padding: 12px;
		border: 1px solid @fieldBorder;
		border-radius: 4px;
		font-size: 1em;
		//height: 44px;
		background: @fieldBg;
		appearance: none;
	}
	.ginput_container_select {
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 15px;
			width: 12px;
			height: 12px;
			margin-top: -6px;
			background: url(../img/select-box-arrow.svg) 0 0 no-repeat;
		}
	}
	.ginput_container_fileupload {
		display: block;
		width: 100%;
		padding: 0.8em;
		border: 1px solid @fieldBorder;
		font-size: 1em;
		border-radius: 2px;
		background: @fieldBg;
	}
	.gfield_radio,
	.gfield_checkbox {
		margin-top: 12px;
		> li {
			display: flex;
			margin: 0 0 8px;
			line-height: 1;
			input {
				margin-right: 8px;
			}
		}
	}
	.gform_footer {
		 padding-top: 10px;
	 }
	// Complex field types
	.ginput_complex {
		label {
			padding: 4px;
			font-weight: normal;
			opacity: 0.8;
		}
	}
	.ginput_container_name {
		display: flex;
		margin-right: -@fieldGutter;
		> span {
			flex: 1 0 auto;
			margin-right: @fieldGutter;
		}
	}
	.ginput_container_address {
		//width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-left: -@halfGutter;
		margin-right: -@halfGutter;
		> span {
			flex: 1 0 auto;
			margin: @halfGutter;
			&.address_line_1,
			&.address_line_2,
			&.address_country {
				width: ~"calc( 100% - @{fieldGutter})";
				flex: 0 0 ~"calc( 100% - @{fieldGutter})";

			}
			&.address_city,
			&.address_state,
			&.address_zip {
				width: ~"calc( ( 100% / 3 ) - @{fieldGutter})";
				flex: 0 0 ~"calc( ( 100% / 3 ) - @{fieldGutter})";
			}
		}
	}
}