|
|
|
|
//material design的基础颜色
|
|
|
|
|
$--color-red: #F44336;
|
|
|
|
|
$--color-pink: #E91E63;
|
|
|
|
|
$--color-purple: #9C27B0;
|
|
|
|
|
$--color-deep-purple: #673AB7;
|
|
|
|
|
$--color-indigo: #3F51B5;
|
|
|
|
|
$--color-blue: #2196F3;
|
|
|
|
|
$--color-light-blue: #03A9F4;
|
|
|
|
|
$--color-cyan: #00BCD4;
|
|
|
|
|
$--color-teal: #009688;
|
|
|
|
|
$--color-green: #4CAF50;
|
|
|
|
|
$--color-light-green: #8BC34A;
|
|
|
|
|
$--color-lime: #CDDC39;
|
|
|
|
|
$--color-yellow: #FFEB3B;
|
|
|
|
|
$--color-amber: #FFC107;
|
|
|
|
|
$--color-orange: #FF9800;
|
|
|
|
|
$--color-deep-orange: #FF5722;
|
|
|
|
|
$--color-brown: #795548;
|
|
|
|
|
$--color-gray: #9E9E9E;
|
|
|
|
|
$--color-blue-gray: #607D8B;
|
|
|
|
|
|
|
|
|
|
//覆盖element颜色
|
|
|
|
|
$--color-primary: #1890ff;
|
|
|
|
|
$--color-success: #21BA45;
|
|
|
|
|
$--color-warning: $--color-deep-orange;
|
|
|
|
|
$--color-danger: $--color-red;
|
|
|
|
|
$--color-info: $--color-teal;
|
|
|
|
|
|
|
|
|
|
@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 max-mobile-width {
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
max-width: 384px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//el-sub-menu的背景色
|
|
|
|
|
$sub-menu-background: #1f2d3d;
|
|
|
|
|
//覆盖el-menu的背景色
|
|
|
|
|
$--menu-background-color: #304156;
|
|
|
|
|
//覆盖el-menu的文字颜色
|
|
|
|
|
$--menu-item-font-color: hsla(0, 0%, 99.6%, .65);
|
|
|
|
|
//el-menu的文字hover颜色
|
|
|
|
|
$--menu-item-hover-color: #fefefe;
|
|
|
|
|
//覆盖el-menu的文字hover背景颜色
|
|
|
|
|
$--menu-item-hover-fill: none;
|
|
|
|
|
|
|
|
|
|
//侧边栏宽度
|
|
|
|
|
$side-bar-width: 208px;
|
|
|
|
|
//头部导航栏高度
|
|
|
|
|
$nav-height: 50px;
|
|
|
|
|
//头部多页签栏高度
|
|
|
|
|
$tags-view-height: 40px;
|
|
|
|
|
|
|
|
|
|
//路由页面的margin
|
|
|
|
|
$page-view-margin: 15px;
|
|
|
|
|
|
|
|
|
|
//引入element的scss时需要覆盖字体路径
|
|
|
|
|
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
|
|
|
|
|
|
|
|
|
// 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;
|
|
|
|
|
}
|
