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

@import "../../../index.less";
@hoverVal: opacity .3s ease;
@activeVal: transform .5s ease, opacity 1s ease;
@activeStopVal: transform 0s;
body .bi-button, #body .bi-button {
  &.hack {
    .border-radius(0px);
  }
  .border-radius(2px);
  outline: 0;
  border: 1px solid @color-bi-border-button;
  background-color: @color-bi-background-button;
  .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, &:focus {
      .opacity(0.8);
    }
    &:active {
      .opacity(1);
    }
    &:after {
      display: none;
    }
  }
  &.ghost {
    font-size: inherit;
    background-color: transparent;
  }
  &.button-common {
    &, & .b-font:before {
      color: @color-bi-text-common-button;
    }
    &.light {
      border-width: 0;
      background-color: @color-bi-background-common-light-button;

      &, & .b-font:before {
        color: @color-bi-text-common-light-button;
      }

      &:hover, &:focus {
        background-color: @color-bi-background-hover-common-light-button;
      }

      &.active {
        background-color: @color-bi-background-active-common-light-button;
      }
    }
    &.clear, &.clear .b-font:before {
      color: @color-bi-text-common-clear-button;
    }
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-common-ghost-button;
      }
      &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
        color: @color-bi-text;
        background-color: @color-bi-background-hover-common-ghost-button;
      }
      &:active {
        background-color: @color-bi-background-active-common-ghost-button;
      }
    }
  }
  &.button-ignore {
    & {
      background-color: @color-bi-background-ignore-button;
      &:not(.clear, .ghost) {
        border-color: @color-bi-border-ignore-button;
      }
    }
    &:not(.clear, .ghost) {
      &, & .b-font:before {
        color: @color-bi-text-ignore-button;
      }
    }
    &.clear {
      background-color: transparent;
      border-width: 0;
    }
    &.ghost {
      &:hover, &:focus {
        border-color: @color-bi-border-ignore-button;
        &, & .b-font:before {
          color: @color-bi-text-ignore-button;
        }
      }
      background-color: transparent;
      border-color: @color-bi-border-dark-gray-line;
    }
  }
  &.button-success {
    & {
      &, & .b-font:before {
        color: @color-bi-text-success-button;
      }
      background-color: @color-bi-background-success-button;
      border-color: @color-bi-border-success-button;
    }
    &.light {
      border-width: 0;
      background-color: @color-bi-background-success-light-button;

      &, & .b-font:before {
        color: @color-bi-text-success-light-button;
      }

      &:hover, &:focus {
        background-color: @color-bi-background-hover-success-light-button;
      }

      &.active {
        background-color: @color-bi-background-active-success-light-button;
      }
    }
    &.clear {
      &, & .b-font:before {
        color: @color-bi-text-success-clear-button;
      }
      background-color: transparent;
      border-width: 0;
    }
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-success-ghost-button;
      }
      background-color: transparent;
      &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
        color: @color-bi-text;
        background-color: @color-bi-background-success-button;
      }
      &:active {
        background-color: @color-bi-background-success-button;
      }
    }
  }
  &.button-warning {
    & {
      &, & .b-font:before {
        color: @color-bi-text-warning-button;
      }
      background-color: @color-bi-background-warning-button;
      border-color: @color-bi-border-warning-button;
    }
    &.light {
      border-width: 0;
      background-color: @color-bi-background-warning-light-button;

      &, & .b-font:before {
        color: @color-bi-text-warning-light-button;
      }

      &:hover, &:focus {
        background-color: @color-bi-background-hover-warning-light-button;
      }

      &.active {
        background-color: @color-bi-background-active-warning-light-button;
      }
    }
    &.clear {
      &, & .b-font:before {
        color: @color-bi-text-warning-clear-button;
      }
      background-color: transparent;
      border-width: 0;
    }
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-warning-ghost-button;
      }
      background-color: transparent;
      &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
        color: @color-bi-text;
        background-color: @color-bi-background-warning-button;
      }
      &:active {
        background-color: @color-bi-background-warning-button;
      }
    }
  }
  &.button-error {
    & {
      &, & .b-font:before {
        color: @color-bi-text-error-button;
      }
      background-color: @color-bi-background-error-button;
      border-color: @color-bi-border-error-button;
    }
    &.light {
      border-width: 0;
      background-color: @color-bi-background-error-light-button;

      &, & .b-font:before {
        color: @color-bi-text-error-light-button;
      }

      &:hover, &:focus {
        background-color: @color-bi-background-hover-error-light-button;
      }

      &.active {
        background-color: @color-bi-background-active-error-light-button;
      }
    }
    &.clear {
      &, & .b-font:before {
        color: @color-bi-text-error-clear-button;
      }
      background-color: transparent;
      border-width: 0;
    }
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-error-ghost-button;
      }
      background-color: transparent;
      &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
        color: @color-bi-text;
        background-color: @color-bi-background-error-button;
      }
      &:active {
        background-color: @color-bi-background-error-button;
      }
    }
  }
  &.button-common.disabled,
  &.button-success.disabled,
  &.button-error.disabled,
  &.button-warning.disabled {
    &, &.base-disabled {
      &, & .b-font:before {
        color: @color-bi-text-disabled-button !important;
      }
      background-color: fade(@color-bi-background-disabled-button, 20%) !important;
      @ieColor: argb(fade(@color-bi-background-disabled-button, 20%));
      filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
      border-color: @color-bi-border-disabled-button !important;
    }
    &:after {
      display: none;
    }
  }
  &.button-ignore.disabled {
    &, & .b-font:before {
      color: @color-bi-text-disabled-ignore-button !important;
    }
    background: @color-bi-background-disabled-ignore-button !important;
    border-color: @color-bi-border-disabled-ignore-button !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-ignore-clear-button !important;
      }
      background: transparent !important;
      border-width: 0 !important;
      &:hover, &:focus, &:active {
        .opacity(1);
      }
    }
    &.ghost {
      &, & .b-font:before {
        // color: @color-bi-text-disabled-ignore-ghost-button !important;
      }
      background: transparent !important;
      // border-color: @color-bi-border-disabled-ignore-ghost-button !important;
      .opacity(0.5);
    }
  }
  &.button-ignore.disabled {
    &.ghost {
      .opacity(1);
    }
  }
  &.button-common.disabled {
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-disabled-common-ghost-button !important;
      }
      border-color: @color-bi-border-disabled-common-ghost-button !important;
    }
  }
  &.button-success.disabled {
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-disabled-success-ghost-button !important;
      }
      border-color: @color-bi-border-disabled-success-ghost-button !important;
    }
  }
  &.button-warning.disabled {
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-disabled-warning-ghost-button !important;
      }
      border-color: @color-bi-border-disabled-warning-ghost-button !important;
    }
  }
  &.button-error.disabled {
    &.ghost {
      &, & .b-font:before {
        color: @color-bi-text-disabled-error-ghost-button !important;
      }
      border-color: @color-bi-border-disabled-error-ghost-button !important;
    }
  }
}

