gxt_app/uni_modules/lime-textarea/components/l-textarea/index.scss

@import '@/uni_modules/lime-style/index.scss';
@import '@/uni_modules/lime-style/mixins/utilities.scss';
@import '@/uni_modules/lime-style/mixins/hairline.scss';
/* #ifdef  uniVersion >= 4.75 */ 
$use-css-var: true;
/* #endif */
$textarea: #{$prefix}-textarea;

$textarea-padding-y: create-var(textarea-padding-y, $spacer); // 文本框垂直方向间距
$textarea-padding-x: create-var(textarea-padding-x, $spacer); // 文本框水平方向间距
/* #ifdef APP-IOS */ 
$textarea-text-line-height: create-var(textarea-text-line-height, 22px);//48rpx); // 输入框文本行高
$textarea-label-line-height: create-var(textarea-label-line-height, 24px);// 44rpx); // 标签文本行高
$textarea-placeholder-line-height: create-var(textarea-label-line-height, 20px);// 44rpx); // 标签文本行高
/* #endif */
/* #ifdef APP-HARMONY */ 
$textarea-text-line-height: create-var(textarea-text-line-height, 24px);//48rpx); // 输入框文本行高
$textarea-label-line-height: create-var(textarea-label-line-height, 29px);// 44rpx); // 标签文本行高
/* #endif */
/* #ifndef APP-IOS || APP-HARMONY */ 
$textarea-text-line-height: create-var(textarea-text-line-height, 24px);//48rpx); // 输入框文本行高
$textarea-label-line-height: create-var(textarea-label-line-height, 22px);// 44rpx); // 标签文本行高
/* #endif */
$textarea-label-width: create-var(textarea-label-width, 64px); // 标签文本行高
$textarea-label-padding-right: create-var(textarea-label-padding-right, $spacer);
$textarea-label-padding-bottom: create-var(textarea-label-padding-bottom, $spacer-xs);
$textarea-indicator-text-line-height: create-var(textarea-indicator-text-line-height,20px); // 计数器文本行高
$textarea-indicator-text-padding-top: create-var(textarea-indicator-text-padding-top, $spacer-xs); // 计数器文本顶部间距
$textarea-indicator-text-align: create-var(textarea-indicator-text-align, right); // 计数器文本对齐方式
$textarea-border-width: create-var(textarea-border-width, 1px); // 文本框边框大小
$textarea-indicator-text-font-size: create-var(textarea-indicator-text-font-size, $spacer-sm); // 计数器文本大小
$textarea-label-font-size: create-var(textarea-label-font-size, $font-size); // 标签文本大小
$textarea-label-large-font-size: create-var(textarea-label-large-font-size, $font-size-md); // 标签文本大小
$textarea-text-font-size: create-var(textarea-text-font-size, $font-size-md); ; // 输入框文本大小
$textarea-placeholder-font-size: create-var(textarea-placeholder-font-size, $font-size-md); ; // 占位符文本大小

// 文本框背景颜色
$textarea-bg-color: create-var(textarea-bg-color, $bg-color-container);
// 占位符文本颜色
$textarea-placeholder-color: create-var(textarea-placeholder-color, $text-color-3);
// 输入框文本颜色
$textarea-text-color: create-var(textarea-text-color, $text-color-1);
// 标签文本颜色
$textarea-label-color: create-var(textarea-label-color, $text-color-1);
// 计数器文本颜色
$textarea-indicator-text-color: create-var(textarea-indicator-text-color, $text-color-3);
// 文本框圆角大小
$textarea-border-radius: create-var(textarea-border-radius, $border-radius);
// 文本框边框颜色
$textarea-border-color: create-var(textarea-border-color, $border-color-1);
$textarea-focused-border-color: create-var(textarea-focused-border-color, $primary-color);

// 文本框禁用状态时的输入文本颜色
$textarea-disabled-text-color: create-var(textarea-disabled-text-color, $text-color-4);


$textarea-border-left-space: create-var(textarea-border-left-space, $spacer);
$textarea-border-right-space: create-var(textarea-border-right-space, 0);

$textarea-classic-padding-x: create-var(textarea-classic-padding-x, $spacer);
$textarea-classic-padding-y: create-var(textarea-classic-padding-y, $spacer-sm);

