fluid-form/fluid-form.less

Fluid form generator

@fluid-form-medium-screen: 1300px;
@fluid-form-small-screen: 800px;

@fluid-form-color-dark: #444;
@fluid-form-color-light: #ececec;
@fluid-form-color-highlight: #abf;
@fluid-form-color-selected: #25f;
@fluid-form-color-invalid: #f44;
@fluid-form-color-invalid-dark: #c00;
@fluid-form-color-invalid-text: #000;
@fluid-form-color-value-text: #64b;
@fluid-form-color-placeholder-text: #64b;
@fluid-form-color-submit-button: #7ad;
@fluid-form-color-submit-text: @fluid-form-color-light;

.fluid-form {

	width: 100%;
	position: relative;
	margin-bottom: 100px;

	&, * {
		box-sizing: border-box;
	}

	font-family: 'Open Sans', sans-serif;
	color: @fluid-form-color-dark;

	padding: 50px 15%;
	font-size: 18px;
	line-height: 36px;
	font-weight: 500;
	@media (max-width: @fluid-form-medium-screen) {
		padding: 35px 10%;
		font-size: 16px;
		line-height: 32px;
	}
	@media (max-width: @fluid-form-small-screen) {
		padding: 20px 15px;
		font-size: 12px;
		line-height: 21px;
	}

	.clause {
		display: inline-block;
		position: relative;
		z-index: 10;

		opacity: 1;
		transform-origin: left center;
		transform: scaleX(1);
		transition: all 200ms ease-in;
		width: auto;
		&.ng-hide {
			opacity: 0;
			transform: scaleX(0);
			width: 0;
			padding: 0;
		}

		margin: 12px 4px;
		@media (max-width: @fluid-form-medium-screen) {
			margin: 10px 4px;
		}
		@media (max-width: @fluid-form-small-screen) {
			margin: 7px 3px;
		}

		&.punctuation {
			margin-left: 2px;
		}

		&.newline {
			clear: both;
			display: block;

			margin: 0;
			height: 9px;
			@media (max-width: @fluid-form-medium-screen) {
				height: 7px;
			}
			@media (max-width: @fluid-form-small-screen) {
				height: 5px;
			}

		}

		&.invalid * {
			border-color: @fluid-form-color-invalid !important;
		}

		&.choice {
			&.open {
				z-index: 20;
			}
		}

		&.submit-button {
			margin-top: 40px;
			transform-origin: center center;
			transform: scale(1) rotate(0deg);
			transition-delay: 200ms;
			&.ng-hide {
				transform-origin: center center;
				transform: scale(0) rotate(45deg);
				transition-delay: 0ms;
				width: auto;
			}
		}

		&>* {
		}

		&>.newline {
		}

		&>.phrase {
		}

		&>.field {
		}

		&>.text {
		}

		&>.submit-button {
			padding: 15px 25px 15px 15px;
			border-radius: 10px;
			border: 0;
			background: @fluid-form-color-submit-button;
			color: @fluid-form-color-submit-text;
			font-family: inherit;
			font-size: inherit;
			font-weight: inherit;

			&:focus, &:hover {
				color: @fluid-form-color-submit-text;
				background: lighten(@fluid-form-color-submit-button, 5%);
			}
			&:active {
				color: @fluid-form-color-submit-text;
				background: darken(@fluid-form-color-submit-button, 10%);
			}
		}

		&>.choice {
			overflow: visible;
			position: relative;
			.menu {
				position: absolute;
				float: left;
				padding: 0;
				min-width: 150px;
				overflow-y: auto;
				max-height: 250px;
				top: 100%;
				left: 0;
				margin-top: 5px;
				border: 1px solid @fluid-form-color-light;
				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
				border-radius: 9px;
				list-style-type: none;
				background: @fluid-form-color-light;
				transition: transform 100ms ease-in;
				transform-origin: top left;
				@media (max-width: @fluid-form-medium-screen) {
					border-radius: 7px;
				}
				@media (max-width: @fluid-form-small-screen) {
					border-radius: 4px;
				}
				.item {
					background: @fluid-form-color-light;
					display: block;
					padding: 0;
					margin: 0;
					padding: 5px 10px;
					white-space: nowrap;
					@media (max-width: @fluid-form-medium-screen) {
						padding: 3px 6px;
					}
					@media (max-width: @fluid-form-small-screen) {
						padding: 2px 4px;
					}
					font-weight: 500;
					&.selected {
						background: @fluid-form-color-selected;
						color: @fluid-form-color-light;
					}
					&:hover {
						background: @fluid-form-color-highlight;
						color: @fluid-form-color-light;
					}
				}
				&.ng-hide {
					transform: scale(0.3, 0);
					transition: transform 100ms ease-out;
				}
			}
		}

		.int {
			width: 50px;
		}

		.date {
		}

		.field,
		.choice .toggle {
			font-family: 'Source Code Pro';
		}

		input,button {
			margin: 0;
			outline: 0;
			border-style: none;
			border-color: @fluid-form-color-light;
			font-size: inherit;
			color: @fluid-form-color-value-text;

			.placeholder,
			&::placeholder {
				color: @fluid-form-color-placeholder-text;
			}

			&:hover,
			.choice.open & {
				border-color: @fluid-form-color-highlight;
				color: black;
			}

			/* Hacky priority boost */
			html body &:focus {
				border-color: @fluid-form-color-selected;
				color: black;
			}
		}

		input,
		.choice .toggle {
			border-radius: 0;
			border-bottom-width: 2px;
			border-bottom-style: solid;
		}

		.choice .toggle {
			padding-right: 5px;
			border-left-width: 2px;
			border-left-style: solid;
			background: inherit;
			.arrow {
				color: @fluid-form-color-light;
				padding-left: 5px;
			}
		}

		.choice {
			&.open, &:hover, &:focus, &:active {
				.arrow {
					color: @fluid-form-color-highlight;
				}
			}
			&.open .arrow {
				&::before {
					content: '\f102';
				}
			}
		}

		input {
			padding: 0 5px 0;
		}

		button.button {
			border-radius: 9px;
			border: 2px solid;
			padding: 5px;
		}

		.error-message {
			position: absolute;
			z-index: 100;
			top: -125%;
			left: 25%;
			white-space: nowrap;
			border-radius: 6px;
			padding: 5px;
			font-weight: 400;
			line-height: 1;
			background: @fluid-form-color-invalid;
			border: @fluid-form-color-invalid-dark;
			color: @fluid-form-color-invalid-text;
		}

	}

}