/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/

/* theme color */
 $--color-primary: #1890ff;
// $--color-primary: #E14D11;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;

$--button-font-weight: 400;

// $--color-text-regular: #1f2d3d;

$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;

$--table-border:1px solid#dfe6ec;

/* icon font path, required */
$--font-path: '~element/lib/theme-chalk/fonts';

@import "element-plus/theme-chalk/src/index";

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  theme: $--color-primary;
}


$standard: yellow;

//使用循环进行类名的渲染   @each的具体使用方法参考sass
@each $name, $color in (standard, $standard),  {
  .el-button--#{$name}.is-active,
  .el-button--#{$name}:active {
    background-color: $color !important;
    border-color: $color !important;
    color: #fff !important;
  }

  .el-button--#{$name}:focus,
  .el-button--#{$name}:hover {
    background-color: rgba($color: $color, $alpha: 0.8) !important;
    border-color: $color !important;
    color: #fff !important;
  }

  .el-button--#{$name} {
    background-color: $color !important;
    border-color: $color !important;
    color: #fff !important;
  }

}





