@import "./public";

.el-message {
  top: 20px !important;
}

.el-badge__content {
  border: none;
}

//element-ui 滚动条
.el-scrollbar.scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-scrollbar.overflow-x .el-scrollbar__wrap {
  overflow-x: hidden;
}

.el-card__header {
  padding: 6px 20px !important;
}

.el-link + .el-link {
  margin-left: 10px;
}

.el-input.is-disabled .el-input__inner {
  color: #606266;
}
/*-----------------菜单start--------------*/
.el-menu {
  border: none;

  & .el-tooltip {
    padding: 0 16px !important;
  }

  & .el-submenu__icon-arrow {
    right: 16px;
    margin-top: -6px;
    color: #b3b8c6;
    font-weight: bold;
  }
  // 菜单-fonts 颜色
  i:not(.el-submenu__icon-arrow) {
    color: @hyacinthine;
  }

  & .el-submenu__title {
    vertical-align: auto;

    i {
      margin-right: 4px;
    }
  }

  & .el-menu-item {
    height: 40px;
    line-height: 40px;
    color: #606266;
    padding: 0 16px !important;

    &:focus {
      background: none;
    }

    &:hover {
      color: @hyacinthine;
      background: none;
    }

    &:hover i {
      color: @hyacinthine;
    }

    &.is-active {
      color: @hyacinthine;
    }
  }

  & .el-menu-item.sidebar-menu-stair {
    border-bottom: 1px solid #e3ebf3;

    &.is-active {
      color: #fff;
      padding: 0 16px !important;
      background: @hyacinthine;
      transition: opacity 1s ease;

      &:hover {
        background-color: @hyacinthine !important;
        color: #fff;

        i {
          color: #fff;
        }
      }

      i {
        color: #fff;
      }
    }

    &:hover {
      background: #e6f2fa;
    }

    i {
      margin-right: 4px;
    }
  }

  & .el-submenu {
    &.is-active > .el-submenu__title {
      color: #fff;
      padding: 0 16px !important;
      background: @hyacinthine;

      &:hover {
        color: #fff;

        i {
          color: #fff;
        }
      }

      i {
        color: #fff;
      }
    }

    & > .el-submenu__title {
      border-bottom: 1px solid #e3ebf3;

      &:focus {
        background: none;
      }

      &:hover {
        color: @hyacinthine;
      }

      &:hover i {
        color: @hyacinthine;
      }
    }

    .el-menu-item {
      color: #333;
      height: 40px;
      line-height: 40px;
      min-width: 184px;
      padding-left: 48px !important;
      padding-right: 16px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:focus {
        background: none;
      }

      &:hover {
        color: @hyacinthine;
        background: none;
      }

      &.is-active {
        color: @hyacinthine;
        font-weight: bold;
      }
    }

    & > .el-submenu__title {
      height: 40px;
      line-height: 40px;
      color: #333;
      padding: 0 16px !important;
    }

    & > .el-menu--inline {
      background-color: #f1f1f1;

      & > .el-menu-item-group {
        & > .el-menu-item-group__title {
          padding: 0;
        }
      }
    }

    & > .el-menu-item-group {
      & > .el-menu-item-group__title {
        padding: 0;
      }
    }
  }

  & .el-submenu .el-menu--inline .el-menu-item,
  & .el-submenu .el-menu--inline .el-submenu__title {
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 32px;
      display: block;
      width: 3px;
      height: 40px;
    }

    &:after {
      content: "";
      position: absolute;
      top: 6px;
      left: 32px;
      display: block;
      width: 3px;
      height: 28px;
      border-radius: 1px;
      transition: 0.3s background-color ease-in;
    }
  }

  & .el-submenu .el-menu--inline .el-menu-item.is-active,
  & .el-submenu .el-menu--inline .is-active .el-submenu__title {
    &:after {
      background-color: #187bb5;
    }
  }

  &.el-menu--collapse {
    width: 48px;
  }
}

//收起后的导航悬浮框
.el-menu--vertical {
  .el-menu {
    .el-menu-item-group {
      .el-menu-item-group__title {
        padding: 0;
      }
    }
  }
}

/*-----------------菜单end--------------*/
/*-----------------分页样式start--------------*/
.pagination {
  text-align: right;
  padding: 10px 20px;
}
.el-pagination {
  padding: 0;
}

