reagent_manage/vue/src/asset/style/variables.scss

//设定移动端的最大宽度
$max-mobile-width: 500px;

//覆盖element颜色
$--color-primary: #1890ff;
$--color-success: #21BA45;
$--color-warning: #FF5722;
$--color-danger: #F44336;
$--color-info: #009688;

//覆盖el-menu的hover背景颜色
$--menu-item-hover-fill: none;

//引入element的scss时需要覆盖字体路径
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@mixin clearfix {
    &::after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
}

@mixin deep-shadow {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}

@mixin mobile {
    @media (max-width: $max-mobile-width) {
        @content
    }
}

@mixin pc {
    @media (min-width: $max-mobile-width) {
        @content
    }
}

@mixin max-width-on-mobile {
    @include mobile {
        max-width: 384px;
    }
}

//菜单中icon和文字的距离
$menu-icon-text-gap: 10px;

//侧边菜单icon的大小
$aside-icon-size: 14px;
//侧边栏菜单的背景色
$aside-menu-background: #304156;
//侧边栏子菜单的背景色
$aside-sub-menu-background: #1f2d3d;
//侧边栏菜单文字的颜色
$aside-menu-item-color: hsla(0, 0%, 99.6%, .65);
//侧边栏菜单文字的hover颜色
$aside-menu-item-hover-color: #fefefe;

//顶部菜单文字的颜色
$head-menu-item-color: #303133;
//顶部菜单文字的hover颜色
$head-menu-item-hover-color: $--color-primary;

//侧边栏宽度
$aside-width: 208px;
//头部导航栏高度
$nav-height: 48px;
//头部多页签栏高度
$tags-view-height: 32px;

//页头行高
$page-header-line-height: 26px;
//页头的上下padding
$page-header-padding: 12px;
//路由页面的margin
$page-view-margin: 24px;

//dialog距离顶部的距离，用于<el-dialog>的top属性、<el-dialog>中滚动区域的最大高度
$dialog-top: 100px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
    primary: $--color-primary;
    info: $--color-info;
    success: $--color-success;
    danger: $--color-danger;
    warning: $--color-warning;
    pageViewMargin: $page-view-margin;
    dialogTop: $dialog-top;
}