nuxtProject/assets/scss/cus-client/cus-elementui.scss

@import "../base/utils";

@mixin setFontElement() {

  .el-input:hover .showIcon {
    display: none;
  }

  .el-form {
    .el-form-item__label {
      @include setFontBase(-6);
    }
  }

  .el-menu-vertical-demo {
    i {
      @include setFontBase(0);
    }

    span {
      //@include setFontBase(0, true);
      @include setFontBase(-2);
    }
  }
  /***********global.scss***********/
  //logo右侧文字
  .mta-logo-title > span{
    @include setFontBase(13);
  }
  //footer文字
  .mta-Aframe .mta-footer{
    @include setFontBase(-7);
  }
  //表格
  .el-table {
    @include setFontBase(-6);
  }
  //按钮
  .el-button{
    @include setFontBase(-6);
  }
  //输入框
  .el-input{
    @include setFontBase(-6);
  }
  //导航
  .el-breadcrumb{
    @include setFontBase(-4);
  }
  //树
  .el-tree-node__content{
    @include setFontBase(-6);

  }
  //分页 - 共多少条
  .el-pagination span{
    @include setFontBase(-7);
  }
  //分页 - 10条一页
  .el-pagination__sizes .el-input__inner {
    @include setFontBase(-7);
  }
  //分页 - 数字页标
  .el-pager li{
    @include setFontBase(-7);
  }
  //分页 - 跳页
  .el-pagination__editor .el-input__inner{
    @include setFontBase(-7);
  }

  .editorTreeContent i:before {
    @include setFontBase(-2, true);
  }

  .el-icon-caret-right:before {
    @include setFontBase(-2, true);
  }

  .el-table th>.cell {
    @include setFontBase(-3)
  }

  .el-table .cell {
    @include setFontBase(-7)
  }
  .el-pagination {
    @include setFontBase(-5)
  }

  .el-step.is-simple .el-step__title {
    @include setFontBase(-5)
  }
  .el-container .el-dialog{
    margin-top: 7.5vh!important;
  }
  //加载中
  .el-loading-spinner .el-loading-text,.el-loading-spinner i{
    @include setThemeColorBase("color", 1);
  }
  //输入框下拉树
  .el-tree__empty-text{
    @include setFontBase(-5);
  }
  //预览图片页面
  .el-image-viewer__wrapper .el-icon-circle-close:before{
    color:#fff;
  }
}

