qkui-h5/dist/styles/base.less

Quick 框架组件

/*基础样式 版本 1.0.1 */
@import './size.less';
// 公共背景样式
.qk-bg-red {
  background: #ed4014;
  color: #fff;
}

.qk-bg-green {
  background: #19be6b;
  color: #fff;
}

.qk-bg-yellow {
  background: #ff9900;
  color: #fff;
}

.qk-bg-blue {
  background: #2d8cf0;
  color: #fff;
}

//公共背景样式 End

.qk-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  // width: 100%;
  flex: 1;
  min-height: 1.4rem;

  .input {
    width: 65%;
    //padding: inherit;
    // position: relative;
    // margin: inherit;
    border: none;
    height: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background: rgba(0, 0, 0, 0);
    display: inline-block;

    outline: none;
    vertical-align: middle;
    text-align: inherit;
    overflow: inherit;
    white-space: inherit;
    text-overflow: inherit;
  }

  .icon {
    font-size: 1.4em;
    margin-left: 0.5rem;
    cursor: pointer;
  }
}

.qk-input-price {
  display: inline-block;
  line-height: 1;

  .price-icon,
  .price-count {
    display: inline-block;
    line-height: 1;
  }

  .price-icon {
    font-size: @22;
  }

  .price-count {
    font-size: @26;
  }

  .price-icon-sup,
  .price-icon-sub {
    font-size: 52%;
  }

  .price-icon-sup {
    vertical-align: super;
    line-height: 1.1;
  }

  .price-icon-del,
  .price-count-del {
    font-weight: normal;
    text-decoration: line-through;
  }

  .price-count-decimal-small {
    display: inline;
    font-size: 62%;
  }
}

/* 按钮样式*/
.qk-btn {
  border: none;
  padding: 0.4rem 0.8rem;
  // border: 1px solid #e7e7e7;
  border-radius: 0.3rem;
  color: #787878;
  cursor: pointer;

  &:hover {
    color: #fff;
    background-color: #509ee3;
  }
}

.qk-btn[type='primary'] {
  color: #ffffff;
  background-color: #1aad19;
}

.qk-btn[type='default'] {
  color: #000000;
  background-color: #f8f8f8;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.qk-btn[disabled] {
  color: rgba(255, 255, 255, 0.6);
}

.qk-btn[disabled][type='default'] {
  color: rgba(0, 0, 0, 0.3);
  background-color: #f7f7f7;
}

.qk-btn[disabled][type='primary'] {
  background-color: #9ed99d;
}

.qk-btn-hover[type='default'] {
  color: rgba(0, 0, 0, 0.6);
  background-color: #dedede;
}

// 警告类操作 Normal
.qk-btn[type='warn'] {
  color: #ffffff;
  background-color: #e64340;
}

// 线框按钮
.qk-btn[plain] {
  color: #353535;
  border: 1px solid #353535;
  background-color: transparent;
}

.qk-btn[plain][disabled] {
  color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.2);
}

.qk-btn[type='primary'][plain] {
  color: #1aad19;
  border: 1px solid #1aad19;
  background-color: transparent;
}

// 角标
.qk-badge {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  &-text {
    position: absolute;
    transform: translateX(50%);
    top: -@12;
    right: 0;
    height: @32;
    line-height: @32;
    border-radius: @15;
    background: #ff0009;
    color: #fff;
    text-align: center;
    padding: 0 @10;
    font-size: @20;
    white-space: nowrap;
    z-index: 10;

    // box-shadow: 0 0 0 1px #fff;
    // box-sizing: border-box;
  }
  &-dot {
    position: absolute;
    transform: translateX(-50%);
    top: -@8;
    right: -@16;
    height: @16;
    width: @16;
    border-radius: 100%;
    background: #ff0009;

    z-index: 10;
    // box-shadow: 0 0 0 1px #fff;
  }
}