press-pix
Version:
基于 PixUI 的 Press 组件库
135 lines (121 loc) • 2.5 kB
text/less
@import '../../common/styles/pubgm/mixins.less';
.pmg-dropdown-box {
position: relative;
}
.pmg-dropdown-selected {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: .4rem;
padding-left: .16rem;
padding-right: .48rem;
box-sizing: border-box;
border: .02rem solid rgba(255, 255, 255, .5);
background: rgba(36, 36, 36, .5);
flex-grow: 1;
//左侧标题的样式
.pmg-dropdown-selected-title-tight{
.pmg-dropdown-title-box{
flex-grow: 0;
color: rgba(255, 255, 255, .5);
}
}
}
.pmg-dropdown-title-box,
.pmg-dropdown-text-box{
flex-grow: 1;
display: flex;
align-items: center;
flex-direction: row;
}
.pmg-dropdown-title-box{
flex-grow: 0;
flex-shrink: 0;
}
.pmg-dropdown-title{
font-size: .22rem;
color: rgba(255, 255, 255, .7);
margin-right: .12rem;
line-clamp: 1;
}
.pmg-dropdown-text {
font-size: .22rem;
font-weight: bold;
color: #ffffff;
line-clamp: 1;
text-align: left;
}
.pmg-dropdown-icon {
position: absolute;
right: .16rem;
flex-shrink: 0;
width: .32rem;
height: .32rem;
.bgUrl('comp/dropdown-icon.png');
}
.pmg-dropdown-options {
position: absolute;
top: .4rem;
right: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border: .02rem solid rgba(255, 255, 255, 0.50);
background: rgba(18, 18, 18, .95);
overflow: scroll;
z-index: 1;
}
.pmg-dropdown-option {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-height: .56rem;
flex-shrink: 0;
padding: .12rem .16rem;
&.pmg-dropdown-option-select{
background: rgba(177, 255, 255, .2);
.pmg-dropdown-option-text{
color: #fff;
}
}
}
.pmg-dropdown-option-text{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
flex-grow: 1;
font-size: .22rem;
color: rgba(255, 255, 255, .7);
line-clamp: 2;
word-break: break-word;
}
// 搜索关键字高亮样式
.pmg-dropdown-highlight {
color: #a1fff6;
background-color: rgba(161, 255, 246, 0.2);
font-weight: bold;
}
// input
.pmg-form-input {
flex-grow: 1;
height: 100%;
font-size: .22rem;
color: #fff;
margin-right: .16rem;
text-align: right;
caret-color: #a1fff6; // 光标颜色
}
.pmg-dropdown-line{
width: .02rem;
height: .24rem;
background-color: #a1fff6;
margin-right: .16rem;
}