github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Theme: releasing all variables

pull/7980/head
Leopoldthecoder 2017-11-02 11:27:12 +08:00 committed by 杨奕
parent 9553e1edba
commit 88868eebf7
9 changed files with 511 additions and 541 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/bin/version.js
View File

@ -1,6 +1,6 @@
var fs = require('fs'); var fs = require('fs');
var path = require('path'); var path = require('path');
var version = process.env.VERSION || require('../../package.json').version; 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'; if (!content[version]) content[version] = '2.0';
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content)); fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

53
examples/docs/en-US/custom-theme.md
View File

@ -28,33 +28,14 @@ import './element-variables.scss'
Vue.use(Element) 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 | ### CLI theme tool
| ------ | ---- | ------ | If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
| $--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' |
### More customizations #### <strong>Install</strong>
If you need more customization than just changing the theme color, please follow these steps:
#### <strong>Install related tool</strong>
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. 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 ```shell
npm i element-theme -g npm i element-theme -g
@ -78,23 +59,25 @@ et -i [custom output file]
> ✔ Generator variables 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 ```css
$--color-primary: #409EFF !default; $--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */ $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default; $--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default; $--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default; $--color-danger: #fa5555 !default;
$--color-info: #878d99 !default; $--color-info: #878d99 !default;
...
``` ```
#### <strong>Modify variables</strong> #### <strong>Modify variables</strong>

7
examples/docs/en-US/form.md
View File

@ -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
> <i>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.</i>
To prevent this behavior, you can add `@submit.native.prevent` on `<el-form>`.
:::
### Inline form ### Inline form
When the vertical space is limited and the form is relatively simple, you can put it in one line. When the vertical space is limited and the form is relatively simple, you can put it in one line.

4
examples/docs/en-US/installation.md
View File

@ -17,6 +17,10 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
``` ```
:::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 ### Hello world
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/) If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)

49
examples/docs/zh-CN/custom-theme.md
View File

@ -27,31 +27,12 @@ import './element-variables.scss'
Vue.use(Element) Vue.use(Element)
``` ```
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。使用这种方式可以自定义的变量为： :::tip
需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。
:::
| 变量名 | 含义 | 默认值 | ### 命令行主题工具
| ------ | ---- | ------ | 如果你的项目没有使用 SCSS，那么可以使用命令行主题工具进行深层次的主题定制：
| $--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' |
### 深层次的定制
如果仅仅改变以上变量不能满足你的需求，请按以下步骤进行更深层次的主题定制：
#### <strong>安装工具</strong> #### <strong>安装工具</strong>
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
@ -80,20 +61,22 @@ et -i [可以自定义变量文件]
如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下： 如果使用默认配置，执行后当前目录会有一个 `element-variables.scss` 文件。内部包含了主题所用到的所有变量，它们使用 SCSS 的格式定义。大致结构如下：
```css ```css
$--color-primary: #409EFF !default; $--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */ $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */ $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */ $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */ $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */ $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */ $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */ $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default; $--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default; $--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default; $--color-danger: #fa5555 !default;
$--color-info: #878d99 !default; $--color-info: #878d99 !default;
...
``` ```
#### <strong>修改变量</strong> #### <strong>修改变量</strong>

7
examples/docs/zh-CN/form.md
View File

@ -318,6 +318,13 @@
``` ```
::: :::
:::tip
W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2)：
> <i>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.</i>
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 `<el-form>` 标签上添加 `@submit.native.prevent`。
:::
### 行内表单 ### 行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

4
examples/docs/zh-CN/installation.md
View File

@ -17,6 +17,10 @@ npm i element-ui -S
<script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
``` ```
:::tip
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com)。
:::
### Hello world ### Hello world
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/) 通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)

912
packages/theme-chalk/src/common/var.scss
View File

File diff suppressed because it is too large Load Diff

14
packages/theme-chalk/src/select.scss
View File

@ -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;
}
}
} }