108 lines
2.0 KiB
SCSS
108 lines
2.0 KiB
SCSS
@use 'sass:map';
|
|
|
|
@use '../mixins/mixins.scss' as *;
|
|
@use '../var/size.scss' as *;
|
|
|
|
$label-position: left, right, top;
|
|
|
|
$tn-form-font-sizes: () !default;
|
|
$tn-form-font-sizes: map-merge(
|
|
(
|
|
'sm': 22rpx,
|
|
'lg': 34rpx,
|
|
),
|
|
$tn-form-font-sizes
|
|
);
|
|
|
|
@include b(form-item) {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 26rpx;
|
|
|
|
/* 错误信息 start */
|
|
@include e(error-message) {
|
|
width: 100%;
|
|
margin-top: 4rpx;
|
|
}
|
|
/* 错误信息 end */
|
|
|
|
/* formItem-wrapper start */
|
|
@include e(wrapper) {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
/* formItem-wrapper end */
|
|
|
|
/* formItem-label start */
|
|
@include e(label) {
|
|
flex-shrink: 0;
|
|
padding: 0rpx 16rpx 0rpx 0rpx;
|
|
/* 必选项星号 start */
|
|
@include m(asterisk-left) {
|
|
&::before {
|
|
content: '*';
|
|
color: var(--tn-color-red);
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
@include m(asterisk-right) {
|
|
&::after {
|
|
content: '*';
|
|
color: var(--tn-color-red);
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
/* 必选项星号 end */
|
|
}
|
|
/* formItem-label end */
|
|
|
|
/* formItem-content start */
|
|
@include e(content) {
|
|
flex-grow: 1;
|
|
}
|
|
/* formItem-content end */
|
|
|
|
/* 标签的位置 start */
|
|
@include m(label-top) {
|
|
@include e(wrapper) {
|
|
display: block;
|
|
}
|
|
|
|
@include e(label) {
|
|
width: 100%;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
@include e(content) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@include m(label-right) {
|
|
@include e(label) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
@include m(label-left) {
|
|
@include e(label) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
/* 标签的位置 end */
|
|
|
|
/* form-item 尺寸 start */
|
|
@each $size in $tn-form-sizes {
|
|
@include m($size) {
|
|
@include e(label) {
|
|
font-size: map-get($tn-form-font-sizes, $size);
|
|
}
|
|
@include e(error-message) {
|
|
font-size: map-get($tn-form-font-sizes, $size);
|
|
}
|
|
}
|
|
}
|
|
/* form-item 尺寸 end */
|
|
}
|