@import '../../styles/variables.scss';

body {
  font-family: $default_font_family;
  font-size: $default_font_size;
  color:$default_font_color;
  section{
    padding: 0;
  }
  .hide{
    display: none !important;
  }
  p,dl,ol,ul,blockquote,pre,table {
    margin: 0;
  }
}

.foot .btn-pre {
  background-color: #f6f8fa;
  margin-right: 10px;
}
.body-content{
  height: 100%;
}


@mixin width($width) {
  width: $width !important;
  .el-input{
    width: $width !important;
  }
  input {
    width: $width !important;
  }
}

@mixin height($height) {
  height: $height !important;
}

.width60{
  @include width(60px)
}
.width80{
  @include width(80px)
}
.width100{
  @include width(100px)
}
.width120{
  @include width(120px)
}
.width140{
  @include width(140px)
}
.width150{
  @include width(150px)
}
.width160{
  @include width(160px)
}
.width180{
  @include width(180px)
}
.width200{
  @include width(200px)
}
.width250{
  @include width(250px)
}
.width300{
  @include width(300px)
}
.width400{
  @include width(400px)
}
.width500{
  @include width(500px)
}
.width600{
  @include width(600px)
}
.width700{
  @include width(700px)
}
.width800{
  @include width(800px)
}
.width900{
  @include width(900px)
}
.width1000{
  @include width(1000px)
}

.height100{
  @include height(100px)
}
.height200{
  @include height(200px)
}
.height300{
  @include height(300px)
}
.height400{
  @include height(400px)
}
.height500{
  @include height(500px)
}

input[type="password"]::-ms-reveal{
  display:none
}
.app-main{
  .tab{
    height:100%;
    .el-tabs__header{
      &.is-top{
        margin:0px 10px;
      }
    }
    .el-tabs__item{
      padding: 0px 5px;
      height: 36px;
      line-height: 36px;
    }
    .el-tabs__content{
      padding: 0;
      height: calc(100% - 39px);
      .el-tab-pane{
        height:100%;
      }
    }
  }
}

.dashboard-editor-container{
  background-color: $mainPageTabItemActiveBg;
}

.resize_vertical,.resize_horizontal{
  background-color: $resizeBg;
  .resize_btn{
    background-color: $resizeBtnBg;
    border-radius: 3px;
  }
}

.el-header {
  padding: 0;
  .title {
    height: $pageHeight;
    line-height: $pageHeight;
    text-indent: 10px;
    background-color: $pageTitleBg;
    color:$pageTitleColor;
  }
  .toolbar {
    background-color: $toolbarBg;
    padding: 3px 7px;
    margin: 0;
    .toolbar-item {
      margin: 3px 3px;
      color:$toolbarColor;
      display:inline-block;  //list-item 配套使用 list-style-type float clear 实现自定义换行
      //list-style-type:none;
      //float: left;
      white-space: nowrap;
      &.date,&.datetime {
        .el-input {
          width: 110px;
          input {
            width: 110px;
          }
        }
      }
      .el-input {
        width: 150px;
        margin-left: 3px;
      }
      .el-input--mini{
        .el-input__inner {
          height: 26px;
          line-height: 26px;
        }
      }
      .el-button {
        padding: 4px 5px;
      }

      .el-select__tags {
        white-space: nowrap;
        overflow: hidden;
        span{display: inline-block;}
      }
      &.form {
        overflow: unset;
      }
      .el-input--prefix{
        .el-input__inner{
          padding-right: 10px;
        }
      }
      //清空按钮
      .el-input__clear,.el-icon-circle-close{
        color: red;
      }
      .el-input--suffix{
        .el-input__inner{
          padding-right: 10px;
        }
      }
      &.break{
        //clear: both;
        //margin: 0;
        //padding: 0;
      }
      &.right{
        float:right;
      }
      .iconfont,.el-icon-loading{
        font-size: 12px;
      }
    }
  }
}

