fineui/src/less/core/utils/common.less

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

input,
textarea {
  border: 1px solid @color-bi-border-line;
}

.bi-theme-dark {
  input,
  textarea {
    border: 1px solid @color-bi-border-line-theme-dark;
  }
}

.base-disabled {
  cursor: default !important;
  color: @color-bi-text-disabled !important;
  & .bi-input {
    color: @color-bi-text-disabled !important;
  }
  & .bi-textarea {
    color: @color-bi-text-disabled !important;
  }
  & .b-font:before {
    color: @color-bi-text-disabled !important;
  }
}

.bi-theme-dark {
  .base-disabled {
    color: @color-bi-text-disabled-theme-dark !important;
    & .bi-input {
      color: @color-bi-text-disabled-theme-dark !important;
    }
    & .bi-textarea {
      color: @color-bi-text-disabled-theme-dark !important;
    }
    & .b-font:before {
      color: @color-bi-text-disabled-theme-dark !important;
    }
  }
}

.base-invalid {
  cursor: default !important;
}

.clearfix {
  .clearfix();
}

//基本背景色
.bi-background {
  background-color: @color-bi-background-normal;
  color: @color-bi-text-normal;
  & .bi-input {
    color: @color-bi-text-normal;
  }
  & .bi-textarea {
    color: @color-bi-text-normal;
  }
}

.bi-theme-dark {
  .bi-background {
    background-color: @color-bi-background-normal-theme-dark;
    color: @color-bi-text-theme-dark;
    & .bi-input {
      color: @color-bi-text-theme-dark;
    }
    & .bi-textarea {
      color: @color-bi-text-theme-dark;
    }
  }
}

//card
.bi-card {
  background-color: @color-bi-background-default;
  color: @color-bi-text-normal;
  & .bi-input {
    color: @color-bi-text-normal;
  }
  & .bi-textarea {
    color: @color-bi-text-normal;
  }
}

.bi-theme-dark {
  .bi-card {
    background-color: @color-bi-background-default-theme-dark;
    color: @color-bi-text-theme-dark;
    & .bi-input {
      color: @color-bi-text-theme-dark;
    }
    & .bi-textarea {
      color: @color-bi-text-theme-dark;
    }
  }
}

.bi-disabled {
  color: @color-bi-text-disabled;
  & .bi-input {
    color: @color-bi-text-disabled;
  }
  & .bi-textarea {
    color: @color-bi-text-disabled;
  }
}

.bi-theme-dark {
  .bi-disabled {
    color: @color-bi-text-disabled-theme-dark;
    & .bi-input {
      color: @color-bi-text-disabled-theme-dark;
    }
    & .bi-textarea {
      color: @color-bi-text-disabled-theme-dark;
    }
  }
}

//提示区域, 灰色字体
.bi-tips {
  color: @color-bi-text-tips;
  & .bi-input {
    color: @color-bi-text-tips;
  }
  & .bi-textarea {
    color: @color-bi-text-tips;
  }
}

//边框
.bi-border {
  border: 1px solid @color-bi-border-line;
}

.bi-border-radius {
  .border-radius(2px);
}

.bi-theme-dark {
  .bi-border {
    border: 1px solid @color-bi-border-line-theme-dark;
  }
}

.bi-border-left {
  border-left: 1px solid @color-bi-border-line;
}

.bi-theme-dark {
  .bi-border-left {
    border-left: 1px solid @color-bi-border-line-theme-dark;
  }
}

.bi-border-right {
  border-right: 1px solid @color-bi-border-line;
}

.bi-theme-dark {
  .bi-border-right {
    border-right: 1px solid @color-bi-border-line-theme-dark;
  }
}

.bi-border-top {
  border-top: 1px solid @color-bi-border-line;
}

.bi-theme-dark {
  .bi-border-top {
    border-top: 1px solid @color-bi-border-line-theme-dark;
  }
}

.bi-border-bottom {
  border-bottom: 1px solid @color-bi-border-line;
}

.bi-theme-dark {
  .bi-border-bottom {
    border-bottom: 1px solid @color-bi-border-line-theme-dark;
  }
}

//标红
.bi-keyword-red-mark {
  color: @color-bi-text-redmark;
  & .bi-input {
    color: @color-bi-text-redmark;
  }
  & .bi-textarea {
    color: @color-bi-text-redmark;
  }
}

//高亮
.bi-high-light {
  color: @color-bi-text-highlight;
  & .bi-input {
    color: @color-bi-text-highlight;
  }
  & .bi-textarea {
    color: @color-bi-text-highlight;
  }
}

.bi-error {
  color: @color-bi-text-failure;
  & .bi-input {
    color: @color-bi-text-failure;
  }
  & .bi-textarea {
    color: @color-bi-text-failure;
  }
}

