155 lines
2.8 KiB
SCSS
155 lines
2.8 KiB
SCSS
@use 'sass:map';
|
|
|
|
@use '../mixins/mixins.scss' as *;
|
|
@use '../var/size.scss' as *;
|
|
|
|
$input-sizes: () !default;
|
|
$input-sizes: map-merge(
|
|
(
|
|
'sm': (
|
|
'padding': 10rpx,
|
|
'font-size': 24rpx,
|
|
),
|
|
'': (
|
|
'padding': 16rpx,
|
|
'font-size': 28rpx,
|
|
),
|
|
'lg': (
|
|
'padding': 20rpx,
|
|
'font-size': 32rpx,
|
|
),
|
|
),
|
|
$input-sizes
|
|
);
|
|
|
|
@include b(input) {
|
|
display: inline-flex;
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
padding: map-get(map-get($input-sizes, ''), 'padding');
|
|
font-size: map-get(map-get($input-sizes, ''), 'font-size');
|
|
border-radius: 15rpx;
|
|
overflow: auto;
|
|
|
|
/* 下划线边框去掉圆角 */
|
|
@include m(underline) {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* 输入框类型 start */
|
|
@include m(input) {
|
|
align-items: center;
|
|
}
|
|
/* 输入框类型 end */
|
|
|
|
/* 文字对齐方式 start */
|
|
@include m(text-left) {
|
|
@include e('base') {
|
|
text-align: left;
|
|
}
|
|
}
|
|
@include m(text-right) {
|
|
@include e('base') {
|
|
text-align: right;
|
|
}
|
|
}
|
|
@include m(text-center) {
|
|
@include e('base') {
|
|
text-align: center;
|
|
}
|
|
}
|
|
/* 文字对齐方式 end */
|
|
|
|
@include e(base) {
|
|
flex-grow: 1;
|
|
|
|
position: relative;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
@include e(textarea) {
|
|
@include when(custom-height) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
@include e(input) {
|
|
@include m(select) {
|
|
z-index: 1;
|
|
:deep(.uni-input-input) {
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 右边图标 start */
|
|
@include e(icon) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
position: relative;
|
|
height: 100%;
|
|
padding-left: 10rpx;
|
|
line-height: 1;
|
|
color: var(--tn-color-gray);
|
|
|
|
[class*='validate'] {
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
@include m(validate-error) {
|
|
color: var(--tn-color-red);
|
|
}
|
|
@include m(validate-success) {
|
|
color: var(--tn-color-green);
|
|
}
|
|
}
|
|
/* 右边图标 end */
|
|
|
|
/* 尺寸 start */
|
|
@each $size in $tn-form-sizes {
|
|
@include m($size) {
|
|
padding: map-get(map-get($input-sizes, $size), 'padding');
|
|
font-size: map-get(map-get($input-sizes, $size), 'font-size');
|
|
}
|
|
}
|
|
/* 尺寸 end */
|
|
|
|
/* 禁止输入 start */
|
|
@include m(disabled) {
|
|
background-color: var(--tn-color-gray-light);
|
|
}
|
|
/* 禁止输入 end */
|
|
|
|
/* 插槽 start */
|
|
@include e(slot) {
|
|
@include m(left) {
|
|
margin-right: 8rpx;
|
|
}
|
|
@include m(right) {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
/* 插槽 end */
|
|
|
|
/* 字数统计 start */
|
|
@include when(show-word-limit) {
|
|
padding-bottom: 40rpx;
|
|
}
|
|
@include e(word-limit) {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
/* 字数统计 end */
|
|
}
|