elemental/less/components/FormInput.less

React UI Framework

//
// Form Input
// ==============================


// Base
// ------------------------------

.FormInput {
	.transition( ~"border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s" );
	background-color: @input-bg-color;
	background-image: none;
	border-radius: @border-radius-base;
	border: 1px solid @input-border-color;
	border-top-color: darken(@input-border-color, 4%);
	border-bottom-color: lighten(@input-border-color, 4%);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	color: @text-color;
	display: block;
	// font-size: @font-size-base;
	line-height: 1.2;
	height: @component-height;
	padding: 0 @input-padding-horizontal;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;


	// states

	&:hover {
		border-color: @input-border-color-hover;
		outline: 0;
	}
	&.focus,
	&.is-focused,
	&:focus {
		border-color: @input-border-color-focus;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px fade(@input-border-color-focus, 10%);
		// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px fade(@input-border-color-focus, 33%);
		outline: 0;
	}
	&.disabled,
	&[disabled] {
		background-color: @input-bg-disabled;
		pointer-events: none;
	}

	// firefox weirdness
	&::-moz-focus-inner {
		border: 0;
		outline : 0;
	}
}



// Sizes

.FormInput--lg { font-size: @font-size-lg; }
.FormInput--sm { font-size: @font-size-sm; }
.FormInput--xs {
	font-size: @font-size-xs;
	line-height: 1.9;
	padding-left: .66em;
	padding-right: .66em;
}




// No Edit
// ------------------------------

// Use an exclusive class, not a modifier as they are distinctly different

/*div*/.FormInput-noedit {
	.u-text-truncate();
	background-color: darken(@body-bg, 2%);
	border-radius: @border-radius-base;
	border: 1px solid darken(@body-bg, 8%);
	color: @text-color;
	display: inline-block;
	font-size: @font-size-base;
	line-height: @component-line-height;
	height: @component-height;
	min-width: @input-noedit-width; // still unsure about this
	padding: 0 @input-padding-horizontal;
	vertical-align: middle;
	width: auto;

	// indicate clickability when using an anchor
	a& {
		background-color: fade(@link-color, 5%);
		border-color: fade(@link-color, 10%);
		color: @link-color;
		margin-right: 5px;
		min-width: 0;
		text-decoration: none;

		&:hover,
		&:focus {
			background-color: fade(@link-color, 10%);
			border-color: fade(@link-color, 10%);
			color: @link-color;
			outline: none;
			text-decoration: underline;
		};
	}
}
.FormInput-noedit--multiline {
	line-height: 1.3;
	height: auto;
	padding: .5em @input-padding-horizontal;
	white-space: normal;
}

// not sure why this was here. remove when confirm/deny
// @media (min-width: @screen-sm) {
// 	.FormInput-noedit {
// 		display: block;
// 	}
// }




// Textarea
// ------------------------------

textarea.FormInput {
	.resizable(vertical);
	height: auto;
	line-height: 1.4em;
	min-height: 6.75em; // give user's comfortable room to write - about 4 rows
	padding: .5em @input-padding-horizontal;
}




// Select
// ------------------------------


// base

.FormSelect {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
	border-bottom-color: darken(@input-border-color, 4%);
	border-top-color: lighten(@input-border-color, 4%);
	height: @component-height;

	&:focus {
		box-shadow: 0 0 0 3px fade(@input-border-color-focus, 10%);
	}
	&.disabled,
	&[disabled] {
		color: @gray-light;
	}
}


// arrows

.FormSelect__arrows {
	bottom: 0;
	line-height: @component-height;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: center;
	width: @component-height;

	& > svg {
		fill: @text-color;
	}
}
.FormSelect__arrows--disabled > svg {
	fill: @gray-light;
}