.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  height: 24px;
  margin: 0 8px;
  background: none;
  line-height: 24px;
  min-width: 24px;
  border-radius: 2px;
  font-weight: normal;
  border: 1px solid #dcdfe6;
  color: #909399;
}

.el-pagination.is-background .btn-prev:hover,
.el-pagination.is-background .btn-next:hover {
  border: 1px solid @hyacinthine;
  color: @hyacinthine;
}

.el-pager {
  .more {
    border: none !important;

    &:before {
      line-height: 24px;
    }
  }
}
.el-pagination__sizes {
  .el-input--mini .el-input__inner {
    line-height: 24px;
    height: 24px;
  }
}
.el-pagination__jump {
  margin-left: 0px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  border: 1px solid @hyacinthine;
  background-color: @hyacinthine;

  &:hover {
    color: #fff;
  }
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
  border: 1px solid @hyacinthine;
  color: @hyacinthine;
}

.el-pagination span:not([class*="suffix"]) {
  height: 24px;
  line-height: 24px;
}

.el-pagination__editor.el-input .el-input__inner {
  height: 24px;
}

/*-----------------分页样式end--------------*/

/*-----------------单选按钮样式start--------------*/
.el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}

.el-radio {
  line-height: inherit;
  margin-right: 25px;
}

.el-radio:last-child {
  margin-right: 0;
}

.el-radio__label {
  display: inline-block;
  line-height: 19px;
}

.el-radio + .el-radio {
  margin-left: 0;
}

.el-radio__input.is-checked .el-radio__inner {
  background: none;
}

.el-radio__inner:after {
  width: 7px;
  height: 7px;
  background-color: @hyacinthine;
}

.el-radio__inner:hover {
  border-color: @hyacinthine;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: @hyacinthine;
}

/*-----------------单选按钮样式end--------------*/

/*-----------------el-table表格样式start--------------*/
.el-table {
  //解决 ie浏览器 弹框中table表格展示不全的问题
  .el-table__header {
    width: 100% !important;
  }
  .el-table__body {
    width: 100% !important;
  }
  // 树结构表格 展开收起 icon 图标样式
  .el-table__expand-icon {
    color: @hyacinthine;
  }
  .el-table__body-wrapper {
    // 暂无数据样式
    .el-table__empty-block {
      min-height: 40px;
      border-bottom: 1px solid #e0e0e0;

      .el-table__empty-text {
        line-height: 40px;
      }
    }
  }
}
// el-table表格滚动
.el-table{
  @scrollable: 10px;
  // x轴
  &.el-table--scrollable-x{
    // 解决table表格滚动条无法滚动问题
    .el-table__fixed,.el-table__fixed-right {
      height:auto !important; // 此处的important表示优先于element.style
      bottom:@scrollable !important; // 改为自动高度后，设置与父容器的底部距离，则高度会动态改变
    }
    // table表格滚动条高度
    .el-table__body-wrapper::-webkit-scrollbar{
      height:@scrollable;
    }
  }
  // y轴
  &.el-table--scrollable-y{
    // 解决table表格滚动条无法滚动问题
    .el-table__fixed-right {
      right:@scrollable !important; // 改为自动宽度后，设置与父容器的底部距离，则宽度会动态改变
    }
    // table表格滚动条宽度
    .el-table__fixed-right-patch,.el-table__body-wrapper::-webkit-scrollbar{
      width:@scrollable !important;
    }
  }
}
// 自定义class 修改嵌套在form的table行高
.form_item_table {
  .el-table__header {
    th {
      padding: 6px 0;
      line-height: 27px !important;
    }
  }

  .el-table tr {
    td {
      padding: 6px 0;
    }
  }
}
/*-----------------el-table表格样式end--------------*/

/*----------------- dialog对话框样式Start--------------*/
.el-dialog__header {
  padding: 0 10px;
  line-height: 38px;
  height: 38px;
  background: @hyacinthine;

  .el-dialog__title {
    color: @white;
  }
}

.el-dialog__headerbtn {
  font-size: 15px;
  position: static;
  float: right;
  line-height: 38px;

  .el-dialog__close {
    color: @white;
  }

  &:hover .el-dialog__close {
    color: rgba(255, 255, 255, 0.5);
  }
}

