diff --git a/build/bin/gen-cssfile.js b/build/bin/gen-cssfile.js index 84550cac08..a4ce5a2457 100644 --- a/build/bin/gen-cssfile.js +++ b/build/bin/gen-cssfile.js @@ -2,7 +2,8 @@ var fs = require('fs'); var path = require('path'); var Components = require('../../components.json'); var themes = [ - 'theme-default' + 'theme-default', + 'theme-chalk' ]; Components = Object.keys(Components); var basepath = path.resolve(__dirname, '../../packages/'); @@ -16,10 +17,11 @@ function fileExists(filePath) { } themes.forEach((theme) => { - var indexContent = '@import "./base.css";\n'; + var isSCSS = theme !== 'theme-default'; + var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n'; Components.forEach(function(key) { if (['icon', 'option', 'option-group'].indexOf(key) > -1) return; - var fileName = key + '.css'; + var fileName = key + (isSCSS ? '.scss' : '.css'); indexContent += '@import "./' + fileName + '";\n'; var filePath = path.resolve(basepath, theme, 'src', fileName); if (!fileExists(filePath)) { @@ -27,5 +29,5 @@ themes.forEach((theme) => { console.log(theme, ' 创建遗漏的 ', fileName, ' 文件'); } }); - fs.writeFileSync(path.resolve(basepath, theme, 'src', 'index.css'), indexContent); + fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent); }); diff --git a/build/cooking.common.js b/build/cooking.common.js index aa9a385e2e..16f6be61d6 100644 --- a/build/cooking.common.js +++ b/build/cooking.common.js @@ -14,5 +14,9 @@ cooking.set({ cooking.add('output.filename', 'element-ui.common.js'); cooking.add('loader.js.exclude', config.jsexclude); +cooking.add('loader.scss', { + test: /\.scss$/, + loaders: ['style-loader', 'css-loader', 'sass-loader'] +}); cooking.add('vue.preserveWhitespace', false); module.exports = cooking.resolve(); diff --git a/build/cooking.component.js b/build/cooking.component.js index 799e831819..5d8ac42ff4 100644 --- a/build/cooking.component.js +++ b/build/cooking.component.js @@ -15,5 +15,9 @@ cooking.set({ cooking.add('output.filename', '[name].js'); cooking.add('loader.js.exclude', config.jsexclude); +cooking.add('loader.scss', { + test: /\.scss$/, + loaders: ['style-loader', 'css-loader', 'sass-loader'] +}); cooking.add('vue.preserveWhitespace', false); module.exports = cooking.resolve(); diff --git a/build/cooking.conf.js b/build/cooking.conf.js index c369d9cd50..0f3707f3db 100644 --- a/build/cooking.conf.js +++ b/build/cooking.conf.js @@ -14,5 +14,9 @@ cooking.set({ cooking.add('output.filename', 'index.js'); cooking.add('loader.js.exclude', config.jsexclude); +cooking.add('loader.scss', { + test: /\.scss$/, + loaders: ['style-loader', 'css-loader', 'sass-loader'] +}); cooking.add('vue.preserveWhitespace', false); module.exports = cooking.resolve(); diff --git a/build/cooking.demo.js b/build/cooking.demo.js index d7dc58540e..ea92344486 100644 --- a/build/cooking.demo.js +++ b/build/cooking.demo.js @@ -55,6 +55,11 @@ cooking.add('loader.md', { loader: 'vue-markdown-loader' }); +cooking.add('loader.scss', { + test: /\.scss$/, + loaders: ['style-loader', 'css-loader', 'sass-loader'] +}); + cooking.add( 'output.chunkFilename', isProd ? '[name].[chunkhash:7].js' : '[name].js' diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md index b6e36794f6..7460df8dd4 100644 --- a/examples/docs/en-US/button.md +++ b/examples/docs/en-US/button.md @@ -1,27 +1,3 @@ - ## Button @@ -77,55 +29,76 @@ Commonly used button. ::: demo Button provides 7 themes defined by the `type` attribute. ```html -Default Button -Primary Button -Text Button +
+ Default + Primary + Success + Info + Warning + Danger +
+ +
+ Plain + Primary + Success + Info + Warning + Danger +
+ +
+ Round + Primary + Success + Info + Warning + Danger +
``` ::: ### Disabled Button -The `disableds` attribute determines if the button is disabled. +The `disabled` attribute determines if the button is disabled. :::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value. ```html -Default Button -Primary Button -Text Button +
+ Default + Primary + Success + Info + Warning + Danger +
+ +
+ Plain + Primary + Success + Info + Warning + Danger +
``` ::: -### Color Indication +### Text Button -Different colors represent different meanings. +Buttons without border and background. -:::demo Use `plain` attribute to create a plain button, and it accepts a `Boolean` value. You can assign different `type` to a plain button as mentioned above. **Note**: When using the plain button, you still can set `type` to `text`, but it makes no difference. A plain button will be styled like a `text button` by default. +:::demo ```html -
- Default - - Success - Warning - Danger - Info - -
-
- Hover to display color - - Success - Warning - Danger - Info - -
+Text Button +Text Button ``` ::: ### Icon Button -Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together. +Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text. :::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `` tag. Custom icons can be used as well. @@ -172,24 +145,33 @@ Click the button to load data, then the button displays a loading state. Besides default size, Button component provides three additional sizes for you to choose among different scenarios. -:::demo Use attribute `size` to set additional sizes with `large`, `small` or `mini`. +:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ```html -Large Button -Default Button -Small Button -Mini Button +
+ Default + Medium + Small + Mini +
+
+ Default + Medium + Small + Mini +
``` ::: ### Attributes | Attribute | Description | Type | Accepted values | Default | |---------- |-------- |---------- |------------- |-------- | -| size | button size | string | large/small/mini | — | -| type | button type | string | primary/success/warning/danger/info/text | — | -| plain | determine whether it's a plain button | Boolean | — | false | -| loading | determine whether it's loading | Boolean | — | false | +| size | button size | string | large / small / mini | — | +| type | button type | string | primary / success / warning / danger / info / text | — | +| plain | determine whether it's a plain button | boolean | — | false | +| round | determine whether it's a round button | boolean | — | false | +| loading | determine whether it's loading | boolean | — | false | | disabled | disable the button | boolean | — | false | | icon | button icon, accepts an icon name of Element icon component | string | — | — | | autofocus | same as native button's `autofocus` | boolean | — | false | -| native-type | same as native button's `type` | string | button/submit/reset | button | \ No newline at end of file +| native-type | same as native button's `type` | string | button / submit / reset | button | \ No newline at end of file diff --git a/examples/docs/zh-CN/button.md b/examples/docs/zh-CN/button.md index 583fdfcb76..d998fc1a3e 100644 --- a/examples/docs/zh-CN/button.md +++ b/examples/docs/zh-CN/button.md @@ -1,27 +1,3 @@ - ## Button 按钮 @@ -75,12 +27,35 @@ 基础的按钮用法。 -:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。 +:::demo Button 组件默认提供7种主题，由`type`属性来定义。 ```html -默认按钮 -主要按钮 -文字按钮 +
+ 默认按钮 + 主要按钮 + 成功按钮 + 信息按钮 + 警告按钮 + 危险按钮 +
+ +
+ 朴素按钮 + 主要按钮 + 成功按钮 + 信息按钮 + 警告按钮 + 危险按钮 +
+ +
+ 圆形按钮 + 主要按钮 + 成功按钮 + 信息按钮 + 警告按钮 + 危险按钮 +
``` ::: @@ -91,43 +66,40 @@ :::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。 ```html -主要按钮 -主要按钮 -文字按钮 +
+ 默认按钮 + 主要按钮 + 成功按钮 + 信息按钮 + 警告按钮 + 危险按钮 +
+ +
+ 朴素按钮 + 主要按钮 + 成功按钮 + 信息按钮 + 警告按钮 + 危险按钮 +
``` ::: -### 有颜色倾向 +### 文字按钮 -不同的颜色倾向代表不同的提示 - -:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。 +没有边框和背景色的按钮。 +:::demo ```html -
- 默认显示颜色 - - 成功按钮 - 警告按钮 - 危险按钮 - 信息按钮 - -
-
- hover 显示颜色 - - 成功按钮 - 警告按钮 - 危险按钮 - 信息按钮 - -
+文字按钮 +文字按钮 ``` ::: ### 图标按钮 -带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。 +带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。 :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。 @@ -174,24 +146,33 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 -:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。 +:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。 ```html -大型按钮 -正常按钮 -小型按钮 -超小按钮 +
+ 默认按钮 + 中等按钮 + 小型按钮 + 超小按钮 +
+
+ 默认按钮 + 中等按钮 + 小型按钮 + 超小按钮 +
``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | -| size | 尺寸 | string | large,small,mini | — | -| type | 类型 | string | primary,success,warning,danger,info,text | — | -| plain | 是否朴素按钮 | Boolean | — | false | -| loading | 是否加载中状态 | Boolean | — | false | +| size | 尺寸 | string | medium / small / mini | — | +| type | 类型 | string | primary / success / warning / danger / info / text | — | +| plain | 是否朴素按钮 | boolean | — | false | +| round | 是否圆形按钮 | boolean | — | false | +| loading | 是否加载中状态 | boolean | — | false | | disabled | 是否禁用状态 | boolean | — | false | | icon | 图标，已有的图标库中的图标名 | string | — | — | | autofocus | 是否默认聚焦 | boolean | — | false | -| native-type | 原生 type 属性 | string | button,submit,reset | button | +| native-type | 原生 type 属性 | string | button / submit / reset | button | diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md index 7afb1b13c6..fb9f2b384e 100644 --- a/examples/docs/zh-CN/dialog.md +++ b/examples/docs/zh-CN/dialog.md @@ -140,7 +140,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 打开嵌套表单的 Dialog - + diff --git a/examples/entry.js b/examples/entry.js index 8d39375070..ee9b2baac6 100644 --- a/examples/entry.js +++ b/examples/entry.js @@ -3,7 +3,7 @@ import entry from './app'; import VueRouter from 'vue-router'; import routes from './route.config'; import Element from 'main/index.js'; -import 'packages/theme-default/src/index.css'; +import 'packages/theme-chalk/src/index.scss'; import demoBlock from './components/demo-block.vue'; import MainFooter from './components/footer.vue'; import MainHeader from './components/header.vue'; diff --git a/package.json b/package.json index 38aa59a4e4..65dc434ff0 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "scripts": { "bootstrap": "yarn || npm i", "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js", - "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default", + "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk", "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js", "build:umd": "node build/bin/build-locale.js", "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes", @@ -43,7 +43,7 @@ "url": "https://github.com/ElemeFE/element/issues" }, "unpkg": "lib/index.js", - "style": "lib/theme-default/index.css", + "style": "lib/theme-chalk/index.css", "dependencies": { "async-validator": "1.6.9", "babel-helper-vue-jsx-merge-props": "^2.0.0", @@ -79,8 +79,10 @@ "file-save": "^0.2.0", "gh-pages": "^0.11.0", "gulp": "^3.9.1", + "gulp-autoprefixer": "^4.0.0", "gulp-cssmin": "^0.1.7", "gulp-postcss": "^6.1.1", + "gulp-sass": "^3.1.0", "highlight.js": "^9.3.0", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.22.0", @@ -102,11 +104,13 @@ "markdown-it-anchor": "^2.5.0", "markdown-it-container": "^2.0.0", "mocha": "^3.1.1", + "node-sass": "^4.5.3", "phantomjs-prebuilt": "^2.1.13", "postcss": "^5.1.2", "postcss-loader": "^0.11.1", "postcss-salad": "^1.0.8", "rimraf": "^2.5.4", + "sass-loader": "^6.0.6", "sinon": "^1.17.6", "sinon-chai": "^2.8.0", "style-loader": "^0.13.1", diff --git a/packages/breadcrumb/src/breadcrumb-item.vue b/packages/breadcrumb/src/breadcrumb-item.vue index ea69065388..3a3690e0a1 100644 --- a/packages/breadcrumb/src/breadcrumb-item.vue +++ b/packages/breadcrumb/src/breadcrumb-item.vue @@ -1,6 +1,6 @@