yxk-electronic-archives/src/assets/styles/mixin.scss

@import "variables";
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin btn_blue_style{
  [data-theme="light"] & {
    background-color: #0348F3;
    border-color: #0348F3;
    color: #fff !important;
  }
}

@mixin btn_blue_hover{
  [data-theme="light"] & {
    background-color: #4579FA;
    border-color: #4579FA;
  }
}

@mixin btn_white_style{
  [data-theme="light"] & {
    background-color: #fff;
    border-color: #E3E7EE;
    color: #545B65 !important;
  }
}

@mixin btn_white_hover{
  [data-theme="light"] & {
    background-color: #F7F9FA;
  }
}

@mixin btn_hover{
  [data-theme="dark"] & {
    background-color: #02255F;
  }
  [data-theme="light"] & {
    background-color: #0348F3;
  }
}

@mixin scrollBar-bg{
  [data-theme="dark"] & {
    background-color:  #13439E;
  }
  [data-theme="light"] & {
    background-color:#0348F3;
  }
}

@mixin font_color($color) {
  color: $color;
  [data-theme="dark"] & {
    color: $font-color-dark;
  }
  [data-theme="light"] & {
    color: $font-color-light;
  }
}

@mixin shadow-set(){
  [data-theme="dark"] & {
    box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16);
  }
}

// siderBar
@mixin siderBar-set(){
  [data-theme="dark"] & {
    background: url(~@/assets/images/sidebar_bg.png) #031435 no-repeat right bottom;
    background-size: contain;
    box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16);
  }
  [data-theme="light"] & {
    background: linear-gradient(180deg, #2B67DD 0%, #4180FB 100%);
    color: #fff;
  }
}

@mixin siderBar-submenu-set(){
  [data-theme="light"] & {
    color: rgba(255,255,255,0.8) !important;
  }
}

@mixin siderBar-submenu-set-acitve(){
  [data-theme="dark"] & {
    background: $subMenuHover !important;
  }
  [data-theme="light"] & {
    background: linear-gradient(270deg, #021C5E 0%, rgba(2,28,94,0) 100%) !important;
    color: #fff !important;
    font-weight: bold !important;
    border-right: 4px solid #33D0FF !important;
  }
}

@mixin siderBar-title-set-acitve{
  [data-theme="dark"] & {
    color: $mainColor !important;
    background-image: $menuActiveBg !important;
    &::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 5px;
      height: 60px;
      background-color: $mainColor;
    }
  }
}

@mixin siderBar-icon{
  [data-theme="dark"] & {
    color: $mainColor;
  }
  [data-theme="light"] & {
    color: #fff;
  }
}

@mixin breadcrumb-bg{
  [data-theme="dark"] & {
    background-color: $background-color-dark;
  }
  [data-theme="light"] & {
    background-color: $main-bg-light;
  }
}

@mixin breadcrumb-text{
  [data-theme="dark"] & {
    color: $mainColor;
  }
  [data-theme="light"] & {
    color: #9098A4;
  }
}

@mixin breadcrumb-text-active{
  [data-theme="dark"] & {
    color: #fff;
  }
  [data-theme="light"] & {
    color: #1F55EB;
  }
}

@mixin main_bg_color() {
  [data-theme="dark"] & {
    background-color: $background-color-dark;
    @include font-color($font-color-dark);
  }
  [data-theme="light"] & {
    background-color: transparent;
    @include font-color($font-color-light);
  }
}

@mixin dropdown_bg() {
  [data-theme="dark"] & {
    box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset;
    background: #02255F;
  }
  [data-theme="light"] & {
    box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.17);
    background: #fff;
  }
}

@mixin dropdown_bg_hover() {
  [data-theme="dark"] & {
    background: #13439E;
    color: #fff;
  }
  [data-theme="light"] & {
    background: #F5F9FC;
    color: #0348F3;
  }
}

@mixin icon_color() {
  [data-theme="dark"] & {
    color: $icon-color-dark;
  }
  [data-theme="light"] & {
    color: $icon-color-light;
  }
}

@mixin svg_color() {
  [data-theme="dark"] & {
    fill: #339cff;
  }
  [data-theme="light"] & {
    fill: #0348F3;
  }
}

@mixin bg_color() {
  [data-theme="dark"] & {
    background-color: $background-color-dark;
    @include font-color($font-color-dark);
  }
  [data-theme="light"] & {
    background-color: $background-color-light;
    @include font-color($font-color-light);
  }
}

