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

125 lines
2.3 KiB
Plaintext

// @import (css) '../common/index.wxss';
@import '../common/style/index.less';
@cell-font-size: 32rpx;
@cell-line-height: 48rpx;
@cell-vertical-padding: 24rpx;
@cell-horizontal-padding: 32rpx;
@cell-text-color: rgba(0, 0, 0, 0.9);
@cell-background-color: #ffffff;
@cell-border-color: #e7e7e7;
@cell-hover-color: #f2f3f5;
@cell-required-color: #e34d59;
@cell-description-color: rgba(0, 0, 0, 0.4);
@cell-description-font-size: 28rpx;
@cell-description-line-height: 44rpx;
@cell-description-margin-top: 8rpx;
@cell-note-color: rgba(0, 0, 0, 0.4);
@cell-icon-size: 48rpx;
@cell-right-icon-color: #bbb;
@cell-gutter: 16rpx;
@cell-border-padding-left: 32rpx;
.@{prefix}-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: @cell-vertical-padding @cell-horizontal-padding;
font-size: @cell-font-size;
line-height: @cell-line-height;
color: @cell-text-color;
background-color: @cell-background-color;
&::after {
.hairline-bottom(@cell-border-color);
left: @cell-border-padding-left;
}
&--borderless::after {
display: none;
}
&__description {
font-size: @cell-description-font-size;
line-height: @cell-description-line-height;
color: @cell-description-color;
&-text {
margin-top: @cell-description-margin-top;
}
}
&__note {
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
color: @cell-note-color;
}
&__title,
&__note {
flex: 1 1 auto;
&:empty {
display: none;
}
}
&__title-text {
display: flex;
}
&__left,
&__right {
display: flex;
align-items: center;
font-size: @cell-icon-size;
line-height: @cell-line-height;
}
&__left {
&:not(:empty) {
margin-right: 16rpx;
}
&-image {
height: 112rpx;
width: 112rpx;
}
}
&__right {
margin-left: 8rpx;
color: @cell-right-icon-color;
&-icon {
color: @cell-right-icon-color;
font-size: @cell-icon-size;
line-height: @cell-line-height;
}
}
&--hover&--hover-class {
background-color: @cell-hover-color;
}
&--required {
font-size: @cell-font-size;
color: @cell-required-color;
}
&--middle {
align-items: center;
}
&--top {
align-items: flex-start;
}
&--bottom {
align-items: flex-end;
}
}