.el-dialog__body {
  padding: 10px 10px 0;
}

.el-dialog__footer {
  padding: 10px;
  background-color: #f5f7f9;
  border-top: 1px solid #e0e0e0;
  text-align: center;
}

.el-range-editor--small .el-range-separator {
  width: auto;
}

.el-dialog__body-p0 {
  .el-dialog__body {
    overflow: auto;
    padding: 0;
  }
}

/*   el-dialog__body-p8  el-dialog_table  结合使用 start*/
.el-dialog__body-p8 {
  .el-dialog__body {
    height: 70vh;
    overflow: auto;
    padding: 8px;
  }
}

.el-dialog_table {
  margin-top: calc((100vh - 70vh - 52.6px - 38px) / 2) !important;
}

/*   el-dialog__body-p8  el-dialog_table  结合使用 end*/

.dialog_width {
  width: 50% !important;
}

.a_c {
  width: 65% !important;
}

.el-dialog__body-height {
  .el-dialog__body {
    height: 55vh;
    overflow: auto;
  }
}

/*----------------- dialog对话框样式End--------------*/

/*-----------修改MessageBox 弹框按钮--------------*/
.confirmBtn {
  float: right;
}

.cancelBtn {
  float: right;
  margin-left: 10px;
}

.el-message-box__headerbtn .el-message-box__close {
  color: @hyacinthine;
}

/*-----------修改MessageBox 弹框按钮--------------*/
/* 地区级联面板样式修改 start*/
.el-popper.checkStrictly {
  .el-cascader-node {
    padding: 0;

    .el-radio {
      position: absolute;
      width: 100%;
      z-index: 999;
      .el-radio__inner {
        width: 0;
        height: 0;
        border: 0;

        &:after {
          width: 0;
          height: 0;
        }
      }
    }
  }
}

/* 地区级联面板样式修改 end*/

/*el-link 表格内文字大小*/
.el-link{
  vertical-align: initial;
  .el-link--inner {
    font-size: 12px;
  }
}
// 自定义class 红色 -必填红星样式
.red-star {
  margin-left: 5px;
  color: red;
  font-style: normal !important;
}

// input数字
.el-input,
.el-textarea {
  .el-input__count {
    color: #aeb2bc;
  }
}

// 文本域字体修改
.el-textarea {
  .el-textarea__inner {
    font-family: "Microsoft YaHei", "微软雅黑";
  }
}

// 输入长度限制 展示字数统计
.show-word-limit-padding {
  .el-input__inner {
    padding-right: 55px;
  }
}

/*登录样式*/
.user_layout_login {
  padding-top: 33px;

  .rand-code-input {
    width: 210px;
  }

  .rand-code-img {
    width: 120px;
    height: 42px;
    border-radius: 4px;
  }

  .el-input__inner {
    height: 42px;
    font-size: 14px;
  }

  .el-select {
    width: 100%;
  }

  .el-checkbox__label {
    font-size: 12px;
  }

  .colorOrange {
    color: @hyacinthine;
  }

  .gray {
    color: #999;
    font-size: 12px;
  }

  .btn {
    width: 100%;
    height: 48px;
  }
}

//审核状态样式
// 成功
span.status1 {
  color: #23bd63;
  background-color: #c5f4d9;
  border-radius: 12px;
  height: 20px;
  line-height: 20px;
  max-width: 90px;
  min-width: 36px;
  margin: 0 auto;
  padding: 2px 6px;
}
// 进行中
span.status2 {
  color: #6687ed;
  background-color: #e0e7fb;
  border-radius: 12px;
  height: 20px;
  line-height: 20px;
  max-width: 90px;
  min-width: 36px;
  margin: 0 auto;
  padding: 2px 6px;
}
// 失败/审批不通过/驳回
span.status3 {
  color: #f3340f;
  background-color: #ffdede;
  border-radius: 12px;
  height: 20px;
  line-height: 20px;
  max-width: 90px;
  min-width: 36px;
  margin: 0 auto;
  padding: 2px 6px;
}
// 草稿
span.status4 {
  color: #5f6670;
  background-color: #dcdfe6;
  border-radius: 12px;
  height: 20px;
  line-height: 20px;
  max-width: 90px;
  min-width: 36px;
  margin: 0 auto;
  padding: 2px 6px;
}