.layout {
  .el-aside,.el-header, .el-footer,.middle,.center{
    padding: 0;
    overflow: hidden;
  }
  .vertical{
    display: flex;
    flex-direction: column;
  }
  .horizontal{
    display: flex;
    flex-direction: row;
    height: 100%;
  }
  //水平分割条
  .resize_vertical{
    height: 10px;cursor: ns-resize;display: flex;justify-content: center;
  }
  .resize_btn{
    cursor: pointer;
  }
  //垂直分割条
  .resize_horizontal {
    position: relative;
    height:100%;width: 10px;cursor: ew-resize;display: flex;justify-items: center;
    .resize_btn{
      position: absolute;left:0px;
    }
  }
}

//重构表格样式
.el-table{
  width: 100%;
  overflow: auto;
  //font-size: 12px;
  th,td{
    padding: 5px 0px;
  }
  .el-table__body {
    tr {
      &.el-table__row {
        //普通行样式
        td {
          background-color: $listBg;
          .el-button {
            padding: 4px 5px;
          }
          div {
            .tag {
              padding: 3px 5px;
              border-radius: 5px;
              &.primary {
                  color: $--color-primary;
                  background-color: lighten($--color-primary, 45.8%);
                  border: 1px solid $--color-primary;
              }
              &.success {
                  color: $--color-success;
                  background-color: lighten($--color-success, 45.8%);
                  border: 1px solid $--color-success;
              }
              &.warning {
                  color: $--color-warning;
                  background-color: lighten($--color-warning, 45.8%);
                  border: 1px solid $--color-warning;
              }
              &.danger,
              .error {
                  color: $--color-danger;
                  background-color: lighten($--color-danger, 45.8%);
                  border: 1px solid $--color-danger;
              }
          }
          }
        }
        &.current-row{
          td {
            background-color: $listSelectBg;
            color:$listSelectColor;
          }
        }
        &.hover-row{
          td {
            background-color: $listHoverBg;
          }
        }
        &.dis-active{
          td {
            color: #c3c3c3;
          }
        }
        //间隔行颜色
        &.el-table__row--striped {
          td {
            background-color: $listAlternatingBg;
          }
          &.current-row{
            td {
              background-color: $listSelectBg;
              color:$listSelectColor;
            }
          }
          &.hover-row{
            td {
              background-color: $listHoverBg;
            }
          }
          &.dis-active{
            td {
              color: #c3c3c3;
            }
          }
        }
      }
    }
  }
}
//重写分页控件样式
.el-pagination{
  background-color: $pagerBg;
  padding-left: 10px;
  .el-input--mini{
    input{height:22px;}
  }

  button {
    border: 1px solid #0a9398 !important;
    color: #0a9398 !important;
    border-radius: 3px;
    padding: 0 4px !important;
  }
  button:disabled {
    border: 1px solid #c0c4cc !important;
    color: #C0C4CC !important;
    border-radius: 3px;
    cursor: not-allowed;
    padding: 0 8px;
  }
  .btn-next {
    margin-left: 5px !important;
  }
  .el-pager {
     li{
      border: 1px solid #0a9398 !important;
      border-radius: 3px;
      margin-left: 5px;
      color: #0a9398;
      line-height: 20px;
    }
    li:last-child {
      line-height: 20px;

    }
    .active {
      background-color: #0a9398;
      color: white;
      line-height: 20px;
    }
  }
 
}
//重写弹窗样式
.el-dialog{
  .el-dialog__header{
    background-color: $dialogTitleBg;
    padding: 10px 20px;
    .el-dialog__title{
      font-size: 14px;
      line-height: 20px;
      color: $dialogTitleColor;
    }
    .el-dialog__headerbtn{
      top:10px;
      .el-icon {
        color: $dialogTitleCloseColor;
        &:hover{
          color: $dialogTitleCloseHoverColor;
        }
        //&el-icon-close:hover{
        //  color:red;
        //}
      }
    }
  }
  .el-dialog__body{
    padding: 0px 0px 5px 0px;
    overflow-y: auto;
  }
}

.el-dialog__wrapper{
  .zero-header{
    .el-dialog__header {
      .el-dialog__title {
        height: 0 ;
      }
    }
  }
}