@mixin setStyleAframeElement($project) {
  /**
   *  @Type: button
   * 【注意】颜色更改时，由于element顶层是1级class
   * 我们设置的class是二级class会破坏element的class颜色体系
   * button颜色修改时补写hover，focus，active效果
   */
  .el-button--primary,.el-button--primary:focus{
    @include setThemeColorBase('background-color', 0);
    @include setThemeColorBase('border-color', 0);
  }
  .el-button--primary:hover{
    @include setThemeColorBase('background-color', -2);
    @include setThemeColorBase('border-color', -2);
  }
  .el-button--primary:active {
    @include setThemeColorBase('background-color', 2);
    @include setThemeColorBase('border-color', 2);
  }
  .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
    /*@include setThemeColorBase('background-color', -3);
    @include setThemeColorBase('border-color', -3);*/
    @include setThemeColorBase('background-color', -2);
   @include setThemeColorBase('border-color', -2);
  }
  //default按钮
  .el-button--default:hover,.el-button--default:active{
    @include setThemeColorBase("color", 1);
    @include setThemeColorBase('background-color', -4);
    @include setThemeColorBase('border-color', -2);
  }
  .el-button--default:focus{
    background: #fff;
    border-color: #DCDFE6;
  }
  .el-button--default.is-disabled,.el-button--default.is-disabled:hover{
    background-color: #FFF;
    border-color: #EBEEF5;
  }
  .el-button--default.is-plain:focus{
    @include setThemeColorBase("color", 1);
    @include setThemeColorBase('border-color', -2);
    background: #fff;
  }
  //a端带文字的复选框
  .el-checkbox__input.is-checked+.el-checkbox__label{
    @include setThemeColorBase('color', 0);
  }
  //c端搜索框
  .el-input-group__append, .el-input-group__append:focus{
    @include setThemeColorBase('background-color', 0);
    @include setThemeColorBase('border-color', 0);
    color: #fff;
  }

  .el-input-group__append:hover {
    @include setThemeColorBase('background-color', -2);
    @include setThemeColorBase('border-color', -2);
  }

  .el-input-group__append:active {
    @include setThemeColorBase('background-color', 2);
    @include setThemeColorBase('border-color', 2);
  }

  .el-input-group__append.is-disabled, .el-input-group__append.is-disabled:active, .el-input-group__append.is-disabled:focus, .el-input-group__append.is-disabled:hover {
    @include setThemeColorBase('background-color', -3);
    @include setThemeColorBase('border-color', -3);
  }
  .el-pager li{
    @include setThemeColorBase('color', -3);
  }
  .el-pager li.active{
    @include setThemeColorBase('color', 4);
  }
  .el-pager li:hover{
    @include setThemeColorBase('color', 3);
  }
  /**
   * @type: table
   * 设置table颜色
   */
  .headerBackgroundColor th, .headerBackgroundColor tr {
    @include setThemeColorBase('background-color', -4)
  }

  /*td .el-button--primary {
    @include setThemeColorBase('color', 1);
  }
  td .el-button--primary:hover,  .el-button--primary:focus{
    @include setThemeColorBase('color', 2);
  }
  td .el-button--primary:active {
    @include setThemeColorBase('color', 3);
  }*/
  /**
   * @type: dialog
   * 设置弹窗颜色
   *
   */
  .el-dialog__header {
    //background: #2196f5;
    @include setThemeColorBase('background-color', 0);
  }

  .el-table__row .el-button--text{
    @include setThemeColorBase('color', 0);
  }

  .el-dialog__headerbtn .el-dialog__close:after {
    background-color: yellow;
  }

  /**
   * @type 面包屑
   * 颜色配置
   */
  .breadcrumb-text {
    @include setThemeColorBase('color', 1);
  }
  /*eleme需要复写的其他样式*/
  //左侧菜单样式
  .el-menu-vertical-demo {
    i {
      display: inline-block;
      width: 30px;
      height: 22px;
      text-align: center;
      vertical-align: middle;
    }
    //左侧菜单文字距离图标距离
    .mta-menu-span{
      margin-left: 0;
    }
  }

  /*导航栏样式*/
  .el-breadcrumb__inner {
    color: #333333;
  }

  .breadcrumb-text {
    color: #2c98f2;
    font-weight: bold;
  }

  .el-breadcrumb__separator[class*=icon] {
    color: #636363;
  }

  /*表格样式*/
  .el-table__body-wrapper {
    height: 100%;
    // 样式注释 author: Wxy, date: 2020-1-17
    //overflow-x: auto
  }

  .el-table {
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .el-table td, .el-table th {
    padding: 4px 0;
  }

  .headerBackgroundColor th, .headerBackgroundColor tr {
    //background: #e0e9f5;
    color: #333;
  }

  // need sync calc by st 2019/11/12
  .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
    padding-left: 15px;
  }

  .el-table--enable-row-transition .el-table__body td {
    color: #1e1e1e;
  }

  .el-tag.qyztQx {
    color: #666;
    padding: 0 5px;
    border: 0;
    font-size: 14px;
    position: relative;
  }

  .el-tag.qyztQx:after {
    width: 1px;
    height: 15px;
    content: "";
    display: block;
    right: -5px;
    position: absolute;
    top: 8px;
  }

  div.cell span.qyztQx:last-child:after {
    display: none;
  }


  div.cell > span {
    padding: 0 8px;
  }

  /*弹窗样式*/
  .el-dialog__header {
    //background: #2196f5;
    color: #fff;
    padding: 0;
    height: 55px;
    line-height: 55px;
    font-weight: 400;
  }

  .el-dialog__title {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    transition: .1s;
  }

  .el-dialog__headerbtn .el-dialog__close:hover, .el-dialog__headerbtn .el-dialog__close:focus {
    color: #fff;
  }

  .el-dialog__headerbtn .el-dialog__close:after {
    //background-color: yellow;
    color: red;
  }

  .el-dialog--center .el-dialog__body {
    padding: 32px 30px 0px;
  }

  .el-dialog__body .el-form-item__label {
    color: #333;
    //text-align: left;
    font-size: 16px;
    line-height: 32px;
    padding: 0 4px 0 0;
  }

  .el-dialog__body .el-input__icon {
    line-height: 32px;
  }

  .el-dialog__body .el-form-item__error {
    color: #FF4B4B;
  }

  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    color: #FF4B4B;
  }

  .el-dialog__body .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .el-form-item__content {
    line-height: 32px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-dialog__footer {
    padding: 20px 20px 25px;
  }

  .el-dialog__footer .el-button {
    padding: 10px 20px;
    font-size: 18px;
    min-width: 100px;
    margin: 0 20px;
    border: 1px solid #ccc;
  }

  .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
    border-color: #FF4B4B;
  }

  //列表省略文字鼠标悬浮样式
  .el-tooltip__popper {
    max-width: 70vw;
    line-height: 20px;
    padding: 20px;
  }

  //文字距输入框距离
  .el-form-item__label {
    padding: 0 4px 0 0;
  }

  //查询按钮间距
  .el-button_sx_left {
    margin-left: 24px;
  }

  .el-button + .el-button.el-button_sx_left {
    margin-left: 24px;
  }

  //check-box---IE兼容
  .el-table :last-child.el-checkbox {
    display: block;
  }

  // table 省略文字....
  .el-table .cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .el-steps--simple{
    background: none;
    .is-finish .el-step__icon {
      @include setThemeColorBase('color', 0)
    }
    .el-step__icon.is-finish{
      @include setThemeColorBase('color', 0)
    }
    .el-step__title.is-finish{
      @include setThemeColorBase('color', 0)
    }
  }

  .el-radio__label,.el-checkbox__label{
    white-space: normal;
  }

}


