oak-general-business/app/miniprogram_npm/tdesign/search/search.less

84 lines
1.8 KiB
Plaintext

@import '../common/style/index.less';
@search-input-height: 80rpx;
@search-input-text-color: rgba(0, 0, 0, 0.9);
@search-input-text-disable: rgba(0, 0, 0, 0.26);
@search-input-bg: rgba(243, 243, 243, 1);
@search-label-padding-right: 8rpx;
@search-input-padding-vertical: 16rpx;
@search-input-padding-horizontal: 24rpx;
@search-input-radius-square: 8rpx;
@search-input-radius-round: 40rpx;
@search-input-font-size: @font-size-m;
@h-space-nest: @spacer;
.@{prefix}-search {
display: flex;
justify-content: space-between;
align-items: center;
&__label {
padding: @search-label-padding-right;
color: @search-input-text-color;
}
&__input-box {
flex: 1;
box-sizing: border-box;
display: flex;
height: @search-input-height;
align-items: center;
border: 2rpx solid @search-input-bg;
background: @search-input-bg;
padding: @search-input-padding-vertical @search-input-padding-horizontal;
&.@{prefix}-is-focused {
border-color: @search-input-bg;
}
&--round {
border-radius: @search-input-radius-round;
}
&--square {
border-radius: @search-input-radius-square;
}
&--center {
text-align: center;
}
.@{prefix}-input__keyword {
display: inline-block;
flex: 1;
color: @search-input-text-color;
font-size: @search-input-font-size;
padding-left: @h-space-nest;
}
.@{prefix}-icon {
color: @search-input-text-disable;
}
}
&__right {
position: relative;
margin-left: 10px;
.hotspot-expanded();
}
&__search-action {
margin-left: 30rpx;
font-size: @search-input-font-size;
color: @search-input-text-disable;
}
&__placeholder {
color: @search-input-text-disable;
&--center {
text-align: center;
}
}
}