captain-ui/lib/ump-timelimited-discount/src/styles/button.css

有赞vue wap业务组件库

@import '../../../common/var.css';

.cap-ump-limitdiscount-goods__action {
  width: 70px;
  line-height: 24px;
  font-size: 12px;
  text-align: center;
  box-sizing: border-box;
}

.cap-ump-limitdiscount--btn-0,
.cap-ump-limitdiscount--btn-2 {
  .cap-ump-limitdiscount-goods__action {
    line-height: 22px;
  }
}

/* 按钮样式1 */
.cap-ump-limitdiscount--btn-0 {
  .cap-ump-limitdiscount-goods__action {
    color: $red;
    border: 1px solid $red;
    border-radius: 20px;
  }

  /* 活动未开始按钮样式 */
  .cap-ump-limitdiscount-goods--not-start {
    .cap-ump-limitdiscount-goods__action {
      color: $green;
      border-color: $green;
    }
  }
}

/* 按钮样式2 */
.cap-ump-limitdiscount--btn-1 {
  .cap-ump-limitdiscount-goods__action {
    color: $white;
    background: $red;
    border-radius: 20px;
  }

  /* 活动未开始按钮样式 */
  .cap-ump-limitdiscount-goods--not-start {
    .cap-ump-limitdiscount-goods__action {
      background: $green;
    }
  }
}

/* 按钮样式3 */
.cap-ump-limitdiscount--btn-2 {
  .cap-ump-limitdiscount-goods__action {
    color: $red;
    border: 1px solid $red;
    border-radius: 2px;
  }

  /* 活动未开始按钮样式 */
  .cap-ump-limitdiscount-goods--not-start {
    .cap-ump-limitdiscount-goods__action {
      color: $green;
      border-color: $green;
    }
  }
}

/* 按钮样式4 */
.cap-ump-limitdiscount--btn-3 {
  .cap-ump-limitdiscount-goods__action {
    color: $white;
    background: $red;
    border-radius: 2px;
  }

  /* 活动未开始按钮样式 */
  .cap-ump-limitdiscount-goods--not-start {
    .cap-ump-limitdiscount-goods__action {
      background: $green;
    }
  }
}

/* 预览按钮大小调整 */

@media screen and (max-width: 320px) {

  .cap-ump-limitdiscount--small {

    .cap-ump-limitdiscount-goods__action {
      width: 62px;
    }
  }
}