antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。
178 lines (147 loc) • 3.17 kB
text/less
@import (reference) '../variable.less';
@import '../../style/mixins/hairline.less';
.formItemLabelHorizontal() {
width: 170 * @rpx;
margin-right: 24 * @rpx;
color: @form-item-color;
font-size: 34 * @rpx;
line-height: 48 * @rpx;
}
.formItemLabelVertical() {
font-size: 34 * @rpx;
line-height: 42 * @rpx;
color: @form-item-color;
margin-bottom: 8 * @rpx;
}
.formItemContentHorizontal() {
display: flex;
align-items: center;
}
.formItemFieldHorizontal() {
text-align: right;
}
@formItemPrefix: ant-form-item;
.@{formItemPrefix} {
background-color: @form-item-bg;
padding: 24 * @rpx 24 * @rpx 24 * @rpx 32 * @rpx;
position: relative;
.hairline('bottom');
&-line {
display: flex;
flex: 1;
align-items: center;
align-self: stretch;
max-width: 100%;
position: relative;
}
&-content {
flex: 1;
&-horizontal {
.formItemContentHorizontal();
}
}
&-error-info {
font-size: 13px;
color: @form-error-color;
line-height: 37 * @rpx;
text-align: left;
margin-top: 8 * @rpx;
}
&-help-info {
font-size: 13px;
color: @form-item-color;
line-height: 37 * @rpx;
text-align: left;
margin-top: 8 * @rpx;
}
&-label {
display: flex;
align-items: center;
font-size: 34 * @rpx;
line-height: 48 * @rpx;
overflow: visible;
position: relative;
&-text {
display: flex;
align-items: center;
position: relative;
}
&-help-content {
font-size: 30 * @rpx;
text-align: center;
white-space: nowrap;
}
&-horizontal {
.formItemLabelHorizontal();
}
&-vertical {
.formItemLabelVertical();
}
}
&-field {
flex: 1;
&-horizontal {
.formItemFieldHorizontal();
.ant-picker {
width: 100%;
justify-content: flex-end;
}
}
&-vertical {
.ant-picker {
width: 100%;
justify-content: space-between;
}
}
}
// &-other {
// display: flex;
// align-items: center;
// }
&-extra {
display: flex;
align-items: center;
font-size: 32 * @rpx;
color: @form-extra-color;
}
&-asterisk {
.@{formItemPrefix}-label-required .@{formItemPrefix}-label-text {
&::before {
content: '*';
position: absolute;
left: -18 * @rpx;
font-size: 30 * @rpx;
color: @form-asterisk-color;
}
}
}
&-text-required {
.@{formItemPrefix}-label-required .@{formItemPrefix}-label-text {
&::after {
padding-left: 4 * @rpx;
content: '(必填)';
display: block;
left: -18 * @rpx;
font-size: 30 * @rpx;
color: @form-text-color;
}
}
}
&-text-optional {
.@{formItemPrefix}-label .@{formItemPrefix}-label-text {
&::after {
padding-left: 4 * @rpx;
content: '(选填)';
display: block;
left: -18 * @rpx;
font-size: 30 * @rpx;
color: @form-text-color;
}
}
.@{formItemPrefix}-label-required .@{formItemPrefix}-label-text {
&::after {
content: none;
}
}
}
}