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

@import "../../../index";

body .bi-button, #body .bi-button {
  .border-radius(2px);
  border: 1px solid @color-bi-border-highlight;
  background-color: @color-bi-background-highlight;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  font-size: 14px;
  &.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: @color-bi-background-default;
      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 !important;
      }
      background: @color-bi-background-disabled !important;
      border-color: @color-bi-border-disabled !important;
    }
  }
  &.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;
  }
  &.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, &.button-ignore {
    &:hover{
      & .bi-button-mask {
        .opacity(0.1);
        background-color: @color-bi-background-default;
      }
    }
    &:active{
      & .bi-button-mask {
        .opacity(0.1);
        background-color: @color-bi-button-mask;
      }
    }
  }
}

.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-common.disabled{
      &.ghost {
        &, & .b-font:before {
          color: @color-bi-text !important;
        }
        background: transparent !important;
        border-color: @color-bi-border-default !important;
        .opacity(0.5);
      }
    }
  }
}