From 88868eebf73f4ba7ada80e203789d3808fa05d01 Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Thu, 2 Nov 2017 11:27:12 +0800 Subject: [PATCH] Theme: releasing all variables --- build/bin/version.js | 2 +- examples/docs/en-US/custom-theme.md | 53 +- examples/docs/en-US/form.md | 7 + examples/docs/en-US/installation.md | 4 + examples/docs/zh-CN/custom-theme.md | 49 +- examples/docs/zh-CN/form.md | 7 + examples/docs/zh-CN/installation.md | 4 + packages/theme-chalk/src/common/var.scss | 912 +++++++++++------------ packages/theme-chalk/src/select.scss | 14 - 9 files changed, 511 insertions(+), 541 deletions(-) diff --git a/build/bin/version.js b/build/bin/version.js index d2dce9a0b..fb3ac18b4 100644 --- a/build/bin/version.js +++ b/build/bin/version.js @@ -1,6 +1,6 @@ var fs = require('fs'); var path = require('path'); var version = process.env.VERSION || require('../../package.json').version; -var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.8': '1.4' }; +var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.9': '1.4' }; if (!content[version]) content[version] = '2.0'; fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content)); diff --git a/examples/docs/en-US/custom-theme.md b/examples/docs/en-US/custom-theme.md index 6feee538b..5fb6bdd59 100644 --- a/examples/docs/en-US/custom-theme.md +++ b/examples/docs/en-US/custom-theme.md @@ -28,33 +28,14 @@ import './element-variables.scss' Vue.use(Element) ``` -Note that it is required to override icon font path to the relative path of Element's font files. You can edit the following variables in this way: +:::tip +Note that it is required to override icon font path to the relative path of Element's font files. +::: -| Variable | Description | Default value | -| ------ | ---- | ------ | -| $--sm | `sm` breakpoint for responsive layout | 768px | -| $--md | `md` breakpoint for responsive layout | 992px | -| $--lg | `lg` breakpoint for responsive layout | 1200px | -| $--xl | `xl` breakpoint for responsive layout | 1920px | -| $--color-primary | theme color | #409EFF | -| $--color-success | color for success | #67C23A | -| $--color-warning | color for warning | #EB9E05 | -| $--color-danger | color for danger | #FA5555 | -| $--color-info | color for info | #878D99 | -| $--color-text-primary | color for primary texts | #2D2F33 | -| $--color-text-regular | color for regular texts | #5A5E66 | -| $--color-text-secondary | color for secondary texts | #878D99 | -| $--color-text-placeholder | color for placeholder texts | #B4BCCC | -| $--border-color-base | base border color | #D8DCE5 | -| $--border-color-light | light border color | #DFE4ED | -| $--border-color-lighter | lighter border color | #E6EBF5 | -| $--border-color-extra-light | extra light border color | #EDF2FC | -| $--font-path | icon font file path | 'fonts' | +### CLI theme tool +If you project doesn't use SCSS, you can customize themes with our CLI theme tool: -### More customizations -If you need more customization than just changing the theme color, please follow these steps: - -#### Install related tool +#### Install First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them. ```shell npm i element-theme -g @@ -78,23 +59,25 @@ et -i [custom output file] > ✔ Generator variables file ``` -In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format: +In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet: ```css $--color-primary: #409EFF !default; -$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */ -$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */ -$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */ -$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */ -$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */ -$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */ -$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */ -$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */ -$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */ +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #eb9e05 !default; $--color-danger: #fa5555 !default; $--color-info: #878d99 !default; + +... ``` #### Modify variables diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index ada5bb9ab..74291cce9 100644 --- a/examples/docs/en-US/form.md +++ b/examples/docs/en-US/form.md @@ -324,6 +324,13 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch ``` ::: +:::tip +[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that +> When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. + +To prevent this behavior, you can add `@submit.native.prevent` on ``. + ::: + ### Inline form When the vertical space is limited and the form is relatively simple, you can put it in one line. diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md index f3cb9e118..a381d3972 100644 --- a/examples/docs/en-US/installation.md +++ b/examples/docs/en-US/installation.md @@ -17,6 +17,10 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/ ``` +:::tip +We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information. +::: + ### Hello world If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/) diff --git a/examples/docs/zh-CN/custom-theme.md b/examples/docs/zh-CN/custom-theme.md index 87db8e16b..f0152e3aa 100644 --- a/examples/docs/zh-CN/custom-theme.md +++ b/examples/docs/zh-CN/custom-theme.md @@ -27,31 +27,12 @@ import './element-variables.scss' Vue.use(Element) ``` -需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。使用这种方式可以自定义的变量为： +:::tip +需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。 +::: -| 变量名 | 含义 | 默认值 | -| ------ | ---- | ------ | -| $--sm | 响应式布局中 `sm` 的断点值 | 768px | -| $--md | 响应式布局中 `md` 的断点值 | 992px | -| $--lg | 响应式布局中 `lg` 的断点值 | 1200px | -| $--xl | 响应式布局中 `xl` 的断点值 | 1920px | -| $--color-primary | 主题色 | #409EFF | -| $--color-success | 表示「成功」的状态色 | #67C23A | -| $--color-warning | 表示「警告」的状态色 | #EB9E05 | -| $--color-danger | 表示「危险」的状态色 | #FA5555 | -| $--color-info | 表示「信息」的状态色 | #878D99 | -| $--color-text-primary | 主要文字色 | #2D2F33 | -| $--color-text-regular | 常规文字色 | #5A5E66 | -| $--color-text-secondary | 次要文字色 | #878D99 | -| $--color-text-placeholder | 占位文字色 | #B4BCCC | -| $--border-color-base | 一级边框 | #D8DCE5 | -| $--border-color-light | 二级边框 | #DFE4ED | -| $--border-color-lighter | 三级边框 | #E6EBF5 | -| $--border-color-extra-light | 四级边框 | #EDF2FC | -| $--font-path | icon 字体图标路径 | 'fonts' | - -### 深层次的定制 -如果仅仅改变以上变量不能满足你的需求，请按以下步骤进行更深层次的主题定制： +### 命令行主题工具 +如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制： #### 安装工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。 @@ -80,20 +61,22 @@ et -i [可以自定义变量文件] 如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下： ```css $--color-primary: #409EFF !default; -$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */ -$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */ -$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */ -$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */ -$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */ -$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */ -$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */ -$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */ -$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */ +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #eb9e05 !default; $--color-danger: #fa5555 !default; $--color-info: #878d99 !default; + +... ``` #### 修改变量 diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index eae597b83..9dd648da7 100644 --- a/examples/docs/zh-CN/form.md +++ b/examples/docs/zh-CN/form.md @@ -318,6 +318,13 @@ ``` ::: +:::tip +W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)： +> When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. + +即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 `` 标签上添加 `@submit.native.prevent`。 +::: + ### 行内表单 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 diff --git a/examples/docs/zh-CN/installation.md b/examples/docs/zh-CN/installation.md index 80e247a43..ce7a0ab47 100644 --- a/examples/docs/zh-CN/installation.md +++ b/examples/docs/zh-CN/installation.md @@ -17,6 +17,10 @@ npm i element-ui -S ``` +:::tip +我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。 +::: + ### Hello world 通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/) diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 6cfd87d0d..24191f4ae 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -11,34 +11,34 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; /* Colors -------------------------- */ -$--color-white: #fff; -$--color-black: #000; +$--color-white: #fff !default; +$--color-black: #000 !default; $--color-primary: #409EFF !default; -$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */ -$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */ -$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */ -$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */ -$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */ -$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */ -$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */ -$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */ -$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */ +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ $--color-success: #67c23a !default; $--color-warning: #eb9e05 !default; $--color-danger: #fa5555 !default; $--color-info: #878d99 !default; -$--color-success-light: mix($--color-white, $--color-success, 80%); -$--color-warning-light: mix($--color-white, $--color-warning, 80%); -$--color-danger-light: mix($--color-white, $--color-danger, 80%); -$--color-info-light: mix($--color-white, $--color-info, 80%); +$--color-success-light: mix($--color-white, $--color-success, 80%) !default; +$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; +$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; +$--color-info-light: mix($--color-white, $--color-info, 80%) !default; -$--color-success-lighter: mix($--color-white, $--color-success, 90%); -$--color-warning-lighter: mix($--color-white, $--color-warning, 90%); -$--color-danger-lighter: mix($--color-white, $--color-danger, 90%); -$--color-info-lighter: mix($--color-white, $--color-info, 90%); +$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; +$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; +$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; +$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; $--color-text-primary: #2d2f33 !default; $--color-text-regular: #5a5e66 !default; @@ -47,641 +47,637 @@ $--color-text-placeholder: #b4bccc !default; /* Link -------------------------- */ -$--link-color: $--color-primary-light-2; -$--link-hover-color: $--color-primary; +$--link-color: $--color-primary-light-2 !default; +$--link-hover-color: $--color-primary !default; /* Background -------------------------- */ -$--background-color-base: #f5f7fa; +$--background-color-base: #f5f7fa !default; /* Border -------------------------- */ -$--border-width-base: 1px; -$--border-style-base: solid; +$--border-width-base: 1px !default; +$--border-style-base: solid !default; $--border-color-base: #d8dce5 !default; $--border-color-light: #dfe4ed !default; $--border-color-lighter: #e6ebf5 !default; $--border-color-extra-light: #edf2fc !default; -$--border-color-hover: $--color-text-placeholder; -$--border-base: $--border-width-base $--border-style-base $--border-color-base; -$--border-radius-base: 4px; -$--border-radius-small: 2px; -$--border-radius-circle: 100%; +$--border-color-hover: $--color-text-placeholder !default; +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; +$--border-radius-base: 4px !default; +$--border-radius-small: 2px !default; +$--border-radius-circle: 100% !default; /* Box-shadow -------------------------- */ -$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); -$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12); -$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1); +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; /* Fill -------------------------- */ -$--fill-base: $--color-white; +$--fill-base: $--color-white !default; /* Font -------------------------- */ $--font-path: 'fonts' !default; -$--font-size-base: 14px; -$--font-size-small: 13px; -$--font-size-large: 18px; -$--font-color-disabled-base: #bbb; -$--font-weight-primary: 500; -$--font-line-height-primary: 24px; +$--font-size-base: 14px !default; +$--font-size-small: 13px !default; +$--font-size-large: 18px !default; +$--font-color-disabled-base: #bbb !default; +$--font-weight-primary: 500 !default; +$--font-line-height-primary: 24px !default; /* Size -------------------------- */ -$--size-base: 14px; +$--size-base: 14px !default; /* z-index -------------------------- */ -$--index-normal: 1; -$--index-top: 1000; -$--index-popper: 2000; +$--index-normal: 1 !default; +$--index-top: 1000 !default; +$--index-popper: 2000 !default; /* Disable base -------------------------- */ -$--disabled-fill-base: $--background-color-base; -$--disabled-color-base: $--color-text-placeholder; -$--disabled-border-base: $--border-color-light; +$--disabled-fill-base: $--background-color-base !default; +$--disabled-color-base: $--color-text-placeholder !default; +$--disabled-border-base: $--border-color-light !default; /* Icon -------------------------- */ -$--icon-color: #666; -$--icon-color-base: $--color-info; +$--icon-color: #666 !default; +$--icon-color-base: $--color-info !default; /* Checkbox -------------------------- */ -$--checkbox-font-size: 14px; -$--checkbox-font-weight: $--font-weight-primary; -$--checkbox-color: $--color-text-regular; -$--checkbox-input-height: 14px; -$--checkbox-input-width: 14px; -$--checkbox-input-border-radius: $--border-radius-small; -$--checkbox-input-fill: $--color-white; -$--checkbox-input-border: $--border-base; -$--checkbox-input-border-color: $--border-color-base; -$--checkbox-icon-color: $--color-white; +$--checkbox-font-size: 14px !default; +$--checkbox-font-weight: $--font-weight-primary !default; +$--checkbox-color: $--color-text-regular !default; +$--checkbox-input-height: 14px !default; +$--checkbox-input-width: 14px !default; +$--checkbox-input-border-radius: $--border-radius-small !default; +$--checkbox-input-fill: $--color-white !default; +$--checkbox-input-border: $--border-base !default; +$--checkbox-input-border-color: $--border-color-base !default; +$--checkbox-icon-color: $--color-white !default; -$--checkbox-disabled-input-border-color: $--border-color-base; -$--checkbox-disabled-input-fill: #edf2fc; -$--checkbox-disabled-icon-color: $--color-text-placeholder; +$--checkbox-disabled-input-border-color: $--border-color-base !default; +$--checkbox-disabled-input-fill: #edf2fc !default; +$--checkbox-disabled-icon-color: $--color-text-placeholder !default; -$--checkbox-disabled-checked-input-fill: $--border-color-extra-light; -$--checkbox-disabled-checked-input-border-color: $--border-color-base; -$--checkbox-disabled-checked-icon-color: $--color-text-placeholder; +$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default; +$--checkbox-disabled-checked-input-border-color: $--border-color-base !default; +$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default; -$--checkbox-checked-text-color: $--color-primary; -$--checkbox-checked-input-border-color: $--color-primary; -$--checkbox-checked-input-fill: $--color-primary; -$--checkbox-checked-icon-color: $--fill-base; +$--checkbox-checked-text-color: $--color-primary !default; +$--checkbox-checked-input-border-color: $--color-primary !default; +$--checkbox-checked-input-fill: $--color-primary !default; +$--checkbox-checked-icon-color: $--fill-base !default; -$--checkbox-input-border-color-hover: $--color-primary; +$--checkbox-input-border-color-hover: $--color-primary !default; -$--checkbox-bordered-padding: 9px 20px 9px 10px; -$--checkbox-bordered-medium-padding: 7px 20px 7px 10px; -$--checkbox-bordered-small-padding: 3px 15px 7px 10px; -$--checkbox-bordered-mini-padding: 1px 15px 5px 10px; -$--checkbox-bordered-medium-input-height: 14px; -$--checkbox-bordered-medium-input-width: 14px; -$--checkbox-bordered-small-input-height: 12px; -$--checkbox-bordered-small-input-width: 12px; -$--checkbox-bordered-mini-input-height: 12px; -$--checkbox-bordered-mini-input-width: 12px; +$--checkbox-bordered-padding: 9px 20px 9px 10px !default; +$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; +$--checkbox-bordered-small-padding: 3px 15px 7px 10px !default; +$--checkbox-bordered-mini-padding: 1px 15px 5px 10px !default; +$--checkbox-bordered-medium-input-height: 14px !default; +$--checkbox-bordered-medium-input-width: 14px !default; +$--checkbox-bordered-small-input-height: 12px !default; +$--checkbox-bordered-small-input-width: 12px !default; +$--checkbox-bordered-mini-input-height: 12px !default; +$--checkbox-bordered-mini-input-width: 12px !default; -$--checkbox-button-font-size: $--font-size-base; -$--checkbox-button-checked-fill: $--color-primary; -$--checkbox-button-checked-color: $--color-white; -$--checkbox-button-checked-border-color: $--color-primary; +$--checkbox-button-font-size: $--font-size-base !default; +$--checkbox-button-checked-fill: $--color-primary !default; +$--checkbox-button-checked-color: $--color-white !default; +$--checkbox-button-checked-border-color: $--color-primary !default; /* Radio -------------------------- */ -$--radio-font-size: 14px; -$--radio-font-weight: $--font-weight-primary; -$--radio-color: $--color-text-regular; -$--radio-input-height: 14px; -$--radio-input-width: 14px; -$--radio-input-border-radius: $--border-radius-circle; -$--radio-input-fill: $--color-white; -$--radio-input-border: $--border-base; -$--radio-input-border-color: $--border-color-base; -$--radio-icon-color: $--color-white; +$--radio-font-size: 14px !default; +$--radio-font-weight: $--font-weight-primary !default; +$--radio-color: $--color-text-regular !default; +$--radio-input-height: 14px !default; +$--radio-input-width: 14px !default; +$--radio-input-border-radius: $--border-radius-circle !default; +$--radio-input-fill: $--color-white !default; +$--radio-input-border: $--border-base !default; +$--radio-input-border-color: $--border-color-base !default; +$--radio-icon-color: $--color-white !default; -$--radio-disabled-input-border-color: $--disabled-border-base; -$--radio-disabled-input-fill: $--disabled-fill-base; -$--radio-disabled-icon-color: $--disabled-fill-base; +$--radio-disabled-input-border-color: $--disabled-border-base !default; +$--radio-disabled-input-fill: $--disabled-fill-base !default; +$--radio-disabled-icon-color: $--disabled-fill-base !default; -$--radio-disabled-checked-input-border-color: $--disabled-border-base; -$--radio-disabled-checked-input-fill: $--disabled-fill-base; -$--radio-disabled-checked-icon-color: $--color-text-placeholder; +$--radio-disabled-checked-input-border-color: $--disabled-border-base !default; +$--radio-disabled-checked-input-fill: $--disabled-fill-base !default; +$--radio-disabled-checked-icon-color: $--color-text-placeholder !default; -$--radio-checked-text-color: $--color-primary; -$--radio-checked-input-border-color: $--color-primary; -$--radio-checked-input-fill: $--color-white; -$--radio-checked-icon-color: $--color-primary; +$--radio-checked-text-color: $--color-primary !default; +$--radio-checked-input-border-color: $--color-primary !default; +$--radio-checked-input-fill: $--color-white !default; +$--radio-checked-icon-color: $--color-primary !default; -$--radio-input-border-color-hover: $--color-primary; +$--radio-input-border-color-hover: $--color-primary !default; -$--radio-bordered-padding: 10px 20px 10px 10px; -$--radio-bordered-medium-padding: 8px 20px 8px 10px; -$--radio-bordered-small-padding: 6px 15px 6px 10px; -$--radio-bordered-mini-padding: 4px 15px 4px 10px; -$--radio-bordered-medium-input-height: 14px; -$--radio-bordered-medium-input-width: 14px; -$--radio-bordered-small-input-height: 12px; -$--radio-bordered-small-input-width: 12px; -$--radio-bordered-mini-input-height: 12px; -$--radio-bordered-mini-input-width: 12px; +$--radio-bordered-padding: 10px 20px 10px 10px !default; +$--radio-bordered-medium-padding: 8px 20px 8px 10px !default; +$--radio-bordered-small-padding: 6px 15px 6px 10px !default; +$--radio-bordered-mini-padding: 4px 15px 4px 10px !default; +$--radio-bordered-medium-input-height: 14px !default; +$--radio-bordered-medium-input-width: 14px !default; +$--radio-bordered-small-input-height: 12px !default; +$--radio-bordered-small-input-width: 12px !default; +$--radio-bordered-mini-input-height: 12px !default; +$--radio-bordered-mini-input-width: 12px !default; -$--radio-button-font-size: $--font-size-base; -$--radio-button-checked-fill: $--color-primary; -$--radio-button-checked-color: $--color-white; -$--radio-button-checked-border-color: $--color-primary; -$--radio-button-disabled-checked-fill: $--border-color-extra-light; +$--radio-button-font-size: $--font-size-base !default; +$--radio-button-checked-fill: $--color-primary !default; +$--radio-button-checked-color: $--color-white !default; +$--radio-button-checked-border-color: $--color-primary !default; +$--radio-button-disabled-checked-fill: $--border-color-extra-light !default; /* Select -------------------------- */ -$--select-border-color-hover: $--border-color-hover; -$--select-disabled-border: $--disabled-border-base; -$--select-font-size: $--font-size-base; -$--select-close-hover-color: $--color-text-secondary; +$--select-border-color-hover: $--border-color-hover !default; +$--select-disabled-border: $--disabled-border-base !default; +$--select-font-size: $--font-size-base !default; +$--select-close-hover-color: $--color-text-secondary !default; -$--select-input-color: $--color-text-placeholder; -$--select-multiple-input-color: #666; -$--select-input-focus-background: $--color-primary; -$--select-input-font-size: 14px; +$--select-input-color: $--color-text-placeholder !default; +$--select-multiple-input-color: #666 !default; +$--select-input-focus-background: $--color-primary !default; +$--select-input-font-size: 14px !default; -$--select-tag-height: 24px; -$--select-tag-color: $--color-white; -$--select-tag-background: $--color-primary; +$--select-option-color: $--color-text-regular !default; +$--select-option-disabled-color: $--color-text-placeholder !default; +$--select-option-disabled-background: $--color-white !default; +$--select-option-height: 34px !default; +$--select-option-hover-background: $--background-color-base !default; +$--select-option-selected: $--color-primary !default; +$--select-option-selected-hover: $--background-color-base !default; -$--select-option-color: $--color-text-regular; -$--select-option-disabled-color: $--color-text-placeholder; -$--select-option-disabled-background: $--color-white; -$--select-option-height: 34px; -$--select-option-hover-background: $--background-color-base; -$--select-option-selected: $--color-primary; -$--select-option-selected-hover: $--background-color-base; +$--select-group-color: $--color-info !default; +$--select-group-height: 30px !default; +$--select-group-font-size: 12px !default; -$--select-group-color: $--color-info; -$--select-group-height: 30px; -$--select-group-font-size: 12px; - -$--select-dropdown-background: $--color-white; -$--select-dropdown-shadow: $--box-shadow-light; -$--select-dropdown-empty-color: #999; -$--select-dropdown-max-height: 274px; -$--select-dropdown-padding: 6px 0; -$--select-dropdown-empty-padding: 10px 0; -$--select-dropdown-border: solid 1px $--border-color-light; +$--select-dropdown-background: $--color-white !default; +$--select-dropdown-shadow: $--box-shadow-light !default; +$--select-dropdown-empty-color: #999 !default; +$--select-dropdown-max-height: 274px !default; +$--select-dropdown-padding: 6px 0 !default; +$--select-dropdown-empty-padding: 10px 0 !default; +$--select-dropdown-border: solid 1px $--border-color-light !default; /* Alert -------------------------- */ -$--alert-padding: 8px 16px; -$--alert-border-radius: $--border-radius-base; -$--alert-title-font-size: 13px; -$--alert-description-font-size: 12px; -$--alert-close-font-size: 12px; -$--alert-close-customed-font-size: 13px; +$--alert-padding: 8px 16px !default; +$--alert-border-radius: $--border-radius-base !default; +$--alert-title-font-size: 13px !default; +$--alert-description-font-size: 12px !default; +$--alert-close-font-size: 12px !default; +$--alert-close-customed-font-size: 13px !default; -$--alert-success-color: $--color-success-lighter; -$--alert-info-color: $--color-info-lighter; -$--alert-warning-color: $--color-warning-lighter; -$--alert-danger-color: $--color-danger-lighter; +$--alert-success-color: $--color-success-lighter !default; +$--alert-info-color: $--color-info-lighter !default; +$--alert-warning-color: $--color-warning-lighter !default; +$--alert-danger-color: $--color-danger-lighter !default; -$--alert-icon-size: 16px; -$--alert-icon-large-size: 28px; +$--alert-icon-size: 16px !default; +$--alert-icon-large-size: 28px !default; /* Message Box -------------------------- */ -$--msgbox-width: 420px; -$--msgbox-border-radius: 4px; -$--msgbox-font-size: $--font-size-large; -$--msgbox-content-font-size: $--font-size-base; -$--msgbox-content-color: $--color-text-regular; -$--msgbox-error-font-size: 12px; -$--msgbox-padding-primary: 15px; +$--msgbox-width: 420px !default; +$--msgbox-border-radius: 4px !default; +$--msgbox-font-size: $--font-size-large !default; +$--msgbox-content-font-size: $--font-size-base !default; +$--msgbox-content-color: $--color-text-regular !default; +$--msgbox-error-font-size: 12px !default; +$--msgbox-padding-primary: 15px !default; -$--msgbox-success-color: $--color-success; -$--msgbox-info-color: $--color-info; -$--msgbox-warning-color: $--color-warning; -$--msgbox-danger-color: $--color-danger; +$--msgbox-success-color: $--color-success !default; +$--msgbox-info-color: $--color-info !default; +$--msgbox-warning-color: $--color-warning !default; +$--msgbox-danger-color: $--color-danger !default; /* Message -------------------------- */ -$--message-shadow: $--box-shadow-base; -$--message-min-width: 380px; -$--message-background-color: #edf2fc; -$--message-padding: 15px 15px 15px 20px; -$--message-content-color: $--color-text-regular; -$--message-close-color: $--color-text-placeholder; -$--message-close-size: 16px; -$--message-close-hover-color: $--color-text-secondary; +$--message-shadow: $--box-shadow-base !default; +$--message-min-width: 380px !default; +$--message-background-color: #edf2fc !default; +$--message-padding: 15px 15px 15px 20px !default; +$--message-content-color: $--color-text-regular !default; +$--message-close-color: $--color-text-placeholder !default; +$--message-close-size: 16px !default; +$--message-close-hover-color: $--color-text-secondary !default; -$--message-success-color: $--color-success; -$--message-info-color: $--color-info; -$--message-warning-color: $--color-warning; -$--message-danger-color: $--color-danger; +$--message-success-color: $--color-success !default; +$--message-info-color: $--color-info !default; +$--message-warning-color: $--color-warning !default; +$--message-danger-color: $--color-danger !default; /* Notification -------------------------- */ -$--notification-width: 330px; -$--notification-padding: 14px 26px 14px 13px; -$--notification-raduis: 8px; -$--notification-shadow: $--box-shadow-light; -$--notification-border-color: $--border-color-lighter; -$--notification-icon-size: 24px; -$--notification-close-font-size: $--message-close-size; -$--notification-group-margin: 13px; -$--notification-font-size: $--font-size-base; -$--notification-color: $--color-text-regular; -$--notification-title-font-size: 16px; -$--notification-title-color: $--color-text-primary; +$--notification-width: 330px !default; +$--notification-padding: 14px 26px 14px 13px !default; +$--notification-raduis: 8px !default; +$--notification-shadow: $--box-shadow-light !default; +$--notification-border-color: $--border-color-lighter !default; +$--notification-icon-size: 24px !default; +$--notification-close-font-size: $--message-close-size !default; +$--notification-group-margin: 13px !default; +$--notification-font-size: $--font-size-base !default; +$--notification-color: $--color-text-regular !default; +$--notification-title-font-size: 16px !default; +$--notification-title-color: $--color-text-primary !default; -$--notification-close-color: $--color-text-secondary; -$--notification-close-hover-color: $--color-text-regular; +$--notification-close-color: $--color-text-secondary !default; +$--notification-close-hover-color: $--color-text-regular !default; -$--notification-success-color: $--color-success; -$--notification-info-color: $--color-info; -$--notification-warning-color: $--color-warning; -$--notification-danger-color: $--color-danger; +$--notification-success-color: $--color-success !default; +$--notification-info-color: $--color-info !default; +$--notification-warning-color: $--color-warning !default; +$--notification-danger-color: $--color-danger !default; /* Input -------------------------- */ -$--input-font-size: $--font-size-base; -$--input-color: $--color-text-regular; -$--input-width: 140px; -$--input-height: 40px; -$--input-border: $--border-base; -$--input-border-color: $--border-color-base; -$--input-border-radius: $--border-radius-base; -$--input-border-color-hover: $--border-color-hover; -$--input-fill: $--color-white; -$--input-fill-disabled: $--disabled-fill-base; -$--input-color-disabled: $--font-color-disabled-base; -$--input-icon-color: $--color-text-placeholder; -$--input-placeholder-color: $--color-text-placeholder; -$--input-max-width: 314px; +$--input-font-size: $--font-size-base !default; +$--input-color: $--color-text-regular !default; +$--input-width: 140px !default; +$--input-height: 40px !default; +$--input-border: $--border-base !default; +$--input-border-color: $--border-color-base !default; +$--input-border-radius: $--border-radius-base !default; +$--input-border-color-hover: $--border-color-hover !default; +$--input-fill: $--color-white !default; +$--input-fill-disabled: $--disabled-fill-base !default; +$--input-color-disabled: $--font-color-disabled-base !default; +$--input-icon-color: $--color-text-placeholder !default; +$--input-placeholder-color: $--color-text-placeholder !default; +$--input-max-width: 314px !default; -$--input-hover-border: $--border-color-hover; +$--input-hover-border: $--border-color-hover !default; -$--input-focus-border: $--color-primary; -$--input-focus-fill: $--color-white; +$--input-focus-border: $--color-primary !default; +$--input-focus-fill: $--color-white !default; -$--input-disabled-fill: $--disabled-fill-base; -$--input-disabled-border: $--disabled-border-base; -$--input-disabled-color: $--disabled-color-base; -$--input-disabled-placeholder-color: $--color-text-placeholder; +$--input-disabled-fill: $--disabled-fill-base !default; +$--input-disabled-border: $--disabled-border-base !default; +$--input-disabled-color: $--disabled-color-base !default; +$--input-disabled-placeholder-color: $--color-text-placeholder !default; -$--input-medium-font-size: 14px; -$--input-medium-height: 36px; +$--input-medium-font-size: 14px !default; +$--input-medium-height: 36px !default; -$--input-small-font-size: 13px; -$--input-small-height: 32px; +$--input-small-font-size: 13px !default; +$--input-small-height: 32px !default; -$--input-mini-font-size: 12px; -$--input-mini-height: 28px; +$--input-mini-font-size: 12px !default; +$--input-mini-height: 28px !default; /* Cascader -------------------------- */ -$--cascader-menu-fill: $--fill-base; -$--cascader-menu-font-size: $--font-size-base; -$--cascader-menu-radius: $--border-radius-base; -$--cascader-menu-border: $--border-base; -$--cascader-menu-border-color: $--border-color-base; -$--cascader-menu-border-width: $--border-width-base; -$--cascader-menu-color: $--color-text-regular; -$--cascader-menu-option-color-active: $--color-text-secondary; -$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12); -$--cascader-menu-option-color-hover: $--color-text-regular; -$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06); -$--cascader-menu-option-color-disabled: #999; -$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06); -$--cascader-menu-option-empty-color: #666; -$--cascader-menu-group-color: #999; -$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14); -$--cascader-menu-option-pinyin-color: #999; -$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14); +$--cascader-menu-fill: $--fill-base !default; +$--cascader-menu-font-size: $--font-size-base !default; +$--cascader-menu-radius: $--border-radius-base !default; +$--cascader-menu-border: $--border-base !default; +$--cascader-menu-border-color: $--border-color-base !default; +$--cascader-menu-border-width: $--border-width-base !default; +$--cascader-menu-color: $--color-text-regular !default; +$--cascader-menu-option-color-active: $--color-text-secondary !default; +$--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default; +$--cascader-menu-option-color-hover: $--color-text-regular !default; +$--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default; +$--cascader-menu-option-color-disabled: #999 !default; +$--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default; +$--cascader-menu-option-empty-color: #666 !default; +$--cascader-menu-group-color: #999 !default; +$--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default; +$--cascader-menu-option-pinyin-color: #999 !default; +$--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default; /* Group -------------------------- */ -$--group-option-flex: 0 0 (1/5) * 100%; -$--group-option-offset-bottom: 12px; -$--group-option-fill-hover: rgba($--color-black, 0.06); -$--group-title-color: $--color-black; -$--group-title-font-size: $--font-size-base; -$--group-title-width: 66px; +$--group-option-flex: 0 0 (1/5) * 100% !default; +$--group-option-offset-bottom: 12px !default; +$--group-option-fill-hover: rgba($--color-black, 0.06) !default; +$--group-title-color: $--color-black !default; +$--group-title-font-size: $--font-size-base !default; +$--group-title-width: 66px !default; /* Tab -------------------------- */ -$--tab-font-size: $--font-size-base; -$--tab-border-line: 1px solid #e4e4e4; -$--tab-header-color-active: $--color-text-secondary; -$--tab-header-color-hover: $--color-text-regular; -$--tab-header-color: $--color-text-regular; -$--tab-header-fill-active: rgba($--color-black, 0.06); -$--tab-header-fill-hover: rgba($--color-black, 0.06); -$--tab-vertical-header-width: 90px; -$--tab-vertical-header-count-color: $--color-white; -$--tab-vertical-header-count-fill: $--color-text-secondary; +$--tab-font-size: $--font-size-base !default; +$--tab-border-line: 1px solid #e4e4e4 !default; +$--tab-header-color-active: $--color-text-secondary !default; +$--tab-header-color-hover: $--color-text-regular !default; +$--tab-header-color: $--color-text-regular !default; +$--tab-header-fill-active: rgba($--color-black, 0.06) !default; +$--tab-header-fill-hover: rgba($--color-black, 0.06) !default; +$--tab-vertical-header-width: 90px !default; +$--tab-vertical-header-count-color: $--color-white !default; +$--tab-vertical-header-count-fill: $--color-text-secondary !default; /* Button -------------------------- */ -$--button-font-size: 14px; -$--button-font-weight: $--font-weight-primary; -$--button-border-radius: $--border-radius-base; -$--button-padding-vertical: 12px; -$--button-padding-horizontal: 20px; +$--button-font-size: 14px !default; +$--button-font-weight: $--font-weight-primary !default; +$--button-border-radius: $--border-radius-base !default; +$--button-padding-vertical: 12px !default; +$--button-padding-horizontal: 20px !default; -$--button-medium-font-size: 14px; -$--button-medium-border-radius: $--border-radius-base; -$--button-medium-padding-vertical: 10px; -$--button-medium-padding-horizontal: 20px; +$--button-medium-font-size: 14px !default; +$--button-medium-border-radius: $--border-radius-base !default; +$--button-medium-padding-vertical: 10px !default; +$--button-medium-padding-horizontal: 20px !default; -$--button-small-font-size: 12px; -$--button-small-border-radius: #{$--border-radius-base - 1}; -$--button-small-padding-vertical: 9px; -$--button-small-padding-horizontal: 15px; +$--button-small-font-size: 12px !default; +$--button-small-border-radius: #{$--border-radius-base - 1} !default; +$--button-small-padding-vertical: 9px !default; +$--button-small-padding-horizontal: 15px !default; -$--button-mini-font-size: 12px; -$--button-mini-border-radius: #{$--border-radius-base - 1}; -$--button-mini-padding-vertical: 7px; -$--button-mini-padding-horizontal: 15px; +$--button-mini-font-size: 12px !default; +$--button-mini-border-radius: #{$--border-radius-base - 1} !default; +$--button-mini-padding-vertical: 7px !default; +$--button-mini-padding-horizontal: 15px !default; -$--button-default-color: $--color-text-regular; -$--button-default-fill: $--color-white; -$--button-default-border: $--border-color-base; +$--button-default-color: $--color-text-regular !default; +$--button-default-fill: $--color-white !default; +$--button-default-border: $--border-color-base !default; -$--button-disabled-color: $--color-text-placeholder; -$--button-disabled-fill: $--color-white; -$--button-disabled-border: $--border-color-lighter; +$--button-disabled-color: $--color-text-placeholder !default; +$--button-disabled-fill: $--color-white !default; +$--button-disabled-border: $--border-color-lighter !default; -$--button-primary-border: $--color-primary; -$--button-primary-color: $--color-white; -$--button-primary-fill: $--color-primary; +$--button-primary-border: $--color-primary !default; +$--button-primary-color: $--color-white !default; +$--button-primary-fill: $--color-primary !default; -$--button-success-border: $--color-success; -$--button-success-color: $--color-white; -$--button-success-fill: $--color-success; +$--button-success-border: $--color-success !default; +$--button-success-color: $--color-white !default; +$--button-success-fill: $--color-success !default; -$--button-warning-border: $--color-warning; -$--button-warning-color: $--color-white; -$--button-warning-fill: $--color-warning; +$--button-warning-border: $--color-warning !default; +$--button-warning-color: $--color-white !default; +$--button-warning-fill: $--color-warning !default; -$--button-danger-border: $--color-danger; -$--button-danger-color: $--color-white; -$--button-danger-fill: $--color-danger; +$--button-danger-border: $--color-danger !default; +$--button-danger-color: $--color-white !default; +$--button-danger-fill: $--color-danger !default; -$--button-info-border: $--color-info; -$--button-info-color: $--color-white; -$--button-info-fill: $--color-info; +$--button-info-border: $--color-info !default; +$--button-info-color: $--color-white !default; +$--button-info-fill: $--color-info !default; -$--button-hover-tint-percent: 20%; -$--button-active-shade-percent: 10%; +$--button-hover-tint-percent: 20% !default; +$--button-active-shade-percent: 10% !default; /* cascader -------------------------- */ -$--cascader-height: 200px; +$--cascader-height: 200px !default; /* Switch -------------------------- */ -$--switch-on-color: $--color-primary; -$--switch-off-color: $--border-color-base; -$--switch-disabled-color: $--border-color-lighter; -$--switch-disabled-text-color: $--color-text-placeholder; +$--switch-on-color: $--color-primary !default; +$--switch-off-color: $--border-color-base !default; +$--switch-disabled-color: $--border-color-lighter !default; +$--switch-disabled-text-color: $--color-text-placeholder !default; -$--switch-font-size: $--font-size-base; -$--switch-core-border-radius: 10px; -$--switch-width: 40px; -$--switch-height: 20px; -$--switch-button-size: 16px; +$--switch-font-size: $--font-size-base !default; +$--switch-core-border-radius: 10px !default; +$--switch-width: 40px !default; +$--switch-height: 20px !default; +$--switch-button-size: 16px !default; /* Dialog -------------------------- */ -$--dialog-background-color: $--color-primary-light-4; -$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -$--dialog-close-hover-color: $--color-primary; -$--dialog-title-font-size: $--font-size-large; -$--dialog-font-size: 14px; -$--dialog-line-height: $--font-line-height-primary; -$--dialog-padding-primary: 15px; +$--dialog-background-color: $--color-primary-light-4 !default; +$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; +$--dialog-close-hover-color: $--color-primary !default; +$--dialog-title-font-size: $--font-size-large !default; +$--dialog-font-size: 14px !default; +$--dialog-line-height: $--font-line-height-primary !default; +$--dialog-padding-primary: 15px !default; /* Table -------------------------- */ -$--table-border: 1px solid $--border-color-lighter; -$--table-text-color: $--color-text-regular; -$--table-header-color: $--color-text-secondary; -$--table-row-hover-background: $--background-color-base; -$--table-current-row-background: $--color-primary-light-9; -$--table-header-background: $--color-text-secondary; -$--table-footer-background: $--color-text-placeholder; -$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12); +$--table-border: 1px solid $--border-color-lighter !default; +$--table-text-color: $--color-text-regular !default; +$--table-header-color: $--color-text-secondary !default; +$--table-row-hover-background: $--background-color-base !default; +$--table-current-row-background: $--color-primary-light-9 !default; +$--table-header-background: $--color-text-secondary !default; +$--table-footer-background: $--color-text-placeholder !default; +$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; /* Pagination -------------------------- */ -$--pagination-font-size: 13px; -$--pagination-fill: $--color-white; -$--pagination-color: $--color-text-primary; -$--pagination-border-radius: 3px; -$--pagination-button-color: $--color-text-primary; -$--pagination-button-width: 35.5px; -$--pagination-button-height: 28px; -$--pagination-button-disabled-color: $--color-text-placeholder; -$--pagination-button-disabled-fill: $--color-white; -$--pagination-hover-fill: $--color-primary; -$--pagination-hover-color: $--color-white; +$--pagination-font-size: 13px !default; +$--pagination-fill: $--color-white !default; +$--pagination-color: $--color-text-primary !default; +$--pagination-border-radius: 3px !default; +$--pagination-button-color: $--color-text-primary !default; +$--pagination-button-width: 35.5px !default; +$--pagination-button-height: 28px !default; +$--pagination-button-disabled-color: $--color-text-placeholder !default; +$--pagination-button-disabled-fill: $--color-white !default; +$--pagination-hover-fill: $--color-primary !default; +$--pagination-hover-color: $--color-white !default; /* Popover -------------------------- */ -$--popover-fill: $--color-white; -$--popover-font-size: $--font-size-base; -$--popover-border-color: $--border-color-lighter; -$--popover-arrow-size: 6px; -$--popover-padding: 12px; -$--popover-padding-large: 18px 20px; -$--popover-title-font-size: 16px; -$--popover-title-color: $--color-text-primary; +$--popover-fill: $--color-white !default; +$--popover-font-size: $--font-size-base !default; +$--popover-border-color: $--border-color-lighter !default; +$--popover-arrow-size: 6px !default; +$--popover-padding: 12px !default; +$--popover-padding-large: 18px 20px !default; +$--popover-title-font-size: 16px !default; +$--popover-title-color: $--color-text-primary !default; /* Tooltip -------------------------- */ -$--tooltip-fill: $--color-text-primary; -$--tooltip-color: $--color-white; -$--tooltip-font-size: 12px; -$--tooltip-border-color: $--color-text-primary; -$--tooltip-arrow-size: 6px; -$--tooltip-padding: 10px; +$--tooltip-fill: $--color-text-primary !default; +$--tooltip-color: $--color-white !default; +$--tooltip-font-size: 12px !default; +$--tooltip-border-color: $--color-text-primary !default; +$--tooltip-arrow-size: 6px !default; +$--tooltip-padding: 10px !default; /* Tag -------------------------- */ -$--tag-padding: 0 10px; -$--tag-fill: rgba($--color-primary, 0.10); -$--tag-color: $--color-primary; -$--tag-border: rgba($--color-primary, 0.20); -$--tag-font-size: 12px; -$--tag-border-radius: 4px; +$--tag-padding: 0 10px !default; +$--tag-fill: rgba($--color-primary, 0.10) !default; +$--tag-color: $--color-primary !default; +$--tag-border: rgba($--color-primary, 0.20) !default; +$--tag-font-size: 12px !default; +$--tag-border-radius: 4px !default; -$--tag-info-fill: rgba($--color-info, 0.10); -$--tag-info-border: rgba($--color-info, 0.20); -$--tag-info-color: $--color-info; +$--tag-info-fill: rgba($--color-info, 0.10) !default; +$--tag-info-border: rgba($--color-info, 0.20) !default; +$--tag-info-color: $--color-info !default; -$--tag-primary-fill: rgba($--color-primary, 0.10); -$--tag-primary-border: rgba($--color-primary, 0.20); -$--tag-primary-color: $--color-primary; +$--tag-primary-fill: rgba($--color-primary, 0.10) !default; +$--tag-primary-border: rgba($--color-primary, 0.20) !default; +$--tag-primary-color: $--color-primary !default; -$--tag-success-fill: rgba($--color-success, 0.10); -$--tag-success-border: rgba($--color-success, 0.20); -$--tag-success-color: $--color-success; +$--tag-success-fill: rgba($--color-success, 0.10) !default; +$--tag-success-border: rgba($--color-success, 0.20) !default; +$--tag-success-color: $--color-success !default; -$--tag-warning-fill: rgba($--color-warning, 0.10); -$--tag-warning-border: rgba($--color-warning, 0.20); -$--tag-warning-color: $--color-warning; +$--tag-warning-fill: rgba($--color-warning, 0.10) !default; +$--tag-warning-border: rgba($--color-warning, 0.20) !default; +$--tag-warning-color: $--color-warning !default; -$--tag-danger-fill: rgba($--color-danger, 0.10); -$--tag-danger-border: rgba($--color-danger, 0.20); -$--tag-danger-color: $--color-danger; +$--tag-danger-fill: rgba($--color-danger, 0.10) !default; +$--tag-danger-border: rgba($--color-danger, 0.20) !default; +$--tag-danger-color: $--color-danger !default; /* Tree -------------------------- */ -$--tree-node-hover-color: $--background-color-base; -$--tree-text-color: $--color-text-regular; -$--tree-expand-icon-color: $--color-text-placeholder; +$--tree-node-hover-color: $--background-color-base !default; +$--tree-text-color: $--color-text-regular !default; +$--tree-expand-icon-color: $--color-text-placeholder !default; /* Dropdown -------------------------- */ -$--dropdown-menu-box-shadow: $--box-shadow-light; -$--dropdown-menuItem-hover-fill: $--color-primary-light-9; -$--dropdown-menuItem-hover-color: $--link-color; +$--dropdown-menu-box-shadow: $--box-shadow-light !default; +$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default; +$--dropdown-menuItem-hover-color: $--link-color !default; /* Badge -------------------------- */ -$--badge-fill: $--color-danger; -$--badge-radius: 10px; -$--badge-font-size: 12px; -$--badge-padding: 6px; -$--badge-size: 18px; +$--badge-fill: $--color-danger !default; +$--badge-radius: 10px !default; +$--badge-font-size: 12px !default; +$--badge-padding: 6px !default; +$--badge-size: 18px !default; /* Card --------------------------*/ -$--card-border-color: $--border-color-lighter; -$--card-border-radius: 4px; -$--card-padding: 20px; +$--card-border-color: $--border-color-lighter !default; +$--card-border-radius: 4px !default; +$--card-padding: 20px !default; /* Slider --------------------------*/ -$--slider-main-background-color: $--color-primary; -$--slider-runway-background-color: $--border-color-light; -$--slider-button-hover-color: mix($--color-primary, black, 97%); -$--slider-stop-background-color: $--color-white; -$--slider-disable-color: $--color-text-placeholder; +$--slider-main-background-color: $--color-primary !default; +$--slider-runway-background-color: $--border-color-light !default; +$--slider-button-hover-color: mix($--color-primary, black, 97%) !default; +$--slider-stop-background-color: $--color-white !default; +$--slider-disable-color: $--color-text-placeholder !default; -$--slider-margin: 16px 0; -$--slider-border-radius: 3px; -$--slider-height: 6px; -$--slider-button-size: 16px; -$--slider-button-wrapper-size: 36px; -$--slider-button-wrapper-offset: -15px; +$--slider-margin: 16px 0 !default; +$--slider-border-radius: 3px !default; +$--slider-height: 6px !default; +$--slider-button-size: 16px !default; +$--slider-button-wrapper-size: 36px !default; +$--slider-button-wrapper-offset: -15px !default; /* Steps --------------------------*/ -$--steps-border-color: $--disabled-border-base; -$--steps-border-radius: 4px; -$--steps-padding: 20px; +$--steps-border-color: $--disabled-border-base !default; +$--steps-border-radius: 4px !default; +$--steps-padding: 20px !default; /* Menu --------------------------*/ -$--menu-item-color: $--color-text-primary; -$--menu-item-fill: $--color-white; -$--menu-item-hover-fill: $--color-primary-light-9; +$--menu-item-color: $--color-text-primary !default; +$--menu-item-fill: $--color-white !default; +$--menu-item-hover-fill: $--color-primary-light-9 !default; /* Rate --------------------------*/ -$--rate-height: 20px; -$--rate-font-size: $--font-size-base; -$--rate-icon-size: 18px; -$--rate-icon-margin: 6px; -$--rate-icon-color: $--color-text-placeholder; +$--rate-height: 20px !default; +$--rate-font-size: $--font-size-base !default; +$--rate-icon-size: 18px !default; +$--rate-icon-margin: 6px !default; +$--rate-icon-color: $--color-text-placeholder !default; /* DatePicker --------------------------*/ -$--datepicker-color: $--color-text-regular; -$--datepicker-off-color: $--color-text-placeholder; -$--datepicker-header-color: $--color-text-regular; -$--datepicker-icon-color: $--color-text-primary; -$--datepicker-border-color: $--disabled-border-base; -$--datepicker-inner-border-color: #e4e4e4; -$--datepicker-inrange-color: $--border-color-extra-light; -$--datepicker-inrange-hover-color: $--border-color-extra-light; -$--datepicker-active-color: $--color-primary; -$--datepicker-text-hover-color: $--color-primary; -$--datepicker-cell-hover-color: #fff; +$--datepicker-color: $--color-text-regular !default; +$--datepicker-off-color: $--color-text-placeholder !default; +$--datepicker-header-color: $--color-text-regular !default; +$--datepicker-icon-color: $--color-text-primary !default; +$--datepicker-border-color: $--disabled-border-base !default; +$--datepicker-inner-border-color: #e4e4e4 !default; +$--datepicker-inrange-color: $--border-color-extra-light !default; +$--datepicker-inrange-hover-color: $--border-color-extra-light !default; +$--datepicker-active-color: $--color-primary !default; +$--datepicker-text-hover-color: $--color-primary !default; +$--datepicker-cell-hover-color: #fff !default; /* Loading --------------------------*/ -$--loading-spinner-size: 42px; -$--loading-fullscreen-spinner-size: 50px; +$--loading-spinner-size: 42px !default; +$--loading-fullscreen-spinner-size: 50px !default; /* Scrollbar --------------------------*/ -$--scrollbar-background-color: rgba($--color-text-secondary, .3); -$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5); +$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default; +$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default; /* Carousel --------------------------*/ -$--carousel-arrow-font-size: 12px; -$--carousel-arrow-size: 36px; -$--carousel-arrow-background: rgba(31, 45, 61, 0.11); -$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23); -$--carousel-indicator-width: 30px; -$--carousel-indicator-height: 2px; -$--carousel-indicator-padding-horizontal: 4px; -$--carousel-indicator-padding-vertical: 12px; -$--carousel-indicator-out-color: $--border-color-hover; +$--carousel-arrow-font-size: 12px !default; +$--carousel-arrow-size: 36px !default; +$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; +$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; +$--carousel-indicator-width: 30px !default; +$--carousel-indicator-height: 2px !default; +$--carousel-indicator-padding-horizontal: 4px !default; +$--carousel-indicator-padding-vertical: 12px !default; +$--carousel-indicator-out-color: $--border-color-hover !default; /* Collapse --------------------------*/ -$--collapse-border-color: $--border-color-lighter; -$--collapse-header-height: 48px; -$--collapse-header-padding: 20px; -$--collapse-header-fill: $--color-white; -$--collapse-header-color: $--color-text-primary; -$--collapse-header-size: 13px; -$--collapse-content-fill: $--color-white; -$--collapse-content-size: 13px; -$--collapse-content-color: $--color-text-primary; +$--collapse-border-color: $--border-color-lighter !default; +$--collapse-header-height: 48px !default; +$--collapse-header-padding: 20px !default; +$--collapse-header-fill: $--color-white !default; +$--collapse-header-color: $--color-text-primary !default; +$--collapse-header-size: 13px !default; +$--collapse-content-fill: $--color-white !default; +$--collapse-content-size: 13px !default; +$--collapse-content-color: $--color-text-primary !default; /* Transfer --------------------------*/ -$--transfer-border-color: $--border-color-lighter; -$--transfer-border-radius: $--border-radius-base; -$--transfer-panel-width: 200px; -$--transfer-panel-header-height: 40px; -$--transfer-panel-header-background: $--background-color-base; -$--transfer-panel-footer-height: 40px; -$--transfer-panel-body-height: 246px; -$--transfer-item-height: 30px; -$--transfer-item-hover-background: $--color-text-secondary; -$--transfer-filter-height: 32px; +$--transfer-border-color: $--border-color-lighter !default; +$--transfer-border-radius: $--border-radius-base !default; +$--transfer-panel-width: 200px !default; +$--transfer-panel-header-height: 40px !default; +$--transfer-panel-header-background: $--background-color-base !default; +$--transfer-panel-footer-height: 40px !default; +$--transfer-panel-body-height: 246px !default; +$--transfer-item-height: 30px !default; +$--transfer-item-hover-background: $--color-text-secondary !default; +$--transfer-filter-height: 32px !default; /* Header --------------------------*/ -$--header-padding: 0 20px; +$--header-padding: 0 20px !default; /* Footer --------------------------*/ -$--footer-padding: 0 20px; +$--footer-padding: 0 20px !default; /* Main --------------------------*/ -$--main-padding: 20px; +$--main-padding: 20px !default; /* Break-point --------------------------*/ $--sm: 768px !default; -$--md: 992px !default;; -$--lg: 1200px !default;; -$--xl: 1920px !default;; +$--md: 992px !default; +$--lg: 1200px !default; +$--xl: 1920px !default; $--breakpoints: ( 'xs' : (max-width: $--sm), diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index 1bb951c8b..72c169dca 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -133,18 +133,4 @@ } } } - - @include e(tag) { - display: inline-block; - height: $--select-tag-height; - line-height: $--select-tag-height; - font-size: $--select-font-size; - border-radius: $--border-radius-base; - color: $--select-tag-color; - background-color: $--select-tag-background; - - & .el-icon-close { - font-size: $--select-input-font-size; - } - } }