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

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

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@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 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;
  }
  [data-theme="light"] & {
    color: #A6ADB6;
    padding-bottom: 15px;
  }
}

@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:120px;
    min-height: calc(100vh - 260px);
    padding: 0 20px;
  }
}

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

@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_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"] & {
    background-color: #E6E7E9;
  }
}

@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="dark"] &{
    border-color: rgb(64, 158, 255);
    background-color: rgb(64, 158, 255);
  }
  [data-theme="light"] & {
    border-color: #D6DBE7 !important;
    background-color: #D6DBE7 !important;
  }
}