.#{$textarea} {
	@include flex;
	
	box-sizing: border-box;
	// padding: $textarea-padding-y $textarea-padding-x;
	@include padding($textarea-padding-y $textarea-padding-x);
	background-color: $textarea-bg-color;
	&--horizontal {
		flex-direction: row;
	}
	&--vertical {
		@include flex-column;
	}
	//:not(:empty) 
	&__label{
	   
	    color: $textarea-label-color;
	    flex-shrink: 0;
	    line-height: $textarea-label-line-height;
		// background-color: azure;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
		&--vertical {
			font-size: $textarea-label-font-size;
			padding-bottom: $textarea-label-padding-bottom;
		}
		&--horizontal {
			font-size: $textarea-label-large-font-size;
			margin-right: $textarea-label-padding-right;
			 // padding-bottom: $textarea-label-padding-bottom;
		}
	}
	 &__wrapper {
	   @include flex;
	   @include flex-column;
	   flex: 1;
	    // width: 100%;
	    // flex: 1 1 auto;
		// background-color: antiquewhite;
	    overflow: hidden;
	
	    &-inner {
			// flex: 1;
			flex: 1 1 auto;
			width: 100%;
			box-sizing: border-box;
			// width: inherit;
			min-width: 0;
			min-height: 20px;
			margin: 0;
			padding: 0;
			text-align: left;
			background-color: transparent;
			border: 0;
			@include resize-none;
			font-size: $textarea-text-font-size;
			color: $textarea-text-color;
			line-height: $textarea-text-line-height;
	    }
	}
	 &__placeholder {
	    color: $textarea-placeholder-color;
	    font-size: $textarea-placeholder-font-size;
		/* #ifdef APP-IOS */
		line-height: $textarea-placeholder-line-height;
		/* #endif */
		/* #ifndef APP-IOS */
		line-height: $textarea-text-line-height;
		/* #endif */
		/* #ifndef APP || WEB */
		position: absolute;
		left: 0;
		top: 0;
		/* #endif */
	}
	
	  &__indicator {
	    flex-shrink: 0;
	    color: $textarea-indicator-text-color;
	    font-size: $textarea-indicator-text-font-size;
	    text-align: $textarea-indicator-text-align;
	    line-height: $textarea-indicator-text-line-height;
	    padding-top: $textarea-indicator-text-padding-top;
	}
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */ 
	&__border {
		position: absolute;
		left: $textarea-border-left-space;
		right: $textarea-border-right-space;
		bottom: 0;
		height: 1rpx;
		background-color: $textarea-border-color;
	}
	 /* #endif */
	&--border {
	    position: relative;
	    /* #ifdef APP-HARMONY */
	    // border-bottom: 0.5px solid $textarea-border-color;
	    /* #endif */
	    /* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	    &::after {
	    	@include hairline-bottom($textarea-border-color, $textarea-border-left-space, $textarea-border-right-space)
	    }
	    /* #endif */
		
		&-focused {
			border-bottom-color: $textarea-focused-border-color;
		}
		// border-radius: $textarea-border-radius;
	    // border: $textarea-border-width solid $textarea-border-color;
	}
	
	.is-disabled {
	    color: $textarea-disabled-text-color;
	}
	
	&--classic {
		// padding: $textarea-classic-padding;
		@include padding($textarea-classic-padding-y $textarea-classic-padding-x);
		// border-radius: $textarea-border-radius;
		@include border-radius($textarea-border-radius);
		// border: 0.5px solid $textarea-border-color;
		border-width: 0.5px;
		border-style: solid;
		border-color: $textarea-border-color;
		
		&-focused {
			border-color: $textarea-focused-border-color;
		}
		// align-items: center;
		// &-default {
		// 	border-color: $textarea-border-color
		// }
		// &-error {
		// 	border-color: $textarea-error-tips-color
		// }
		// &-success {
		// 	border-color: $textarea-success-tips-color
		// }
		// &-warning {
		// 	border-color: $textarea-warning-tips-color
		// }
		&-disabled {
			// background: $textarea-disabled-bg-color
		}
	}
}