.form{
  overflow: auto;
  .toolbar{
    padding: 3px 20px;
  }
  .form-body{
    width: 100%;
    padding: 10px 30px 10px 20px;
    overflow: auto;
    //display: flex;
    //justify-content: center;
    //justify-items: left;
    .el-form-item__content{
      display: flex;
      flex-direction: row;
      .unit{
        margin: auto 3px;
        word-break:keep-all;
      }
      .code-container{
        height: 500px;
      }
    }
    .el-radio{
      //margin-left: 20px;
      line-height: 28px;
    }
    .el-select,.el-cascader{
      width: 100%;
      .el-input {
        input {
          width: 100%;
        }
      }
    }
    .el-select__tags {
      white-space: nowrap;
      overflow: hidden;
      span{display: inline-block;}
    }
    &.tree-body {
      //flex-direction: column;
      padding: 3px;
    }
    .ql-editor{
      height:400px;
    }
    .el-upload--picture-card{
      width: 100px;
      height: 100px;
      line-height: 98px;
      .el-icon-plus{
        margin: 35px auto;
      }
    }
    .file{
      .el-form-item__content{
        flex-direction: column;
        .file-table{
          width: 100%;
        }
      }
    }
    .el-upload-list--picture-card {
      .el-upload-list__item{
        width: 100px;
        height: 100px;
      }
    }
    .hide-add{
      .el-upload {
        &.el-upload--picture-card, &.el-upload--text {
          display: none;
        }
      }
    }
    .group label{
      display: inline-block;
      text-align: left;
      line-height: 18px;
      font-size: 18px;
      color:  #34bfa3;
    }
    .section{
      font-size: 18px;
      font-weight: bold;
      line-height: 20px;
      color: #3e5d8b;
      margin-bottom: 18px;
    }
    .iconfont-btn{
      height: 22px;
      width: 24px;
      background-color: $--color-primary;
      color: white;
      line-height: 24px;
      border-radius: 5px;
      margin: auto 5px auto 3px;
      text-indent: 2px;
      .circle{
        border-radius: 50%;
      }
    }
  }
}

.el-tree{
  overflow: auto;
  .el-tree-node{
    .el-tree-node__label{
      font-size: 12px;
    }
  }
  &.folder{
    .el-tree-node__expand-icon:before {//普通模式
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      color: #FFE791;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "\eac4";
    }
    .expanded{//展开模式
      &.el-tree-node__expand-icon:before {
        content: "\e64b";
      }
    }
    .is-leaf{//叶子模式
      &.el-tree-node__expand-icon:before {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e664";
        color: #34bfa3;
      }
    }
  }
  &.machine{
    .el-tree-node__expand-icon:before {//普通模式
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      color: #FFE791;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "\eac4";
    }
    .expanded{//展开模式
      &.el-tree-node__expand-icon:before {
        content: "\e64b";
      }
    }
    .is-leaf{//叶子模式
      &.el-tree-node__expand-icon:before {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e85b";
        color: #34bfa3;
      }
    }
  }
}

.west{
  padding: 3px;
  overflow: hidden;
}

.news{
  width:100%;
  margin: 0 auto;
  height: 100%;
  padding: 0 40px;
  overflow-y: auto;
  * {
    box-sizing: border-box;
  }
  table{width: 100%;}
  //.news-body {
  //  width:100%;
  //  height: 100%;
  //  margin: 0;
  //  padding: 0 40px;
  //  overflow-y: auto;
  //}
  .news-content{
    vertical-align: top;
  }
  .title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
  }
  .secondTitle {
    text-align: center;
    height: 50px;
    line-height: 50px;
    text-indent: 200px;
    font-size: 17px;
  }
  .flex1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  .author {
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .textRight {
    text-align: right;
  }
  .source {
    width:100%;
    text-align: center;
  }
  .content {
  }
  .record {
    font-size: 16px;
    font-weight: bold;
  }
  img {
    max-width: 720px;
    margin: 0 auto;
  }
}

.el-tooltip__popper {
  max-width: 300px;
}