@mixin setStyleCframeElement($project) {
  .el-button--primary,.el-button--primary:focus{
    @include setThemeColorBase('background-color', 0);
    @include setThemeColorBase('border-color', 0);
  }
  .el-button--primary:hover{
    @include setThemeColorBase('background-color', -2);
    @include setThemeColorBase('border-color', -2);
  }
  .el-button--primary:active {
    @include setThemeColorBase('background-color', 2);
    @include setThemeColorBase('border-color', 2);
  }
  .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
    /*@include setThemeColorBase('background-color', -3);
    @include setThemeColorBase('border-color', -3);*/
    @include setThemeColorBase('background-color', -2);
    @include setThemeColorBase('border-color', -2);
  }

  //c端搜索框
  .el-input-group__append, .el-input-group__append:focus{
    @include setThemeColorBase('background-color', 0);
    @include setThemeColorBase('border-color', 0);
    color: #fff;
  }

  .el-input-group__append:hover {
    @include setThemeColorBase('background-color', -2);
    @include setThemeColorBase('border-color', -2);
  }

  .el-input-group__append:active {
    @include setThemeColorBase('background-color', 2);
    @include setThemeColorBase('border-color', 2);
  }

  .el-input-group__append.is-disabled, .el-input-group__append.is-disabled:active, .el-input-group__append.is-disabled:focus, .el-input-group__append.is-disabled:hover {
    @include setThemeColorBase('background-color', -3);
    @include setThemeColorBase('border-color', -3);
  }
  .el-pager li{
    @include setThemeColorBase('color', -3);
  }
  .el-pager li.active{
    @include setThemeColorBase('color', 4);
  }
  .el-pager li:hover{
    @include setThemeColorBase('color', 3);
  }
  /**
   * @type: table
   * 设置table颜色
   */
  .headerBackgroundColor th, .headerBackgroundColor tr {
    @include setThemeColorBase('background-color', -4)
  }

  /*td .el-button--primary {
    @include setThemeColorBase('color', 1);
  }
  td .el-button--primary:hover,  .el-button--primary:focus{
    @include setThemeColorBase('color', 2);
  }
  td .el-button--primary:active {
    @include setThemeColorBase('color', 3);
  }*/
  /**
   * @type: dialog
   * 设置弹窗颜色
   *
   */
  .el-dialog__header {
    //background: #2196f5;
    //@include setThemeColorBase('background-color', 0);
  }

  .el-table__row .el-button--text{
    @include setThemeColorBase('color', 0);
  }

  .el-dialog__headerbtn .el-dialog__close:after {
    background-color: yellow;
  }

  /**
   * @type 面包屑
   * 颜色配置
   */
  .breadcrumb-text {
    @include setThemeColorBase('color', 1);
  }
  /*eleme需要复写的其他样式*/
  //左侧菜单样式
  .el-menu-vertical-demo {
    i {
      display: inline-block;
      width: 30px;
      height: 22px;
      text-align: center;
      vertical-align: middle;
    }
    //左侧菜单文字距离图标距离
    .mta-menu-span{
      margin-left: 0;
    }
  }

  /*导航栏样式*/
  .el-breadcrumb__inner {
    color: #333333;
  }

  .breadcrumb-text {
    color: #2c98f2;
    font-weight: normal;
  }

  .el-breadcrumb__separator[class*=icon] {
    color: #636363;
  }

  /*表格样式*/
  .el-table__body-wrapper {
    height: 100%;
    // 样式注释 author: Wxy, date: 2020-1-17
    //overflow-x: auto
  }

  .el-table {
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .el-table td, .el-table th {
    padding: 4px 0;
  }

  .headerBackgroundColor th, .headerBackgroundColor tr {
    //background: #e0e9f5;
    color: #333;
  }

  // need sync calc by st 2019/11/12
  .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
    padding-left: 15px;
  }

  .el-table--enable-row-transition .el-table__body td {
    color: #1e1e1e;
  }

  .el-tag.qyztQx {
    color: #666;
    padding: 0 5px;
    border: 0;
    font-size: 14px;
    position: relative;
  }

  .el-tag.qyztQx:after {
    width: 1px;
    height: 15px;
    content: "";
    display: block;
    right: -5px;
    position: absolute;
    top: 8px;
  }

  div.cell span.qyztQx:last-child:after {
    display: none;
  }


  div.cell > span {
    padding: 0 5px;
  }

  /*弹窗样式*/
  .el-dialog__header {
    //background: #2196f5;
    color: #fff;
    padding: 0;
    height: 55px;
    line-height: 55px;
    font-weight: 400;
  }

  .el-dialog__title {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    transition: .1s;
  }

  .el-dialog__headerbtn .el-dialog__close:hover, .el-dialog__headerbtn .el-dialog__close:focus {
    color: #fff;
  }

  .el-dialog__headerbtn .el-dialog__close:after {
    //background-color: yellow;
    color: red;
  }

  .el-dialog--center .el-dialog__body {
    padding: 32px 30px 0px;
  }

  .el-dialog__body .el-form-item__label {
    color: #333;
    //text-align: left;
    font-size: 16px;
    line-height: 32px;
    padding: 0 4px 0 0;
  }

  .el-dialog__body .el-input__icon {
    line-height: 32px;
  }

  .el-dialog__body .el-form-item__error {
    color: #FF4B4B;
  }

  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    color: #FF4B4B;
  }

  .el-dialog__body .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .el-form-item__content {
    line-height: 32px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-dialog__footer {
    padding: 20px 20px 25px;
  }

  .el-dialog__footer .el-button {
    padding: 10px 20px;
    font-size: 18px;
    min-width: 100px;
    margin: 0 20px;
    border: 1px solid #ccc;
  }

  .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
    border-color: #FF4B4B;
  }

  //列表省略文字鼠标悬浮样式
  .el-tooltip__popper {
    max-width: 70vw;
    line-height: 20px;
    padding: 20px;
  }

  //文字距输入框距离
  .el-form-item__label {
    padding: 0 4px 0 0;
  }

  //查询按钮间距
  .el-button_sx_left {
    margin-left: 24px;
  }

  .el-button + .el-button.el-button_sx_left {
    margin-left: 24px;
  }

  //check-box---IE兼容
  .el-table :last-child.el-checkbox {
    display: block;
  }

  // table 省略文字....
  .el-table .cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .el-steps--simple{
    background: none;
    .is-finish .el-step__icon {
      @include setThemeColorBase('color', 0)
    }
    .el-step__icon.is-finish{
      @include setThemeColorBase('color', 0)
    }
    .el-step__title.is-finish{
      @include setThemeColorBase('color', 0)
    }
  }

  .el-radio__label,.el-checkbox__label{
    white-space: normal;
  }

  /**
   * 一下样式为组件抽出样式，以上样式为后台样式 ，后台样式应该删除应该删除
   */
  //c端搜索框文字颜色
  .el-input-group__append {
    color: #fff
  }
  .el-checkbox__label {
    line-height: normal;
  }
  //c端弹窗头部颜色
  .el-dialog__header {
    @include setThemeColorBase('background-color', 0);
  }
  //弹窗取消按钮
  .el-dialog {
    .el-button.el-button--default:focus, .el-button.el-button--default:hover {
      @include setThemeColorBase("color", 1);
      @include setThemeColorBase("background-color", -5);
    }
  }

  //高级筛选文字颜色
  .el-button.mta-popver-btn {
    @include setThemeColorBase('color', 1);
  }
  //c端分页
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    @include setThemeColorBase('background-color', 1);
    // background-color: #409EFF;
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    @include setThemeColorBase('background-color', -2);
     color: #fff;
  }

}