press-pix/pmg-drop-down/css/index.less

基于 PixUI 的 Press 组件库

@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;
}