.bi-high-light-background {
  background-color: @color-bi-background-highlight;
  color: @color-bi-text;
  & .bi-input {
    color: @color-bi-text;
  }
  & .bi-textarea {
    color: @color-bi-text;
  }
}

.bi-error-background {
  background-color: @color-bi-background-failure;
  color: @color-bi-text;
  & .bi-input {
    color: @color-bi-text;
  }
  & .bi-textarea {
    color: @color-bi-text;
  }
}


.bi-high-light-border {
  border-color: @color-bi-border-highlight;
}

//水印
.bi-water-mark {
  color: @font-color-tips;
  cursor: text;
  & .bi-input {
    color: @font-color-tips;
  }
  & .bi-textarea {
    color: @font-color-tips;
  }
}

.bi-theme-dark {
  .bi-water-mark {
    color: @font-color-tips-theme-dark;
    & .bi-input {
      color: @font-color-tips-theme-dark;
    }
    & .bi-textarea {
      color: @font-color-tips-theme-dark;
    }
  }
}

//resize
.bi-resizer {
  background: @color-bi-background-black;
  .opacity(0.2);
  z-index: @zIndex-tip !important;
}

.bi-theme-dark {
  .bi-resizer {
    background: @color-bi-background-default;
  }
}

.bi-mask {
  color: @color-bi-background-default;
  & .bi-input {
    color: @color-bi-background-default;
  }
  & .bi-textarea {
    color: @color-bi-background-default;
  }
  .background-color(@color-bi-background-black, 20%);
}

.bi-theme-dark {
  .bi-mask {
    color: @color-bi-background-default-theme-dark;
    & .bi-input {
      color: @color-bi-background-default-theme-dark;
    }
    & .bi-textarea {
      color: @color-bi-background-default-theme-dark;
    }
    .background-color(@color-bi-background-default, 20%);
  }
}

.bi-z-index-mask {
  //color: @color-bi-background-default;
  //& .bi-input {
  //  color: @color-bi-background-default;
  //}
  //& .bi-textarea {
  //  color: @color-bi-background-default;
  //}
  .background-color(@color-bi-background-black, 50%);
}

