fineui/src/less/base/single/button/button.less

@import "../../../index";
@hoverVal: opacity .3s ease;
@activeVal: transform .5s ease, opacity 1s ease;
@activeStopVal: transform 0s;
body .bi-button, #body .bi-button {
  .border-radius(2px);
  border: 1px solid @color-bi-border-highlight;
  background-color: @color-bi-background-highlight;
  .box-sizing(border-box);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  &.block {
    font-size: inherit;
    border-width: 0;
    .border-radius(0px);
  }
  &.clear {
    font-size: inherit;
    border-width: 0;
    background-color: transparent;
    &:hover {
      .opacity(0.9);
    }
    &:active {
      .opacity(0.8);
    }
  }
  &.ghost {
    font-size: inherit;
    background-color: transparent;
  }
  &.button-common {
    &, & .b-font:before {
      color: @color-bi-text;
    }
    &.clear, &.clear .b-font:before {
      color: @color-bi-text-highlight;
    }
    &.ghost{
      &, & .b-font:before{
        color: @color-bi-text-highlight;
      }
      &:hover{
        color: @color-bi-text;
        background-color: @color-bi-background-highlight;
      }
      &:active{
        background-color: @color-bi-background-highlight;
      }
    }
  }
  &.button-ignore {
    & {
      &, & .b-font:before {
        color: @color-bi-text-highlight;
      }
      background-color: transparent;
      border-color: @color-bi-border-highlight;
    }
    &.clear {
      background-color: transparent;
      border-width: 0;
    }
  }
  &.button-success {
    & {
      &, & .b-font:before {
        color: @color-bi-text;
      }
      background-color: @color-bi-background-success;
      border-color: @color-bi-border-success;
    }
    &.clear {
      &, & .b-font:before {
        color: @color-bi-text-success;
      }
      background-color: transparent;
      border-width: 0;
    }
  }
  &.button-warning {
    & {
      &, & .b-font:before {
        color: @color-bi-text;
      }
      background-color: @color-bi-background-warning;
      border-color: @color-bi-border-warning;
    }
    &.clear {
      &, & .b-font:before {
        color: @color-bi-text-redmark;
      }
      background-color: transparent;
      border-width: 0;
    }
  }
  &.button-error {
    & {
      &, & .b-font:before {
        color: @color-bi-text;
      }
      background-color: @color-bi-background-failure;
      border-color: @color-bi-border-failure;
    }
    &.clear {
      &, & .b-font:before {
        color: @color-bi-text-failure;
      }
      background-color: transparent;
      border-width: 0;
    }
  }
  &.button-common.disabled,
  &.button-success.disabled,
  &.button-error.disabled,
  &.button-warning.disabled {
    &, &.base-disabled {
      &, & .b-font:before {
        color: @color-bi-text-disabled !important;
      }
      background: @color-bi-background-disabled !important;
      border-color: @color-bi-border-disabled !important;
    }
    &:after {
      display: none;
    }
  }
  &.button-ignore.disabled {
    &, & .b-font:before {
      color: @color-bi-text-disabled !important;
    }
    background: @color-bi-background-default !important;
    border-color: @color-bi-border-line !important;
    &:after {
      display: none;
    }
  }
  &.button-common.disabled,
  &.button-success.disabled,
  &.button-warning.disabled,
  &.button-error.disabled,
  &.button-ignore.disabled {
    &.clear {
      &, & .b-font:before {
        color: @color-bi-text-disabled !important;
      }
      background: transparent !important;
      border-width: 0 !important;
      &:hover, &:active {
        .opacity(1);
      }
    }
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-highlight !important;
      }
      background: transparent !important;
      border-color: @color-bi-text-highlight !important;
      .opacity(0.5);
    }
  }
}

.bi-basic-button {
  &.button-common, &.button-success, &.button-warning, &.button-error {
    &:after {
      content: "";
      background-color: @color-bi-button-mask;
      .border-radius(10px);
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      transform: scale(1, 1);
      .opacity(0);
      .transition(@activeVal);
      left: 0;
      top: 0;
      pointer-events: none;
    }
    &:active:after {
      transform: scale(0, 1);
      .opacity(0.1);
      .transition(@activeStopVal)
    }
    &:hover{
      & .bi-button-mask {
        .opacity(0.1);
        background-color: @color-bi-background-default;
        .transition(@hoverVal);
      }
    }
  }
  &.button-ignore {
    &:after {
      content: "";
      background-color: @color-bi-background-highlight;
      .border-radius(10px);
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      transform: scale(1, 1);
      .opacity(0);
      .transition(@activeVal);
      left: 0;
      top: 0;
      pointer-events: none;
    }
    &:active:after {
      transform: scale(0, 1);
      .opacity(0.1);
      .transition(@activeStopVal)
    }
    &:hover{
      background-color: @color-bi-blue-5;
      .transition(@hoverVal);
    }
  }
  & .popup-content{
    font-size: @font-size-14;
  }
}

.bi-theme-dark {
  body .bi-button, #body .bi-button {
    &.button-common {
      &.ghost{
        &, & .b-font:before{
          color: @color-bi-text;
          border-color: @color-bi-border-default;
        }
        &:hover{
          color: @color-bi-text-normal;
          background-color: @color-bi-background-default;
        }
        &:active{
          .background-color(@color-bi-background-default, 90%);
        }
      }
    }
    &.button-ignore {
      &:hover{
        background-color: @color-bi-blue-5;
      }
      &:active{
        background-color: @color-bi-blue-10;
      }
    }
    &.button-common.disabled{
      &.ghost {
        &, & .b-font:before {
          color: @color-bi-text !important;
        }
        background: transparent !important;
        border-color: @color-bi-border-default !important;
        .opacity(0.5);
      }
    }
  }
}