.bi-basic-button {
  &.button-common, &.button-success, &.button-warning, &.button-error {
    &:after {
      content: "";
      background-color: @color-bi-background-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;
    }
    &.hack:after {
      content: none;
    }
    &:active:after {
      transform: scale(0, 1);
      .opacity(0.1);
      .transition(@activeStopVal)
    }
    &:hover, &:focus {
      & .bi-button-mask {
        .opacity(0.1);
        background-color: @color-bi-background-hover-button-mask;
        .transition(@hoverVal);
      }
    }
  }
  &.button-ignore {
    &:after {
      content: "";
      background-color: @color-bi-background-ignore-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;
    }
    &.hack:after {
      content: none;
    }
    &:active:after {
      transform: scale(0, 1);
      .opacity(0.1);
      .transition(@activeStopVal)
    }
    &:hover, &:focus {
      &:not(.clear, .ghost) {
        background-color: @color-bi-background-hover-ignore-button-mask;
      }
      .transition(@hoverVal);
    }
  }
  & .popup-content{
    font-size: @font-size-14;
  }
}

.bi-theme-dark {
  .bi-button, #body .bi-button {
    &.button-ignore {
      background-color: @color-bi-background-ignore-button-theme-dark;
      &:hover, &:focus {
        background-color: @color-bi-background-hover-ignore-button-theme-dark;
      }
      &:active {
        background-color: @color-bi-background-active-ignore-button-theme-dark;
      }
      &.clear {
        background-color: transparent;
      }
      &.ghost {
        border-color: @color-bi-border-dark-gray-line-theme-dark;
      }
    }

    &.button-common.disabled,
    &.button-success.disabled,
    &.button-error.disabled,
    &.button-warning.disabled {
      &, &.base-disabled {
        border-color: @color-bi-border-dark-gray-line-theme-dark !important;
        background-color: fade(@color-bi-background-disabled-button-theme-dark, 20%) !important;
        @ieColor: argb(fade(@color-bi-background-disabled-button-theme-dark, 20%));
        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";

        &.clear {
          background-color: transparent !important;
        }
        &.ghost {
          // 深色系下灰化就统一用灰化色
          &, & .b-font:before {
            color: @color-bi-text-disabled-theme-dark !important;
          }
          background: transparent !important;
          .opacity(1);
        }
      }
    }
    &.button-ignore.disabled {
      &, &.base-disabled {
        &, & .b-font:before {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        border-color: @color-bi-border-dark-gray-line-theme-dark !important;
        background-color: @color-bi-background-ignore-button-theme-dark !important;
        &.clear {
          background-color: transparent !important;
        }
        &.ghost {
          background: transparent !important;
          .opacity(1);
        }
      }
    }
  }
}