// 内容模块 背景-线条-font设置
@mixin user_cont() {
  [data-theme="dark"] & {
    background-color: $background-color-dark;
    border: $mainContainerBorder;
    @include font-color($font-color-dark);
  }
  [data-theme="light"] & {
    background-color: $background-color-light;
    border: none;
    @include font-color($font-color-light);
  }
}

@mixin before_line_color() {
  [data-theme="dark"] & {
    border-top: 1px solid $mainColor;
    border-left: 1px solid $mainColor;
  }
  [data-theme="light"] & {
    border-top: none;
    border-left: none;
  }
}

@mixin after_line_color() {
  [data-theme="dark"] & {
    border-right: 1px solid $mainColor;
    border-bottom: 1px solid $mainColor;
  }
  [data-theme="light"] & {
    border-right: none;
    border-bottom: none;
  }
}

@mixin left_bottom_line_color() {
  [data-theme="dark"] & {
    border-bottom: 1px solid $mainColor;
    border-left: 1px solid $mainColor;
  }
  [data-theme="light"] & {
    border-left: none;
    border-bottom: none;
  }
}

@mixin right_top_line_color() {
  [data-theme="dark"] & {
    border-right: 1px solid $mainColor;
    border-top: 1px solid $mainColor;
  }
  [data-theme="light"] & {
    border-right: none;
    border-top: none;
  }
}

@mixin box_padding{
  [data-theme="dark"] & {
    padding: 0 !important;
    margin-top: 20px;
  }
  [data-theme="light"] & {
    padding: 20px !important;
  }
}

@mixin tree_height_min{
  [data-theme="dark"] & {
    min-height: calc(100vh - 210px);
  }
  [data-theme="light"] & {
    min-height: calc(100vh - 230px);
  }
}

@mixin tree_tab_style{
  [data-theme="dark"] & {
    border-bottom: 1px solid $mainColor;
  }
  [data-theme="light"] & {
    border-bottom: 1px solid #E3E7EE;
  }
}

@mixin tree_tab_item{
  [data-theme="dark"] & {
    padding: 15px 0 12px 0;
  }
  [data-theme="light"] & {
    color: #A6ADB6;
    padding-bottom: 12px;
  }
}

@mixin tree_tab_item_active{
  [data-theme="dark"] & {
    border-bottom: 3px solid #3a99fd;
  }
  [data-theme="light"] & {
    color: #000;
    border-bottom: 3px solid #0348F3;
  }
}

@mixin tree_no_header{
  [data-theme="dark"] & {
    margin-top:122px;
    min-height: calc(100vh - 262px);
    padding: 0 20px;
  }
}

@mixin table_height_min{
  [data-theme="dark"] & {
    min-height: calc(100vh - 260px);
  }
  [data-theme="light"] & {
    min-height: calc(100vh - 280px);
  }
}

@mixin tab_height_min{
  [data-theme="dark"] & {
    min-height: calc(100vh - 200px);
  }
  [data-theme="light"] & {
    min-height: calc(100vh - 178px);
  }
}

@mixin input_style{
  [data-theme="dark"] & {
    border: 1px solid $mainColor;
    color: #fff;
  }
  [data-theme="light"] & {
    border: 1px solid #E3E7EE;
    color: #0C0E1E;
  }
}

@mixin tree_font_color{
  [data-theme="dark"] & {
    color: $mainColor;
  }
  [data-theme="light"] & {
    color: #0C0E1E;
  }
}

@mixin tree_style{
  @include tree_font_color;
  [data-theme="dark"] & {
    padding: 0 30px !important;
  }
}

@mixin tree_children_font{
  [data-theme="light"] & {
    color: #545B65;
  }
}

@mixin tree_children_icon_font{
  [data-theme="light"] & {
    color: #0C0E1E;
  }
}

@mixin tree_classfiy_icon_font{
  [data-theme="light"] & {
    color: #3ACFB1;
  }
}

@mixin tree_children_padding{
  [data-theme="light"] & {
    padding: 0 !important;
  }
}

@mixin tree_hover{
  [data-theme="dark"] & {
    background-color: transparent !important;
    background-image: $subMenuActiveBg;
  }
  [data-theme="light"] & {
    background-color: #E8F2FF !important;
    color: #0348F3;
  }
}

@mixin tree_active{
  [data-theme="dark"] & {
    background-image: $subMenuActiveBg !important;
    color: #fff;
  }
  [data-theme="light"] & {
    background-color: #E8F2FF !important;
    color: #0348F3 !important;
  }
}

