@import './TableList.less';
@import './Colors.less';
@import './NotifyContent.less';

// default button
@btn-default-text: @dark;
@btn-default-border: @blue-grey;
@btn-default-background: @white;
// default hover focus button
@btn-default-hover-color: @btn-hover;
// default disabled button
@btn-d-d-text: @grey;
@btn-d-d-border: @blue-grey;
@btn-d-d-background: @light-grey;
// table
@table-head-text: @dirty-grey; //same as

@fontFamily: ~'PingFang SC, Microsoft YaHei, Helvetica, Arial, sans-serif';

@cdnPre: 'https://cdn.yufuid.com/common/static/img/';

.normal-border {
  border: 1px solid @blue-grey;
  border-radius: 3px;
}

// general tab card styles
.tabs-white-background {
  .ant-tabs-card {
    // tabs header
    .ant-tabs-bar {
      margin-bottom: 0;
      border: none;

      .ant-tabs-tab {
        border: none;
        background: transparent;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding-left: 27px;
        padding-right: 27px;
      }

      .ant-tabs-tab:not(.ant-tabs-tab-active) {
        &:hover {
          color: @dark-blue;
        }
      }

      .ant-tabs-tab-active {
        .shadow-border;
        border-radius: 4px 4px 0 0;
        color: #396a8f;
        border-bottom: none;
        background: @white;
      }
      .ant-tabs-nav {
        margin-left: 5px;
      }
    }
    // tabs body
    .ant-tabs-content {
      padding: 0 5px 5px 5px;

      .ant-tabs-tabpane {
        background: @white;
        .shadow-border;
      }
      &:first-child {
        border-top-left-radius: 0;
      }
    }
  }
}

.table-item-name-link {
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  color: @dark-blue;
  cursor: pointer;
}

.table-list-thead-th {
  background-color: @white;
  color: #acb7bf;
  border-bottom: 2px solid @blue-grey;
}

.general-tag {
  height: 18px;
  border: 1px solid #91bada;
  color: #91bada;
  border-radius: 3px;
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  line-height: 18px;
  padding: 0 4px;
}

.general-logo-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  background-color: @light-grey;
}

.general-app-logo {
  width: 32px;
  height: 32px;
  margin: 12px;
}

.card-border {
  border: 1px solid @blue-grey;
  border-radius: 3px;
  background-color: @white;
}

.spin-loading-wrapper {
  width: 100%;
  min-height: 200px;
  text-align: center;
}

.text-full-width-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

// 列表标题
.list-title {
  font-size: 32px;
  //color: @dark;
  //font-weight: 300;
  color: #5b5b5b;
  font-weight: 400;
  height: 60px;
  line-height: 60px;
  margin: 20px 0;
  padding: 0;
}

// ----表格的规范样式------
// 表头文字
.thead-font-style {
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: @grey;
}
// 表头边框
.thead-border-style {
  border-bottom: 2px solid @blue-grey;
}
// 列表项title
.tbody-item-title {
  cursor: pointer;
  color: @primary;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
}
//列表项描述
.tbody-item-description {
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  color: @grey;
}
//列表项边框
.tobdy-item-border {
  border-bottom: 1px solid @blue-grey;
}
// 列表checkbox样式
.table-checkbox-style {
  outline-color: @primary;
  border-color: @primary;
}

//checkbox 颜色
.table-checkbox-with-primary-color {
  .ant-checkbox-input:focus + .ant-checkbox-inner,
  .ant-checkbox-wrapper:hover .ant-checkbox-inner,
  .ant-checkbox:hover .ant-checkbox-inner {
    border-color: @primary;
  }

  .ant-checkbox-checked .ant-checkbox-inner,
  .ant-checkbox-indeterminate .ant-checkbox-inner {
    border-color: @primary;
    background-color: @primary;
  }
}

// 去掉popover的小尖尖
.popover-custom-wrapper {
  .ant-popover-arrow {
    display: none;
  }
}

.clearFloat {
  clear: both;
}

// antd.Modal 的通用样式
.custom-modal {
  .ant-modal-header,
  .ant-modal-footer {
    background-color: @light-grey;
  }
  .ant-modal-body {
    padding: 0;
  }
}

// function
.getUrl(@sourceName) {
  background-image: url('@{cdnPre}@{sourceName}');
}

.shadow-border {
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 4px 6px 0 rgba(0, 0, 0, 0.05);
}

.shadow-tabs-white-background {
  .tabs-white-background;
  .ant-tabs-content {
    .shadow-border !important;
  }
  .ant-tabs-tab-active.ant-tabs-tab {
    .shadow-border !important;
  }
  .ant-tabs-tabpane.ant-tabs-tabpane-active {
    .shadow-border !important;
  }
}

.link {
  &:link {
    color: @primary;
  }
  &:visited {
    color: @primary;
  }
  &:hover {
    color: @blue;
  }
  &:active {
    color: @primary;
  }
}