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

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

.base-disabled {
  cursor: not-allowed !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-icon-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-icon-disabled-theme-dark !important;
    }
  }
}

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

//focus时边框高亮
.bi-focus-shadow {
  &:focus, &:hover {
    border-color: @color-bi-border-highlight;
  }
  // ie下不支持focus-within， 和上面写在一起会导致ie下:hover不生效
  &:focus-within{
    border-color: @color-bi-border-highlight;
  }
  &.disabled {
    &:hover {
      border-color: @border-color-line;
    }
  }
}

.bi-theme-dark {
  .bi-focus-shadow {
    &.disabled {
      &:hover {
        border-color: @border-color-line-theme-dark;
      }
    }
  }
}

.clearfix {
  .clearfix();
}

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

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

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

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

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

.bi-theme-dark {
  .bi-card {
    background-color: @color-bi-background-card-theme-dark;
    color: @color-bi-text-card-theme-dark;
    & .bi-input {
      color: @color-bi-text-card-theme-dark;
    }
    & .bi-textarea {
      color: @color-bi-text-card-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;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
  &.error {
    border-color: @border-color-negative;
  }
}

.bi-border-top {
  border-top: 1px solid @color-bi-border-line;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
  &.error {
    border-color: @border-color-negative;
  }
}

.bi-border-right {
  border-right: 1px solid @color-bi-border-line;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
  &.error {
    border-color: @border-color-negative;
  }
}

.bi-border-bottom {
  border-bottom: 1px solid @color-bi-border-line;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
  &.error {
    border-color: @border-color-negative;
  }
}

.bi-border-left {
  border-left: 1px solid @color-bi-border-line;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
  &.error {
    border-color: @border-color-negative;
  }
}

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

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

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

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

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

// 分割线
.bi-split {
  border: 1px solid @border-color-light-line;
}

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

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

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

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

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

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

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

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

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

// 字体
.bi-font-helvetica-neue {
  font-family: "Helvetica Neue", Arial, Verdana, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Heiti, serif;
}

.bi-font-verdana {
  font-family: Verdana, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Heiti, serif;
}

.bi-font-arial {
  font-family: Arial, "Helvetica Neue", Verdana, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Heiti, serif;
}

.bi-font-PingFang {
  font-family: "PingFang SC", "Helvetica Neue", Verdana, Arial, "Hiragino Sans GB", "Microsoft YaHei", Heiti, serif;
}

.bi-font-hiragino-sans {
  font-family: "Hiragino Sans GB", "Helvetica Neue", Verdana, Arial, "PingFang SC", "Microsoft YaHei", Heiti, serif;
}

.bi-font-microsoft-yaHei {
  font-family: "Microsoft YaHei", "Helvetica Neue", Verdana, Arial, "PingFang SC", "Hiragino Sans GB", Heiti, serif;
}

.bi-font-heiti {
  font-family: Heiti, "Helvetica Neue", Verdana, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", serif;
}

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

.bi-font-bold {
  font-weight: 700;
}

// 标红
.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: 1px solid @color-bi-border-highlight;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
}

.bi-high-light-border-top {
  border-top: 1px solid @color-bi-border-highlight;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
}

.bi-high-light-border-right {
  border-right: 1px solid @color-bi-border-highlight;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
}

.bi-high-light-border-bottom {
  border-bottom: 1px solid @color-bi-border-highlight;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
}

.bi-high-light-border-left {
  border-left: 1px solid @color-bi-border-highlight;
  &.disabled {
    border-color: @color-bi-border-disabled !important;
  }
}

// 水印
.bi-water-mark {
  color: @color-bi-text-water-mark;
  cursor: text;
  .user-select-disable();
  & .bi-input {
    color: @color-bi-text-water-mark;
  }
  & .bi-textarea {
    color: @color-bi-text-water-mark;
  }
}

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

// resizer
.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-text;
  & .bi-input {
    color: @color-bi-text;
  }
  & .bi-textarea {
    color: @color-bi-text;
  }
  .background-color(@color-bi-background-black, 20%);
}

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

// 遮罩
.bi-z-index-mask {
  .background-color(@color-bi-background-black, 50%);
}

.bi-theme-dark {
  .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-theme-dark, 50%);
  }
}

// hover-visible的原子化形式
.bi-hover-visible-container {
  &:where(:not(&:hover)) .bi-hover-visible-item {
    display: none;
  }

  //& .bi-hover-visible-item {
  //  display: none;
  //}
  //&:hover .bi-hover-visible-item {
  //  display: block;
  //  &.bi-f-h, &.bi-f-v, &.bi-f-s-h, &.bi-f-s-v {
  //    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  //    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  //    display: -ms-flexbox; /* TWEENER - IE 10 */
  //    display: -webkit-flex; /* NEW - Chrome */
  //    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  //  }
  //  &.i-item {
  //    display: inline-block;
  //  }
  //}

  & .bi-hover-visible-item {
    visibility: hidden;
  }

  &:hover .bi-hover-visible-item {
    visibility: visible;
  }
}