/*采购立项-编辑时的 问号提示样式-Start*/
.hint.el-popover--plain {
  color: #333333;
  background-color: #fefaee;
  padding: 11px 20px;

  .popper__arrow {
    &:after {
      border-top-color: #fefaee;
    }
  }
}

.prompt {
  // margin-top: 6px;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  border-radius: 50% !important;
  overflow: hidden;
  padding: 0;
  // padding-left: 2px;
  color: #007ccc;
  border: 1px solid #007ccc;
  background-color: #e5f4fe;
  text-align: center;

  &.el-button--info:focus {
    color: #007ccc;
    border: 1px solid #007ccc;
    background-color: #e5f4fe;
  }

  &.el-button--info:hover {
    color: #007ccc;
    border: 1px solid #007ccc;
    background-color: #e5f4fe;
  }
  .iconfont{
    font-size: 12px;
    vertical-align: unset!important;
  }
  span{
    vertical-align: unset!important;
  }
}

/*采购立项-编辑时的 问号提示样式-End*/

/*驱动切换标包 dropdown样式*/
.pack_dropdown {
  .el-dropdown-link {
    border: 1px solid #c6c6c6;
    padding: 4px;
    border-radius: 3px;
    display: inline-block;
    line-height: normal;
  }
}

/*table表格内label对齐*/
.el-form {
  .from_table {
    .el-input {
      margin-right: 5px;
    }
    .el-form-item {
      .el-form-item__label:before {
        display: inline-block;
        content: "";
        width: 7px;
        margin-right: 4px;
      }

      &.is-required {
        .el-form-item__label:before {
          content: "*";
          color: #f56c6c;
        }
      }
    }

    .red-star {
      .el-form-item__label:before {
        content: "*";
        color: #f56c6c;
      }
    }
  }
}

/*开标大厅通知消息聊天框样式*/
.el-dialog-msg-wrap {
  .el-dialog__wrapper {
    display: block;
    bottom: 80px;
    right: 10px;
    z-index: 21;
    width: 25%;
    top: initial;
    left: initial;
  }

  .el-dialog-msg {
    margin: 0 !important;

    .el-dialog__footer {
      text-align: right;
    }
  }
}
.el-tabs__header{
  margin-bottom: 10px;
}
// el-tabs切换页卡片样式去掉阴影边框
.el-tabs--border-card.el-tabs-border-card-shadow-none {
  box-shadow: none;
  border-left: none;
  border-right: none;
  border-bottom: none;

  .el-tabs__content {
    padding: 10px 0 0 0;
  }
}

// el-tree 复选框模式下 父节点不可全选样式
.el-tree.el-tree-check-none {
  .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }

    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}

/*==================el-form表单必填项错误校验信息展示样式=======================*/
/*.el-form-item__error{
  background-color: #ffeef0;
  border-color: #f97583;
  position: absolute;
  z-index: 10;
  display: block;
  max-width: 450px;
  padding: 4px 8px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  &:before{
    border-bottom-color: #f97583!important;
    margin-left: -1px!important;
    border-width: 6px!important;
  }
  &:after{
    border-bottom-color: #ffeef0!important;
    border-width: 5px!important;
  }
}

.el-form-item__error:before,.el-form-item__error:after{
  position: absolute;
  bottom: 100%;
  left: 10px;
  z-index: 15;
  width: 0;
  height: 0;
  pointer-events: none;
  content: " ";
  border: solid transparent;
}*/
/*==================el-form表单必填项错误校验信息展示样式=======================*/

/*==================el-tree点击选中样式=======================*/
.el-tree-node.is-checked > .el-tree-node__content {
  background-color: rgb(255, 255, 255);
  color: rgb(64, 158, 255);
}

.el-tree-node.is-current > .el-tree-node__content {
  background-color: rgb(255, 255, 255);
  color: rgb(64, 158, 255);
}

/*==================el-tree点击选中样式=======================*/

.el-tooltip__popper {
  font-size: 14px;
  max-width: 50%; /*设置显示隐藏部分内容，按50%显示*/
}

/*表格行显示编号-名称修改行高样式*/
.row-line-height-cell16 {
  .cell {
    line-height: 16px;
    p {
      white-space: nowrap;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}