//只有背景变化
.bi-list-item {
  &:hover, &.hover {
    color: @color-bi-text-black;
    & .bi-input {
      color: @color-bi-text-black;
    }
    & .bi-textarea {
      color: @color-bi-text-black;
    }
    .background-color(@color-bi-background-highlight, 5%);
  }
  &.disabled {
    &, &:hover, &:active {
      background-color: transparent !important;
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}

.bi-theme-dark {
  .bi-list-item {
    &:hover, &.hover {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      .background-color(@color-bi-background-highlight, 5%);
    }
    &.disabled {
      &, &:hover, &:active {
        background-color: transparent !important;
        color: @color-bi-text-disabled-theme-dark !important;
        & .bi-input {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-textarea {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-high-light {
          color: @color-bi-text-disabled-theme-dark !important;
        }
      }
    }
  }
}

.bi-list-item-border {
  &:active, &.active {
    border: 1px solid @color-bi-border-highlight;
  }
}

//极简,hover文字高亮一下
.bi-list-item-simple {
  &:hover, &.hover {
    color: @color-bi-text-highlight;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
  }
  &.disabled {
    &, &:hover, &:active {
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}

// 只有文字在hover和active时变化
.bi-list-item-effect {
  &:hover {
    color: @color-bi-text-black;
    & .bi-input {
      color: @color-bi-text-black;
    }
    & .bi-textarea {
      color: @color-bi-text-black;
    }
  }
  &.active, &:active {
    color: @color-bi-text-highlight;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
  }
  &.disabled {
    &, &:hover, &:active {
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}

.bi-theme-dark {
  .bi-list-item-effect {
    &:hover {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
    }
    &.active, &:active {
      color: @color-bi-text-highlight;
      & .bi-input {
        color: @color-bi-text-highlight;
      }
      & .bi-textarea {
        color: @color-bi-text-highlight;
      }
    }
    &.disabled {
      &, &:hover, &:active {
        background-color: transparent !important;
        color: @color-bi-text-disabled-theme-dark !important;
        & .bi-input {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-textarea {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-high-light {
          color: @color-bi-text-disabled-theme-dark !important;
        }
      }
    }
  }
}

//文字和背景hover和active时变化, hover和点击时文本和背景变化，active后文本变化，背景不变化
.bi-list-item-active {
  &:hover, &.hover {
    color: @color-bi-text-black;
    & .bi-input {
      color: @color-bi-text-black;
    }
    & .bi-textarea {
      color: @color-bi-text-black;
    }
    .background-color(@color-bi-background-highlight, 6%);
  }
  &:active {
    color: @color-bi-text-highlight;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
    .background-color(@color-bi-background-highlight, 6%);
  }
  &.active {
    color: @color-bi-text-highlight;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
  }
  &.disabled {
    &, &:hover, &:active {
      background-color: transparent !important;
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}

.bi-theme-dark {
  .bi-list-item-active {
    &:hover, &.hover {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      .background-color(@color-bi-background-default, 5%);
    }
    &.active, &:active {
      color: @color-bi-text-highlight;
      & .bi-input {
        color: @color-bi-text-highlight;
      }
      & .bi-textarea {
        color: @color-bi-text-highlight;
      }
      .background-color(@color-bi-background-default, 5%);
    }
    &.disabled {
      &, &:hover, &:active {
        background-color: transparent !important;
        color: @color-bi-text-disabled-theme-dark !important;
        & .bi-input {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-textarea {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-high-light {
          color: @color-bi-text-disabled-theme-dark !important;
        }
      }
    }
  }
}

//文字和背景hover和active时变化 hover和点击时边框变化，active后背景和边框变化
.bi-list-item-active2 {
  &:hover, &.hover {
    color: @color-bi-text-black;
    & .bi-input {
      color: @color-bi-text-black;
    }
    & .bi-textarea {
      color: @color-bi-text-black;
    }
    &.bi-border {
      border-color: @color-bi-border-highlight;
    }
  }
  &:active {
    color: @color-bi-text-highlight;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
    &.bi-border {
      border-color: @color-bi-border-highlight;
    }
  }
  &.active {
    color: @color-bi-text;
    & .bi-input {
      color: @color-bi-text;
    }
    & .bi-textarea {
      color: @color-bi-text;
    }
    &.bi-border {
      border-color: @color-bi-border-highlight;
    }
    background-color: @color-bi-background-highlight;
  }
  &.disabled {
    &, &:hover, &:active {
      background-color: transparent !important;
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}

.bi-theme-dark {
  .bi-list-item-active2 {
    &:hover, &.hover {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      background-color: @color-bi-background-default-theme-dark;
    }
    &.active, &:active {
      color: @color-bi-text-highlight;
      & .bi-input {
        color: @color-bi-text-highlight;
      }
      & .bi-textarea {
        color: @color-bi-text-highlight;
      }
      background-color: @color-bi-background-default-theme-dark;
    }
    &.disabled {
      &, &:hover, &:active {
        background-color: transparent !important;
        color: @color-bi-text-disabled-theme-dark !important;
        & .bi-input {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-textarea {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-high-light {
          color: @color-bi-text-disabled-theme-dark !important;
        }
      }
    }
  }
}

//文字和背景hover和active时变化 hover
.bi-list-item-active3 {
  &:hover, &.hover {
    color: @color-bi-text-black;
    & .bi-input {
      color: @color-bi-text-black;
    }
    & .bi-textarea {
      color: @color-bi-text-black;
    }
    .background-color(@color-bi-background-highlight, 6%);
  }
  &:active, &.active {
    color: @color-bi-text-highlight;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
    .background-color(@color-bi-background-highlight, 6%);
  }
  &.disabled {
    &, &:hover, &:active {
      background-color: transparent !important;
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}

.bi-theme-dark {
  .bi-list-item-active3 {
    &:hover, &.hover {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      .background-color(@color-bi-background-highlight, 6%);
    }
    &:active, &.active {
      color: @color-bi-text-highlight;
      & .bi-input {
        color: @color-bi-text-highlight;
      }
      & .bi-textarea {
        color: @color-bi-text-highlight;
      }
      .background-color(@color-bi-background-highlight, 6%);
    }
    &.disabled {
      &, &:hover, &:active {
        background-color: transparent !important;
        color: @color-bi-text-disabled-theme-dark !important;
        & .bi-input {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-textarea {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-high-light {
          color: @color-bi-text-disabled-theme-dark !important;
        }
      }
    }
  }
}

// 激活和选中时背景高亮
.bi-list-item-select {
  &:hover, &.hover {
    .background-color(@color-bi-background-highlight, 6%);
  }
  &:active, &.active {
    color: @color-bi-text;
    & .bi-input {
      color: @color-bi-text;
    }
    & .bi-textarea {
      color: @color-bi-text;
    }
    background-color: @color-bi-background-highlight;
    & .bi-high-light {
      color: @color-bi-text;
    }
  }
  &.button-success {
    &:active, &.active {
      color: @color-bi-text;
      background-color: @color-bi-background-success;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      & .bi-high-light {
        color: @color-bi-text;
      }
      &.bi-high-light-border {
        border-color: @color-bi-border-success;
      }
    }
  }
  &.button-warning {
    & {
      color: @color-bi-text-failure;
      & .bi-input {
        color: @color-bi-text-failure;
      }
      & .bi-textarea {
        color: @color-bi-text-failure;
      }
      & .bi-high-light {
        color: @color-bi-text-failure;
      }
      &.bi-high-light-border {
        border-color: @color-bi-border-failure;
      }
    }
    &:hover, &.hover {
      color: @color-bi-text-failure;
      & .bi-input {
        color: @color-bi-text-failure;
      }
      & .bi-textarea {
        color: @color-bi-text-failure;
      }
      background-color: @color-bi-background-light-failure;
      & .bi-high-light {
        color: @color-bi-text-failure;
      }
      &.bi-high-light-border {
        border-color: @color-bi-border-failure;
      }
    }
    &:active, &.active {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      background-color: @color-bi-background-failure;
      & .bi-high-light {
        color: @color-bi-text;
      }
      &.bi-high-light-border {
        border-color: @color-bi-border-failure;
      }
    }
  }
  &.disabled {
    color: @color-bi-text-disabled !important;
    & .bi-input {
      color: @color-bi-text-disabled !important;
    }
    & .bi-textarea {
      color: @color-bi-text-disabled !important;
    }
    background-color: transparent !important;
    & .bi-high-light {
      color: @color-bi-text-disabled !important;
    }
    &.bi-high-light-border {
      border-color: @color-bi-border-disabled;
    }
    &.hover, &.active {
      color: @color-bi-text !important;
      & .bi-input {
        color: @color-bi-text !important;
      }
      & .bi-textarea {
        color: @color-bi-text !important;
      }
      background-color: @color-bi-background-dark-gray !important;
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
      &.bi-high-light-border {
        border-color: @color-bi-border-disabled;
      }
    }
  }
}

//与bi-list-item-select的区别是背景是灰的
.bi-list-item-select2 {
  &:hover, &.hover {
    background-color: @color-bi-background-normal;
  }
  &:active, &.active {
    color: @color-bi-text;
    & .bi-input {
      color: @color-bi-text-highlight;
    }
    & .bi-textarea {
      color: @color-bi-text-highlight;
    }
    background-color: @color-bi-background-normal;
    & .bi-high-light {
      color: @color-bi-text;
    }
  }
}

.bi-theme-dark {
  .bi-list-item-select {
    &:hover, &.hover {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      .background-color(@color-bi-background-default, 5%);
    }
    &:active, &.active {
      color: @color-bi-text;
      & .bi-input {
        color: @color-bi-text;
      }
      & .bi-textarea {
        color: @color-bi-text;
      }
      background-color: @color-bi-background-highlight;
      & .bi-high-light {
        color: @color-bi-text;
      }
    }
    &.disabled {
      &, &:hover, &:active {
        background-color: transparent !important;
        color: @color-bi-text-disabled-theme-dark !important;
        & .bi-input {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-textarea {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-high-light {
          color: @color-bi-text-disabled-theme-dark !important;
        }
      }
    }
  }
}

//去掉list-item效果
.bi-list-item-none {
  &:hover, &.hover {
    color: inherit;
    & .bi-input {
      color: inherit;
    }
    & .bi-textarea {
      color: inherit;
    }
    background-color: transparent;
  }
  &:active, &.active {
    color: inherit;
    & .bi-input {
      color: inherit;
    }
    & .bi-textarea {
      color: inherit;
    }
    background-color: transparent;
    & .bi-high-light {
      color: inherit;
    }
  }
  &.disabled {
    &, &:hover, &:active {
      color: @color-bi-text-disabled !important;
      & .bi-input {
        color: @color-bi-text-disabled !important;
      }
      & .bi-textarea {
        color: @color-bi-text-disabled !important;
      }
      background-color: transparent !important;
      & .bi-high-light {
        color: @color-bi-text-disabled !important;
      }
    }
  }
}

.bi-theme-dark {
  .bi-list-item-none {
    &:hover, &.hover {
      color: inherit;
      & .bi-input {
        color: inherit;
      }
      & .bi-textarea {
        color: inherit;
      }
      background-color: transparent;
    }
    &:active, &.active {
      color: inherit;
      & .bi-input {
        color: inherit;
      }
      & .bi-textarea {
        color: inherit;
      }
      background-color: transparent;
      & .bi-high-light {
        color: inherit;
      }
    }
    &.disabled {
      &, &:hover, &:active {
        background-color: transparent !important;
        color: @color-bi-text-disabled-theme-dark !important;
        & .bi-input {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-textarea {
          color: @color-bi-text-disabled-theme-dark !important;
        }
        & .bi-high-light {
          color: @color-bi-text-disabled-theme-dark !important;
        }
      }
    }
  }
}