Skip to content

E
Element
Commit 79016032 authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

scaffolding chalk (#6643) 

* scaffolding chalk

* update button
parent bf666126
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 9279 additions and 433 deletions
build/bin/gen-cssfile.js
View file @ 79016032
...@@ -2,7 +2,8 @@ var fs = require('fs'); ...@@ -2,7 +2,8 @@ var fs = require('fs');
var path = require('path'); var path = require('path');
var Components = require('../../components.json'); var Components = require('../../components.json');
var themes = [ var themes = [
'theme-default' 'theme-default',
'theme-chalk'
]; ];
Components = Object.keys(Components); Components = Object.keys(Components);
var basepath = path.resolve(__dirname, '../../packages/'); var basepath = path.resolve(__dirname, '../../packages/');
...@@ -16,10 +17,11 @@ function fileExists(filePath) { ...@@ -16,10 +17,11 @@ function fileExists(filePath) {
} }
themes.forEach((theme) => { 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) { Components.forEach(function(key) {
if (['icon', 'option', 'option-group'].indexOf(key) > -1) return; if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;
var fileName = key + '.css'; var fileName = key + (isSCSS ? '.scss' : '.css');
indexContent += '@import "./' + fileName + '";\n'; indexContent += '@import "./' + fileName + '";\n';
var filePath = path.resolve(basepath, theme, 'src', fileName); var filePath = path.resolve(basepath, theme, 'src', fileName);
if (!fileExists(filePath)) { if (!fileExists(filePath)) {
...@@ -27,5 +29,5 @@ themes.forEach((theme) => { ...@@ -27,5 +29,5 @@ themes.forEach((theme) => {
console.log(theme, ' 创建遗漏的 ', fileName, ' 文件'); 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);
}); });
build/cooking.common.js
View file @ 79016032
...@@ -14,5 +14,9 @@ cooking.set({ ...@@ -14,5 +14,9 @@ cooking.set({
cooking.add('output.filename', 'element-ui.common.js'); cooking.add('output.filename', 'element-ui.common.js');
cooking.add('loader.js.exclude', config.jsexclude); 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); cooking.add('vue.preserveWhitespace', false);
module.exports = cooking.resolve(); module.exports = cooking.resolve();
build/cooking.component.js
View file @ 79016032
...@@ -15,5 +15,9 @@ cooking.set({ ...@@ -15,5 +15,9 @@ cooking.set({
cooking.add('output.filename', '[name].js'); cooking.add('output.filename', '[name].js');
cooking.add('loader.js.exclude', config.jsexclude); 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); cooking.add('vue.preserveWhitespace', false);
module.exports = cooking.resolve(); module.exports = cooking.resolve();
build/cooking.conf.js
View file @ 79016032
...@@ -14,5 +14,9 @@ cooking.set({ ...@@ -14,5 +14,9 @@ cooking.set({
cooking.add('output.filename', 'index.js'); cooking.add('output.filename', 'index.js');
cooking.add('loader.js.exclude', config.jsexclude); 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); cooking.add('vue.preserveWhitespace', false);
module.exports = cooking.resolve(); module.exports = cooking.resolve();
build/cooking.demo.js
View file @ 79016032
...@@ -55,6 +55,11 @@ cooking.add('loader.md', { ...@@ -55,6 +55,11 @@ cooking.add('loader.md', {
loader: 'vue-markdown-loader' loader: 'vue-markdown-loader'
}); });
cooking.add('loader.scss', {
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
});
cooking.add( cooking.add(
'output.chunkFilename', 'output.chunkFilename',
isProd ? '[name].[chunkhash:7].js' : '[name].js' isProd ? '[name].[chunkhash:7].js' : '[name].js'
......
examples/docs/en-US/button.md
View file @ 79016032
<script>
import { addClass } from 'element-ui/src/utils/dom';
export default {
data() {
return {
isLoading: false,
isLoading2: false
};
},
methods: {
handleClick(event) {
console.log(event);
alert('button clicked!');
}
},
mounted() {
this.$nextTick(() => {
let demos = document.querySelectorAll('.source');
let thirdDemo = demos[2];
addClass(thirdDemo, 'intro-block');
});
}
}
</script>
<style> <style>
.demo-box.demo-button { .demo-box.demo-button {
.el-row { .el-row {
...@@ -42,30 +18,6 @@ ...@@ -42,30 +18,6 @@
} }
} }
} }
.demo-box.demo-button .intro-block {
padding: 0;
}
.demo-button .intro-block .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-button .intro-block .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-button .intro-block .wrapper {
float: right;
margin-right: 20px;
}
</style> </style>
## Button ## Button
...@@ -77,55 +29,76 @@ Commonly used button. ...@@ -77,55 +29,76 @@ Commonly used button.
::: demo Button provides 7 themes defined by the `type` attribute. ::: demo Button provides 7 themes defined by the `type` attribute.
```html ```html
<el-button>Default Button</el-button> <div>
<el-button type="primary">Primary Button</el-button> <el-button>Default</el-button>
<el-button type="text">Text Button</el-button> <el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
<div style="margin: 20px 0">
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</div>
<div>
<el-button round>Round</el-button>
<el-button type="primary" round>Primary</el-button>
<el-button type="success" round>Success</el-button>
<el-button type="info" round>Info</el-button>
<el-button type="warning" round>Warning</el-button>
<el-button type="danger" round>Danger</el-button>
</div>
``` ```
::: :::
### Disabled Button ### 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. :::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
```html ```html
<el-button :plain="true" :disabled="true">Default Button</el-button> <div>
<el-button type="primary" disabled>Primary Button</el-button> <el-button disabled>Default</el-button>
<el-button type="text" disabled>Text Button</el-button> <el-button type="primary" disabled>Primary</el-button>
<el-button type="success" disabled>Success</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Warning</el-button>
<el-button type="danger" disabled>Danger</el-button>
</div>
<div style="margin-top: 20px">
<el-button plain disabled>Plain</el-button>
<el-button type="primary" plain disabled>Primary</el-button>
<el-button type="success" plain disabled>Success</el-button>
<el-button type="info" plain disabled>Info</el-button>
<el-button type="warning" plain disabled>Warning</el-button>
<el-button type="danger" plain disabled>Danger</el-button>
</div>
``` ```
::: :::
### 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 ```html
<div class="block"> <el-button type="text">Text Button</el-button>
<span class="demonstration">Default</span> <el-button type="text" disabled>Text Button</el-button>
<span class="wrapper">
<el-button type="success">Success</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button type="info">Info</el-button>
</span>
</div>
<div class="block">
<span class="demonstration">Hover to display color</span>
<span class="wrapper">
<el-button :plain="true" type="success">Success</el-button>
<el-button :plain="true" type="warning">Warning</el-button>
<el-button :plain="true" type="danger">Danger</el-button>
<el-button :plain="true" type="info">Info</el-button>
</span>
</div>
``` ```
::: :::
### Icon 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 `<i>` tag. Custom icons can be used as well. :::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 `<i>` 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. ...@@ -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. 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 ```html
<el-button type="primary" size="large">Large Button</el-button> <div>
<el-button type="primary">Default Button</el-button> <el-button>Default</el-button>
<el-button type="primary" size="small">Small Button</el-button> <el-button size="medium">Medium</el-button>
<el-button type="primary" size="mini">Mini Button</el-button> <el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
</div>
<div style="margin-top: 20px">
<el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
</div>
``` ```
::: :::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted values | Default | | Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | button size | string | large/small/mini | — | | size | button size | string | large / small / mini | — |
| type | button type | string | primary/success/warning/danger/info/text | — | | type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | Boolean | — | false | | plain | determine whether it's a plain button | boolean | — | false |
| loading | determine whether it's loading | 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 | | disabled | disable the button | boolean | — | false |
| icon | button icon, accepts an icon name of Element icon component | string | — | — | | icon | button icon, accepts an icon name of Element icon component | string | — | — |
| autofocus | same as native button's `autofocus` | boolean | — | false | | autofocus | same as native button's `autofocus` | boolean | — | false |
| native-type | same as native button's `type` | string | button/submit/reset | button | | native-type | same as native button's `type` | string | button / submit / reset | button |
\ No newline at end of file \ No newline at end of file
examples/docs/zh-CN/button.md
View file @ 79016032
<script>
import { addClass } from 'element-ui/src/utils/dom';
export default {
data() {
return {
isLoading: false,
isLoading2: false
};
},
methods: {
handleClick(event) {
console.log(event);
alert('button clicked!');
}
},
mounted() {
this.$nextTick(() => {
let demos = document.querySelectorAll('.source');
let thirdDemo = demos[2];
addClass(thirdDemo, 'intro-block');
});
}
}
</script>
<style> <style>
.demo-box.demo-button { .demo-box.demo-button {
.el-row { .el-row {
...@@ -42,30 +18,6 @@ ...@@ -42,30 +18,6 @@
} }
} }
} }
.demo-box.demo-button .intro-block {
padding: 0;
}
.demo-button .intro-block .block {
padding: 30px 24px;
overflow: hidden;
border-bottom: solid 1px #EFF2F6;
&:last-child {
border-bottom: none;
}
}
.demo-button .intro-block .demonstration {
font-size: 14px;
color: #8492a6;
line-height: 44px;
}
.demo-button .intro-block .wrapper {
float: right;
margin-right: 20px;
}
</style> </style>
## Button 按钮 ## Button 按钮
...@@ -75,12 +27,35 @@ ...@@ -75,12 +27,35 @@
基础的按钮用法。 基础的按钮用法。
:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。 :::demo Button 组件默认提供7种主题，由`type`属性来定义。
```html ```html
<el-button>默认按钮</el-button> <div>
<el-button type="primary">主要按钮</el-button> <el-button>默认按钮</el-button>
<el-button type="text">文字按钮</el-button> <el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>
<div style="margin: 20px 0">
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</div>
<div>
<el-button round>圆形按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</div>
``` ```
::: :::
...@@ -91,43 +66,40 @@ ...@@ -91,43 +66,40 @@
:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。 :::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
```html ```html
<el-button :plain="true" :disabled="true">主要按钮</el-button> <div>
<el-button type="primary" :disabled="true">主要按钮</el-button> <el-button disabled>默认按钮</el-button>
<el-button type="text" :disabled="true">文字按钮</el-button> <el-button type="primary" disabled>主要按钮</el-button>
<el-button type="success" disabled>成功按钮</el-button>
<el-button type="info" disabled>信息按钮</el-button>
<el-button type="warning" disabled>警告按钮</el-button>
<el-button type="danger" disabled>危险按钮</el-button>
</div>
<div style="margin-top: 20px">
<el-button plain disabled>朴素按钮</el-button>
<el-button type="primary" plain disabled>主要按钮</el-button>
<el-button type="success" plain disabled>成功按钮</el-button>
<el-button type="info" plain disabled>信息按钮</el-button>
<el-button type="warning" plain disabled>警告按钮</el-button>
<el-button type="danger" plain disabled>危险按钮</el-button>
</div>
``` ```
::: :::
### 有颜色倾向 ### 文字按钮
不同的颜色倾向代表不同的提示 没有边框和背景色的按钮。
:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
:::demo
```html ```html
<div class="block"> <el-button type="text">文字按钮</el-button>
<span class="demonstration">默认显示颜色</span> <el-button type="text" disabled>文字按钮</el-button>
<span class="wrapper">
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
</span>
</div>
<div class="block">
<span class="demonstration">hover 显示颜色</span>
<span class="wrapper">
<el-button :plain="true" type="success">成功按钮</el-button>
<el-button :plain="true" type="warning">警告按钮</el-button>
<el-button :plain="true" type="danger">危险按钮</el-button>
<el-button :plain="true" type="info">信息按钮</el-button>
</span>
</div>
``` ```
::: :::
### 图标按钮 ### 图标按钮
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。 带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。 :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
...@@ -174,24 +146,33 @@ ...@@ -174,24 +146,33 @@
Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。 :::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
```html ```html
<el-button type="primary" size="large">大型按钮</el-button> <div>
<el-button type="primary">正常按钮</el-button> <el-button>默认按钮</el-button>
<el-button type="primary" size="small">小型按钮</el-button> <el-button size="medium">中等按钮</el-button>
<el-button type="primary" size="mini">超小按钮</el-button> <el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
</div>
<div style="margin-top: 20px">
<el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button>
</div>
``` ```
::: :::
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | large,small,mini | — | | size | 尺寸 | string | medium / small / mini | — |
| type | 类型 | string | primary,success,warning,danger,info,text | — | | type | 类型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否朴素按钮 | Boolean | — | false | | plain | 是否朴素按钮 | boolean | — | false |
| loading | 是否加载中状态 | Boolean | — | false | | round | 是否圆形按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false | | disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标，已有的图标库中的图标名 | string | — | — | | icon | 图标，已有的图标库中的图标名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false | | autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button,submit,reset | button | | native-type | 原生 type 属性 | string | button / submit / reset | button |
examples/docs/zh-CN/dialog.md
View file @ 79016032
...@@ -140,7 +140,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 ...@@ -140,7 +140,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
<!-- Form --> <!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" fullscreen> <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form"> <el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth"> <el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input> <el-input v-model="form.name" auto-complete="off"></el-input>
......
examples/entry.js
View file @ 79016032
...@@ -3,7 +3,7 @@ import entry from './app'; ...@@ -3,7 +3,7 @@ import entry from './app';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import routes from './route.config'; import routes from './route.config';
import Element from 'main/index.js'; 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 demoBlock from './components/demo-block.vue';
import MainFooter from './components/footer.vue'; import MainFooter from './components/footer.vue';
import MainHeader from './components/header.vue'; import MainHeader from './components/header.vue';
......
package.json
View file @ 79016032
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"scripts": { "scripts": {
"bootstrap": "yarn || npm i", "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: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:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:umd": "node build/bin/build-locale.js", "build:umd": "node build/bin/build-locale.js",
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes", "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage && lerna clean --yes",
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
"url": "https://github.com/ElemeFE/element/issues" "url": "https://github.com/ElemeFE/element/issues"
}, },
"unpkg": "lib/index.js", "unpkg": "lib/index.js",
"style": "lib/theme-default/index.css", "style": "lib/theme-chalk/index.css",
"dependencies": { "dependencies": {
"async-validator": "1.6.9", "async-validator": "1.6.9",
"babel-helper-vue-jsx-merge-props": "^2.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.0",
...@@ -79,8 +79,10 @@ ...@@ -79,8 +79,10 @@
"file-save": "^0.2.0", "file-save": "^0.2.0",
"gh-pages": "^0.11.0", "gh-pages": "^0.11.0",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cssmin": "^0.1.7", "gulp-cssmin": "^0.1.7",
"gulp-postcss": "^6.1.1", "gulp-postcss": "^6.1.1",
"gulp-sass": "^3.1.0",
"highlight.js": "^9.3.0", "highlight.js": "^9.3.0",
"html-loader": "^0.4.3", "html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0", "html-webpack-plugin": "^2.22.0",
...@@ -102,11 +104,13 @@ ...@@ -102,11 +104,13 @@
"markdown-it-anchor": "^2.5.0", "markdown-it-anchor": "^2.5.0",
"markdown-it-container": "^2.0.0", "markdown-it-container": "^2.0.0",
"mocha": "^3.1.1", "mocha": "^3.1.1",
"node-sass": "^4.5.3",
"phantomjs-prebuilt": "^2.1.13", "phantomjs-prebuilt": "^2.1.13",
"postcss": "^5.1.2", "postcss": "^5.1.2",
"postcss-loader": "^0.11.1", "postcss-loader": "^0.11.1",
"postcss-salad": "^1.0.8", "postcss-salad": "^1.0.8",
"rimraf": "^2.5.4", "rimraf": "^2.5.4",
"sass-loader": "^6.0.6",
"sinon": "^1.17.6", "sinon": "^1.17.6",
"sinon-chai": "^2.8.0", "sinon-chai": "^2.8.0",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
......
packages/breadcrumb/src/breadcrumb-item.vue
View file @ 79016032
<template> <template>
<span class="el-breadcrumb__item"> <span class="el-breadcrumb__item">
<span class="el-breadcrumb__item__inner" ref="link" role="link"><slot></slot></span><span class="el-breadcrumb__separator" role="presentation">{{separator}}</span> <span class="el-breadcrumb__inner" ref="link" role="link"><slot></slot></span><span class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
</span> </span>
</template> </template>
<script> <script>
......
packages/button/src/button-group.vue
View file @ 79016032
...@@ -4,12 +4,6 @@ ...@@ -4,12 +4,6 @@
</div> </div>
</template> </template>
<script> <script>
/**
* button
* @module components/basic/menu
* @desc 用于按钮组
* @param {string} label - 名称
*/
export default { export default {
name: 'ElButtonGroup' name: 'ElButtonGroup'
}; };
......
packages/button/src/button.vue
View file @ 79016032
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
{ {
'is-disabled': disabled, 'is-disabled': disabled,
'is-loading': loading, 'is-loading': loading,
'is-plain': plain 'is-plain': plain,
'is-round': round
} }
]" ]"
> >
...@@ -40,7 +41,8 @@ ...@@ -40,7 +41,8 @@
loading: Boolean, loading: Boolean,
disabled: Boolean, disabled: Boolean,
plain: Boolean, plain: Boolean,
autofocus: Boolean autofocus: Boolean,
round: Boolean
}, },
methods: { methods: {
......
packages/collapse/src/collapse-item.vue
View file @ 79016032
<template> <template>
<div class="el-collapse-item" :class="{'is-active': isActive}"> <div class="el-collapse-item" :class="{'is-active': isActive}">
<div class="el-collapse-item__header" @click="handleHeaderClick"> <div class="el-collapse-item__header" @click="handleHeaderClick">
<i class="el-collapse-item__header__arrow el-icon-arrow-right"></i> <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
<slot name="title">{{title}}</slot> <slot name="title">{{title}}</slot>
</div> </div>
<el-collapse-transition> <el-collapse-transition>
......
packages/theme-chalk/.gitignore 0 → 100644
View file @ 79016032
node_modules
lib
npm-debug*
packages/theme-chalk/README.md 0 → 100644
View file @ 79016032
# element-theme-chalk
> element component chalk theme.
## Installation
```shell
npm i element-theme-chalk -S
```
## Usage
Use Sass import
```css
@import 'element-theme-chalk';
```
Or Use webpack
```javascript
import 'element-theme-chalk';
```
Or
```html
<link rel="stylesheet" href="path/to/node_modules/element-theme-chalk/lib/index.css">
```
## Import on demand
```javascript
import 'element-theme-chalk/lib/input.css';
import 'element-theme-chalk/lib/select.css';
// ...
```
packages/theme-chalk/gulpfile.js 0 → 100644
View file @ 79016032
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
gulp.task('compile', function() {
return gulp.src('./src/*.scss')
.pipe(sass.sync())
.pipe(autoprefixer({
browsers: ['ie > 9', 'last 2 versions'],
cascade: false
}))
.pipe(cssmin())
.pipe(gulp.dest('./lib'));
});
gulp.task('copyfont', function() {
return gulp.src('./src/fonts/**')
.pipe(cssmin())
.pipe(gulp.dest('./lib/fonts'));
});
gulp.task('build', ['compile', 'copyfont']);
packages/theme-chalk/package.json 0 → 100644
View file @ 79016032
{
"name": "element-theme-chalk",
"version": "1.4.2",
"description": "Element component chalk theme.",
"main": "lib/index.css",
"style": "lib/index.css",
"files": [
"lib",
"src"
],
"scripts": {
"build": "gulp build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ElementUI/theme-chalk.git"
},
"keywords": [
"element",
"theme"
],
"author": "yi.shyang@ele.me",
"license": "MIT",
"bugs": {
"url": "https://github.com/ElementUI/theme-chalk/issues"
},
"homepage": "https://github.com/ElementUI/theme-chalk#readme",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-cssmin": "^0.1.7",
"gulp-sass": "^3.1.0"
},
"dependencies": {}
}
packages/theme-chalk/src/alert.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(alert) {
width: 100%;
padding: $--alert-padding;
margin: 0;
box-sizing: border-box;
border-radius: $--alert-border-radius;
position: relative;
background-color: $--color-white;
overflow: hidden;
color: $--color-white;
opacity: 1;
display: table;
transition: opacity .2s;
@include m(success) {
background-color: $--alert-success-color;
}
@include m(info) {
background-color: $--alert-info-color;
}
@include m(warning) {
background-color: $--alert-warning-color;
}
@include m(error) {
background-color: $--alert-danger-color;
}
@include e(content) {
display: table-cell;
padding: 0 8px;
}
@include e(icon) {
font-size: $--alert-icon-size;
width: $--alert-icon-size;
display: table-cell;
color: $--color-white;
vertical-align: middle;
@include when(big) {
font-size: $--alert-icon-large-size;
width: $--alert-icon-large-size;
}
}
@include e(title) {
font-size: $--alert-title-font-size;
line-height: 18px;
@include when(bold) {
font-weight: bold;
}
}
& .el-alert__description {
color: $--color-white;
font-size: $--alert-description-font-size;
margin: 5px 0 0 0;
}
@include e(closebtn) {
font-size: $--alert-close-font-size;
color: $--color-white;
opacity: 1;
position: absolute;
top: 12px;
right: 15px;
cursor: pointer;
@include when(customed) {
font-style: normal;
font-size: $--alert-close-customed-font-size;
top: 9px;
}
}
}
.el-alert-fade-enter,
.el-alert-fade-leave-active {
opacity: 0;
}
packages/theme-chalk/src/autocomplete.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@import "./input.scss";
@import "./scrollbar.scss";
@include b(autocomplete) {
position: relative;
display: inline-block;
}
@include b(autocomplete-suggestion) {
margin: 5px 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
@include e(wrap) {
max-height: 280px;
overflow: auto;
background-color: $--color-white;
border: 1px solid $--color-black;
padding: 6px 0;
border-radius: 2px;
box-sizing: border-box;
}
@include e(list) {
margin: 0;
padding: 0;
}
& li {
list-style: none;
line-height: 36px;
padding: 0 10px;
margin: 0;
cursor: pointer;
color: $--color-black;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: $--select-option-hover-background;
}
&.highlighted {
background-color: $--color-primary;
color: $--color-white;
}
&:active {
background-color: darken($--color-primary, 0.2);
}
&.divider {
margin-top: 6px;
border-top: 1px solid $--color-black;
}
&.divider:last-child {
margin-bottom: -6px;
}
}
@include when(loading) {
li {
text-align: center;
height: 100px;
line-height: 100px;
font-size: 20px;
color: #999;
@include utils-vertical-center;
&:hover {
background-color: $--color-white;
}
}
& .el-icon-loading {
vertical-align: middle;
}
}
}
packages/theme-chalk/src/badge.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(badge) {
position: relative;
vertical-align: middle;
display: inline-block;
@include e(content) {
background-color: $--badge-fill;
border-radius: $--badge-radius;
color: $--color-white;
display: inline-block;
font-size: $--badge-font-size;
height: $--badge-size;
line-height: $--badge-size;
padding: 0 $--badge-padding;
text-align: center;
white-space: nowrap;
border: 1px solid $--color-white;
@include when(fixed) {
position: absolute;
top: 0;
right: #{1 + $--badge-size / 2};
transform: translateY(-50%) translateX(100%);
@include when(dot) {
right: 5px;
}
}
@include when(dot) {
height: 8px;
width: 8px;
padding: 0;
right: 0;
border-radius: 50%;
}
}
}
packages/theme-chalk/src/base.scss 0 → 100644
View file @ 79016032
@import "common/transition.scss";
@import "icon.scss";
packages/theme-chalk/src/breadcrumb.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@include b(breadcrumb) {
font-size: 13px;
line-height: 1;
@include utils-clearfix;
@include e(separator) {
margin: 0 8px;
color: $--color-black;
}
@include e(item) {
float: left;
@include e(inner) {
&, & a {
transition: color .15s linear;
color: $--color-black;
&:hover {
color: $--color-primary;
cursor: pointer;
}
}
}
&:last-child {
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
&, &:hover {
color: $--color-black;
cursor: text;
}
}
.el-breadcrumb__separator {
display: none;
}
}
}
}
packages/theme-chalk/src/button.scss 0 → 100644
View file @ 79016032
@charset "UTF-8";
@import "common/var";
@import "mixins/button";
@import "mixins/mixins";
@import "mixins/utils";
@include b(button) {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: $--button-default-fill;
border: $--border-base;
border-color: $--button-default-border;
color: $--button-default-color;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: $--button-font-weight;
@include utils-user-select(none);
& + .el-button {
margin-left: 10px;
}
@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
&:hover,
&:focus {
color: $--color-primary;
border-color: $--color-primary-light-7;
background-color: $--color-primary-light-9;
}
&:active {
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
outline: none;
}
&::-moz-focus-inner {
border: 0;
}
& [class*="el-icon-"] {
& + span {
margin-left: 5px;
}
}
@include when(plain) {
&:hover,
&:focus {
background: $--color-white;
border-color: $--color-primary;
color: $--color-primary;
}
&:active {
background: $--color-white;
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
outline: none;
}
}
@include when(active) {
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
}
@include when(disabled) {
&,
&:hover,
&:focus {
color: $--button-disabled-color;
cursor: not-allowed;
background-image: none;
background-color: $--button-disabled-fill;
border-color: $--button-disabled-border;
}
&.el-button--text {
background-color: transparent;
}
&.is-plain {
&,
&:hover,
&:focus {
background-color: $--color-white;
border-color: $--button-disabled-border;
color: $--button-disabled-color;
}
}
}
@include when(loading) {
position: relative;
pointer-events: none;
&:before {
pointer-events: none;
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255,255,255,.35);
}
}
@include m(primary) {
@include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
}
@include m(success) {
@include button-variant($--button-success-color, $--button-success-fill, $--button-success-border);
}
@include m(warning) {
@include button-variant($--button-warning-color, $--button-warning-fill, $--button-warning-border);
}
@include m(danger) {
@include button-variant($--button-danger-color, $--button-danger-fill, $--button-danger-border);
}
@include m(info) {
@include button-variant($--button-info-color, $--button-info-fill, $--button-info-border);
}
@include m(medium) {
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
}
@include m(small) {
@include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
}
@include m(mini) {
@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
}
@include m(text) {
border: none;
color: $--color-primary;
background: transparent;
padding-left: 0;
padding-right: 0;
&:hover,
&:focus {
color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
border-color: transparent;
background-color: transparent;
}
&:active {
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
border-color: transparent;
background-color: transparent;
}
}
@include when(round) {
border-radius: 20px;
}
}
@include b(button-group) {
@include utils-clearfix;
display: inline-block;
vertical-align: middle;
& .el-button {
float: left;
position: relative;
& + .el-button {
margin-left: 0;
}
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:not(:last-child) {
margin-right: -1px;
}
&:hover,
&:focus,
&:active {
z-index: 1;
}
@include when(active) {
z-index: 1;
}
}
@each $type in (primary, success, warning, danger, info) {
.el-button--#{$type} {
&:first-child {
border-right-color: rgba($--color-white, 0.5);
}
&:last-child {
border-left-color: rgba($--color-white, 0.5);
}
&:not(:first-child):not(:last-child) {
border-left-color: rgba($--color-white, 0.5);
border-right-color: rgba($--color-white, 0.5);
}
}
}
}
packages/theme-chalk/src/card.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(card) {
border: 1px solid $--card-border-color;
border-radius: $--card-border-radius;
background-color: $--color-white;
overflow: hidden;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12),
0 0 6px 0 rgba(0, 0, 0, .04);
@include e(header) {
padding: #{$--card-padding - 2 $--card-padding};
border-bottom: 1px solid $--card-border-color;
box-sizing: border-box;
}
@include e(body) {
padding: $--card-padding;
}
}
packages/theme-chalk/src/carousel-item.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(carousel) {
@include e(item) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
z-index: #{$--index-normal - 1};
@include when(active) {
z-index: #{$--index-normal + 1};
}
@include when(animating) {
transition: transform .4s ease-in-out;
}
@include m(card) {
width: 50%;
transition: transform .4s ease-in-out;
&.is-in-stage {
cursor: pointer;
z-index: $--index-normal;
&:hover .el-carousel__mask,
&.is-hover .el-carousel__mask {
opacity: 0.12;
}
}
&.is-active {
z-index: #{$--index-normal + 1};
}
}
}
@include e(mask) {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: $--color-white;
opacity: 0.24;
transition: .2s;
}
}
\ No newline at end of file
packages/theme-chalk/src/carousel.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(carousel) {
overflow-x: hidden;
position: relative;
@include e(container) {
position: relative;
height: 300px;
}
@include e(arrow) {
border: none;
outline: none;
padding: 0;
margin: 0;
height: $--carousel-arrow-size;
width: $--carousel-arrow-size;
cursor: pointer;
transition: .3s;
border-radius: 50%;
background-color: $--carousel-arrow-background;
color: $--color-white;
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
text-align: center;
font-size: $--carousel-arrow-font-size;
@include m(left) {
left: 16px;
}
@include m(right) {
right: 16px;
}
&:hover {
background-color: $--carousel-arrow-hover-background;
}
& i {
cursor: pointer;
}
}
@include e(indicators) {
position: absolute;
list-style: none;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 0;
z-index: #{$--index-normal + 1};
@include m(outside) {
bottom: #{$--carousel-indicator-height + $--carousel-indicator-padding-vertical * 2};
text-align: center;
position: static;
transform: none;
.el-carousel__indicator:hover button {
opacity: 0.64;
}
button {
background-color: $--carousel-indicator-out-color;
opacity: 0.24;
}
}
@include m(labels) {
left: 0;
right: 0;
transform: none;
text-align: center;
.el-carousel__button {
height: auto;
width: auto;
padding: 2px 18px;
font-size: 12px;
}
.el-carousel__indicator {
padding: 6px 4px;
}
}
}
@include e(indicator) {
display: inline-block;
background-color: transparent;
padding: $--carousel-indicator-padding-vertical $--carousel-indicator-padding-horizontal;
cursor: pointer;
&:hover button {
opacity: 0.72;
}
@include when(active) {
button {
opacity: 1;
}
}
}
@include e(button) {
display: block;
opacity: 0.48;
width: $--carousel-indicator-width;
height: $--carousel-indicator-height;
background-color: $--color-white;
border: none;
outline: none;
padding: 0;
margin: 0;
cursor: pointer;
transition: .3s;
}
}
.carousel-arrow-left-enter,
.carousel-arrow-left-leave-active {
transform: translateY(-50%) translateX(-10px);
opacity: 0;
}
.carousel-arrow-right-enter,
.carousel-arrow-right-leave-active {
transform: translateY(-50%) translateX(10px);
opacity: 0;
}
packages/theme-chalk/src/cascader.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "./input.scss";
@import "common/var";
@include b(cascader) {
display: inline-block;
position: relative;
.el-input,
.el-input__inner {
cursor: pointer;
}
.el-input__icon {
transition: none;
}
.el-icon-caret-bottom {
transition: transform .3s;
@include when(reverse) {
transform: rotateZ(180deg);
}
}
.el-icon-circle-close {
z-index: #{$--index-normal + 1};
}
@include e(label) {
position: absolute;
left: 0;
top: 0;
height: 100%;
line-height: 36px;
padding: 0 25px 0 10px;
color: $--input-color;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
text-align: left;
span {
color: $--color-black;
}
}
@include m(large) {
font-size: $--input-large-font-size;
.el-cascader__label {
line-height: #{$--input-large-height - 2};
}
}
@include m(small) {
font-size: $--input-small-font-size;
.el-cascader__label {
line-height: #{$--input-small-height - 2};
}
}
@include when(disabled) {
.el-cascader__label {
z-index: #{$--index-normal + 1};
color: $--disabled-color-base;
}
}
}
@include b(cascader-menus) {
white-space: nowrap;
background: #fff;
position: absolute;
margin: 5px 0;
z-index: #{$--index-normal + 1};
border: $--select-dropdown-border;
border-radius: $--border-radius-small;
box-shadow: $--select-dropdown-shadow;
}
@include b(cascader-menu) {
display: inline-block;
vertical-align: top;
height: 204px;
overflow: auto;
border-right: $--select-dropdown-border;
background-color: $--select-dropdown-background;
box-sizing: border-box;
margin: 0;
padding: 6px 0;
min-width: 160px;
&:last-child {
border-right: 0;
}
@include e(item) {
font-size: $--select-font-size;
padding: 8px 30px 8px 10px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $--select-option-color;
height: $--select-option-height;
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
@include e(keyword) {
font-weight: bold;
}
@include m(extensible) {
&:after {
font-family: 'element-icons';
content: "\e606";
font-size: 12px;
transform: scale(0.8);
color: rgb(191, 203, 217);
position: absolute;
right: 10px;
margin-top: 1px;
}
}
@include when(disabled) {
color: $--select-option-disabled-color;
background-color: $--select-option-disabled-background;
cursor: not-allowed;
&:hover {
background-color: $--color-white;
}
}
@include when(active) {
color: $--color-white;
background-color: $--select-option-selected;
&:hover {
background-color: $--select-option-selected-hover;
}
}
&:hover {
background-color: $--select-option-hover-background;
}
&.selected {
color: $--color-white;
background-color: $--select-option-selected;
&.hover {
background-color: $--select-option-selected-hover;
}
}
}
@include m(flexible) {
height: auto;
max-height: 180px;
overflow: auto;
.el-cascader-menu__item {
overflow: visible;
}
}
}
packages/theme-chalk/src/checkbox.scss 0 → 100644
View file @ 79016032
@import "common/var";
@import "mixins/mixins";
@import "mixins/_button";
@import "mixins/utils";
@include b(checkbox) {
color: $--checkbox-color;
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
@include utils-user-select(none);
@include e(input) {
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
@include when(disabled) {
.el-checkbox__inner {
background-color: $--checkbox-disabled-input-fill;
border-color: $--checkbox-disabled-input-border-color;
cursor: not-allowed;
&::after {
cursor: not-allowed;
border-color: $--checkbox-disabled-icon-color;
}
& + .el-checkbox__label {
cursor: not-allowed;
}
}
&.is-checked {
.el-checkbox__inner {
background-color: $--checkbox-disabled-checked-input-fill;
border-color: $--checkbox-disabled-checked-input-border-color;
&::after {
border-color: $--checkbox-disabled-checked-icon-color;
}
}
}
&.is-indeterminate {
.el-checkbox__inner {
background-color: $--checkbox-disabled-checked-input-fill;
border-color: $--checkbox-disabled-checked-input-border-color;
&::before {
border-color: $--checkbox-disabled-checked-icon-color;
}
}
}
& + .el-checkbox__label {
color: $--disabled-color-base;
cursor: not-allowed;
}
}
@include when(checked) {
.el-checkbox__inner {
background-color: $--checkbox-checked-input-fill;
border-color: $--checkbox-checked-input-border-color;
&::after {
transform: rotate(45deg) scaleY(1);
}
}
}
@include when(focus) { /*focus时 视觉上区分*/
.el-checkbox__inner {
border-color: $--checkbox-input-border-color-hover;
box-shadow: 0 0 1px 0 $--checkbox-input-border-color-hover;
}
}
@include when(indeterminate) {
.el-checkbox__inner {
background-color: $--checkbox-checked-input-fill;
border-color: $--checkbox-checked-input-border-color;
&::before {
content: '';
position: absolute;
display: block;
border: 1px solid $--checkbox-checked-icon-color;
margin-top: -1px;
left: 3px;
right: 3px;
top: 50%;
}
&::after {
display: none;
}
}
}
}
@include e(inner) {
display: inline-block;
position: relative;
border: $--checkbox-input-border;
border-radius: $--checkbox-input-border-radius;
box-sizing: border-box;
width: $--checkbox-input-width;
height: $--checkbox-input-height;
background-color: $--checkbox-input-fill;
z-index: $--index-normal;
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
background-color .25s cubic-bezier(.71,-.46,.29,1.46);
&:hover {
border-color: $--checkbox-input-border-color-hover;
}
&::after {
box-sizing: content-box;
content: "";
border: 2px solid $--checkbox-checked-icon-color;
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 4px;
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
transform-origin: center;
}
}
@include e(original) {
opacity: 0;
outline: none;
position: absolute;
margin: 0;
width: 0;
height: 0;
left: -999px;
}
@include e(label) {
font-size: $--checkbox-font-size;
padding-left: 5px;
}
& + .el-checkbox {
margin-left: 15px;
}
}
@include b(checkbox-button) {
position: relative;
display: inline-block;
@include e(inner) {
display: inline-block;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: $--button-default-fill;
border: $--border-base;
border-left: 0;
color: $--button-default-color;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
position: relative;
transition: $--all-transition;
@include utils-user-select(none);
@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
&:hover {
color: $--color-primary;
}
& [class*="el-icon-"] {
line-height: 0.9;
& + span {
margin-left: 5px;
}
}
}
@include e(original) {
opacity: 0;
outline: none;
position: absolute;
margin: 0;
left: -999px;
}
&.is-checked {
& .el-checkbox-button__inner {
color: $--checkbox-button-checked-color;
background-color: $--checkbox-button-checked-fill;
border-color: $--checkbox-button-checked-border-color;
box-shadow: -1px 0 0 0 $--checkbox-button-checked-border-color;
}
}
&.is-disabled {
& .el-checkbox-button__inner {
color: $--button-disabled-color;
cursor: not-allowed;
background-image: none;
background-color: $--button-disabled-fill;
border-color: $--button-disabled-border;
box-shadow: none;
}
}
&:first-child {
.el-checkbox-button__inner {
border-left: $--border-base;
border-radius: $--border-radius-base 0 0 $--border-radius-base;
box-shadow: none !important;
}
}
&.is-focus {
& .el-checkbox-button__inner {
border-color: $--checkbox-button-checked-border-color;
box-shadow: 0 0 1px 0 $--checkbox-button-checked-border-color !important;
}
}
&:last-child {
.el-checkbox-button__inner {
border-radius: 0 $--border-radius-base $--border-radius-base 0;
}
}
@include m(medium) {
& .el-checkbox-button__inner {
@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
}
}
@include m(small) {
& .el-checkbox-button__inner {
@include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
}
}
@include m(mini) {
& .el-checkbox-button__inner {
@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
}
}
}
packages/theme-chalk/src/col.scss 0 → 100644
View file @ 79016032
@import "./common/var.scss";
.el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 {
float: left;
box-sizing: border-box;
}
.el-col-0 {
width: 0;
}
@for $i from 0 through 24 {
.el-col-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
.el-col-pull-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.el-col-push-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
@media (max-width: 768px) {
@for $i from 0 through 24 {
.el-col-xs-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-xs-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
.el-col-xs-pull-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.el-col-xs-push-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
}
@media (min-width: 768px) {
@for $i from 0 through 24 {
.el-col-sm-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-sm-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
.el-col-sm-pull-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.el-col-sm-push-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
}
@media (min-width: 992px) {
@for $i from 0 through 24 {
.el-col-md-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-md-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
.el-col-md-pull-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.el-col-md-push-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
}
@media (min-width: 1200px) {
@for $i from 0 through 24 {
.el-col-lg-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-lg-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
.el-col-lg-pull-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.el-col-lg-push-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
}
\ No newline at end of file
packages/theme-chalk/src/collapse.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(collapse) {
border: 1px solid $--collapse-border-color;
border-radius: $--collapse-border-radius;
}
@include b(collapse-item) {
@include e(header) {
height: $--collapse-header-height;
line-height: $--collapse-header-height;
padding-left: 15px;
background-color: $--collapse-header-fill;
color: $--collapse-header-color;
cursor: pointer;
border-bottom: 1px solid $--collapse-border-color;
font-size: $--collapse-header-size;
@include e(arrow) {
margin-right: 8px;
transition: transform .3s;
}
}
@include e(wrap) {
will-change: height;
background-color: $--collapse-content-fill;
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid $--collapse-border-color;
}
@include e(content) {
padding: 10px 15px;
font-size: $--collapse-content-size;
color: $--collapse-content-color;
line-height: 1.769230769230769;
}
@include when(active) {
> .el-collapse-item__header {
.el-collapse-item__arrow {
transform: rotate(90deg);
}
}
}
&:last-child {
margin-bottom: -1px;
}
}
packages/theme-chalk/src/color-picker.scss 0 → 100644
View file @ 79016032
@import "common/var";
@include b(color-hue-slider) {
position: relative;
box-sizing: border-box;
width: 280px;
height: 12px;
background-color: #f00;
padding: 0 2px;
@include e(bar) {
position: relative;
background: linear-gradient(
to right, #f00 0%,
#ff0 17%, #0f0 33%,
#0ff 50%, #00f 67%,
#f0f 83%, #f00 100%);
height: 100%;
}
@include e(thumb) {
position: absolute;
cursor: pointer;
box-sizing: border-box;
left: 0;
top: 0;
width: 4px;
height: 100%;
border-radius: 1px;
background: #fff;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
z-index: 1;
}
@include when(vertical) {
width: 12px;
height: 180px;
padding: 2px 0;
.el-color-hue-slider__bar {
background: linear-gradient(
to bottom, #f00 0%,
#ff0 17%, #0f0 33%,
#0ff 50%, #00f 67%,
#f0f 83%, #f00 100%);
}
.el-color-hue-slider__thumb {
left: 0;
top: 0;
width: 100%;
height: 4px;
}
}
}
@include b(color-svpanel) {
position: relative;
width: 280px;
height: 180px;
@include e((white, black)) {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@include e(white) {
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
@include e(black) {
background: linear-gradient(to top, #000, rgba(0,0,0,0));
}
@include e(cursor) {
position: absolute;
> div {
cursor: head;
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
}
}
}
@include b(color-alpha-slider) {
position: relative;
box-sizing: border-box;
width: 280px;
height: 12px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
@include e(bar) {
position: relative;
background: linear-gradient(
to right, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
height: 100%;
}
@include e(thumb) {
position: absolute;
cursor: pointer;
box-sizing: border-box;
left: 0;
top: 0;
width: 4px;
height: 100%;
border-radius: 1px;
background: #fff;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
z-index: 1;
}
@include when(vertical) {
width: 20px;
height: 180px;
.el-color-alpha-slider__bar {
background: linear-gradient(
to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
}
.el-color-alpha-slider__thumb {
left: 0;
top: 0;
width: 100%;
height: 4px;
}
}
}
@include b(color-dropdown) {
width: 300px;
@include e(main-wrapper) {
margin-bottom: 6px;
&::after {
content: "";
display: table;
clear: both;
}
}
@include e(btns) {
margin-top: 6px;
text-align: right;
}
@include e(value) {
float: left;
line-height: 26px;
font-size: 12px;
color: $--color-black;
}
@include e(btn) {
border: 1px solid #dcdcdc;
color: #333;
line-height: 24px;
border-radius: 2px;
padding: 0 20px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
&[disabled] {
color: #cccccc;
cursor: not-allowed;
}
&:hover {
color: $--color-primary;
border-color: $--color-primary;
}
}
@include e(link-btn) {
cursor: pointer;
color: $--color-primary;
text-decoration: none;
padding: 15px;
font-size: 12px;
&:hover {
color: tint($--color-primary, $--button-hover-tint-percent);
}
}
}
@include b(color-picker) {
display: inline-block;
position: relative;
line-height: normal;
@include e(trigger) {
display: inline-block;
box-sizing: border-box;
height: 36px;
padding: 6px;
border: 1px solid #bfcbd9;
border-radius: 4px;
font-size: 0;
}
@include e(color) {
position: relative;
display: inline-block;
box-sizing: border-box;
border: 1px solid #666;
width: 22px;
height: 22px;
text-align: center;
@include when(alpha) {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
}
@include e(color-inner) {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
@include e(empty) {
font-size: 12px;
vertical-align: middle;
color: #666;
position: absolute;
top: 4px;
left: 4px;
}
@include e(icon) {
display: inline-block;
position: relative;
top: -6px;
margin-left: 8px;
width: 12px;
color: #888;
font-size: 12px;
}
@include e(panel) {
position: absolute;
z-index: 10;
padding: 6px;
background-color: $--color-white;
border: 1px solid $--color-black;
box-shadow: $--dropdown-menu-box-shadow;
}
}
packages/theme-chalk/src/common/popup.scss 0 → 100644
View file @ 79016032
.v-modal-enter {
animation: v-modal-in .2s ease;
}
.v-modal-leave {
animation: v-modal-out .2s ease forwards;
}
@keyframes v-modal-in {
0% {
opacity: 0;
}
100% {
}
}
@keyframes v-modal-out {
0% {
}
100% {
opacity: 0;
}
}
.v-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000;
}
packages/theme-chalk/src/common/transition.scss 0 → 100644
View file @ 79016032
@import "var";
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
transition: $--fade-linear-transition;
}
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0;
}
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
transition: $--fade-linear-transition;
}
.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active {
opacity: 0;
}
.el-fade-in-enter-active,
.el-fade-in-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-fade-in-enter,
.el-fade-in-leave-active {
opacity: 0;
}
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
opacity: 0;
transform: scaleX(0);
}
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: $--md-fade-transition;
transform-origin: center top;
}
.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}
.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
opacity: 1;
transform: scaleY(1);
transition: $--md-fade-transition;
transform-origin: center bottom;
}
.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
opacity: 0;
transform: scaleY(0);
}
.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
opacity: 1;
transform: scale(1, 1);
transition: $--md-fade-transition;
transform-origin: top left;
}
.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
opacity: 0;
transform: scale(.45, .45);
}
.collapse-transition {
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}
.el-list-enter-active,
.el-list-leave-active {
transition: all 1s;
}
.el-list-enter, .el-list-leave-active {
opacity: 0;
transform: translateY(-30px);
}
.el-opacity-transition {
transition: opacity .3s cubic-bezier(.55,0,.1,1);
}
\ No newline at end of file
packages/theme-chalk/src/common/var.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/container.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@include b(container) {
display: flex;
flex-direction: row;
flex: 1;
box-sizing: border-box;
@include when(vertical) {
flex-direction: column;
}
}
packages/theme-chalk/src/date-picker.scss 0 → 100644
View file @ 79016032
@import "./date-picker/date-table.scss";
@import "./date-picker/month-table.scss";
@import "./date-picker/year-table.scss";
@import "./date-picker/time-spinner.scss";
@import "./date-picker/picker.scss";
@import "./date-picker/date-picker.scss";
@import "./date-picker/date-range-picker.scss";
@import "./date-picker/time-range-picker.scss";
@import "./date-picker/time-picker.scss";
@import "./input.scss";
@import "./scrollbar.scss";
\ No newline at end of file
packages/theme-chalk/src/date-picker/date-picker.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@import "../mixins/mixins";
@import "./picker-panel.scss";
@include b(date-picker) {
min-width: 254px;
&.has-sidebar.has-time {
min-width: 434px;
}
&.has-sidebar {
min-width: 370px;
}
&.has-time {
min-width: 324px;
}
.el-picker-panel__content {
min-width: 224px;
}
table {
table-layout: fixed;
width: 100%;
}
@include e(editor-wrap) {
position: relative;
display: table-cell;
padding: 0 5px;
}
@include e(time-header) {
position: relative;
border-bottom: 1px solid $--datepicker-inner-border-color;
font-size: 12px;
padding: 8px 5px 5px 5px;
display: table;
width: 100%;
box-sizing: border-box;
}
@include e(header) {
margin: 12px;
text-align: center;
}
@include e(header-label) {
font-size: 14px;
padding: 0 5px;
line-height: 22px;
text-align: center;
cursor: pointer;
&:hover {
color: $--datepicker-text-hover-color;
}
&.active {
color: $--datepicker-active-color;
}
}
@include e(prev-btn) {
float: left;
}
@include e(next-btn) {
float: right;
}
@include e(time-wrap) {
padding: 10px;
text-align: center;
}
@include e(time-label) {
float: left;
cursor: pointer;
line-height: 30px;
margin-left: 10px;
}
}
packages/theme-chalk/src/date-picker/date-range-picker.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(date-range-picker) {
min-width: 520px;
&.has-sidebar.has-time {
min-width: 766px;
}
&.has-sidebar {
min-width: 620px;
}
&.has-time {
min-width: 660px;
}
table {
table-layout: fixed;
width: 100%;
}
.el-picker-panel__body {
min-width: 513px;
}
.el-picker-panel__content {
margin: 0;
}
@include e(header) {
position: relative;
text-align: center;
height: 28px;
button {
float: left;
}
div {
font-size: 14px;
margin-right: 50px;
}
}
@include e(content) {
float: left;
width: 50%;
box-sizing: border-box;
margin: 0;
padding: 16px;
@include when(left) {
border-right: 1px solid $--datepicker-inner-border-color;
}
@include when(right) {
.el-date-range-picker__header {
button {
float: right;
}
div {
margin-left: 50px;
margin-right: 50px;
}
}
}
}
@include e(editors-wrap) {
box-sizing: border-box;
display: table-cell;
@include when(right) {
text-align: right;
}
}
@include e(time-header) {
position: relative;
border-bottom: 1px solid $--datepicker-inner-border-color;
font-size: 12px;
padding: 8px 5px 5px 5px;
display: table;
width: 100%;
box-sizing: border-box;
> .el-icon-arrow-right {
font-size: 20px;
vertical-align: middle;
display: table-cell;
color: $--datepicker-icon-color;
}
}
@include e(time-picker-wrap) {
position: relative;
display: table-cell;
padding: 0 5px;
.el-picker-panel {
position: absolute;
top: 13px;
right: 0;
z-index: 1;
background: $--color-white;
}
}
}
packages/theme-chalk/src/date-picker/date-table.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(date-table) {
font-size: 12px;
min-width: 224px;
user-select: none;
@include when(week-mode) {
.el-date-table__row {
&:hover {
background-color: $--datepicker-cell-hover-color;
}
&.current {
background-color: $--datepicker-inrange-color;
}
}
}
td {
width: 32px;
height: 32px;
box-sizing: border-box;
text-align: center;
cursor: pointer;
&.next-month,
&.prev-month {
color: $--datepicker-off-color;
}
&.today {
color: $--datepicker-text-hover-color;
position: relative;
&:before {
content: " ";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 0.5em solid $--datepicker-active-color;
border-left: .5em solid transparent;
}
}
&.available:hover {
background-color: $--datepicker-cell-hover-color;
}
&.in-range {
background-color: $--datepicker-inrange-color;
&:hover {
background-color: $--datepicker-inrange-hover-color;
}
}
&.current:not(.disabled),
&.start-date,
&.end-date {
background-color: $--datepicker-active-color !important;
color: $--color-white;
}
&.disabled {
background-color: #f4f4f4;
opacity: 1;
cursor: not-allowed;
color: #ccc;
}
&.week {
font-size: 80%;
color: $--datepicker-header-color;
}
}
th {
padding: 5px;
color: $--datepicker-header-color;
font-weight: 400;
}
}
packages/theme-chalk/src/date-picker/month-table.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(month-table) {
font-size: 12px;
margin: -1px;
border-collapse: collapse;
td {
text-align: center;
padding: 20px 3px;
cursor: pointer;
&.disabled .cell {
background-color: #f4f4f4;
cursor: not-allowed;
color: #ccc;
}
.cell {
width: 48px;
height: 32px;
display: block;
line-height: 32px;
color: $--datepicker-color;
&:hover {
background-color: $--datepicker-cell-hover-color;
}
}
&.current:not(.disabled) .cell {
background-color: $--datepicker-active-color !important;
color: $--color-white;
}
}
}
packages/theme-chalk/src/date-picker/picker-panel.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(picker-panel) {
color: $--datepicker-color;
border: 1px solid $--datepicker-border-color;
box-shadow: 0 2px 6px #ccc;
background: $--color-white;
border-radius: 2px;
line-height: 20px;
margin: 5px 0;
@include e((body, body-wrapper)) {
&::after {
content: "";
display: table;
clear: both;
}
}
@include e(content) {
position: relative;
margin: 15px;
}
@include e(footer) {
border-top: 1px solid $--datepicker-inner-border-color;
padding: 4px;
text-align: right;
background-color: $--color-white;
position: relative;
}
@include e(shortcut) {
display: block;
width: 100%;
border: 0;
background-color: transparent;
line-height: 28px;
font-size: 14px;
color: $--datepicker-color;
padding-left: 12px;
text-align: left;
outline: none;
cursor: pointer;
&:hover {
background-color: $--datepicker-cell-hover-color;
}
&.active {
background-color: #e6f1fe;
color: $--datepicker-active-color;
}
}
@include e(btn) {
border: 1px solid #dcdcdc;
color: #333;
line-height: 24px;
border-radius: 2px;
padding: 0 20px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
&[disabled] {
color: #cccccc;
cursor: not-allowed;
}
}
@include e(icon-btn) {
font-size: 12px;
color: $--datepicker-icon-color;
border: 0;
background: transparent;
cursor: pointer;
outline: none;
margin-top: 3px;
&:hover {
color: $--datepicker-text-hover-color;
}
}
@include e(link-btn) {
cursor: pointer;
color: $--color-primary;
text-decoration: none;
padding: 15px;
font-size: 12px;
}
}
.el-picker-panel *[slot=sidebar],
.el-picker-panel__sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 110px;
border-right: 1px solid $--datepicker-inner-border-color;
box-sizing: border-box;
padding-top: 6px;
background-color: $--color-black;
overflow: auto;
}
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body {
margin-left: 110px;
}
packages/theme-chalk/src/date-picker/picker.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@import "../common/transition";
@include b(date-editor) {
position: relative;
display: inline-block;
&.el-input {
width: 193px;
}
@include m(daterange) {
&.el-input {
width: 220px;
}
}
@include m(datetimerange) {
&.el-input {
width: 350px;
}
}
.el-picker-panel {
position: absolute;
min-width: 180px;
box-sizing: border-box;
box-shadow: 0 2px 6px #ccc;
background: $--color-white;
z-index: 10;
top: 41px;
}
}
packages/theme-chalk/src/date-picker/time-picker.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(time-panel) {
margin: 5px 0;
border: solid 1px $--datepicker-border-color;
background-color: $--color-white;
box-shadow: $--box-shadow-base;
border-radius: 2px;
position: absolute;
width: 180px;
left: 0;
z-index: $--index-top;
user-select: none;
@include e(content) {
font-size: 0;
position: relative;
overflow: hidden;
&::after, &::before {
content: ":";
top: 50%;
color: $--color-white;
position: absolute;
font-size: 14px;
margin-top: -15px;
line-height: 16px;
background-color: $--datepicker-active-color;
height: 32px;
z-index: -1;
left: 0;
right: 0;
box-sizing: border-box;
padding-top: 6px;
text-align: left;
}
&::after {
left: 50%;
margin-left: -2px;
}
&::before {
padding-left: 50%;
margin-right: -2px;
}
&.has-seconds {
&::after {
left: calc(100% / 3 * 2);
}
&::before {
padding-left: calc(100% / 3);
}
}
}
@include e(footer) {
border-top: 1px solid $--datepicker-inner-border-color;
padding: 4px;
height: 36px;
line-height: 25px;
text-align: right;
box-sizing: border-box;
}
@include e(btn) {
border: none;
line-height: 28px;
padding: 0 5px;
margin: 0 5px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
color: $--color-black;
&.confirm {
font-weight: 800;
color: $--datepicker-active-color;
}
}
}
packages/theme-chalk/src/date-picker/time-range-picker.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(time-range-picker) {
min-width: 354px;
overflow: visible;
@include e(content) {
position: relative;
text-align: center;
padding: 10px;
}
@include e(cell) {
box-sizing: border-box;
margin: 0;
padding: 4px 7px 7px;
width: 50%;
display: inline-block;
}
@include e(header) {
margin-bottom: 5px;
text-align: center;
font-size: 14px;
}
@include e(body) {
border-radius:2px;
border: 1px solid $--datepicker-border-color;
}
}
packages/theme-chalk/src/date-picker/time-spinner.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(time-spinner) {
&.has-seconds {
.el-time-spinner__wrapper {
width: 33%;
}
.el-time-spinner__wrapper:nth-child(2) {
margin-left: 1%;
}
}
@include e(wrapper) {
max-height: 190px;
overflow: auto;
display: inline-block;
width: 50%;
vertical-align: top;
position: relative;
& .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
padding-bottom: 15px;
}
}
@include e(list) {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
&::after,
&::before {
content: '';
display: block;
width: 100%;
height: 80px;
}
}
@include e(item) {
height: 32px;
line-height: 32px;
font-size: 12px;
&:hover:not(.disabled):not(.active) {
background: $--datepicker-cell-hover-color;
cursor: pointer;
}
&.active:not(.disabled) {
color: $--color-white;
}
&.disabled {
color: $--datepicker-border-color;
cursor: not-allowed;
}
}
}
packages/theme-chalk/src/date-picker/year-table.scss 0 → 100644
View file @ 79016032
@import "../common/var";
@include b(year-table) {
font-size: 12px;
margin: -1px;
border-collapse: collapse;
.el-icon {
color: $--datepicker-icon-color;
}
td {
text-align: center;
padding: 20px 3px;
cursor: pointer;
&.disabled .cell {
background-color: #f4f4f4;
cursor: not-allowed;
color: #ccc;
}
.cell {
width: 48px;
height: 32px;
display: block;
line-height: 32px;
color: $--datepicker-color;
&:hover {
background-color: $--datepicker-cell-hover-color;
}
}
&.current:not(.disabled) .cell {
background-color: $--datepicker-active-color !important;
color: $--color-white;
}
}
}
packages/theme-chalk/src/dialog.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@import "common/popup";
@include b(dialog) {
position: relative;
margin: 0 auto 50px;
background: $--color-white;
border-radius: $--border-radius-small;
box-shadow: $--dialog-box-shadow;
box-sizing: border-box;
width: 50%;
@include when(fullscreen) {
width: 100%;
margin-top: 0;
margin-bottom: 0;
height: 100%;
overflow: auto;
}
@include e(wrapper) {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
}
@include e(header) {
padding: 20px 20px 0;
@include utils-clearfix;
}
@include e(headerbtn) {
float: right;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
font-size: 16px;
.el-dialog__close {
color: $--dialog-close-color;
}
&:focus, &:hover {
.el-dialog__close {
color: $--dialog-close-hover-color;
}
}
}
@include e(title) {
line-height: 1;
font-size: $--dialog-title-font-size;
font-weight: bold;
color: $--color-black;
}
@include e(body) {
padding: 30px 20px;
color: $--color-black;
font-size: $--dialog-font-size;
}
@include e(footer) {
padding: 10px 20px 15px;
text-align: right;
box-sizing: border-box;
}
}
.dialog-fade-enter-active {
animation: dialog-fade-in .3s;
}
.dialog-fade-leave-active {
animation: dialog-fade-out .3s;
}
@keyframes dialog-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
packages/theme-chalk/src/dropdown.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@import "button";
@include b(dropdown) {
display: inline-block;
position: relative;
color: $--color-black;
font-size: $--font-size-base;
.el-button-group {
display: block;
.el-button {
float: none;
}
}
& .el-dropdown__caret-button {
padding-left: 5px;
padding-right: 5px;
& .el-dropdown__icon {
padding-left: 0;
}
}
@include e(icon) {
font-size: 12px;
margin: 0 3px;
}
}
@include b(dropdown-menu) {
margin: 5px 0;
background-color: $--color-white;
border: 1px solid $--color-black;
box-shadow: $--dropdown-menu-box-shadow;
padding: 6px 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
min-width: 100px;
@include e(item) {
list-style: none;
line-height: 36px;
padding: 0 10px;
margin: 0;
cursor: pointer;
&:not(.is-disabled):hover {
background-color: $--dropdown-menuItem-hover-fill;
color: $--dropdown-menuItem-hover-color;
}
@include m(divided) {
position: relative;
margin-top: 6px;
border-top: 1px solid $--color-black;
&:before {
content: '';
height: 6px;
display: block;
margin: 0 -10px;
background-color: $--color-white;
}
}
@include when(disabled) {
cursor: default;
color: $--color-black;
pointer-events: none;
}
}
}
packages/theme-chalk/src/footer.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(footer) {
padding: $--footer-padding;
box-sizing: border-box;
}
packages/theme-chalk/src/form.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(form) {
@include m(label-left) {
& .el-form-item__label {
text-align: left;
}
}
@include m(label-top) {
& .el-form-item__label {
float: none;
display: inline-block;
text-align: left;
padding: 0 0 10px 0;
}
}
@include m(inline) {
& .el-form-item {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
& .el-form-item__label {
float: none;
display: inline-block;
}
& .el-form-item__content {
display: inline-block;
vertical-align: top;
}
&.el-form--label-top .el-form-item__content {
display: block;
}
}
}
@include b(form-item) {
margin-bottom: 22px;
@include utils-clearfix;
& .el-form-item {
margin-bottom: 0;
}
@include e(label) {
text-align: right;
vertical-align: middle;
float: left;
font-size: 14px;
color: $--color-black;
line-height: 1;
padding: 11px 12px 11px 0;
box-sizing: border-box;
}
@include e(content) {
line-height: 36px;
position: relative;
font-size: 14px;
@include utils-clearfix;
}
@include e(error) {
color: $--color-danger;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
top: 100%;
left: 0;
}
@include when(required) {
.el-form-item__label:before {
content: '*';
color: $--color-danger;
margin-right: 4px;
}
}
@include when(error) {
& .el-input__inner,
& .el-textarea__inner {
border-color: $--color-danger;
}
& .el-input-group__append,
& .el-input-group__prepend {
& .el-input__inner {
border-color: transparent;
}
}
}
}
packages/theme-chalk/src/header.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(header) {
padding: $--header-padding;
box-sizing: border-box;
}
packages/theme-chalk/src/icon.scss 0 → 100644
View file @ 79016032
@font-face {
font-family: 'element-icons';
src: url('fonts/element-icons.woff?t=1501582787037') format('woff'), /* chrome, firefox */
url('fonts/element-icons.ttf?t=1501582787037') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-style: normal;
}
[class^="el-icon-"], [class*=" el-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'element-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-arrow-down:before { content: "\e600"; }
.el-icon-arrow-left:before { content: "\e601"; }
.el-icon-arrow-right:before { content: "\e602"; }
.el-icon-arrow-up:before { content: "\e603"; }
.el-icon-caret-bottom:before { content: "\e604"; }
.el-icon-caret-left:before { content: "\e605"; }
.el-icon-caret-right:before { content: "\e606"; }
.el-icon-caret-top:before { content: "\e607"; }
.el-icon-check:before { content: "\e608"; }
.el-icon-circle-check:before { content: "\e609"; }
.el-icon-circle-close:before { content: "\e60a"; }
.el-icon-circle-cross:before { content: "\e60b"; }
.el-icon-close:before { content: "\e60c"; }
.el-icon-upload:before { content: "\e60d"; }
.el-icon-d-arrow-left:before { content: "\e60e"; }
.el-icon-d-arrow-right:before { content: "\e60f"; }
.el-icon-d-caret:before { content: "\e610"; }
.el-icon-date:before { content: "\e611"; }
.el-icon-delete:before { content: "\e612"; }
.el-icon-document:before { content: "\e613"; }
.el-icon-edit:before { content: "\e614"; }
.el-icon-information:before { content: "\e615"; }
.el-icon-loading:before { content: "\e616"; }
.el-icon-menu:before { content: "\e617"; }
.el-icon-message:before { content: "\e618"; }
.el-icon-minus:before { content: "\e619"; }
.el-icon-more:before { content: "\e61a"; }
.el-icon-picture:before { content: "\e61b"; }
.el-icon-plus:before { content: "\e61c"; }
.el-icon-search:before { content: "\e61d"; }
.el-icon-setting:before { content: "\e61e"; }
.el-icon-share:before { content: "\e61f"; }
.el-icon-star-off:before { content: "\e620"; }
.el-icon-star-on:before { content: "\e621"; }
.el-icon-time:before { content: "\e622"; }
.el-icon-warning:before { content: "\e623"; }
.el-icon-delete2:before { content: "\e624"; }
.el-icon-upload2:before { content: "\e627"; }
.el-icon-view:before { content: "\e626"; }
.el-icon-circle-check-plain:before { content: "\e625"; }
.el-icon-circle-cross-plain:before { content: "\e628"; }
.el-icon-information-plain:before { content: "\e629"; }
.el-icon-warning-plain:before { content: "\e62a"; }
.el-icon-loading {
animation: rotating 1s linear infinite;
}
.el-icon--right {
margin-left: 5px;
}
.el-icon--left {
margin-right: 5px;
}
@keyframes rotating {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
packages/theme-chalk/src/index.scss 0 → 100644
View file @ 79016032
@import "./base.scss";
@import "./pagination.scss";
@import "./dialog.scss";
@import "./autocomplete.scss";
@import "./dropdown.scss";
@import "./dropdown-menu.scss";
@import "./dropdown-item.scss";
@import "./menu.scss";
@import "./submenu.scss";
@import "./menu-item.scss";
@import "./menu-item-group.scss";
@import "./input.scss";
@import "./input-number.scss";
@import "./radio.scss";
@import "./radio-group.scss";
@import "./radio-button.scss";
@import "./checkbox.scss";
@import "./checkbox-button.scss";
@import "./checkbox-group.scss";
@import "./switch.scss";
@import "./select.scss";
@import "./button.scss";
@import "./button-group.scss";
@import "./table.scss";
@import "./table-column.scss";
@import "./date-picker.scss";
@import "./time-select.scss";
@import "./time-picker.scss";
@import "./popover.scss";
@import "./tooltip.scss";
@import "./message-box.scss";
@import "./breadcrumb.scss";
@import "./breadcrumb-item.scss";
@import "./form.scss";
@import "./form-item.scss";
@import "./tabs.scss";
@import "./tab-pane.scss";
@import "./tag.scss";
@import "./tree.scss";
@import "./alert.scss";
@import "./notification.scss";
@import "./slider.scss";
@import "./loading.scss";
@import "./row.scss";
@import "./col.scss";
@import "./upload.scss";
@import "./progress.scss";
@import "./spinner.scss";
@import "./message.scss";
@import "./badge.scss";
@import "./card.scss";
@import "./rate.scss";
@import "./steps.scss";
@import "./step.scss";
@import "./carousel.scss";
@import "./scrollbar.scss";
@import "./carousel-item.scss";
@import "./collapse.scss";
@import "./collapse-item.scss";
@import "./cascader.scss";
@import "./color-picker.scss";
@import "./transfer.scss";
@import "./container.scss";
@import "./header.scss";
@import "./aside.scss";
@import "./main.scss";
@import "./footer.scss";
packages/theme-chalk/src/input-number.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@import "input";
@include b(input-number) {
display: inline-block;
width: 180px;
position: relative;
& .el-input {
display: block;
}
& .el-input__inner {
appearance: none;
padding-right: #{$--input-height * 2 + 10};
}
@include e((increase, decrease)) {
height: auto;
border-left: $--border-base;
width: $--input-height;
line-height: #{$--input-height - 2};
top: 1px;
text-align: center;
color: $--color-black;
cursor: pointer;
position: absolute;
z-index: 1;
&:hover {
color: $--color-primary;
&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
border-color: $--input-focus-border;
}
}
@include when(disabled) {
color: $--disabled-border-base;
cursor: not-allowed;
}
}
@include e(increase) {
right: 0;
}
@include e(decrease) {
right: #{$--input-height + 1};
}
@include when(disabled) {
& .el-input-number__increase, .el-input-number__decrease {
border-color: $--disabled-border-base;
color: $--disabled-border-base;
&:hover {
color: $--disabled-border-base;
cursor: not-allowed;
}
}
}
@include m(large) {
width: 200px;
& .el-input-number__increase, .el-input-number__decrease {
line-height: #{$--input-large-height - 2};
width: $--input-large-height;
font-size: $--input-large-font-size;
}
& .el-input-number__decrease {
right: #{$--input-large-height + 1};
}
& .el-input__inner {
padding-right: #{$--input-large-height * 2 + 10};
}
}
@include m(small) {
width: 130px;
& .el-input-number__increase, .el-input-number__decrease {
line-height: #{$--input-small-height - 2};
width: $--input-small-height;
font-size: $--input-small-font-size;
}
& .el-input-number__decrease {
right: #{$--input-small-height + 1};
}
& .el-input__inner {
padding-right: #{$--input-small-height * 2 + 10};
}
}
@include when(without-controls) {
& .el-input__inner {
padding-right: 10px;
}
}
}
packages/theme-chalk/src/input.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(input) {
position: relative;
font-size: $--font-size-base;
display: inline-block;
width: 100%;
@include e(inner) {
appearance: none;
background-color: $--input-fill;
background-image: none;
border-radius: $--input-border-radius;
border: $--input-border;
box-sizing: border-box;
color: $--input-color;
display: inline-block;
font-size: inherit;
height: $--input-height;
line-height: 1;
outline: none;
padding: 3px 10px;
transition: $--border-transition-base;
width: 100%;
&::placeholder {
color: $--input-placeholder-color;
}
&:hover {
border-color: $--input-hover-border;
}
&:focus {
outline: none;
border-color: $--input-focus-border;
}
}
@include e(icon) {
position: absolute;
width: 35px;
height: 100%;
right: 0;
top: 0;
text-align: center;
color: $--input-icon-color;
transition: all .3s;
&:after {
content: '';
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
& + .el-input__inner {
padding-right: 35px;
}
@include when(clickable) {
&:hover {
cursor: pointer;
color: $--input-hover-border;
& + .el-input__inner {
border-color: $--input-hover-border;
}
}
}
}
@include when(active) {
.el-input__inner {
outline: none;
border-color: $--input-focus-border;
}
}
@include when(disabled) {
.el-input__inner {
background-color: $--input-disabled-fill;
border-color: $--input-disabled-border;
color: $--input-disabled-color;
cursor: not-allowed;
&::placeholder {
color: $--input-disabled-placeholder-color;
}
}
.el-input__icon {
cursor: not-allowed;
}
}
@include m(large) {
font-size: $--input-large-font-size;
& .el-input__inner {
height: $--input-large-height;
}
}
@include m(small) {
font-size: $--input-small-font-size;
& .el-input__inner {
height: $--input-small-height;
}
}
@include m(mini) {
font-size: $--input-mini-font-size;
& .el-input__inner {
height: $--input-mini-height;
}
}
}
@include b(input-group) {
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
& > .el-input__inner {
vertical-align: middle;
display: table-cell;
}
@include e((append, prepend)) {
background-color: $--color-black;
color: $--color-black;
vertical-align: middle;
display: table-cell;
position: relative;
border: $--border-base;
border-radius: $--input-border-radius;
padding: 0 10px;
width: 1px;
white-space: nowrap;
& .el-select,
& .el-button {
display: block;
margin: -10px;
}
& button.el-button,
& div.el-select .el-input__inner,
& div.el-select:hover .el-input__inner {
border-color: transparent;
background-color: transparent;
color: inherit;
border-top: 0;
border-bottom: 0;
}
& .el-button,
& .el-input {
font-size: inherit;
}
}
@include e(prepend) {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@include e(append) {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@include m(prepend) {
.el-input__inner {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
@include m(append) {
.el-input__inner {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
@include b(textarea) {
display: inline-block;
width: 100%;
vertical-align: bottom;
@include e(inner) {
display: block;
resize: vertical;
padding: 5px 7px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
font-size: $--font-size-base;
color: $--input-color;
background-color: $--input-fill;
background-image: none;
border: $--input-border;
border-radius: $--input-border-radius;
transition: $--border-transition-base;
&::placeholder {
color: $--input-placeholder-color;
}
&:hover {
border-color: $--input-hover-border;
}
&:focus {
outline: none;
border-color: $--input-focus-border;
}
}
@include when(disabled) {
.el-textarea__inner {
background-color: $--input-disabled-fill;
border-color: $--input-disabled-border;
color: $--input-disabled-color;
cursor: not-allowed;
&::placeholder {
color: $--input-disabled-placeholder-color;
}
}
}
}
packages/theme-chalk/src/loading.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(loading-mask) {
position: absolute;
z-index: 10000;
background-color: rgba(255, 255, 255, .9);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 0.3s;
@include when(fullscreen) {
position: fixed;
.el-loading-spinner {
margin-top: #{- $--loading-fullscreen-spinner-size / 2};
.circular {
height: $--loading-fullscreen-spinner-size;
width: $--loading-fullscreen-spinner-size;
}
}
}
}
@include b(loading-spinner) {
top: 50%;
margin-top: #{- $--loading-spinner-size / 2};
width: 100%;
text-align: center;
position: absolute;
.el-loading-text {
color: $--color-primary;
margin: 3px 0;
font-size: 14px;
}
.circular {
height: $--loading-spinner-size;
width: $--loading-spinner-size;
animation: loading-rotate 2s linear infinite;
}
.path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: $--color-primary;
stroke-linecap: round;
}
}
.el-loading-fade-enter,
.el-loading-fade-leave-active {
opacity: 0;
}
@keyframes loading-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
packages/theme-chalk/src/main.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@include b(main) {
flex: 1;
overflow: auto;
box-sizing: border-box;
padding: $--main-padding;
}
packages/theme-chalk/src/menu.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@mixin menu-item {
height: 56px;
line-height: 56px;
font-size: 14px;
color: $--menu-item-color;
padding: 0 20px;
cursor: pointer;
position: relative;
transition: border-color .3s, background-color .3s, color .3s;
box-sizing: border-box;
white-space: nowrap;
}
@include b(menu) {
border-radius: 2px;
list-style: none;
position: relative;
margin: 0;
padding-left: 0;
background-color: $--menu-item-fill;
@include utils-clearfix;
& li {
list-style: none;
}
@include m(dark) {
background-color: $--dark-menu-item-fill;
& .el-menu-item,
& .el-submenu__title {
color: $--color-black;
&:hover {
background-color: $--color-black;
}
}
& .el-submenu .el-menu {
background-color: $--color-black;
& .el-menu-item:hover {
background-color: $--color-black;
}
}
}
@include m(horizontal) {
& .el-menu-item {
float: left;
height: 60px;
line-height: 60px;
margin: 0;
cursor: pointer;
position: relative;
box-sizing: border-box;
border-bottom: 5px solid transparent;
a,
a:hover {
color: inherit;
}
&:hover {
background-color: $--menu-item-hover-fill;
}
}
& .el-submenu {
float: left;
position: relative;
> .el-menu {
position: absolute;
top: 65px;
left: 0;
border:1px solid $--color-black;
padding: 5px 0;
background-color: $--color-white;
z-index: 100;
min-width: 100%;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
}
& .el-submenu__title {
height: 60px;
line-height: 60px;
border-bottom: 5px solid transparent;
}
& .el-menu-item {
background-color: $--color-white;
float: none;
height: 36px;
line-height: 36px;
padding: 0 10px;
}
& .el-submenu__icon-arrow {
position: static;
vertical-align: middle;
margin-left: 5px;
color: $--color-black;
margin-top: -3px;
}
}
& .el-menu-item:hover,
& .el-submenu__title:hover {
background-color: $--menu-item-fill;
}
& > .el-menu-item:hover,
& > .el-submenu:hover .el-submenu__title,
& > .el-submenu.is-active .el-submenu__title {
border-bottom: 5px solid $--color-primary;
}
&.el-menu--dark {
& .el-menu-item:hover,
& .el-submenu__title:hover {
background-color: $--dark-menu-item-fill;
}
& .el-submenu {
.el-menu-item,
.el-submenu-title {
color: $--color-black;
&:hover {
background-color: $--color-black;
}
}
.el-menu-item.is-active {
color: $--color-primary;
}
}
}
}
@include m(collapse) {
width: 64px;
> .el-menu-item,
> .el-submenu > .el-submenu__title {
[class^="el-icon-"] {
margin: 0;
vertical-align: middle;
width: 24px;
text-align: center;
}
.el-submenu__icon-arrow {
display: none;
}
span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
.el-submenu {
position: relative;
& .el-menu {
position: absolute;
margin-left: 5px;
top: 0;
left: 100%;
z-index: 10;
}
&.is-opened {
> .el-submenu__title .el-submenu__icon-arrow {
transform: none;
}
}
}
}
}
@include b(menu-item) {
@include menu-item;
& [class^="el-icon-"] {
margin-right: 5px;
width: 24px;
text-align: center;
}
& * {
vertical-align: middle;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
&:hover {
background-color: $--color-black;
}
@include when(active) {
color: $--color-primary;
}
}
@include b(submenu) {
@include e(title) {
position: relative;
@include menu-item;
&:hover {
background-color: $--color-black;
}
& * {
vertical-align: middle;
}
}
& .el-menu {
background-color: $--color-black;
}
& .el-menu-item {
height: 50px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
&:hover {
background-color: $--color-black;
}
}
@include e(icon-arrow) {
position: absolute;
top: 50%;
right: 20px;
margin-top: -7px;
transition: transform .3s;
font-size: 12px;
}
@include when(active) {
.el-submenu__title {
border-bottom-color: $--color-primary;
}
}
@include when(opened) {
> .el-submenu__title .el-submenu__icon-arrow {
transform: rotateZ(180deg);
}
}
[class^="el-icon-"] {
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
}
}
@include b(menu-item-group) {
> ul {
padding: 0;
}
@include e(title) {
padding-top: 15px;
line-height: normal;
font-size: 14px;
padding-left: 20px;
color: $--color-black;
}
}
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
transition: .2s;
opacity: 0;
}
packages/theme-chalk/src/message-box.scss 0 → 100644
View file @ 79016032
@import "mixins/mixins";
@import "common/var";
@import "common/popup";
@import "button";
@import "input";
@include b(message-box) {
text-align: left;
display: inline-block;
vertical-align: middle;
background-color: $--color-white;
width: $--msgbox-width;
border-radius: $--msgbox-border-radius;
font-size: $--msgbox-font-size;
overflow: hidden;
backface-visibility: hidden;
@include e(wrapper) {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
&::after {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
}
@include e(header) {
position: relative;
padding: 20px 20px 0;
}
@include e(headerbtn) {
position: absolute;
top: 19px;
right: 20px;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
.el-message-box__close {
color: #999;
}
&:focus, &:hover {
.el-message-box__close {
color: $--color-primary;
}
}
}
@include e(content) {
padding: 30px 20px;
color: $--msgbox-content-color;
font-size: $--msgbox-content-font-size;
position: relative;
}
@include e(input) {
padding-top: 15px;
& input.invalid {
border-color: $--color-danger;
&:focus {
border-color: $--color-danger;
}
}
}
@include e(errormsg) {
color: $--color-danger;
font-size: $--msgbox-error-font-size;
min-height: 18px;
margin-top: 2px;
}
@include e(title) {
padding-left: 0;
margin-bottom: 0;
font-size: $--msgbox-font-size;
font-weight: bold;
height: 18px;
color: #333;
}
@include e(message) {
margin: 0;
& p {
margin: 0;
line-height: 1.4;
}
}
@include e(btns) {
padding: 10px 20px 15px;
text-align: right;
& button:nth-child(2) {
margin-left: 10px;
}
}
@include e(btns-reverse) {
flex-direction: row-reverse;
}
@include e(status) {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 36px !important;
&.el-icon-circle-check {
color: $--msgbox-success-color;
}
&.el-icon-information {
color: $--msgbox-info-color;
}
&.el-icon-warning {
color: $--msgbox-warning-color;
}
&.el-icon-circle-cross {
color: $--msgbox-danger-color;
}
}
}
.msgbox-fade-enter-active {
animation: msgbox-fade-in .3s;
}
.msgbox-fade-leave-active {
animation: msgbox-fade-out .3s;
}
@keyframes msgbox-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes msgbox-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
packages/theme-chalk/src/message.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/mixins/_button.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/mixins/config.scss 0 → 100644
View file @ 79016032
$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';
packages/theme-chalk/src/mixins/function.scss 0 → 100644
View file @ 79016032
@import "config";
/* BEM support Func
-------------------------- */
@function selectorToString($selector) {
$selector: inspect($selector);
$selector: str-slice($selector, 2, -2);
@return $selector;
}
@function containsModifier($selector) {
$selector: selectorToString($selector);
@if str-index($selector, $modifier-separator) {
@return true;
} @else {
@return false;
}
}
@function containWhenFlag($selector) {
$selector: selectorToString($selector);
@if str-index($selector, '.' + $state-prefix) {
@return true
} @else {
@return false
}
}
@function containPseudoClass($selector) {
$selector: selectorToString($selector);
@if str-index($selector, ':') {
@return true
} @else {
@return false
}
}
@function hitAllSpecialNestRule($selector) {
@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}
packages/theme-chalk/src/mixins/mixins.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/mixins/utils.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/notification.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/option-group.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/option.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/pagination.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/popover.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/progress.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/radio-button.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/radio-group.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/radio.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/rate.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/reset.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/row.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/scrollbar.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/select-dropdown.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/select.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/slider.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/spinner.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/step.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/steps.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/switch.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/table-column.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/table.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/tabs.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/tag.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/time-picker.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/time-select.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/tooltip.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/transfer.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/tree.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-chalk/src/upload.scss 0 → 100644
View file @ 79016032
This diff is collapsed.
packages/theme-default/src/core/dropdown.css deleted 100644 → 0
View file @ bf666126
This diff is collapsed.
packages/theme-default/src/core/input.css deleted 100644 → 0
View file @ bf666126
This diff is collapsed.
packages/theme-default/src/core/option.css deleted 100644 → 0
View file @ bf666126
This diff is collapsed.
packages/theme-default/src/core/tag.css deleted 100644 → 0
View file @ bf666126
This diff is collapsed.
test/unit/specs/button.spec.js
View file @ 79016032
This diff is collapsed.
yarn.lock
View file @ 79016032
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment