press-pix/pmg-button/css/index.less

基于 PixUI 的 Press 组件库

@import '../../common/styles/pubgm/mixins.less';

.pmg-button-wrapper {
  position: relative;
}

.pmg-button{
  padding: 0 .08rem;
  width: 1.34rem;
  height: .4rem;
  font-size: .24rem;
  .bgUrl('comp/btn-primary-s.png');
  color: #000;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  .pmg-button-text{
    line-clamp: 2;
    width: 100%;
    text-align: center;
    word-break: break-word;
  }
  &.primary{
    &.small{
      width: 1.34rem;
      height: .4rem;
      font-size: .24rem;
      .bgUrl('comp/btn-primary-s.png');
        .pmg-button-text{
          line-clamp: 1;
        }
    }
    &.medium{
      width: 2.14rem;
      height: .64rem;
      font-size: .26rem;
      .bgUrl('comp/btn-primary-m.png');
    }
    &.xmedium{
      width: 2.58rem;
      height: .64rem;
      font-size: .26rem;
      .bgUrl('comp/btn-primary-xm.png');
    }
    &.large{
      width: 3.32rem;
      height: .64rem;
      font-size: .26rem;
      .bgUrl('comp/btn-primary-l.png');
    }
  }
  &.secondary{
    &.small{
      width: 1.34rem;
      height: .4rem;
      font-size: .24rem;
      .bgUrl('comp/btn-secondary-s.png');
        .pmg-button-text{
          line-clamp: 1;
        }
    }
    &.medium{
      width: 2.14rem;
      height: .64rem;
      font-size: .26rem;
      .bgUrl('comp/btn-secondary-m.png');
    }
    &.large{
      width: 3.32rem;
      height: .64rem;
      font-size: .26rem;
      .bgUrl('comp/btn-secondary-l.png');
    }
  }

  &.disabled{
    opacity: .55;
  }
}

//  气泡
.pmg-bubble-wrapper {
  min-width: 1rem;
  position: absolute;
  top: -.74rem;
  transform: translateX(-50%);
  background-color: rgba(18, 18, 18, 0.95);
  padding: .14rem;
  border: 1px solid rgba(255, 255, 255, .2); 
  z-index: 99;
  .pmg-bubble-text {
    color: rgba(255, 255, 255, .5);
    font-weight: bold;
    font-size: .2rem;
  }
  /* 三角箭头 */
  &::after {
    content: "";
    position: absolute;
    bottom: -.12rem;
    left: 50%;
    transform: translate(-50%,0);
    width: .13rem;
    height: .14rem;
    .bgUrl('comp/bubble-arrow.png');
  }

}

.pmg-bubble-highlight{
  color: #FFDD21;
}