opal-components/src/components/opal-text-input/index.css

[Rionite](https://github.com/Riim/Rionite) component set.

@component OpalTextInput {
	position: relative;
	display: inline-block;
	width: 400px;
	vertical-align: middle;

	@el text-field {
		display: block;
		box-sizing: border-box;
		padding: 6px 34px 6px 11px;
		width: 100%;
		border: 1px solid hsl(0,0%,68%);
		border-top-color: hsl(0,0%,66%);
		border-bottom-color: hsl(0,0%,78%);
		border-radius: 3px;
		background: #fff;
		box-shadow: inset 0 1px rgba(0,0,0,.1);
		color: #000;
		text-shadow: none;
		font: 16px/24px Verdana, Geneva, sans-serif;
		font-weight: normal;
		transition: border-color .1s linear;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
	}

	@el control-icon-slot {
		display: none;

		@mod shown {
			display: block;
		}
	}
		@el control-icon {
			position: absolute;
			top: 0;
			right: 12px;
			bottom: 0;
			display: block;
			margin: auto;
			width: 18px;
			height: 18px;
			stroke-width: 3px;
			stroke: hsl(0,0%,50%);
			stroke-linecap: round;
			stroke-linejoin: round;
			fill: none;
		}

	@el btn-clear {
		position: absolute;
		top: 0;
		right: 9px;
		bottom: 0;
		display: none;
		margin: auto;
		padding: 0;
		width: 24px;
		height: 24px;
		border: 0;
		background: transparent;
		color: hsl(0,0%,50%);
		cursor: pointer;
		transition: color .1s linear;

		@mod shown {
			display: block;
		}

		&:hover {
			color: #000;
		}

		&:focus {
			outline: none;

			body:not(._no-focus-highlight) & {
				outline: 1px solid hsl(208,94%,54%);
			}
		}

		&:active {
			transform: translateY(1px);
		}
	}
		@el btn-clear-icon {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: block;
			margin: auto;
			width: 16px;
			height: 16px;
			stroke-width: 3px;
			stroke: currentColor;
			stroke-linecap: round;
			stroke-linejoin: round;
			fill: none;
		}

	@el loader {
		position: absolute;
		top: 0;
		right: 12px;
		bottom: 0;
		margin: auto;
		border: 0;
		pointer-events: none;
	}

	&:hover {
		@el text-field {
			border-color: hsl(0,0%,58%);
			border-top-color: hsl(0,0%,56%);
			border-bottom-color: hsl(0,0%,68%);
		}
	}

	@el text-field {
		&:focus {
			outline: none;
			border-color: hsl(208,94%,54%);
		}
	}

	@mod multiline {
		&:not([auto-height=no]) {
			@el text-field {
				overflow-y: hidden;
			}
		}
	}

	@mod valid {
		@el text-field {
			&,
			&:focus {
				border-color: hsl(148,76%,40%);
			}
		}
	}

	@mod valid=no {
		@el text-field {
			&,
			&:focus {
				border-color: hsl(348,92%,58%);
			}
		}
	}

	@mod disabled {
		opacity: .5;
		pointer-events: none;

		@el text-field {
			background: hsl(0,0%,90%);
		}
	}

	/* Combinations */

	.OpalGroup .OpalGroup__content-slot > &:not(:first-child),
	.OpalGroup .OpalGroup__content-slot > *:not(:first-child) & {
		margin-right: -1px;
	}

	.OpalGroup__content-slot &:not(:first-child) .OpalTextInput__text-field,
	.OpalGroup__content-slot *:not(:first-child) & .OpalTextInput__text-field {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	.OpalGroup__content-slot &:not(:last-child) .OpalTextInput__text-field,
	.OpalGroup__content-slot *:not(:last-child) & .OpalTextInput__text-field {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}