agilab-element-theme v1.0.1

使用方法

yarn add agilab-element-theme

在 main.js 中引入 (在 Vue.use(elementui) 之前)

import 'agilab-element-theme/theme/agilab-theme.scss'

目前修改的样式

  /* 
  * 更多变量：
  * https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/common/var.scss
  */

  /* 改变主题色变量 */
  $--color-primary: #2C7CFF;
  /// color|1|SecondaryColor|1
  $--color-success: #00C853 !default;
  /// color|1|SecondaryColor|1
  $--color-warning: #FFAB00 !default;
  /// color|1|SecondaryColor|1
  $--color-danger: #E57373 !default;
  /// color|1|SecondaryColor|1
  $--color-info: #909399 !default;
  $--color-text-regular: #666666 !default;
  $--border-color-base: #ddd !default;

  // $--disabled-fill-base: #ddd !default;
  $--disabled-color-base: #ddd !default;
  // $--disabled-border-base: #ddd !default;

  /* 改变按钮样式 */
  $--button-padding-horizontal: 19px !default;
  $--button-medium-border-radius: 4px !default;
  $--button-medium-padding-vertical: 10px !default;
  $--button-medium-padding-horizontal: 15px !default;
  $--button-small-border-radius: 3px !default;
  $--button-small-padding-horizontal: 15px !default;
  /* 单选框样式 */
  $--radio-disabled-input-border-color: #dddddd !default;
  $--radio-disabled-input-fill: #eeeeee !default;
  $--radio-disabled-icon-color: #fff !default;
  $--radio-disabled-checked-input-border-color: #dddddd !default;
  $--radio-disabled-checked-input-fill: #dddddd !default;
  $--radio-disabled-checked-icon-color: #fff !default;
  /* 复选框样式 */
  $--checkbox-disabled-input-border-color: #dddddd !default;
  $--checkbox-disabled-input-fill: #eeeeee !default;
  $--checkbox-disabled-checked-input-border-color: #dddddd !default;
  $--checkbox-disabled-checked-input-fill: #dddddd !default;
  $--checkbox-disabled-checked-icon-color: #ffffff !default;
  /* 输入框样式 */
  $--input-disabled-color: #666666 !default;
  $--input-disabled-fill: #f5f5f5 !default;
  $--input-disabled-border: #dddddd !default;

  /* 改变 icon 字体路径变量，必需 */
  $--font-path: '~element-ui/lib/theme-chalk/fonts';

  @import "~element-ui/packages/theme-chalk/src/index";

  @import './agilab-element-reset.scss'