elemental/less/components/IconField.less

React UI Framework

// 
// Icons
// ==============================



// wrapper

.IconField {
	position: relative;

	&.left {
		> .FormInput { padding-left: (@input-padding-horizontal * 3); }
		> .IconField__icon {
			.border-left-radius(@border-radius-base);
			left: 0;
		}
		> .Spinner {
			left: 8px;
		}
		&.has-fill-icon > .FormInput { padding-left: (@input-padding-horizontal * 2) + 1.5; }
	}
	&.right {
		> .FormInput { padding-right: (@input-padding-horizontal * 3); }
		> .IconField__icon {
			.border-right-radius(@border-radius-base);
			right: 0;
		}
		> .Spinner {
			right: 8px;
		}
		&.has-fill-icon > .FormInput { padding-right: (@input-padding-horizontal * 2) + 1.5; }
	}
}


// icon

.IconField__icon {
	bottom: 0;
	padding-left: .6em;
	padding-right: .6em;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 2.2em;

	&::before {
		.square(1em);
		background-position: left top;
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		margin-top: -0.5em;
		position: absolute;
		text-align: center;
		top: 50%;
	}
}


// loading spinner

.IconField > .Spinner {
	margin-top: -2px;
	pointer-events: none;
	position: absolute;
	top: 50%;
}


// colour variations

.IconField__icon-color--default { color: #aaa; }
.IconField__icon-color--danger  { color: @app-danger; }
.IconField__icon-color--primary { color: @app-primary; }
.IconField__icon-color--success { color: @app-success; }
.IconField__icon-color--warning { color: @app-warning; }

.IconField__icon-fill--danger  { background-color: @app-danger;  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); color: white; }
.IconField__icon-fill--primary { background-color: @app-primary; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); color: white; }
.IconField__icon-fill--success { background-color: @app-success; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); color: white; }
.IconField__icon-fill--warning { background-color: @app-warning; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); color: white; }


// default is a special case

.IconField__icon-fill--default {
	background-color: @input-border-color;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	color: @gray;

	.FormInput:focus + & {
		box-shadow: inset -1px 0 0 darken(@input-border-color, 10%), inset 0 0 0 1px @input-border-color-focus;
	}
}


// handle focus states on differing field contexts

.field-context-danger  > .FormInput { .field-focus-state(@app-danger); }
.field-context-success > .FormInput { .field-focus-state(@app-success); }
.field-context-warning > .FormInput { .field-focus-state(@app-warning); }