@mixin elButton-style{
  [data-theme="dark"] & {
    border-color: $mainColor;
    color: #fff;
  }
  [data-theme="light"] & {
    font-weight: bold;
    border-color: #0348F3;
    color: #0348F3;
  }
}

@mixin elButton-disabled-style{
  [data-theme="dark"] & {
    color: #13439E;
    background-color: transparent;
    border-color: #13439E;
  }
  [data-theme="light"] & {
    color: #B4C8FB;
    border-color: #B4C8FB;
    background-color: #F2F5FE;
  }
}

@mixin elButton-hover-style{
  [data-theme="dark"] & {
    color: #fff;
    background-color: #02255F;
    border-color: $mainColor;
  }
  [data-theme="light"] & {
    background-color: #E8F2FF;
  }
}

// el-table
@mixin elTable-style{
  [data-theme="dark"] & {
    background-color: #02255f;
  }
  [data-theme="light"] & {
    background-color: #F5F9FC;
  }
}

@mixin elTable-font-style{
  [data-theme="dark"] & {
    color: $mainColor;
  }
  [data-theme="light"] & {
    color: #0C0E1E;
  }
}

@mixin elTable-td-font-style{
  [data-theme="dark"] & {
    color: $mainColor;
    border-bottom: 1px dashed #113D72;
  }
  [data-theme="light"] & {
    color: #545B65;
    border-bottom: 1px solid #F5F9FC;
  }
}

@mixin elTable-hover-style{
  [data-theme="dark"] & {
    color: #fff;
    background-color: #13439E;
  }
  [data-theme="light"] & {
    background-color: #EAF3FB;
    color: #545B65;
  }
}

@mixin checkbox-style{
  [data-theme="dark"] & {
    border-color: $mainColor;
  }
  [data-theme="light"] & {
    border-color: #D6D8DD;
  }
}

@mixin checkbox-disabled-style{
  [data-theme="dark"] & {
    border-color: $mainColor;
    background: transparent;
  }
  [data-theme="light"] & {
    border-color:#D6D8DD;
    background-color: #E6E7E9;
    &::after{
      border-color:#D1D3D7;
    }
  }
}

@mixin checkbox-active-style{
  [data-theme="dark"] & {
    border-color: $mainColor;
    background: transparent;
    &::after{
      border-color: $mainColor;
    }
  }
  [data-theme="light"] & {
    border-color:#0348F3;
    background-color: #0348F3;
    &::after{
      border-color: #fff;
    }
  }
}

// el-pagination
@mixin pagination-font{
  [data-theme="dark"] & {
    color: $mainColor;
  }
  [data-theme="light"] & {
    color: #545B65;
  }
}

@mixin pagination-input{
  @include pagination-font;
  [data-theme="dark"] & {
    border-color: $mainColor;
  }
  [data-theme="light"] & {
    border-color: #E3E7EE;
  }
}

@mixin pagination-active{
  [data-theme="dark"] & {
    background-color: #2072D2;
    border-color: #2072D2;
  }
  [data-theme="light"] & {
    background-color:#0348F3;
    border-color: #0348F3;
  }
}

@mixin pagination-paper{
  @include pagination-font;
  [data-theme="dark"] & {
    border: 1px solid $mainColor;
  }
  [data-theme="light"] & {
    border: 1px solid #E3E7EE;
  }
}

@mixin pagination-paper-more{
  [data-theme="dark"] & {
    color: $mainColor;
  }
  [data-theme="light"] & {
    color: #E3E7EE;
  }
}

// switch
@mixin switch-style{
  [data-theme="dark"] &{
    border-color: rgb(64, 158, 255);
    background-color: rgb(64, 158, 255);
  }
  [data-theme="light"] & {
    border-color: #0348F3 !important;
    background-color: #0348F3 !important;
  }
}

@mixin switch-disabled{
  [data-theme="light"] & {
    border-color: #D6DBE7 !important;
    background-color: #D6DBE7 !important;
  }
}

@mixin row_height_min{
  [data-theme="dark"] & {
    min-height: calc(100vh - 262px);
  }
  [data-theme="light"] & {
    min-height: calc(100vh - 282px);
  }
}

