tt-mp/core/button/index.less

一套组件化、可复用、易扩展的头条小程序 UI 组件库

@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.button(@theme, @bg-color, @border-color, @active-bg-color, @color) {
  &--@{theme},
  &--@{theme}--disabled {
    .button-style(@bg-color, @border-color, @color);
  }

  &--@{theme}&--hover {
    .button-hover(@active-bg-color, @color);
  }

  &--@{theme}&--outline,
  &--@{theme}&--outline&--disabled {
    .button-outline(@bg-color);
  }

  &--@{theme}&--outline&--hover {
    .button-hover(@bg-color, #fff);
  }

  &--@{theme}&--clear,
  &--@{theme}&--clear&--disabled {
    .button-clear(@active-bg-color);
  }

  &--@{theme}&--clear&--hover {
    opacity: @button-opacity-hover !important;
  }
}

.@{wux-prefix}-button {
  .button-reset();

  position: relative;
  display: inline-block;
  // margin-left: auto;
  // margin-right: auto;
  // padding-left: 14px;
  // padding-right: 14px;
  box-sizing: border-box;
  // font-size: 18px;
  // text-align: center;
  // text-decoration: none;
  // line-height: 2.55555556;
  // border-radius: 5px;
  // -webkit-tap-highlight-color: transparent;
  // overflow: hidden;
  // color: #000000;
  // background-color: #F8F8F8;

  margin: 0;
  padding: 0 @button-padding-base;
  min-width: (@button-padding-base * 3) + @button-font-size-base;
  min-height: @button-height-base !important;
  border: none;
  border-radius: @button-border-radius;
  vertical-align: middle;
  text-align: center;
  text-overflow: ellipsis;
  font-size: @button-font-size-base;
  line-height: @button-height-base - 2px;
  cursor: pointer;

  &::after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    border: none;
    transform: none;
    transform-origin: 0 0;
    box-sizing: border-box;
    border-radius: 0;
  }

  &--bordered {
    border: 1px solid transparent;
  }

  &--disabled {
    opacity: @button-opacity-disabled !important;
  }

  &--small {
    padding: 2px @button-padding-sm 1px;
    min-width: @button-height-sm - 2px;
    min-height: @button-height-sm !important;
    font-size: @button-font-size-sm;
    line-height: @button-height-sm - 4px;
  }

  &--large {
    padding: 0 @button-padding-lg;
    min-width: (@button-padding-lg * 3) + @button-font-size-lg;
    min-height: @button-height-lg !important;
    font-size: @button-font-size-lg;
    line-height: @button-height-lg - 6px;
  }

  &--block,
  &--full {
    width: 100% !important;
    margin-top: @button-block-margin;
    margin-bottom: @button-block-margin;
  }

  &--block {
    display: block;
    clear: both;

    &::after {
      clear: both;
    }
  }

  &--full {
    display: block;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
  }

  &--outline&--hover {
    color: #fff !important;
  }

  .button(light, @button-light-bg, @button-default-border, @button-light-active-bg, @button-light-text);
  .button(stable, @button-stable-bg, @button-default-border, @button-stable-active-bg, @button-stable-text);
  .button(primary, @button-primary-bg, @button-default-border, @button-primary-active-bg, @button-primary-text);
  .button(info, @button-info-bg, @button-default-border, @button-info-active-bg, @button-info-text);
  .button(error, @button-error-bg, @button-default-border, @button-error-active-bg, @button-error-text);
  .button(success, @button-success-bg, @button-default-border, @button-success-active-bg, @button-success-text);
  .button(warning, @button-warning-bg, @button-default-border, @button-warning-active-bg, @button-warning-text);
  .button(royal, @button-royal-bg, @button-default-border, @button-royal-active-bg, @button-royal-text);
  .button(dark, @button-dark-bg, @button-default-border, @button-dark-active-bg, @button-dark-text);

  &--light&--outline {
    .button-outline(@button-light-border);
  }

  &--light&--outline&--hover {
    .button-hover(@button-light-border, #fff);
  }

  &--stable&--outline {
    .button-outline(@button-stable-border);
  }

  &--stable&--outline&--hover {
    .button-hover(@button-stable-border, #fff);
  }
}