@v4fire/client/src/form/b-input/b-input.styl

V4Fire client core library

/*!
 * V4Fire Client Core
 * https://github.com/V4Fire/Client
 *
 * Released under the MIT license
 * https://github.com/V4Fire/Client/blob/master/LICENSE
 */

@import "super/i-input-text/i-input-text.styl"

$p = {
	widthHelpers: true
	progressHelpers: true
	accessHelpers: true
	visibleHelpers: true
}

b-input extends i-input-text
	display inline-block

	&__root-wrapper
	&__wrapper
		display flex
		width 100%

	&__wrapper
		cursor text

	&__cell
		flex auto

	&__input-wrapper
		width 100%
		position relative

	&__input
		width 100%
		overflow hidden
		margin 0

		text-overflow ellipsis

		border 0
		background transparent

		// @stlint-disable
		&::-ms-clear
		// @stlint-enable
			display none

		&:focus
			-webkit-tap-highlight-color transparent

		&:focus
		&:valid
		&:invalid
			outline 0

	&__post-icon + &__clear
		display none

	&__clear
		visibility hidden
		cursor pointer

	&__progress
	&__valid-status
		pointer-events none

	&__valid-status
		display none

	&_focused_true&_empty_false:not(&_readonly_true) &__clear
		display block
		visibility visible

	&__input
		position relative
		z-index 2

	&__text-hint
		width 100%
		margin 0

		position absolute
		top 0
		left 0
		z-index 1

		overflow hidden
		text-overflow ellipsis
		white-space nowrap

		border 0
		background transparent

	&_empty_true &__text-hint
		display none