@ttk/component
Version:
ttk组件库
138 lines (136 loc) • 3.67 kB
text/less
@import '../../assets/theme/index';
.ttk-ColumnsSetting{
width: 100%;
height: auto;
// display: flex;
box-sizing: border-box;
// flex-direction: column;
overflow: hidden;
background: #fff;
padding: 8px;
padding-right: 0;
font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
.ttk-ColumnsSetting-header{
width: 100%;
height: auto;
min-height: 40px;
line-height: 40px;
display: flex;
justify-content: space-between;
overflow: hidden;
}
&-modal {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
&-line {
width: 0;
height: 80%;
position: absolute;
top: 30px;
border-left: 1px dashed #D9D9D9;
right: 50%;
}
&-item {
float: left;
height: auto;
overflow: hidden;
position: relative;
padding-right: 20px;
&:last-child{
padding-left: 20px;
padding-right: 0px;
}
& > div {
float: left;
width: 100%;
}
&-tit {
font-size: 13px;
color: #252525;
padding-bottom: 8px;
}
}
}
.ttk-ColumnsSetting-container{
width: 100%;
// flex: 1;
height: auto;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
label {
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.ttk-ColumnsSetting-item{
width: 100%;
height: 32px;
line-height: 32px;
margin: 8px 0;
input {
line-height: 40px;
font-size: 13px;
color: #515151;
}
&:hover{
.ttk-ColumnsSetting-item-action {
opacity: 1;
}
}
.ttk-ColumnsSetting-item-container{
width: 80%;
float: left;
label {
display: block;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}
.ttk-ColumnsSetting-item-action{
width: 20px;
float: right;
opacity: 0;
i:before{
font-size: 16px;
color: rgba(0,0,0,0.65)
}
i:hover{
&:before{
color: @primary-color;
}
}
i:last-child{
&:before{
font-size: 18px;
}
}
}
}
}
.ttk-ColumnsSetting-footer{
width: 100%;
text-align: right;
font-size: 13px;
color: #515151;
button{
width: 70px;
height: 30px;
margin-left: 8px;
float: right;
}
&-line {
position: absolute;
width: 100%;
display: block;
bottom: 54px;
left: 0;
border-top: 1px solid #ECECEC;
}
}
}