@mixin row_tab_style{
  [data-theme="dark"] & {
    margin-top: 61px;
    border: 1px solid #113d72;
    .head-container{
      margin: 20px;
    }
    .el-table__header{
      border-top: 1px solid #113D72;
    }
    .tab-nav{
      height: 41px;
      line-height: 41px;
      margin: -41px 0 30px -1px;
      font-weight: bold;
      color: #359AFC;
      border-bottom: 1px solid #113D72;
      li{
        position: relative;
        padding: 0 24px;
        margin: -1px 30px 0 0;
        letter-spacing: 2px;
        border-top: 1px solid #113D72;
        background-color: #021941;
        cursor: pointer;
        &::before,
        &::after{
          content: "";
          position: absolute;
          top: 0;
          width: 33px;
          height: 41px;
        }
        &::before{
          left: -15px;
          background: url(~@/assets/images/tab_left.png) no-repeat;
          background-size: contain;
        }
        &::after{
          right: -32px;
          background: url(~@/assets/images/tab_right.png) no-repeat;
          background-size: contain;
        }
        &:first-child{
          border-left: 1px solid #113d72;;
          &::before{
            width: 17px;
            height: 17px;
            left: -1px;
            top: -1px;
            border-left: 1px solid $mainColor;
            border-top: 1px solid $mainColor;
          }
        }
        &.active-tab-nav{
          color: #fff;
          &::before{
            background: url(~@/assets/images/tab_left_active.png) no-repeat;
            background-size: contain;
          }
          &::after{
            background: url(~@/assets/images/tab_right_active.png) no-repeat;
            background-size: contain;
          }
          i{
            display: block;
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 1px;
            border-bottom: 1px solid #021941;
          }
        }
      }
      .tab-right-img{
        display: block;
        width: 93px;
        margin: 4px 0 0 -14px;
        background: url(~@/assets/images/tab_img.png) no-repeat;
        background-size: contain;
      }
    }
  }
  [data-theme="light"] & {
    margin-top: 0;
    .head-container{
      margin: 20px 20px 20px 0;
    }
    .tab-nav{
      color: #545B65;
      padding: 0 0 0 20px;
      border-bottom: 1px solid #EDEFF3;
      li{
        margin-right: 60px;
        &.active-tab-nav{
          padding-bottom: 13px;
          color: #0348F3;
          border-bottom: 3px solid #0348F3;
        }
      }
    }
  }
}
@mixin category-left-style{
  [data-theme="dark"] & {
    width: 328px;
  }
  [data-theme="light"] & {
    width: 368px;
  }
}

@mixin category-right-hide{
  [data-theme="dark"] & {
    width: calc(100vw - 442px);
  }
  [data-theme="light"] & {
    width: calc(100vw - 482px);
  }
}

@mixin category-right-open{
  [data-theme="dark"] & {
    width: calc(100vw - 644px);
  }
  [data-theme="light"] & {
    width: calc(100vw - 684px);
  }
}


@mixin category-info-item{
  [data-theme="dark"] & {
    margin-bottom: 30px;
  }
  [data-theme="light"] & {
    margin-bottom: 15px;
  }
}

@mixin category-info-text{
  [data-theme="dark"] & {
    background-color: #02255f;
    color: #fff;
    border-radius: 4px;
    margin-right: 20px;
    border: none;
  }
  [data-theme="light"] & {
    color: #0C0E1E;
  }
}

@mixin category-padding{
  [data-theme="dark"] & {
    margin-top: -20px;
  }
}

@mixin des-title{
  [data-theme="dark"] & {
    padding-left: 46px;
    p{
      position: absolute;
      left: 46px;
      top: 0;
      background-image: -webkit-gradient(
        linear,
        0 0,
        0 bottom,
        from(rgba(255, 255, 255, 1)),
        to(rgba(46, 143, 237, 1))
      );
      background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 2;
      i{
        -webkit-text-fill-color: #fff;
      }
    }
    &::before {
      top: 0;
      width: 93px;
      height: 28px;
      background: url(~@/assets/images/des_title.png) no-repeat;
      background-size: contain;
    }
  }
  [data-theme="light"] & {
    padding-left: 8px;
    p{
      color: #000;
      i{
        -webkit-text-fill-color: #9098A4;
      }
    }
    &::before {
      top: 50%;
      width: 3px;
      height: 14px;
      margin-top: -7px;
      background-color: #0348F3;
    }
  }
}

@mixin des-fields{
  [data-theme="dark"] & {
    color: #3a99fd;
    border: 1px solid #339cff;
    &:hover,
    &.fields-active {
      color: #fff;
      background-color: #339cff;
    }
  }
  [data-theme="light"] & {
    color: #545B65;
    border: 1px solid #E6E8ED;
    &:hover,
    &.fields-active {
      color: #0348F3;
      background-color: #E8F2FF;
    }
  }
}
  

