tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
137 lines (130 loc) • 4.73 kB
text/less
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
@descriptions-default-padding: 16px 24px;
@descriptions-middle-padding: 12px 24px;
@descriptions-small-padding: 8px 16px;
@descriptions-bg: #e1e6ee;
.tnt-descriptions{
&.@{descriptions-prefix-cls} {
// 加粗的头部
&.tnt-descriptions-title-weight{
>.@{descriptions-prefix-cls}-title{
font-weight: 600 ;
}
}
// label中有标签前缀
.tnt-descriptions-label-tag{
color:@primary-color;
margin-right: 4px;
}
// title样式
&[class*="tnt-descriptions-title-theme"]{
// 默认色主题
.@{descriptions-prefix-cls}-title{
font-size:@font-size-base;
position: relative;
margin-bottom:12px;
padding-left:12px;
font-weight: 400;
&::before{
content: '';
width: 4px;
height: 12px;
background-color: @primary-color;
border-radius: @border-radius-base;//8px;
position: absolute;
top:5px;
left:0;
}
}
// 默认没有前面的线条展示
&.tnt-descriptions-title-theme-none{
>.@{descriptions-prefix-cls}-title{
padding-left:0;
&::before{
content: '';
display: none;
}
}
}
}
// 带边框
&-bordered {
&.tnt-descriptions-ellipsis{
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.@{descriptions-prefix-cls}-item-label{
width: 180px; // 其他语言模式默认180
background-color: @fill-color-quaternary; //#F8F9FB;
}
}
&.@{descriptions-prefix-cls}-cn{
.@{descriptions-prefix-cls}-item-label{
width: 160px; // 中文160
}
}
.@{descriptions-prefix-cls}-view > table {
table-layout: fixed;
}
.@{descriptions-prefix-cls}-item-label{
background-color: fade(@descriptions-bg, 40%); ;
}
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
padding: @descriptions-small-padding;
border-right: 0;
}
}
// 不带边框
&:not(.@{descriptions-prefix-cls}-bordered ){
.@{descriptions-prefix-cls}-item{
height: 30px;
line-height: 30px;
position: relative;
padding:0;
&:not(:first-of-type){
padding-left: 12px;
&::before{
content: "";
left:0;
position: absolute;
width:1px;
background-color: @descriptions-bg;
height:16px;
top: 50%;
margin-top:-8px;
}
}
.@{descriptions-prefix-cls}-item-no-label{
display: none;
}
.@{descriptions-prefix-cls}-item-content{
display: flex;
width: 100%;
height:100%;
align-items: center;
&>.tntd-ellipsis,>.tnt-ellipsis{
width: 100%;
height: 100%;
align-items: center;
.tnt-descriptions-label-title{
max-width: 70%;
margin-right: 8px;
color: tint(@bg-color-spotilight, 50%);//#8B919E;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
&+.tnt-descriptions-item{
flex:1;
padding-right: 8px;
}
}
}
}
}
}
}
}