@mixin des-preview-label{
  font-weight: normal;
  [data-theme="dark"] & {
    color: #3a99fd;
  }
}

@mixin des-preview-input-num{
  [data-theme="dark"] & {
    margin-right: 24px !important;
  }
  [data-theme="light"] & {
    margin-right: 10px !important;
  }
}

@mixin des-preview-input-cont{
  [data-theme="dark"] & {
    margin-right: 10px !important;
    width: 50px !important;
    .el-input__inner{
      width: 50px !important;
    }
  }
  [data-theme="light"] & {
    margin-right: 6px !important;
    width: 40px !important;
    .el-input__inner{
      width: 40px !important;
    }
  }
}
@mixin main-padding{
  [data-theme="dark"] & {
    padding: 0 20px 20px 20px;
  }
  [data-theme="light"] & {
    padding: 20px 0;
  }
}

@mixin elTag-style{
  [data-theme="dark"] & {
    border: 1px solid $mainColor;
    background-color: #02255f;
  }
  [data-theme="light"] & {
    color: #0348F3;
    border: 1px solid #90B0F9;
    background-color: #EEF5FE;
  }
}

@mixin select-elTag-style{
  [data-theme="dark"] & {
    color: #fff;
    background-color: #02255f;
  }
  [data-theme="light"] & {
    color: #0348F3;
    background-color: #EEF5FE;
  }
}

@mixin prepend-input{
  [data-theme="dark"] & {
    border: 1px solid $mainColor;
    color: #339cff !important;
  }
  [data-theme="light"] & {
    border: 1px solid #E3E7EE;
    color: #545B65 !important;
  }
}

@mixin prepend-color{
  [data-theme="dark"] & {
    color: #339cff !important;
  }
  [data-theme="light"] & {
    color: #545B65 !important;
  }
}

@mixin setting-item-font{
  [data-theme="dark"] & {
    color: #fff;
  }
  [data-theme="light"] & {
    color: #0C0E1E;
  }
}

@mixin setting-item-selected{
  [data-theme="dark"] & {
    color: #fff;
    background-color: #02255f;
  }
  [data-theme="light"] & {
    color: #545B65;
    background-color: #F5F7FA;
  }
}

@mixin table-fixed-style{
  [data-theme="dark"] & {
    background-color: $boxBg !important;
    box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16);
  }
  [data-theme="light"] & {
    background-color: #FFFFFF !important;
    box-shadow: -3px 3px 11px 0px rgba(0,0,0,0.08);
  }
}

// 个人中心
@mixin process-left-style{
  [data-theme="dark"] & {
    box-shadow: 5px 2px 10px 1px rgba(15,164,222,.16);
    color: #339cff;
    li{
      &.active-li{
        color: #fff;
        &::before{
          background-color: #fff;
        }
      }
      &:hover{
        background-image: $subMenuHover;
      }
    }
  }
  [data-theme="light"] & {
    color: #0C0E1E;
    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
    li{
      &.active-li{
        color: #0348F3;
        &::before{
          background-color: #0348F3;
        }
      }
      &:hover{
        background-color:#E8F2FF;
        color: #0C0E1E;
      }
    }
  }
}

[data-theme=dark] .process-center {
  height: calc(100vh - 290px);
  margin-top: -30px;
  .process-right{
    padding-right: 20px;
    width: calc(100vw - 944px);
  }
}
[data-theme=light] .process-center {
  height: calc(100vh - 283px);
  .process-right{
    width: calc(100vw - 964px);
  }
}

@mixin process-status-style{
  [data-theme="dark"] & {
    &.ing-state{
      color: #0348F3;
      border: 1px solid #0348F3 ;
    }
    &.end-state{
      color: #1aae93;
      border: 1px solid #1aae93;
    }
    &.cancel-state{
      color: #ED4A41;
      border: 1px solid #FFA5A0;
      opacity: 0.6;
    }
  }
  [data-theme="light"] & {
    &.ing-state{
      color: #0348F3;
      background-color: #EEF5FE;
      border: 1px solid #0348F3;
    }
    &.end-state{
      color: #2ECAAC;
      background-color: #E8F8F5;
      border: 1px solid #B1EBDF;
    }
    &.cancel-state{
      color: #ED4A41;
      background-color: #FFEBEA;
      border: 1px solid #FFA5A0;
    }
  }
}