3 |
27 |
28 |
29 |
32 |
33 |
35 |
--------------------------------------------------------------------------------
/src/view/MessageBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 用户管理
6 | 配置管理
7 | 定时任务补偿
8 |
9 |
10 |
11 |
12 | 用户管理
13 | 配置管理
14 | 角色管理
15 | 定时任务补偿
16 |
17 |
18 |
19 |
20 | 用户管理
21 | 配置管理
22 | 角色管理
23 | 定时任务补偿
24 |
25 |
26 |
4 |
5 | 打开MessageBox
6 | 打开MessageBox2
7 | 打开MessageBox3
8 |
9 |
10 |
11 |
12 |
13 |
14 |
44 |
45 |
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 更方便定制element-ui主题
2 |
3 | 饿了么提供了许多优秀的组件，但是其组件的风格一直备受诟病，
4 | 于是基于element-ui提供的主题工具，`./element-theme` `element-theme-default`
5 | 对几乎所有组件的尺寸进行了缩小，以及对色彩线条阴影等进行了些许调整。
6 |
7 |
8 | ## 开始
9 |
10 | ``` bash
11 | git clone git@github.com:taixw2/make-element-ui-theme.git et
12 | cd et && npm install
13 | ```
14 |
15 | ## 开发模式
16 |
17 | ``` bash
18 | npm run dev
19 |
20 | # 这一步会使用webpack检测css的变动以及使用gulp输出编译后的css
21 | # 初次启动会提示 ./theme/index.css错误，可以忽略这个错误，因为此时gulp还没有编译编译完成，
22 |
23 | ```
24 |
25 | ## 生成
26 |
27 | ``` bash
28 | npm run build
29 |
30 | #会在dest目录生成一个theme目录，直接引用该目录下的index.css即可
31 | improt ./dist/theme/index.css
32 |
33 | ```
34 |
35 | ## 增加自定义变量
36 | 1. 使用当期目录下的element-theme-default
37 | 需要修改node_modules/element-theme/lib/config.js中的themePath的路径
38 |
39 | 2. 或者直接修改node_modules/element-theme-default/中的样式文件
40 |
41 |
42 | ## 主题预览 ：
43 | [https://taixw2.github.io/element-ui/index.html#/form](https://taixw2.github.io/element-ui/index.html#/form)
44 | ## 引入该主题
45 | #### 安装
46 | ``` bash
47 | npm install element-thin-ui --save
48 | ```
49 | #### 引入
50 | ``` bash
51 | require("element-thin-ui/index.css");
52 | #或者
53 | import "element-thin-ui/index.css";
54 | ```
55 |
--------------------------------------------------------------------------------
/element-theme-default/src/cascader.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./input.css";
3 | @import "./common/var.css";
4 | /*@import "./core/dropdown.css";*/
5 |
6 | @component-namespace element {
7 |
8 | @b cascader {
9 | display: inline-block;
10 | position: relative;
11 |
12 | @e dropdown {
13 | background-color: var(--cascader-menu-fill);
14 | border: var(--cascader-menu-border);
15 | border-radius: var(--cascader-menu-radius);
16 | box-shadow: var(--cascader-menu-submenu-shadow);
17 | margin-top: 5px;
18 | max-height: var(--cascader-height);
19 | position: absolute;
20 | white-space: nowrap;
21 | z-index: 10;
22 | }
23 |
24 | @e wrap {
25 | overflow: hidden;
26 | }
27 |
28 | @e menu {
29 | border: 0;
30 | box-shadow: none;
31 | display: inline-block;
32 | margin: 0;
33 | position: relative;
34 | vertical-align: top;
35 |
36 | &::before {
37 | border-left: var(--cascader-menu-border);
38 | content: " ";
39 | height: var(--cascader-height);
40 | left: 0;
41 | position: absolute;
42 | }
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/element-theme-default/lib/message.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-message{box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);min-width:300px;padding:10px 12px;box-sizing:border-box;border-radius:2px;position:fixed;left:50%;top:20px;-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:#fff;transition:opacity .3s,transform .4s;overflow:hidden}.el-message .el-icon-circle-check{color:#13ce66}.el-message .el-icon-circle-cross{color:#ff4949}.el-message .el-icon-information{color:#50bfff}.el-message .el-icon-warning{color:#f7ba2a}.el-message__group{margin-left:38px;position:relative;height:20px}.el-message__group p{font-size:14px;line-height:20px;margin:0 34px 0 0;white-space:nowrap;color:#8492a6;text-align:justify;display:inline-block;vertical-align:middle}.el-message__group.is-with-icon{margin-left:0}.el-message__img{width:40px;height:40px;position:absolute;left:0;top:0}.el-message__icon{vertical-align:middle;margin-right:8px}.el-message__closeBtn{top:3px;right:0;position:absolute;cursor:pointer;color:#c0ccda;font-size:14px}.el-message__closeBtn:hover{color:#99A9BF}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}
--------------------------------------------------------------------------------
/element-theme-default/src/option.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b select-dropdown {
7 | @e item {
8 | font-size: var(--select-font-size);
9 | padding: 8px 10px;
10 | position: relative;
11 | white-space: nowrap;
12 | overflow: hidden;
13 | text-overflow: ellipsis;
14 | color: var(--select-option-color);
15 | height: var(--select-option-height);
16 | line-height: 1.5;
17 | box-sizing: border-box;
18 | cursor: pointer;
19 |
20 | @when disabled {
21 | color: var(--select-option-disabled-color);
22 | cursor: not-allowed;
23 |
24 | &:hover {
25 | background-color: var(--color-white);
26 | }
27 | }
28 |
29 | &.hover {
30 | background-color: var(--select-option-hover-background);
31 | }
32 |
33 | &.selected {
34 | color: var(--color-white);
35 | background-color: var(--select-option-selected);
36 |
37 | &.hover {
38 | background-color: var(--select-option-selected-hover);
39 | }
40 | }
41 |
42 | & span {
43 | line-height: 1.5 !important;
44 | }
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/element-theme/lib/gen-vars.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var fs = require('fs')
3 | var ora = require('ora')
4 | var config = require('./config')
5 |
6 | var varsPath = path.resolve(config.themePath, './src/common/var.css')
7 | var filePath = path.resolve(process.cwd(), config.config)
8 |
9 | exports.check = function () {
10 | if (!fs.existsSync(varsPath)) {
11 | ora('Pleace install `element-theme-default`').fail()
12 | process.exit(1)
13 | }
14 | }
15 |
16 | exports.init = function (_file) {
17 | var spinner = ora('Generator variables file').start()
18 |
19 | filePath = path.resolve(process.cwd(), _file ? _file : config.config)
20 | if (fs.existsSync(filePath)) {
21 | spinner.text = 'Variables file is exist.'
22 | spinner.fail()
23 | } else {
24 | fs.writeFileSync(filePath, fs.readFileSync(varsPath), 'utf-8')
25 | spinner.succeed()
26 | }
27 | }
28 |
29 | exports.replace = function (_file) {
30 | filePath = path.resolve(process.cwd(), _file ? _file : config.config)
31 | if (!fs.existsSync(filePath)) {
32 | ora('Not found variables file ' + filePath + ', please run "et -i"').fail()
33 | process.exit(1)
34 | }
35 |
36 | fs.writeFileSync(varsPath, fs.readFileSync(filePath), 'utf-8')
37 | }
38 |
--------------------------------------------------------------------------------
/element-theme-default/src/index.css:
--------------------------------------------------------------------------------
1 | @import "./base.css";
2 | @import "./button.css";
3 | @import "./input.css";
4 | @import "./select.css";
5 | @import "./alert.css";
6 | @import "./notification.css";
7 | @import "./slider.css";
8 | @import "./checkbox.css";
9 | @import "./radio.css";
10 | @import "./switch.css";
11 | @import "./dropdown.css";
12 | @import "./dropdown-menu.css";
13 | @import "./loading.css";
14 | @import "./dialog.css";
15 | @import "./table.css";
16 | @import "./table-column.css";
17 | @import "./pagination.css";
18 | @import "./popover.css";
19 | @import "./tooltip.css";
20 | @import "./autocomplete.css";
21 | @import "./message.css";
22 | @import "./message-box.css";
23 | @import "./date-picker.css";
24 | @import "./time-picker.css";
25 | @import "./time-select.css";
26 | @import "./input-number.css";
27 | @import "./tag.css";
28 | @import "./breadcrumb.css";
29 | @import "./form.css";
30 | @import "./tabs.css";
31 | @import "./progress.css";
32 | @import "./tree.css";
33 | @import "./menu.css";
34 | @import "./upload.css";
35 | @import "./row.css";
36 | @import "./col.css";
37 | @import "./spinner.css";
38 | @import "./badge.css";
39 | @import "./card.css";
40 | @import "./rate.css";
41 | @import "./steps.css";
42 | @import "./step.css";
43 |
--------------------------------------------------------------------------------
/src/view/Card.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
32 |
33 |
34 |
35 |
39 |
40 |
42 |
--------------------------------------------------------------------------------
/element-theme-default/src/date-picker/time-spinner.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 |
3 | @component-namespace el {
4 | @b time-spinner {
5 | &.has-seconds {
6 | .el-time-spinner__wrapper {
7 | width: calc(100% / 3);
8 | }
9 | }
10 |
11 | @e wrapper {
12 | height: 190px;
13 | overflow: hidden;
14 | display: inline-block;
15 | width: 50%;
16 | vertical-align: top;
17 | position: relative;
18 | -ms-overflow-style: none;
19 |
20 | &:hover {
21 | overflow-y: auto;
22 | }
23 | }
24 |
25 | @e list {
26 | padding: 0;
27 | margin: 0;
28 | list-style: none;
29 | text-align: center;
30 |
31 | &::after,
32 | &::before {
33 | content: '';
34 | display: block;
35 | width: 100%;
36 | height: 80px;
37 | }
38 | }
39 |
40 | @e item {
41 | height: 32px;
42 | line-height: 32px;
43 | font-size: 12px;
44 |
45 | &:hover:not(.disabled):not(.active) {
46 | background: var(--datepicker-cell-hover-color);
47 | cursor: pointer;
48 | }
49 |
50 | &.active:not(.disabled) {
51 | color: var(--color-white);
52 | }
53 |
54 | &.disabled {
55 | color: var(--datepicker-border-color);
56 | cursor: not-allowed;
57 | }
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/view/Input.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
8 |
16 |
17 |
18 |
19 | 
20 |
28 |
29 |
30 |
31 |
9 | 卡片名称
10 | 操作按钮
11 |
12 |
13 | {{'列表内容 ' + o }}
14 |
15 |
20 |
21 | 好吃的汉堡
22 |
27 |
23 |
24 | 操作按钮
25 |
26 |
3 |
4 |
25 |
26 |
27 |
37 |
38 |
43 |
--------------------------------------------------------------------------------
/element-theme-default/lib/dialog.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.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}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-dialog{position:absolute;left:50%;-ms-transform:translateX(-50%);transform:translateX(-50%);background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box}.el-dialog--tiny{width:30%}.el-dialog--small{width:50%}.el-dialog--large{width:90%}.el-dialog--full{width:100%;top:0;height:100%;overflow:auto}.el-dialog__wrapper{top:0;right:0;bottom:0;left:0;position:fixed;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 0}.el-dialog__close{cursor:pointer;color:#c0ccda}.el-dialog__close:hover{color:#20a0ff}.el-dialog__title{line-height:1;font-size:16px;font-weight:700;color:#1f2d3d}.el-dialog__body{padding:30px 20px;color:#475669;font-size:14px}.el-dialog__headerbtn{float:right}.el-dialog__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}}
--------------------------------------------------------------------------------
/element-theme-default/src/core/input.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "../common/var.css";
3 |
4 | @component-namespace element-core {
5 |
6 | @b input {
7 | background-color: var(--input-fill);
8 | border: var(--input-border);
9 | border-radius: var(--input-border-radius);
10 | box-sizing: border-box;
11 | color: var(--input-color);
12 | cursor: text;
13 | display: inline-block;
14 | font-size: var(--input-font-size);
15 | min-height: var(--input-height);
16 | min-width: var(--input-width);
17 | padding: 2px;
18 | position: relative;
19 | vertical-align: middle;
20 |
21 | @when disabled {
22 | background-color: var(--input-fill-disabled);
23 | border-color: inherit;
24 | box-shadow: none;
25 | color: var(--input-color-disabled);
26 | cursor: not-allowed;
27 | }
28 |
29 | @when readonly {
30 | cursor: pointer;
31 | }
32 |
33 | @when multiple {
34 | cursor: text;
35 | }
36 |
37 | &:hover,
38 | &.is-active {
39 | border-color: var(--input-focus-border);
40 | box-shadow: var(--input-shadow-hover);
41 | }
42 |
43 | @e original {
44 | background-color: inherit;
45 | border: none;
46 | box-sizing: border-box;
47 | cursor: inherit;
48 | height: 100%;
49 | line-height: 1.2;
50 | outline: none;
51 | padding: 5px 7px;
52 | width: auto;
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/element-theme-default/src/common/transition.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import './var.css';
3 |
4 | .fade-in-linear-enter-active,
5 | .fade-in-linear-leave-active {
6 | transition: var(--fade-linear-transition);
7 | }
8 | .fade-in-linear-enter,
9 | .fade-in-linear-leave,
10 | .fade-in-linear-leave-active {
11 | opacity: 0;
12 | }
13 |
14 | .el-fade-in-enter-active,
15 | .el-fade-in-leave-active {
16 | transition: all .3s cubic-bezier(.55,0,.1,1);
17 | }
18 | .el-fade-in-enter,
19 | .el-fade-in-leave-active {
20 | opacity: 0;
21 | }
22 |
23 | .el-zoom-in-center-enter-active,
24 | .el-zoom-in-center-leave-active {
25 | transition: all .3s cubic-bezier(.55,0,.1,1);
26 | }
27 | .el-zoom-in-center-enter,
28 | .el-zoom-in-center-leave-active {
29 | opacity: 0;
30 | transform: scaleX(0);
31 | }
32 |
33 | .el-zoom-in-top-enter-active,
34 | .el-zoom-in-top-leave-active {
35 | opacity: 1;
36 | transform: scaleY(1);
37 | transition: var(--md-fade-transition);
38 | transform-origin: center top;
39 | }
40 | .el-zoom-in-top-enter,
41 | .el-zoom-in-top-leave-active {
42 | opacity: 0;
43 | transform: scaleY(0);
44 | }
45 |
46 | .el-zoom-in-bottom-enter-active,
47 | .el-zoom-in-bottom-leave-active {
48 | opacity: 1;
49 | transform: scaleY(1);
50 | transition: var(--md-fade-transition);
51 | transform-origin: center bottom;
52 | }
53 | .el-zoom-in-bottom-enter,
54 | .el-zoom-in-bottom-leave-active {
55 | opacity: 0;
56 | transform: scaleY(0);
57 | }
58 |
--------------------------------------------------------------------------------
/element-theme/lib/task.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var gulp = require('gulp')
3 | var ora = require('ora')
4 | var nop = require('gulp-nop')
5 | var postcss = require('gulp-postcss')
6 | var cssmin = require('gulp-cssmin')
7 | var config = require('./config')
8 | var replaceVars = require('./gen-vars').replace
9 |
10 | var salad = function (browsers) {
11 | return require('postcss-salad')({
12 | browsers: browsers || config.browsers,
13 | features: config.features
14 | })
15 | }
16 |
17 | exports.fonts = function (opts) {
18 | var spin = ora(opts.message).start()
19 | var stream = gulp.src(path.resolve(config.themePath, './src/fonts/**'))
20 | .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop())
21 | .pipe(gulp.dest(path.resolve(opts.out || config.out, './fonts')))
22 | .on('end', function () {
23 | spin.succeed()
24 | })
25 |
26 | return stream
27 | }
28 |
29 | exports.build = function (opts) {
30 | var spin = ora(opts.message).start()
31 | var stream
32 |
33 | replaceVars(opts.config)
34 | stream = gulp.src([opts.config || config.config, path.resolve(config.themePath, './src/*.css')])
35 | .pipe(postcss([salad(opts.browsers)]))
36 | .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop())
37 | .pipe(gulp.dest(opts.out || config.out))
38 | .on('end', function () {
39 | console.log("success\n");
40 | console.log(opts.out || config.out);
41 | spin.succeed()
42 | })
43 |
44 | return stream
45 | }
46 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mint-ui-starter",
3 | "description": "A Vue.js project",
4 | "author": "yi.shyang@ele.me",
5 | "private": true,
6 | "scripts": {
7 | "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
9 | },
10 | "dependencies": {
11 | "element-ui": "^1.0.0",
12 | "normalize.css": "^5.0.0",
13 | "underscore": "^1.8.3",
14 | "vue": "^2.0.1",
15 | "vue-resource": "^1.0.3",
16 | "vue-router": "^2.1.1"
17 | },
18 | "devDependencies": {
19 | "babel-core": "^6.0.0",
20 | "babel-helper-vue-jsx-merge-props": "^2.0.2",
21 | "babel-loader": "^6.0.0",
22 | "babel-plugin-syntax-jsx": "^6.18.0",
23 | "babel-plugin-transform-vue-jsx": "^3.2.0",
24 | "babel-preset-es2015": "^6.0.0",
25 | "cross-env": "^3.0.0",
26 | "css-loader": "^0.25.0",
27 | "element-theme": "^0.2.0",
28 | "element-theme-default": "^1.0.7",
29 | "extract-text-webpack-plugin": "^2.0.0-beta.4",
30 | "file-loader": "^0.9.0",
31 | "html-webpack-plugin": "^2.24.1",
32 | "node-sass": "^4.1.1",
33 | "style-loader": "^0.13.1",
34 | "vue-loader": "^9.7.0",
35 | "webpack": "^2.1.0-beta.25",
36 | "webpack-dev-server": "^2.1.0-beta.0"
37 | },
38 | "element-theme": {
39 | "browsers": [
40 | "ie > 9",
41 | "last 2 versions"
42 | ],
43 | "out": "./src/theme",
44 | "config": "./element-variables.css",
45 | "minimize": false
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/element-theme-default/lib/tag.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-tag{background-color:#8492a6;display:inline-block;padding:0 5px;height:24px;line-height:22px;font-size:12px;color:#fff;border-radius:4px;box-sizing:border-box;border:1px solid transparent}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;-ms-transform:scale(.75,.75);transform:scale(.75,.75);height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-2px}.el-tag .el-icon-close:hover{background-color:#fff;color:#8492a6}.el-tag--gray{background-color:#e5e9f2;border-color:#e5e9f2;color:#475669}.el-tag--gray .el-tag__close:hover{background-color:#475669;color:#fff}.el-tag--gray.is-hit{border-color:#475669}.el-tag--primary{background-color:rgba(32,159,255,.1);border-color:rgba(32,159,255,.2);color:#20a0ff}.el-tag--primary .el-tag__close:hover{background-color:#20a0ff;color:#fff}.el-tag--primary.is-hit{border-color:#20a0ff}.el-tag--success{background-color:rgba(18,206,102,.1);border-color:rgba(18,206,102,.2);color:#13ce66}.el-tag--success .el-tag__close:hover{background-color:#13ce66;color:#fff}.el-tag--success.is-hit{border-color:#13ce66}.el-tag--warning{background-color:rgba(247,186,41,.1);border-color:rgba(247,186,41,.2);color:#f7ba2a}.el-tag--warning .el-tag__close:hover{background-color:#f7ba2a;color:#fff}.el-tag--warning.is-hit{border-color:#f7ba2a}.el-tag--danger{background-color:rgba(255,73,73,.1);border-color:rgba(255,73,73,.2);color:#ff4949}.el-tag--danger .el-tag__close:hover{background-color:#ff4949;color:#fff}.el-tag--danger.is-hit{border-color:#ff4949}
--------------------------------------------------------------------------------
/src/view/Dialog.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 |
8 |
9 |
10 |
14 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
3 |
26 |
27 |
28 |
50 |
51 |
53 |
--------------------------------------------------------------------------------
/element-theme-default/lib/tree.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-tree{cursor:default;background:#fff;border:1px solid #d3dce6}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#5e6d82}.el-tree-node{white-space:nowrap}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent;display:none}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree-node__expand-icon,.el-tree-node__label,.el-tree-node__loading-icon{display:inline-block;vertical-align:middle}.el-tree-node__content{line-height:36px;height:36px;cursor:pointer}.el-tree-node__content>.el-checkbox,.el-tree-node__content>.el-tree-node__expand-icon{margin-right:8px}.el-tree-node__content>.el-checkbox{vertical-align:middle}.el-tree-node__content:hover{background:#e5e9f2}.el-tree-node__expand-icon{cursor:pointer;width:0;height:0;margin-left:10px;border:6px solid transparent;border-right-width:0;border-left-color:#99a9bf;border-left-width:7px;-ms-transform:rotate(0);transform:rotate(0);transition:transform .3s ease-in-out}.el-tree-node__expand-icon:hover{border-left-color:#999}.el-tree-node__expand-icon.expanded{-ms-transform:rotate(90deg);transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{border-color:transparent;cursor:default}.el-tree-node__label{font-size:14px}.el-tree-node__loading-icon{margin-right:4px;font-size:14px;color:#99a9bf}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#eff7ff}.collapse-transition{transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}
--------------------------------------------------------------------------------
/element-theme-default/src/mixins/_button.css:
--------------------------------------------------------------------------------
1 | @define-mixin button-variant $color, $background-color, $border-color {
2 | color: $color;
3 | background-color: $background-color;
4 | border-color: $border-color;
5 |
6 | &:hover,
7 | &:focus {
8 | background: tint($background-color, var(--button-hover-tint-percent));
9 | border-color: tint($border-color, var(--button-hover-tint-percent));
10 | color: $color;
11 | }
12 |
13 | &:active {
14 | background: shade($background-color, var(--button-active-shade-percent));
15 | border-color: shade($border-color, var(--button-active-shade-percent));
16 | color: $color;
17 | outline: none;
18 | }
19 |
20 | &.is-active {
21 | background: shade($background-color, var(--button-active-shade-percent));
22 | border-color: shade($border-color, var(--button-active-shade-percent));
23 | color: $color;
24 | }
25 |
26 | &.is-plain {
27 | background: var(--button-default-fill);
28 | border: var(--border-base);
29 | color: var(--button-default-color);
30 |
31 | &:hover,
32 | &:focus {
33 | background: #fff;
34 | border-color: $border-color;
35 | color: $background-color;
36 | }
37 |
38 | &:active {
39 | background: #fff;
40 | border-color: shade($border-color, var(--button-active-shade-percent));
41 | color: shade($background-color, var(--button-active-shade-percent));
42 | outline: none;
43 | }
44 | }
45 | }
46 |
47 | @define-mixin button-size $padding-vertical, $padding-horizontal, $font-size, $border-radius {
48 | padding: $padding-vertical $padding-horizontal;
49 | font-size: $font-size;
50 | border-radius: $border-radius;
51 | }
52 |
--------------------------------------------------------------------------------
/element-theme-default/lib/progress.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-progress-bar__inner:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-progress{position:relative;line-height:1}.el-progress.is-exception .el-progress-bar__inner{background-color:#ff4949}.el-progress.is-exception .el-progress__text{color:#ff4949}.el-progress.is-success .el-progress-bar__inner{background-color:#13ce66}.el-progress.is-success .el-progress__text{color:#13ce66}.el-progress__text{font-size:14px;color:#475669;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;-ms-transform:translate(0,-50%);transform:translate(0,-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#e5e9f2;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;background-color:#20a0ff;text-align:right;border-radius:100px;line-height:1}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}100%{background-position:32px 0}}
--------------------------------------------------------------------------------
/element-theme-default/src/select-dropdown.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b select-dropdown {
7 | position: absolute;
8 | z-index: 1001;
9 | border: var(--select-dropdown-border);
10 | border-radius: var(--border-radius-small);
11 | background-color: var(--select-dropdown-background);
12 | box-shadow: var(--select-dropdown-shadow);
13 | box-sizing: border-box;
14 | margin: 5px 0;
15 |
16 | @when multiple {
17 | & .el-select-dropdown__item.selected {
18 | color: var(--select-option-selected);
19 | background-color: var(--select-dropdown-background);
20 |
21 | &.hover {
22 | background-color: var(--select-option-hover-background);
23 | }
24 |
25 | &::after {
26 | position: absolute;
27 | right: 10px;
28 | font-family: 'element-icons';
29 | content: "\E608";
30 | font-size: 11px;
31 | -webkit-font-smoothing: antialiased;
32 | -moz-osx-font-smoothing: grayscale;
33 | }
34 | }
35 | }
36 | }
37 |
38 | @b select-dropdown__empty {
39 | padding: var(--select-dropdown-empty-padding);
40 | margin: 0;
41 | text-align: center;
42 | color: var(--select-dropdown-empty-color);
43 | font-size: var(--select-font-size);
44 | }
45 |
46 | @b select-dropdown__list {
47 | list-style: none;
48 | padding: var(--select-dropdown-padding);
49 | margin: 0;
50 | width: 100%;
51 | max-height: var(--select-dropdown-max-height);
52 | box-sizing: border-box;
53 | overflow-y: auto;
54 |
55 | @when empty {
56 | padding: 0;
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/element-theme-default/lib/switch.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-switch{display:inline-block;position:relative;font-size:14px;line-height:22px}.el-switch__label,.el-switch__label *{position:absolute;font-size:14px;display:inline-block}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-switch.is-disabled .el-switch__core{border-color:#E5E9F3!important;background:#E5E9F3!important}.el-switch.is-disabled .el-switch__core span{background-color:#F9FAFC!important}.el-switch.is-disabled .el-switch__core~.el-switch__label *{color:#F9FAFC!important}.el-switch.is-disabled .el-switch__input:checked+.el-switch__core{border-color:#E5E9F3;background-color:#E5E9F3}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__core,.el-switch__label{width:46px;height:22px;cursor:pointer}.el-switch__label{transition:.2s;z-index:10;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-switch__label *{line-height:1;top:4px;color:#fff}.el-switch__label--left i{left:6px}.el-switch__label--right i{right:6px}.el-switch__input{display:none}.el-switch__input:checked+.el-switch__core{border-color:#20a0ff;background-color:#20a0ff}.el-switch__core{margin:0;display:inline-block;vertical-align:middle;position:relative;border:1px solid #c0ccda;outline:0;border-radius:12px;box-sizing:border-box;background:#c0ccda;transition:border-color .3s,background-color .3s}.el-switch__core .el-switch__button{top:0;left:0;position:absolute;border-radius:100%;transition:transform .3s;width:16px;height:16px;z-index:20;background-color:#fff}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}
--------------------------------------------------------------------------------
/element-theme-default/lib/popover.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:2px;border:1px solid #D3DCE6;padding:10px;z-index:2000;font-size:12px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-popover .popper__arrow,.el-popover .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popover .popper__arrow{border-width:6px}.el-popover .popper__arrow::after{content:" ";border-width:6px}.el-popover[x-placement^=top]{margin-bottom:12px}.el-popover[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#D3DCE6;border-bottom-width:0}.el-popover[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popover[x-placement^=bottom]{margin-top:12px}.el-popover[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#D3DCE6}.el-popover[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popover[x-placement^=right]{margin-left:12px}.el-popover[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#D3DCE6;border-left-width:0}.el-popover[x-placement^=right] .popper__arrow::after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popover[x-placement^=left]{margin-right:12px}.el-popover[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#D3DCE6}.el-popover[x-placement^=left] .popper__arrow::after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-popover__title{color:#1f2d3d;font-size:13px;line-height:1;margin-bottom:9px}
--------------------------------------------------------------------------------
/element-theme-default/src/loading.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 | @b loading-mask {
6 | position: absolute;
7 | z-index: 10000;
8 | background-color: rgba(255, 255, 255, .9);
9 | margin: 0;
10 | top: 0;
11 | right: 0;
12 | bottom: 0;
13 | left: 0;
14 |
15 | @when fullscreen {
16 | position: fixed;
17 |
18 | .el-loading-spinner {
19 | margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
20 |
21 | .circular {
22 | width: var(--loading-fullscreen-spinner-size);
23 | }
24 | }
25 | }
26 | }
27 |
28 | @b loading-spinner {
29 | top: 50%;
30 | margin-top: calc(- var(--loading-spinner-size) / 2);
31 | width: 100%;
32 | text-align: center;
33 | position: absolute;
34 |
35 | .el-loading-text {
36 | color: var(--color-primary);
37 | margin: 3px 0;
38 | font-size: 14px;
39 | }
40 |
41 | .circular {
42 | width: var(--loading-spinner-size);
43 | animation: rotate 2s linear infinite;
44 | }
45 |
46 | .path {
47 | animation: dash 1.5s ease-in-out infinite;
48 | stroke-dasharray: 1, 100;
49 | stroke-dashoffset: 0;
50 | stroke-width: 2;
51 | stroke: var(--color-primary);
52 | stroke-linecap: round;
53 | }
54 | }
55 | }
56 |
57 | @keyframes rotate {
58 | 100% {
59 | transform: rotate(360deg);
60 | }
61 | }
62 |
63 | @keyframes dash {
64 | 0% {
65 | stroke-dasharray: 1, 100;
66 | stroke-dashoffset: 0;
67 | }
68 | 50% {
69 | stroke-dasharray: 45, 100;
70 | stroke-dashoffset: -35px;
71 | }
72 | 100% {
73 | stroke-dasharray: 45, 100;
74 | stroke-dashoffset: -124px;
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/element-theme-default/src/date-picker/date-picker.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 | @import "./picker-panel.css";
3 |
4 | @component-namespace el {
5 | @b date-picker {
6 | min-width: 254px;
7 |
8 | &.has-sidebar.has-time {
9 | min-width: 434px;
10 | }
11 |
12 | &.has-sidebar {
13 | min-width: 370px;
14 | }
15 |
16 | &.has-time {
17 | min-width: 324px;
18 | }
19 |
20 | .el-picker-panel__content {
21 | min-width: 224px;
22 | }
23 |
24 | table {
25 | table-layout: fixed;
26 | width: 100%;
27 | }
28 |
29 | @e editor-wrap {
30 | position: relative;
31 | display: table-cell;
32 | padding: 0 5px;
33 | }
34 |
35 | @e time-header {
36 | position: relative;
37 | border-bottom: 1px solid var(--datepicker-inner-border-color);
38 | font-size: 12px;
39 | padding: 8px 5px 5px 5px;
40 | display: table;
41 | width: 100%;
42 | box-sizing: border-box;
43 | }
44 |
45 | @e header {
46 | margin: 12px;
47 | text-align: center;
48 | }
49 |
50 | @e header-label {
51 | font-size: 14px;
52 | padding: 0 5px;
53 | line-height: 22px;
54 | text-align: center;
55 | cursor: pointer;
56 |
57 | &:hover {
58 | color: var(--datepicker-text-hover-color);
59 | }
60 |
61 | &.active {
62 | color: var(--datepicker-active-color);
63 | }
64 | }
65 |
66 | @e prev-btn {
67 | float: left;
68 | }
69 |
70 | @e next-btn {
71 | float: right;
72 | }
73 |
74 | @e time-wrap {
75 | padding: 10px;
76 | text-align: center;
77 | }
78 |
79 | @e time-label {
80 | float: left;
81 | cursor: pointer;
82 | line-height: 30px;
83 | margin-left: 10px;
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/element-theme-default/src/date-picker/date-table.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 |
3 | @component-namespace el {
4 | @b date-table {
5 | font-size: 12px;
6 | min-width: 224px;
7 | user-select: none;
8 |
9 | @when week-mode {
10 | .el-date-table__row {
11 | &:hover {
12 | background-color: var(--datepicker-cell-hover-color);
13 | }
14 |
15 | &.current {
16 | background-color: var(--datepicker-inrange-color);
17 | }
18 | }
19 | }
20 |
21 | td {
22 | width: 32px;
23 | height: 32px;
24 | box-sizing: border-box;
25 | text-align: center;
26 | cursor: pointer;
27 |
28 | &.next-month,
29 | &.prev-month {
30 | color: var(--datepicker-off-color);
31 | }
32 |
33 | &.today {
34 | color: var(--datepicker-text-hover-color);
35 | }
36 |
37 | &.available:hover {
38 | background-color: var(--datepicker-cell-hover-color);
39 | }
40 |
41 | &.in-range {
42 | background-color: var(--datepicker-inrange-color);
43 | &:hover {
44 | background-color: var(--datepicker-inrange-hover-color);
45 | }
46 | }
47 |
48 | &.current,
49 | &.start-date,
50 | &.end-date {
51 | background-color: var(--datepicker-active-color) !important;
52 | color: var(--color-white);
53 | }
54 |
55 | &.disabled {
56 | background-color: #f4f4f4;
57 | opacity: 1;
58 | cursor: not-allowed;
59 | color: #ccc;
60 | }
61 |
62 | &.week {
63 | font-size: 80%;
64 | color: var(--datepicker-header-color);
65 | }
66 | }
67 |
68 | th {
69 | padding: 5px;
70 | color: var(--datepicker-header-color);
71 | font-weight: 400;
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/element-theme-default/src/core/option.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "../common/var.css";
3 |
4 | @component-namespace element {
5 |
6 | @b option {
7 | box-sizing: border-box;
8 | color: var(--dropdown-color);
9 | cursor: pointer;
10 | display: block;
11 | font-size: var(--dropdown-font-size);
12 | padding: 9px;
13 |
14 | @e remark {
15 | color: var(--dropdown-option-pinyin-color);
16 | float: right;
17 | }
18 |
19 | @m arrow {
20 |
21 | &:not(.is-last)::after {
22 | border-left: 1px solid var(--dropdown-border-color);
23 | border-top: 1px solid var(--dropdown-border-color);
24 | content: " ";
25 | height: 4px;
26 | margin-top: 6px;
27 | position: absolute;
28 | right: 12px;
29 | transform: rotate(135deg);
30 | width: 4px;
31 | }
32 | }
33 |
34 | @when disabled {
35 | background-color: transparent;
36 | color: var(--dropdown-option-color-disabled);
37 | cursor: not-allowed;
38 | }
39 |
40 | &:hover,
41 | &.is-hover {
42 | background-color: var(--dropdown-option-fill-hover);
43 | color: var(--dropdown-option-color-hover);
44 | }
45 |
46 | @when selected {
47 | background-color: var(--dropdown-option-fill-active);
48 | color: var(--dropdown-option-color-active);
49 | }
50 | }
51 |
52 | @b optiongroup {
53 | list-style: none;
54 | padding-left: 0;
55 |
56 | & .element-option {
57 | padding-left: 21px;
58 | }
59 |
60 | @e title {
61 | box-sizing: border-box;
62 | color: var(--dropdown-group-color);
63 | display: inline-block;
64 | font-size: var(--dropdown-font-size);
65 | padding: 8px;
66 |
67 | &:hover {
68 | background-color: inherit;
69 | }
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/element-theme-default/src/dropdown.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 | @import "./button.css";
4 |
5 | @component-namespace el {
6 | @b dropdown {
7 | display: inline-block;
8 | position: relative;
9 | color: #475669;
10 | font-size: var(--font-size-base);
11 |
12 | .el-button-group {
13 | display: block;
14 | }
15 |
16 | & .el-dropdown__caret-button {
17 | padding: * 5px;
18 |
19 | & .el-dropdown__icon {
20 | padding-left: 0;
21 | }
22 | }
23 | @e icon {
24 | font-size: 12px;
25 | margin: 0 3px;
26 | }
27 | }
28 | @b dropdown-menu {
29 | margin: 5px 0;
30 | background-color: #fff;
31 | border: var(--dropdown-border);
32 | box-shadow: var(--dropdown-menu-box-shadow);
33 | padding: var(--dropdown-menu-padding) 0;
34 | z-index: 10;
35 | position: absolute;
36 | top: 0;
37 | left: 0;
38 | min-width: 100px;
39 |
40 | @e item {
41 | list-style: none;
42 | line-height: var(--dropdown-menuItem-height);
43 | padding: 0 10px;
44 | margin: 0;
45 | cursor: pointer;
46 |
47 | &:not(.is-disabled):hover {
48 | background-color: var(--dropdown-menuItem-hover-fill);
49 | color: var(--dropdown-menuItem-hover-color);
50 | }
51 | @m divided {
52 | position: relative;
53 | margin-top: 6px;
54 | border-top: 1px solid var(--dropdown-divided-border-color);
55 |
56 | &:before {
57 | content: '';
58 | height: 6px;
59 | display: block;
60 | margin: 0 -10px;
61 | background-color: #fff;
62 | }
63 | }
64 | @when disabled {
65 | cursor: default;
66 | color: var(--dropdown-disabled-color);
67 | pointer-events: none;
68 | }
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/view/Step.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 | Dialog
5 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
16 |
17 |
18 |
22 |
23 |
24 |
25 |
3 |
42 |
43 |
44 |
48 |
49 |
51 |
--------------------------------------------------------------------------------
/element-theme-default/src/form.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 | @b form {
6 | @m label-left {
7 | & .el-form-item__label {
8 | text-align: left;
9 | }
10 | }
11 | @m label-top {
12 | & .el-form-item__label {
13 | float: none;
14 | display: inline-block;
15 | padding: 0 0 10px 0;
16 | }
17 | }
18 | @m inline {
19 | & .el-form-item {
20 | display: inline-block;
21 | margin-right: 10px;
22 | vertical-align: top;
23 | }
24 | }
25 | }
26 | @b form-item {
27 | margin-bottom: var(--form-item-margin-bottom);
28 | @utils-clearfix;
29 |
30 | & .el-form-item {
31 | margin-bottom: 0;
32 |
33 | & .el-form-item__content {
34 | margin-left: 0 !important;
35 | }
36 | }
37 |
38 | @e label {
39 | text-align: right;
40 | vertical-align: middle;
41 | float: left;
42 | font-size: var(--form-label-size);
43 | color: var(--form-label-color);
44 | line-height: 1;
45 | padding: var(--form-label-padding);
46 | box-sizing: border-box;
47 | }
48 | @e content {
49 | line-height: 36px;
50 | position: relative;
51 | font-size: 14px;
52 | @utils-clearfix;
53 | }
54 | @e error {
55 | color: #ff4949;
56 | font-size: 12px;
57 | line-height: 1;
58 | padding-top: 4px;
59 | position: absolute;
60 | top: 100%;
61 | left: 0;
62 | }
63 |
64 | @when required {
65 | .el-form-item__label:before {
66 | content: '*';
67 | color: var(--color-danger);
68 | margin-right: 4px;
69 | }
70 | }
71 |
72 | @when error {
73 | & .el-input__inner,
74 | & .el-textarea__inner {
75 | border-color: var(--color-danger);
76 | }
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/element-theme/README.md:
--------------------------------------------------------------------------------
1 | # element-theme
2 | [](https://travis-ci.org/ElementUI/element-theme)
3 | [](https://www.npmjs.com/package/element-theme)
4 |
5 | > Theme generator cli tool for Element.
6 |
7 | 
8 |
9 | ## Installation
10 | install local or global
11 | ```shell
12 | npm i element-theme -D
13 | ```
14 |
15 | install `theme-default`
16 | ```shell
17 | npm i element-theme-default -D
18 | # or from github
19 | npm i https://github.com/ElementUI/theme-default -D
20 | ```
21 |
22 | ## CLI
23 | ```shell
24 | # init variables file
25 | et --init [file path]
26 |
27 | # watch then build
28 | et --watch [--config variable file path] [--out theme path]
29 |
30 | # build
31 | et [--config variable file path] [--out theme path] [--minimize]
32 | ```
33 |
34 | ## Node API
35 | ```javascript
36 | var et = require('element-theme')
37 |
38 | // watch mode
39 | et.watch({
40 | config: 'variables/path',
41 | out: 'output/path'
42 | })
43 |
44 | // build
45 | et.run({
46 | config: 'variables/path',
47 | out: 'output/path',
48 | minimize: true
49 | })
50 | ```
51 |
52 | ## Options
53 | ### config
54 | Variable file path, default `./element-variables.css`.
55 |
56 | ### out
57 | Theme output path, default `./theme`.
58 |
59 | ### minimize
60 | Compressed file.
61 |
62 | ### browsers
63 | set browsers, default `['ie > 9', 'last 2 versions']`.
64 |
65 | ### watch
66 | watch variable file changes then build.
67 |
68 | ## Config
69 | You can configure some options in `element-theme` by putting it in package.json:
70 | ```json
71 | {
72 | "element-theme": {
73 | "browsers": ["ie > 9", "last 2 versions"],
74 | "out": "./theme",
75 | "config": "./element-variables.css",
76 | "minimize": false
77 | }
78 | }
79 | ```
80 |
81 | ## License
82 | MIT
83 |
--------------------------------------------------------------------------------
/element-theme-default/src/autocomplete.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./input.css";
3 | @import "./common/var.css";
4 |
5 | @component-namespace el {
6 | @b autocomplete {
7 | position: relative;
8 |
9 | @e suggestions {
10 | position: absolute;
11 | left: 0;
12 | top: 110%;
13 | margin: 0;
14 | background-color: #fff;
15 | border: 1px solid #D3DCE6;
16 | width: 100%;
17 | padding: 6px 0;
18 | z-index: 10;
19 | border-radius: 2px;
20 | max-height: 280px;
21 | box-sizing: border-box;
22 | overflow: auto;
23 | box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
24 |
25 | & li {
26 | list-style: none;
27 | line-height: 36px;
28 | padding: 0 10px;
29 | margin: 0;
30 | cursor: pointer;
31 | color: #475669;
32 | font-size: 14px;
33 | white-space: nowrap;
34 | overflow: hidden;
35 | text-overflow: ellipsis;
36 |
37 | &:hover {
38 | background-color: var(--select-option-hover-background);
39 | }
40 | &.highlighted {
41 | background-color: var(--color-primary);
42 | color: #fff;
43 | }
44 | &:active {
45 | background-color: darken(var(--color-primary), 0.2);
46 | }
47 | &.divider {
48 | margin-top: 6px;
49 | border-top: 1px solid #D3DCE6;
50 | }
51 | &.divider:last-child {
52 | margin-bottom: -6px;
53 | }
54 | }
55 |
56 | @when loading {
57 | li {
58 | text-align: center;
59 | height: 100px;
60 | line-height: 100px;
61 | font-size: 20px;
62 | color: #999;
63 | @utils-vertical-center;
64 |
65 | &:hover {
66 | background-color: #fff;
67 | }
68 | }
69 |
70 | & .el-icon-loading {
71 | vertical-align: middle;
72 | }
73 | }
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/element-theme-default/src/table-column.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./checkbox.css";
3 | @import "./tag.css";
4 | @import "./common/var.css";
5 |
6 | @component-namespace el {
7 | @b table-column {
8 | @m selection .cell {
9 | padding-left: 14px;
10 | padding-right: 14px;
11 | }
12 | }
13 |
14 | @b table-filter {
15 | border: solid 1px #d3dce6;
16 | border-radius: 2px;
17 | background-color: #fff;
18 | box-shadow: var(--dropdown-menu-box-shadow);
19 | box-sizing: border-box;
20 | margin: 2px 0;
21 |
22 | /** used for dropdown mode */
23 | @e list {
24 | padding: 5px 0;
25 | margin: 0;
26 | list-style: none;
27 | min-width: 100px;
28 | }
29 |
30 | @e list-item {
31 | line-height: 36px;
32 | padding: 0 10px;
33 | cursor: pointer;
34 | font-size: var(--font-size-base);
35 |
36 | &:hover {
37 | background-color: var(--dropdown-menuItem-hover-fill);
38 | color: var(--dropdown-menuItem-hover-color);
39 | }
40 |
41 | @when active {
42 | background-color: #20a0ff;
43 | color: #fff;
44 | }
45 | }
46 |
47 | @e content {
48 | min-width: 100px;
49 | }
50 |
51 | @e bottom {
52 | border-top: 1px solid #d3dce6;
53 | padding: 8px;
54 |
55 | button {
56 | background: transparent;
57 | border: none;
58 | color: #8492a6;
59 | cursor: pointer;
60 | font-size: var(--font-size-base);
61 | padding: 0 3px;
62 |
63 | &:hover {
64 | color: #20a0ff;
65 | }
66 |
67 | &:focus {
68 | outline: none;
69 | }
70 |
71 | &.is-disabled {
72 | color: #c0ccda;
73 | cursor: not-allowed;
74 | }
75 | }
76 | }
77 |
78 | @e checkbox-group {
79 | padding: 10px;
80 |
81 | .el-checkbox {
82 | display: block;
83 | margin-bottom: 8px;
84 | margin-left: 5px;
85 | }
86 |
87 | .el-checkbox:last-child {
88 | margin-bottom: 0;
89 | }
90 | }
91 | }
92 | }
--------------------------------------------------------------------------------
/src/view/Radio.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
20 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
34 |
35 |
39 |
40 |
41 |
3 |
50 |
51 |
52 |
66 |
67 |
69 |
--------------------------------------------------------------------------------
/element-theme-default/src/message.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b message {
7 | box-shadow: var(--message-shadow);
8 | min-width: var(--message-min-width);
9 | padding: var(--message-padding);
10 | box-sizing: border-box;
11 | border-radius: var(--border-radius-small);
12 | position: fixed;
13 | left: 50%;
14 | top: 20px;
15 | transform: translateX(-50%);
16 | background-color: #fff;
17 | transition: opacity 0.3s, transform .4s;
18 | overflow: hidden;
19 |
20 | @e group {
21 | margin-left: 38px;
22 | position: relative;
23 | height: 20px;
24 |
25 | @when with-icon {
26 | margin-left: 0;
27 | }
28 |
29 | & p {
30 | font-size: var(--font-size-base);
31 | line-height: 20px;
32 | margin: 0 34px 0 0;
33 | white-space: nowrap;
34 | color: var(--message-content-color);
35 | text-align: justify;
36 | display: inline-block;
37 | vertical-align: middle;
38 | }
39 | }
40 |
41 | @e img {
42 | size: var(--message-image-size);
43 | position: absolute;
44 | left: 0;
45 | top: 0;
46 | }
47 |
48 | @e icon {
49 | vertical-align: middle;
50 | margin-right: 8px;
51 | }
52 |
53 | @e closeBtn {
54 | position: absolute 3px 0 * *;
55 | cursor: pointer;
56 | color: var(--message-close-color);
57 | font-size: var(--font-size-base);
58 |
59 | &:hover {
60 | color: var(--message-close-hover-color);
61 | }
62 | }
63 |
64 | & .el-icon-circle-check {
65 | color: var(--message-success-color);
66 | }
67 |
68 | & .el-icon-circle-cross {
69 | color: var(--message-danger-color);
70 | }
71 |
72 | & .el-icon-information {
73 | color: var(--message-info-color);
74 | }
75 |
76 | & .el-icon-warning {
77 | color: var(--message-warning-color);
78 | }
79 | }
80 |
81 | .el-message-fade-enter,
82 | .el-message-fade-leave-active {
83 | opacity: 0;
84 | transform: translate(-50%, -100%);
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/view/Select.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | 备选项
7 | 备选项
8 | 备选项
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
34 |
35 |
36 |
48 |
49 |
37 |
38 |
39 |
45 |
46 |
47 |
3 |
4 |
54 |
55 |
56 |
82 |
83 |
88 |
--------------------------------------------------------------------------------
/element-theme-default/src/alert.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b alert {
7 | width: 100%;
8 | padding: var(--alert-padding);
9 | margin: 0;
10 | box-sizing: border-box;
11 | border-radius: var(--alert-border-radius);
12 | position: relative;
13 | background-color: var(--color-white);
14 | overflow: hidden;
15 | color: #fff;
16 | opacity: 1;
17 | display: table;
18 | transition: opacity .2s;
19 |
20 | @modifier success {
21 | background-color: var(--alert-success-color);
22 | }
23 |
24 | @modifier info {
25 | background-color: var(--alert-info-color);
26 | }
27 |
28 | @modifier warning {
29 | background-color: var(--alert-warning-color);
30 | }
31 |
32 | @modifier error {
33 | background-color: var(--alert-danger-color);
34 | }
35 |
36 | @e content {
37 | display: table-cell;
38 | padding: 0 8px;
39 | }
40 |
41 | @e icon {
42 | font-size: var(--alert-icon-size);
43 | width: var(--alert-icon-size);
44 | display: table-cell;
45 | color: var(--color-white);
46 | vertical-align: middle;
47 | @when big {
48 | font-size: var(--alert-icon-large-size);
49 | width: var(--alert-icon-large-size);
50 | }
51 | }
52 |
53 | @e title {
54 | font-size: var(--alert-title-font-size);
55 | line-height: 18px;
56 | @when bold {
57 | font-weight: bold;
58 | }
59 | }
60 |
61 | & .el-alert__description {
62 | color: #fff;
63 | font-size: var(--alert-description-font-size);
64 | margin: 5px 0 0 0;
65 | }
66 |
67 | @e closebtn {
68 | font-size: var(--alert-close-font-size);
69 | color: #fff;
70 | opacity: 1;
71 | position: absolute 12px 15px * *;
72 | cursor: pointer;
73 |
74 | @when customed {
75 | font-style: normal;
76 | font-size: var(--alert-close-customed-font-size);
77 | top: 9px;
78 | }
79 | }
80 | }
81 |
82 | .el-alert-fade-enter,
83 | .el-alert-fade-leave-active {
84 | opacity: 0;
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/element-theme-default/src/date-picker/time-picker.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 |
3 | @component-namespace el {
4 | @b time-panel {
5 | margin: 5px 0;
6 | border: solid 1px var(--datepicker-border-color);
7 | background-color: var(--color-white);
8 | box-shadow: var(--box-shadow-base);
9 | border-radius: 2px;
10 | position: absolute;
11 | width: 180px;
12 | left: 0;
13 | z-index: var(--index-top);
14 | user-select: none;
15 |
16 | @e content {
17 | font-size: 0;
18 | position: relative;
19 | overflow: hidden;
20 |
21 | &::after, &::before {
22 | content: ":";
23 | top: 50%;
24 | color: var(--color-white);
25 | position: absolute;
26 | font-size: 14px;
27 | margin-top: -15px;
28 | line-height: 16px;
29 | background-color: var(--datepicker-active-color);
30 | height: 32px;
31 | z-index: -1;
32 | left: 0;
33 | right: 0;
34 | box-sizing: border-box;
35 | padding-top: 6px;
36 | text-align: left;
37 | }
38 |
39 | &::after {
40 | left: 50%;
41 | margin-left: -2px;
42 | }
43 |
44 | &::before {
45 | padding-left: 50%;
46 | margin-right: -2px;
47 | }
48 |
49 | &.has-seconds {
50 | &::after {
51 | left: calc(100% / 3 * 2);
52 | }
53 |
54 | &::before {
55 | padding-left: calc(100% / 3);
56 | }
57 | }
58 | }
59 |
60 | @e footer {
61 | border-top: 1px solid var(--datepicker-inner-border-color);
62 | padding: 4px;
63 | height: 36px;
64 | line-height: 25px;
65 | text-align: right;
66 | box-sizing: border-box;
67 | }
68 |
69 | @e btn {
70 | border: none;
71 | line-height: 28px;
72 | padding: 0 5px;
73 | margin: 0 5px;
74 | cursor: pointer;
75 | background-color: transparent;
76 | outline: none;
77 | font-size: 12px;
78 | color: #8492a6;
79 |
80 | &.confirm {
81 | font-weight: 800;
82 | color: var(--datepicker-active-color);
83 | }
84 | }
85 |
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/element-theme-default/src/notification.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b notification {
7 | width: var(--notification-width);
8 | padding: var(--notification-padding);
9 | box-sizing: border-box;
10 | border-radius: var(--border-radius-small);
11 | position: fixed;
12 | right: 16px;
13 | background-color: #fff;
14 | box-shadow: var(--notification-shadow);
15 | transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
16 | overflow: hidden;
17 |
18 | @e group {
19 | margin-left: 0;
20 | @when with-icon {
21 | margin-left: var(--notification-with-icon-left);
22 | }
23 | & span {
24 | font-size: var(--notification-title-font-size);
25 | color: var(--notification-title-color);
26 | }
27 |
28 | & p {
29 | font-size: var(--notification-font-size);
30 | line-height: 21px;
31 | margin: 10px 0 0 0;
32 | color: var(--notification-color);
33 | text-align: justify;
34 | }
35 | }
36 |
37 | @e icon {
38 | size: var(--notification-icon-size);
39 | font-size: var(--notification-icon-size);
40 | float: left;
41 | position: absolute;
42 | top: 0;
43 | bottom:0;
44 | margin:auto 0;
45 | }
46 |
47 | @e closeBtn {
48 | position: absolute 20px 20px * *;
49 | cursor: pointer;
50 | color: var(--notification-close-color);
51 | font-size: var(--notification-font-size);
52 |
53 | &:hover {
54 | color: var(--notification-close-hover-color);
55 | }
56 | }
57 |
58 | & .el-icon-circle-check {
59 | color: var(--notification-success-color);
60 | }
61 |
62 | & .el-icon-circle-cross {
63 | color: var(--notification-danger-color);
64 | }
65 |
66 | & .el-icon-information {
67 | color: var(--notification-info-color);
68 | }
69 |
70 | & .el-icon-warning {
71 | color: var(--notification-warning-color);
72 | }
73 | }
74 |
75 | .el-notification-fade-enter {
76 | transform: translateX(100%);
77 | right: 0;
78 | }
79 |
80 | .el-notification-fade-leave-active {
81 | opacity: 0;
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/element-theme-default/lib/checkbox.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-checkbox,.el-checkbox__input{white-space:nowrap;cursor:pointer}.el-checkbox,.el-checkbox__inner,.el-checkbox__input{display:inline-block;position:relative}.el-checkbox{color:#1f2d3d;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-checkbox+.el-checkbox{margin-left:15px}.el-checkbox__input{outline:0;line-height:1;vertical-align:middle}.el-checkbox__inner{border:1px solid #c0ccda;border-radius:4px;box-sizing:border-box;width:18px;height:18px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:not(.is-disabled):hover{border-color:#20a0ff}.el-checkbox__inner::after{box-sizing:content-box;content:"";border:2px solid #fff;border-left:0;border-top:0;height:8px;left:5px;position:absolute;top:1px;-ms-transform:rotate(45deg) scaleY(0);transform:rotate(45deg) scaleY(0);width:4px;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;-ms-transform-origin:center;transform-origin:center}.el-checkbox__inner.is-disabled.is-checked{background-color:#D3DCE6;border-color:#D3DCE6}.el-checkbox__inner.is-disabled.is-checked::after{border-color:#fff}.el-checkbox__inner.is-disabled.is-indeterminate{background-color:#D3DCE6;border-color:#D3DCE6}.el-checkbox__inner.is-disabled.is-indeterminate::before{border-color:#fff}.el-checkbox__inner.is-indeterminate{background-color:#20a0ff;border-color:#2e90fe}.el-checkbox__inner.is-indeterminate::before{content:'';position:absolute;display:block;border:1px solid #fff;margin-top:-1px;left:3px;right:3px;top:50%}.el-checkbox__inner.is-indeterminate::after{display:none}.el-checkbox__inner.is-focus{border-color:#20a0ff}.el-checkbox__inner.is-checked{background-color:#20a0ff;border-color:#2e90fe}.el-checkbox__inner.is-checked::after{-ms-transform:rotate(45deg) scaleY(1);transform:rotate(45deg) scaleY(1)}.el-checkbox__inner.is-disabled{background-color:#EFF2F7;border-color:#D3DCE6;cursor:not-allowed}.el-checkbox__inner.is-disabled::after{cursor:not-allowed;border-color:#EFF2F7}.el-checkbox__inner.is-disabled+.el-checkbox__label{cursor:not-allowed}.el-checkbox__original{opacity:0;outline:0;position:absolute;margin:0;left:-999px}.el-checkbox__label{font-size:14px;padding-left:5px}
--------------------------------------------------------------------------------
/element-theme-default/lib/icon.css:
--------------------------------------------------------------------------------
1 | @font-face{font-family:element-icons;src:url(fonts/element-icons.eot?t=1472440741);src:url(fonts/element-icons.woff?t=1472440741) format('woff'),url(fonts/element-icons.ttf?t=1472440741) format('truetype'),url(fonts/element-icons.svg?t=1472440741#el-icon) format('svg');font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-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-loading{animation:rotating 1s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}
--------------------------------------------------------------------------------
/src/view/Button.vue:
--------------------------------------------------------------------------------
1 |
2 |
58 |
59 |
60 |
64 |
65 |
67 |
--------------------------------------------------------------------------------
/element-theme-default/src/col.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | .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 {
5 | float: left;
6 | box-sizing: border-box;
7 | }
8 |
9 | @for $i from 1 to 24 {
10 | .el-col-$i,
11 | .el-col-xs-$i {
12 | width: calc(1 / 24 * $(i) * 100)%;
13 | }
14 | .el-col-offset-$i,
15 | .el-col-xs-offset-$i {
16 | margin-left: calc(1 / 24 * $(i) * 100)%;
17 | }
18 | .el-col-pull-$i,
19 | .el-col-xs-pull-$i {
20 | position: relative;
21 | right: calc(1 / 24 * $(i) * 100)%;
22 | }
23 | .el-col-push-$i,
24 | .el-col-xs-push-$i {
25 | position: relative;
26 | left: calc(1 / 24 * $(i) * 100)%;
27 | }
28 | }
29 |
30 | @media (min-width: 768px) {
31 | @for $i from 1 to 24 {
32 | .el-col-sm-$i {
33 | width: calc(1 / 24 * $(i) * 100)%;
34 | }
35 | .el-col-sm-offset-$i {
36 | margin-left: calc(1 / 24 * $(i) * 100)%;
37 | }
38 | .el-col-sm-pull-$i {
39 | position: relative;
40 | right: calc(1 / 24 * $(i) * 100)%;
41 | }
42 | .el-col-sm-push-$i {
43 | position: relative;
44 | left: calc(1 / 24 * $(i) * 100)%;
45 | }
46 | }
47 | }
48 | @media (min-width: 992px) {
49 | @for $i from 1 to 24 {
50 | .el-col-md-$i {
51 | width: calc(1 / 24 * $(i) * 100)%;
52 | }
53 | .el-col-md-offset-$i {
54 | margin-left: calc(1 / 24 * $(i) * 100)%;
55 | }
56 | .el-col-md-pull-$i {
57 | position: relative;
58 | right: calc(1 / 24 * $(i) * 100)%;
59 | }
60 | .el-col-md-push-$i {
61 | position: relative;
62 | left: calc(1 / 24 * $(i) * 100)%;
63 | }
64 | }
65 | }
66 | @media (min-width: 1200px) {
67 | @for $i from 1 to 24 {
68 | .el-col-lg-$i {
69 | width: calc(1 / 24 * $(i) * 100)%;
70 | }
71 | .el-col-lg-offset-$i {
72 | margin-left: calc(1 / 24 * $(i) * 100)%;
73 | }
74 | .el-col-lg-pull-$i {
75 | position: relative;
76 | right: calc(1 / 24 * $(i) * 100)%;
77 | }
78 | .el-col-lg-push-$i {
79 | position: relative;
80 | left: calc(1 / 24 * $(i) * 100)%;
81 | }
82 | }
83 | }
--------------------------------------------------------------------------------
/element-theme-default/lib/step.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-step.is-horizontal,.el-step.is-vertical .el-step__head,.el-step.is-vertical .el-step__main,.el-step__line{display:inline-block}.el-step{position:relative;vertical-align:top}.el-step.is-vertical .el-step__main{padding-left:10px}.el-step__line{position:absolute;border-color:inherit;background-color:#c0ccda}.el-step__line.is-vertical{width:2px;box-sizing:border-box;top:32px;bottom:0;left:15px}.el-step__line.is-horizontal{top:15px;height:2px;left:32px;right:0}.el-step__line.is-icon.is-horizontal{right:4px}.el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;transition:all 150ms;width:0;height:0}.el-step__icon{display:block;line-height:28px}.el-step__icon>*{line-height:inherit;vertical-align:middle}.el-step__head{width:28px;height:28px;border-radius:50%;background-color:transparent;text-align:center;line-height:28px;font-size:28px;vertical-align:top;transition:all 150ms}.el-step__head.is-finish{color:#20a0ff;border-color:#20a0ff}.el-step__head.is-error{color:#ff4949;border-color:#ff4949}.el-step__head.is-success{color:#13ce66;border-color:#13ce66}.el-step__head.is-process,.el-step__head.is-wait{color:#c0ccda;border-color:#c0ccda}.el-step__head.is-text{font-size:14px;border-width:2px;border-style:solid}.el-step__head.is-text.is-finish{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-step__head.is-text.is-error{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-step__head.is-text.is-success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-step__head.is-text.is-wait{color:#c0ccda;background-color:#fff;border-color:#c0ccda}.el-step__head.is-text.is-process{color:#fff;background-color:#c0ccda;border-color:#c0ccda}.el-step__main{white-space:normal;padding-right:10px;text-align:left}.el-step__title{font-size:14px;line-height:32px;display:inline-block}.el-step__title.is-finish{font-weight:700;color:#20a0ff}.el-step__title.is-error{font-weight:700;color:#ff4949}.el-step__title.is-success{font-weight:700;color:#13ce66}.el-step__title.is-wait{font-weight:400;color:#99a9bf}.el-step__title.is-process{font-weight:700;color:#475669}.el-step__description{font-size:12px;font-weight:400;line-height:14px}.el-step__description.is-finish{color:#20a0ff}.el-step__description.is-error{color:#ff4949}.el-step__description.is-success{color:#13ce66}.el-step__description.is-wait{color:#c0ccda}.el-step__description.is-process{color:#8492a6}
--------------------------------------------------------------------------------
/element-theme-default/src/dialog.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 | @import "vue-popup/lib/popup.css";
4 |
5 | @component-namespace el {
6 |
7 | @b dialog {
8 | position: absolute;
9 | left: 50%;
10 | transform: translateX(-50%);
11 | background: #fff;
12 | border-radius: var(--border-radius-small);
13 | box-shadow: var(--dialog-box-shadow);
14 | box-sizing: border-box;
15 |
16 | @modifier tiny {
17 | width: var(--dialog-tiny-width);
18 | }
19 |
20 | @modifier small {
21 | width: var(--dialog-small-width);
22 | }
23 |
24 | @modifier large {
25 | width: var(--dialog-large-width);
26 | }
27 |
28 | @modifier full {
29 | width: 100%;
30 | top: 0;
31 | height: 100%;
32 | overflow: auto;
33 | }
34 |
35 | @e wrapper {
36 | position: fixed 0 0 0 0;
37 | overflow: auto;
38 | margin: 0;
39 | }
40 |
41 | @e header {
42 | padding: var(--dialog-header-padding);
43 | }
44 |
45 | @e close {
46 | cursor: pointer;
47 | color: var(--dialog-close-color);
48 |
49 | &:hover {
50 | color: var(--dialog-close-hover-color);
51 | }
52 | }
53 |
54 | @e title {
55 | line-height: 1;
56 | font-size: var(--dialog-title-font-size);
57 | font-weight: bold;
58 | color: var(--dialog-title-color);
59 | }
60 |
61 | @e body {
62 | padding: var(--dialog-body-padding);
63 | color: var(--dialog-body-color);
64 | font-size: var(--dialog-font-size);
65 | }
66 |
67 | @e headerbtn {
68 | float: right;
69 | }
70 |
71 | @e footer {
72 | padding: 10px 20px 15px;
73 | text-align: right;
74 | box-sizing: border-box;
75 | }
76 | }
77 |
78 | .dialog-fade-enter-active {
79 | animation: dialog-fade-in .3s;
80 | }
81 |
82 | .dialog-fade-leave-active {
83 | animation: dialog-fade-out .3s;
84 | }
85 |
86 | @keyframes dialog-fade-in {
87 | 0% {
88 | transform: translate3d(0, -20px, 0);
89 | opacity: 0;
90 | }
91 | 100% {
92 | transform: translate3d(0, 0, 0);
93 | opacity: 1;
94 | }
95 | }
96 |
97 | @keyframes dialog-fade-out {
98 | 0% {
99 | transform: translate3d(0, 0, 0);
100 | opacity: 1;
101 | }
102 | 100% {
103 | transform: translate3d(0, -20px, 0);
104 | opacity: 0;
105 | }
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/element-theme-default/lib/tooltip.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-tooltip,.el-tooltip__rel{display:inline-block}.el-tooltip__rel{position:relative}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow::after{content:" ";border-width:5px}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow::after{bottom:1px;margin-left:-5px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=bottom] .popper__arrow::after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow::after{bottom:-5px;left:1px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper[x-placement^=left] .popper__arrow::after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper.is-light{background:#fff;border:1px solid #1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow::after{border-top-color:#fff}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow::after{border-bottom-color:#fff}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow::after{border-left-color:#fff}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow::after{border-right-color:#fff}.el-tooltip__popper.is-dark{background:#1f2d3d;color:#fff}
--------------------------------------------------------------------------------
/element-theme-default/src/date-picker/date-range-picker.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 |
3 | @component-namespace el {
4 | @b date-range-picker {
5 | min-width: 520px;
6 |
7 | &.has-sidebar.has-time {
8 | min-width: 766px;
9 | }
10 |
11 | &.has-sidebar {
12 | min-width: 620px;
13 | }
14 |
15 | &.has-time {
16 | min-width: 660px;
17 | }
18 |
19 | table {
20 | table-layout: fixed;
21 | width: 100%;
22 | }
23 |
24 | .el-picker-panel__body {
25 | min-width: 513px;
26 | }
27 |
28 | .el-picker-panel__content {
29 | margin: 0;
30 | }
31 |
32 | @e header {
33 | position: relative;
34 | text-align: center;
35 | height: 28px;
36 |
37 | button {
38 | float: left;
39 | }
40 |
41 | div {
42 | font-size: 14px;
43 | margin-right: 50px;
44 | }
45 | }
46 |
47 | @e content {
48 | float: left;
49 | width: 50%;
50 | box-sizing: border-box;
51 | margin: 0;
52 | padding: 16px;
53 |
54 | @when left {
55 | border-right: 1px solid var(--datepicker-inner-border-color);
56 | }
57 |
58 | @when right {
59 | .el-date-range-picker__header {
60 | button {
61 | float: right;
62 | }
63 |
64 | div {
65 | margin-left: 50px;
66 | margin-right: 50px;
67 | }
68 | }
69 | }
70 | }
71 |
72 | @e editors-wrap {
73 | box-sizing: border-box;
74 | display: table-cell;
75 |
76 | @when right {
77 | text-align: right;
78 | }
79 | }
80 |
81 | @e time-header {
82 | position: relative;
83 | border-bottom: 1px solid var(--datepicker-inner-border-color);
84 | font-size: 12px;
85 | padding: 8px 5px 5px 5px;
86 | display: table;
87 | width: 100%;
88 | box-sizing: border-box;
89 |
90 | > .el-icon-arrow-right {
91 | font-size: 20px;
92 | vertical-align: middle;
93 | display: table-cell;
94 | color: var(--datepicker-icon-color);
95 | }
96 | }
97 |
98 | @e time-picker-wrap {
99 | position: relative;
100 | display: table-cell;
101 | padding: 0 5px;
102 |
103 | .el-picker-panel {
104 | position: absolute;
105 | top: 13px;
106 | right: 0;
107 | z-index: 1;
108 | background: var(--color-white);
109 | }
110 | }
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/element-theme-default/src/input-number.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./input.css";
3 | @import "./common/var.css";
4 |
5 | @component-namespace el {
6 | @b input-number {
7 | display: inline-block;
8 | overflow: hidden;
9 | width: 180px;
10 | position: relative;
11 |
12 | & .el-input__inner {
13 | appearance: none;
14 | padding-right: calc(var(--input-height) * 2 + 10);
15 | }
16 | @e increase, decrease {
17 | height: auto;
18 | border-left: var(--border-base);
19 | width: var(--input-height);
20 | line-height: calc(var(--input-height) - 2);
21 | top: 1px;
22 | text-align: center;
23 | color: #99A9BF;
24 | cursor: pointer;
25 | position: absolute;
26 |
27 | &:hover {
28 | color: var(--color-primary);
29 | }
30 |
31 | @when disabled {
32 | color: var(--disabled-border-base);
33 | cursor: not-allowed;
34 | }
35 | }
36 |
37 | @e increase {
38 | right: 0;
39 | }
40 | @e decrease {
41 | right: calc(var(--input-height) + 1px);
42 | }
43 |
44 | @when disabled {
45 | & .el-input-number__increase, .el-input-number__decrease {
46 | border-color: var(--disabled-border-base);
47 | color: var(--disabled-border-base);
48 |
49 | &:hover {
50 | color: var(--disabled-border-base);
51 | cursor: not-allowed;
52 | }
53 | }
54 | }
55 | @m large {
56 | width: 200px;
57 |
58 | & .el-input-number__increase, .el-input-number__decrease {
59 | line-height: var(--input-large-height);
60 | width: var(--input-large-height);
61 | font-size: var(--input-large-font-size);
62 | }
63 | & .el-input-number__decrease {
64 | right: calc(var(--input-large-height) + 1px);
65 | }
66 | & .el-input__inner {
67 | padding-right: calc(var(--input-large-height) * 2 + 10);
68 | }
69 | }
70 | @m small {
71 | width: 130px;
72 |
73 | & .el-input-number__increase, .el-input-number__decrease {
74 | line-height: var(--input-small-height);
75 | width: var(--input-small-height);
76 | font-size: var(--input-small-font-size);
77 | }
78 | & .el-input-number__decrease {
79 | right: calc(var(--input-small-height) + 1px);
80 | }
81 | & .el-input__inner {
82 | padding-right: calc(var(--input-small-height) * 2 + 10);
83 | }
84 | }
85 | @when without-controls {
86 | & .el-input__inner {
87 | padding-right: 10px;
88 | }
89 | }
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/element-theme-default/src/tree.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 | @b tree {
6 | cursor: default;
7 | background: #ffffff;
8 | border: 1px solid #d3dce6;
9 |
10 | @e empty-block {
11 | position: relative;
12 | min-height: 60px;
13 | text-align: center;
14 | width: 100%;
15 | height: 100%;
16 | }
17 |
18 | @e empty-text {
19 | position: absolute;
20 | left: 50%;
21 | top: 50%;
22 | transform: translate(-50%, -50%);
23 | color: #5e6d82;
24 | }
25 | }
26 |
27 | @b tree-node {
28 | white-space: nowrap;
29 |
30 | @e content {
31 | line-height: 36px;
32 | height: 36px;
33 | cursor: pointer;
34 |
35 | & > .el-checkbox,
36 | & > .el-tree-node__expand-icon {
37 | margin-right: 8px;
38 | }
39 | & > .el-checkbox {
40 | vertical-align: middle;
41 | }
42 | &:hover {
43 | background: #e5e9f2;
44 | }
45 | }
46 |
47 | @e expand-icon {
48 | display: inline-block;
49 | cursor: pointer;
50 | width: 0;
51 | height: 0;
52 | vertical-align: middle;
53 | margin-left: 10px;
54 | border: 6px solid transparent;
55 | border-right-width: 0;
56 | border-left-color: #99a9bf;
57 | border-left-width: 7px;
58 |
59 | transform: rotate(0deg);
60 | transition: transform 0.3s ease-in-out;
61 |
62 | &:hover {
63 | border-left-color: #999;
64 | }
65 |
66 | &.expanded {
67 | transform: rotate(90deg);
68 | }
69 |
70 | &.is-leaf {
71 | border-color: transparent;
72 | cursor: default;
73 | }
74 | }
75 |
76 | @e label {
77 | font-size: 14px;
78 | vertical-align: middle;
79 | display: inline-block;
80 | }
81 |
82 | @e loading-icon {
83 | display: inline-block;
84 | vertical-align: middle;
85 | margin-right: 4px;
86 | font-size: 14px;
87 | color: #99a9bf;
88 | }
89 |
90 | & > .el-tree-node__children {
91 | overflow: hidden;
92 | background-color: transparent;
93 | /** padding-left: 16px; */
94 | display: none;
95 | }
96 |
97 | &.is-expanded > .el-tree-node__children {
98 | display: block;
99 | }
100 | }
101 | }
102 |
103 | .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
104 | background-color: #eff7ff;
105 | }
106 |
107 | .collapse-transition {
108 | transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
109 | }
110 |
--------------------------------------------------------------------------------
/element-theme-default/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "_args": [
3 | [
4 | "element-theme-default@^1.0.7",
5 | "/home/mro/代码/make-element-ui-theme"
6 | ]
7 | ],
8 | "_from": "element-theme-default@>=1.0.7 <2.0.0",
9 | "_id": "element-theme-default@1.0.7",
10 | "_inCache": true,
11 | "_installable": true,
12 | "_location": "/element-theme-default",
13 | "_nodeVersion": "6.6.0",
14 | "_npmOperationalInternal": {
15 | "host": "packages-18-east.internal.npmjs.com",
16 | "tmp": "tmp/element-theme-default-1.0.7.tgz_1481700978238_0.8416986416559666"
17 | },
18 | "_npmUser": {
19 | "email": "leopoldthecuber@gmail.com",
20 | "name": "yi.yang"
21 | },
22 | "_npmVersion": "3.10.3",
23 | "_phantomChildren": {},
24 | "_requested": {
25 | "name": "element-theme-default",
26 | "raw": "element-theme-default@^1.0.7",
27 | "rawSpec": "^1.0.7",
28 | "scope": null,
29 | "spec": ">=1.0.7 <2.0.0",
30 | "type": "range"
31 | },
32 | "_requiredBy": [
33 | "#DEV:/"
34 | ],
35 | "_resolved": "https://registry.npmjs.org/element-theme-default/-/element-theme-default-1.0.7.tgz",
36 | "_shasum": "91456f346e4f67ef9ce41af3e8137c58e77af71b",
37 | "_shrinkwrap": null,
38 | "_spec": "element-theme-default@^1.0.7",
39 | "_where": "/home/mro/代码/make-element-ui-theme",
40 | "author": {
41 | "email": "qingwei.li@ele.me",
42 | "name": "haiping.zeng"
43 | },
44 | "bugs": {
45 | "url": "https://github.com/ElementUI/theme-default/issues"
46 | },
47 | "dependencies": {
48 | "vue-popup": "^0.2.9"
49 | },
50 | "description": "Element component default theme.",
51 | "devDependencies": {
52 | "gulp": "^3.9.1",
53 | "gulp-cssmin": "^0.1.7",
54 | "gulp-postcss": "^6.1.1",
55 | "postcss-salad": "^1.0.5"
56 | },
57 | "directories": {},
58 | "dist": {
59 | "shasum": "91456f346e4f67ef9ce41af3e8137c58e77af71b",
60 | "tarball": "https://registry.npmjs.org/element-theme-default/-/element-theme-default-1.0.7.tgz"
61 | },
62 | "files": [
63 | "lib",
64 | "src"
65 | ],
66 | "homepage": "https://github.com/ElementUI/theme-default#readme",
67 | "keywords": [
68 | "element",
69 | "theme"
70 | ],
71 | "license": "MIT",
72 | "main": "lib/index.css",
73 | "maintainers": [
74 | {
75 | "name": "qingwei.li",
76 | "email": "cinwell.li@gmail.com"
77 | }
78 | ],
79 | "name": "element-theme-default",
80 | "optionalDependencies": {},
81 | "readme": "ERROR: No README data found!",
82 | "repository": {
83 | "type": "git",
84 | "url": "git+https://github.com/ElementUI/theme-default.git"
85 | },
86 | "scripts": {
87 | "build": "gulp build"
88 | },
89 | "style": "lib/index.css",
90 | "version": "1.0.7"
91 | }
92 |
--------------------------------------------------------------------------------
/src/theme/steps.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | :root{
3 | /* Transition
4 | -------------------------- */
5 | /* Colors drak
6 | -------------------------- */
7 | /* Colors tin
8 | -------------------------- */
9 | /* Colors
10 | -------------------------- */
11 | /* Background color
12 | -------------------------- */
13 | /* Border
14 | -------------------------- */
15 | /* Box-shadow
16 | -------------------------- */
17 | /* Fill
18 | -------------------------- */
19 | /* Font
20 | -------------------------- */
21 | /* Size
22 | -------------------------- */
23 | /* z-index
24 | -------------------------- */
25 | /* Disable base
26 | -------------------------- */
27 | /* Icon
28 | -------------------------- */
29 | /* Checkbox
30 | -------------------------- */
31 | /* Radio
32 | -------------------------- */
33 | /* Select
34 | -------------------------- */
35 | /* Alert
36 | -------------------------- */
37 | /* Message Box
38 | -------------------------- */
39 | /* Message
40 | -------------------------- */
41 | /* Notification
42 | -------------------------- */
43 | /* Input
44 | -------------------------- */
45 | /* Cascader
46 | -------------------------- */
47 | /* Group
48 | -------------------------- */
49 | /* Tab
50 | -------------------------- */
51 | /* Button
52 | -------------------------- */
53 | /* cascader
54 | -------------------------- */
55 | /* Switch
56 | -------------------------- */
57 | /* Dialog
58 | -------------------------- */
59 | /* Table
60 | -------------------------- */
61 | /* Pagination
62 | -------------------------- */
63 | /* Popover
64 | -------------------------- */
65 | /* Tooltip
66 | -------------------------- */
67 | /* Tag
68 | -------------------------- */
69 | /* Dropdown
70 | -------------------------- */
71 | /* Badge
72 | -------------------------- */
73 | /* Card
74 | --------------------------*/
75 | /* Slider
76 | --------------------------*/
77 | /* Steps
78 | --------------------------*/
79 | /* NavMenu
80 | --------------------------*/
81 | /* Tabs
82 | --------------------------*/
83 | /* Rate
84 | --------------------------*/
85 | /* DatePicker
86 | --------------------------*/
87 | /* Loading
88 | --------------------------*/
89 | /* Breadcrumd
90 | --------------------------*/
91 | /* Form
92 | --------------------------*/
93 | }
94 |
95 | .el-steps{
96 | font-size: 0;
97 | }
98 |
99 | .el-steps > :last-child .el-step__line{
100 | display: none;
101 | }
102 |
103 | .el-steps.is-horizontal{
104 | white-space: nowrap;
105 | }
106 |
--------------------------------------------------------------------------------
/src/theme/element-variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 |
3 | /* Transition
4 | -------------------------- */
5 |
6 | /* Colors drak
7 | -------------------------- */
8 |
9 |
10 | /* Colors tin
11 | -------------------------- */
12 |
13 | /* Colors
14 | -------------------------- */
15 |
16 | /* Background color
17 | -------------------------- */
18 |
19 | /* Border
20 | -------------------------- */
21 |
22 | /* Box-shadow
23 | -------------------------- */
24 |
25 | /* Fill
26 | -------------------------- */
27 |
28 | /* Font
29 | -------------------------- */
30 |
31 | /* Size
32 | -------------------------- */
33 |
34 | /* z-index
35 | -------------------------- */
36 |
37 | /* Disable base
38 | -------------------------- */
39 |
40 | /* Icon
41 | -------------------------- */
42 |
43 | /* Checkbox
44 | -------------------------- */
45 |
46 | /* Radio
47 | -------------------------- */
48 |
49 | /* Select
50 | -------------------------- */
51 |
52 | /* Alert
53 | -------------------------- */
54 |
55 | /* Message Box
56 | -------------------------- */
57 |
58 | /* Message
59 | -------------------------- */
60 |
61 | /* Notification
62 | -------------------------- */
63 |
64 | /* Input
65 | -------------------------- */
66 |
67 | /* Cascader
68 | -------------------------- */
69 |
70 | /* Group
71 | -------------------------- */
72 |
73 | /* Tab
74 | -------------------------- */
75 |
76 | /* Button
77 | -------------------------- */
78 |
79 |
80 | /* cascader
81 | -------------------------- */
82 |
83 | /* Switch
84 | -------------------------- */
85 |
86 | /* Dialog
87 | -------------------------- */
88 |
89 | /* Table
90 | -------------------------- */
91 |
92 | /* Pagination
93 | -------------------------- */
94 |
95 | /* Popover
96 | -------------------------- */
97 |
98 | /* Tooltip
99 | -------------------------- */
100 |
101 | /* Tag
102 | -------------------------- */
103 |
104 | /* Dropdown
105 | -------------------------- */
106 |
107 | /* Badge
108 | -------------------------- */
109 |
110 | /* Card
111 | --------------------------*/
112 |
113 | /* Slider
114 | --------------------------*/
115 |
116 | /* Steps
117 | --------------------------*/
118 |
119 |
120 | /* NavMenu
121 | --------------------------*/
122 |
123 |
124 | /* Tabs
125 | --------------------------*/
126 |
127 |
128 | /* Rate
129 | --------------------------*/
130 |
131 | /* DatePicker
132 | --------------------------*/
133 |
134 | /* Loading
135 | --------------------------*/
136 |
137 | /* Breadcrumd
138 | --------------------------*/
139 |
140 | /* Form
141 | --------------------------*/
142 | }
143 |
--------------------------------------------------------------------------------
/element-theme-default/src/progress.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 | @b progress {
6 | position: relative;
7 | line-height: 1;
8 |
9 | @e text {
10 | font-size:14px;
11 | color:#475669;
12 | display: inline-block;
13 | vertical-align: middle;
14 | margin-left: 10px;
15 | line-height: 1;
16 |
17 | i {
18 | vertical-align: middle;
19 | display: block;
20 | }
21 | }
22 | @m circle {
23 | display: inline-block;
24 |
25 | .el-progress__text {
26 | position: absolute;
27 | top: 50%;
28 | left: 0;
29 | width: 100%;
30 | text-align: center;
31 | margin: 0;
32 | transform: translate(0, -50%);
33 |
34 | i {
35 | vertical-align: middle;
36 | display: inline-block;
37 | }
38 | }
39 | }
40 | @m without-text {
41 | .el-progress__text {
42 | display: none;
43 | }
44 | .el-progress-bar {
45 | padding-right: 0;
46 | margin-right: 0;
47 | display: block;
48 | }
49 | }
50 | @m text-inside {
51 | .el-progress-bar {
52 | padding-right: 0;
53 | margin-right: 0;
54 | }
55 | }
56 | @when success {
57 | .el-progress-bar__inner {
58 | background-color: var(--color-success);
59 | }
60 | .el-progress__text {
61 | color: var(--color-success);
62 | }
63 | }
64 | @when exception {
65 | .el-progress-bar__inner {
66 | background-color: var(--color-danger);
67 | }
68 | .el-progress__text {
69 | color: var(--color-danger);
70 | }
71 | }
72 | }
73 | @b progress-bar {
74 | padding-right: 50px;
75 | display: inline-block;
76 | vertical-align: middle;
77 | width: 100%;
78 | margin-right: -55px;
79 | box-sizing: border-box;
80 |
81 | @e outer {
82 | height: 6px;
83 | border-radius: 100px;
84 | background-color: #e5e9f2;
85 | overflow: hidden;
86 | position: relative;
87 | vertical-align: middle;
88 | }
89 | @e inner {
90 | position: absolute;
91 | left: 0;
92 | top: 0;
93 | height: 100%;
94 | border-radius: 2px 0 0 2px;
95 | background-color: var(--color-primary);
96 | text-align: right;
97 | border-radius: 100px;
98 | line-height: 1;
99 |
100 | @utils-vertical-center;
101 | }
102 | @e innerText {
103 | display: inline-block;
104 | vertical-align: middle;
105 | color: #fff;
106 | font-size: 12px;
107 | margin: 0 5px;
108 | }
109 | }
110 | }
111 |
112 | @keyframes progress {
113 | 0% {
114 | background-position: 0 0;
115 | }
116 | 100% {
117 | background-position: 32px 0;
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/element-theme-default/lib/radio.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-radio-button__inner,.el-radio__input{line-height:1;vertical-align:middle;outline:0}.el-radio,.el-radio__inner,.el-radio__input{position:relative;cursor:pointer}.el-radio-button__inner,.el-radio__inner{border:1px solid #c0ccda;box-sizing:border-box}.el-radio,.el-radio-button__inner{display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio{color:#1f2d3d}.el-radio+.el-radio{margin-left:15px}.el-radio__input{white-space:nowrap;display:inline-block}.el-radio__inner{width:18px;height:18px;border-radius:50%;background-color:#fff;display:inline-block}.el-radio__inner:not(.is-disabled):hover{border-color:#20a0ff}.el-radio__inner::after{width:6px;height:6px;border-radius:50%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;-ms-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(.71,-.46,.88,.6)}.el-radio__inner.is-disabled.is-checked{background-color:#D3DCE6;border-color:#D3DCE6}.el-radio__inner.is-disabled.is-checked::after{background-color:#fff}.el-radio__inner.is-focus{border-color:#20a0ff}.el-radio__inner.is-checked{border-color:#20a0ff;background:#20a0ff}.el-radio__inner.is-disabled,.el-radio__inner.is-disabled::after{background-color:#EFF2F7;cursor:not-allowed}.el-radio__inner.is-checked::after{-ms-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.el-radio__inner.is-disabled{border-color:#D3DCE6}.el-radio__inner.is-disabled+.el-radio__label{cursor:not-allowed}.el-radio__original{opacity:0;outline:0;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio__label{font-size:14px;padding-left:5px}.el-radio-group{display:inline-block;font-size:0;line-height:1}.el-radio-group .el-radio{font-size:14px}.el-radio-button{position:relative;overflow:hidden;display:inline-block}.el-radio-button:not(:last-child){margin-right:-1px}.el-radio-button:first-child .el-radio-button__inner{border-radius:4px 0 0 4px}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-radio-button__inner{background:#fff;color:#1F2D3D;-webkit-appearance:none;text-align:center;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:10px 15px;font-size:14px;border-radius:0}.el-radio-button__inner:hover{color:#20a0ff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button__orig-radio{opacity:0;outline:0;position:absolute;z-index:-1;left:-999px}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#c0ccda;cursor:not-allowed;background-image:none;background-color:#EFF2F7;border-color:#D3DCE6}.el-radio-button--large .el-radio-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-radio-button--small .el-radio-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner{padding:4px;font-size:12px;border-radius:0}
--------------------------------------------------------------------------------
/src/theme/card.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | :root{
3 | /* Transition
4 | -------------------------- */
5 | /* Colors drak
6 | -------------------------- */
7 | /* Colors tin
8 | -------------------------- */
9 | /* Colors
10 | -------------------------- */
11 | /* Background color
12 | -------------------------- */
13 | /* Border
14 | -------------------------- */
15 | /* Box-shadow
16 | -------------------------- */
17 | /* Fill
18 | -------------------------- */
19 | /* Font
20 | -------------------------- */
21 | /* Size
22 | -------------------------- */
23 | /* z-index
24 | -------------------------- */
25 | /* Disable base
26 | -------------------------- */
27 | /* Icon
28 | -------------------------- */
29 | /* Checkbox
30 | -------------------------- */
31 | /* Radio
32 | -------------------------- */
33 | /* Select
34 | -------------------------- */
35 | /* Alert
36 | -------------------------- */
37 | /* Message Box
38 | -------------------------- */
39 | /* Message
40 | -------------------------- */
41 | /* Notification
42 | -------------------------- */
43 | /* Input
44 | -------------------------- */
45 | /* Cascader
46 | -------------------------- */
47 | /* Group
48 | -------------------------- */
49 | /* Tab
50 | -------------------------- */
51 | /* Button
52 | -------------------------- */
53 | /* cascader
54 | -------------------------- */
55 | /* Switch
56 | -------------------------- */
57 | /* Dialog
58 | -------------------------- */
59 | /* Table
60 | -------------------------- */
61 | /* Pagination
62 | -------------------------- */
63 | /* Popover
64 | -------------------------- */
65 | /* Tooltip
66 | -------------------------- */
67 | /* Tag
68 | -------------------------- */
69 | /* Dropdown
70 | -------------------------- */
71 | /* Badge
72 | -------------------------- */
73 | /* Card
74 | --------------------------*/
75 | /* Slider
76 | --------------------------*/
77 | /* Steps
78 | --------------------------*/
79 | /* NavMenu
80 | --------------------------*/
81 | /* Tabs
82 | --------------------------*/
83 | /* Rate
84 | --------------------------*/
85 | /* DatePicker
86 | --------------------------*/
87 | /* Loading
88 | --------------------------*/
89 | /* Breadcrumd
90 | --------------------------*/
91 | /* Form
92 | --------------------------*/
93 | }
94 |
95 | .el-card{
96 | border: 1px solid #d9d9d9;
97 | border-radius: 2px;
98 | background-color: #fff;
99 | overflow: hidden;
100 | box-shadow: none
101 | }
102 |
103 | .el-card__header{
104 | padding: 10px 20px;
105 | border-bottom: 1px solid #d9d9d9;
106 | box-sizing: border-box
107 | }
108 |
109 | .el-card__body{
110 | padding: 20px
111 | }
112 |
--------------------------------------------------------------------------------
/element-theme-default/src/date-picker/picker-panel.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 |
3 | @component-namespace el {
4 | @b picker-panel {
5 | color: var(--datepicker-color);
6 | border: 1px solid var(--datepicker-border-color);
7 | box-shadow: 0 2px 6px #ccc;
8 | background: #fff;
9 | border-radius: 2px;
10 | line-height: 20px;
11 | margin: 5px 0;
12 |
13 | @e body, body-wrapper {
14 | &::after {
15 | content: "";
16 | display: table;
17 | clear: both;
18 | }
19 | }
20 |
21 | @e content {
22 | position: relative;
23 | margin: 15px;
24 | }
25 |
26 | @e footer {
27 | border-top: 1px solid var(--datepicker-inner-border-color);
28 | padding: 4px;
29 | text-align: right;
30 | background-color: #fff;
31 | position: relative;
32 | }
33 |
34 | @e shortcut {
35 | display: block;
36 | width: 100%;
37 | border: 0;
38 | background-color: transparent;
39 | line-height: 28px;
40 | font-size: 14px;
41 | color: var(--datepicker-color);
42 | padding-left: 12px;
43 | text-align: left;
44 | outline: none;
45 | cursor: pointer;
46 |
47 | &:hover {
48 | background-color: var(--datepicker-cell-hover-color);
49 | }
50 |
51 | &.active {
52 | background-color: #e6f1fe;
53 | color: var(--datepicker-active-color);
54 | }
55 | }
56 |
57 | @e btn {
58 | border: 1px solid #dcdcdc;
59 | color: #333;
60 | line-height: 24px;
61 | border-radius: 2px;
62 | padding: 0 20px;
63 | cursor: pointer;
64 | background-color: transparent;
65 | outline: none;
66 | font-size: 12px;
67 |
68 | &[disabled] {
69 | color: #cccccc;
70 | cursor: not-allowed;
71 | }
72 | }
73 |
74 | @e icon-btn {
75 | font-size: 12px;
76 | color: var(--datepicker-icon-color);
77 | border: 0;
78 | background: transparent;
79 | cursor: pointer;
80 | outline: none;
81 | margin-top: 3px;
82 |
83 | &:hover {
84 | color: var(--datepicker-text-hover-color);
85 | }
86 | }
87 |
88 | @e link-btn {
89 | cursor: pointer;
90 | color: var(--color-primary);
91 | text-decoration: none;
92 | padding: 15px;
93 | font-size: 12px;
94 | }
95 | }
96 |
97 | .el-picker-panel *[slot=sidebar],
98 | .el-picker-panel__sidebar {
99 | position: absolute;
100 | top: 0;
101 | bottom: 0;
102 | width: 110px;
103 | border-right: 1px solid var(--datepicker-inner-border-color);
104 | box-sizing: border-box;
105 | padding-top: 6px;
106 | background-color: #f9fafc;
107 | }
108 |
109 | .el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
110 | .el-picker-panel__sidebar + .el-picker-panel__body {
111 | margin-left: 110px;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/src/theme/option-group.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | :root{
3 | /* Transition
4 | -------------------------- */
5 | /* Colors drak
6 | -------------------------- */
7 | /* Colors tin
8 | -------------------------- */
9 | /* Colors
10 | -------------------------- */
11 | /* Background color
12 | -------------------------- */
13 | /* Border
14 | -------------------------- */
15 | /* Box-shadow
16 | -------------------------- */
17 | /* Fill
18 | -------------------------- */
19 | /* Font
20 | -------------------------- */
21 | /* Size
22 | -------------------------- */
23 | /* z-index
24 | -------------------------- */
25 | /* Disable base
26 | -------------------------- */
27 | /* Icon
28 | -------------------------- */
29 | /* Checkbox
30 | -------------------------- */
31 | /* Radio
32 | -------------------------- */
33 | /* Select
34 | -------------------------- */
35 | /* Alert
36 | -------------------------- */
37 | /* Message Box
38 | -------------------------- */
39 | /* Message
40 | -------------------------- */
41 | /* Notification
42 | -------------------------- */
43 | /* Input
44 | -------------------------- */
45 | /* Cascader
46 | -------------------------- */
47 | /* Group
48 | -------------------------- */
49 | /* Tab
50 | -------------------------- */
51 | /* Button
52 | -------------------------- */
53 | /* cascader
54 | -------------------------- */
55 | /* Switch
56 | -------------------------- */
57 | /* Dialog
58 | -------------------------- */
59 | /* Table
60 | -------------------------- */
61 | /* Pagination
62 | -------------------------- */
63 | /* Popover
64 | -------------------------- */
65 | /* Tooltip
66 | -------------------------- */
67 | /* Tag
68 | -------------------------- */
69 | /* Dropdown
70 | -------------------------- */
71 | /* Badge
72 | -------------------------- */
73 | /* Card
74 | --------------------------*/
75 | /* Slider
76 | --------------------------*/
77 | /* Steps
78 | --------------------------*/
79 | /* NavMenu
80 | --------------------------*/
81 | /* Tabs
82 | --------------------------*/
83 | /* Rate
84 | --------------------------*/
85 | /* DatePicker
86 | --------------------------*/
87 | /* Loading
88 | --------------------------*/
89 | /* Breadcrumd
90 | --------------------------*/
91 | /* Form
92 | --------------------------*/
93 | }
94 |
95 | .el-select-group{
96 | margin: 0;
97 | padding: 0
98 | }
99 |
100 | .el-select-group .el-select-dropdown__item{
101 | padding-left: 20px
102 | }
103 |
104 | .el-select-group__wrap{
105 | list-style: none;
106 | margin: 0;
107 | padding: 0
108 | }
109 |
110 | .el-select-group__title{
111 | padding-left: 10px;
112 | font-size: 12px;
113 | color: #999;
114 | height: 30px;
115 | line-height: 30px
116 | }
117 |
--------------------------------------------------------------------------------
/element-theme-default/src/tag.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b tag {
7 | background-color: var(--tag-fill);
8 | display: inline-block;
9 | padding: var(--tag-padding);
10 | height: 24px;
11 | line-height: calc(@height - 2);
12 | font-size: var(--tag-font-size);
13 | color: var(--tag-color);
14 | border-radius: var(--tag-border-radius);
15 | box-sizing: border-box;
16 | border: 1px solid transparent;
17 |
18 | & .el-icon-close {
19 | border-radius: 50%;
20 | text-align: center;
21 | position: relative;
22 | cursor: pointer;
23 | font-size: 12px;
24 | transform: scale(.75, .75);
25 | height: 18px;
26 | width: 18px;
27 | line-height: 18px;
28 | vertical-align: middle;
29 | top: -1px;
30 | right: -2px;
31 |
32 | &:hover {
33 | background-color: #fff;
34 | color: var(--tag-fill);
35 | }
36 | }
37 |
38 | @m gray {
39 | background-color: var(--tag-gray-fill);
40 | border-color: var(--tag-gray-border);
41 | color: var(--tag-gray-color);
42 | @when hit {
43 | border-color: var(--tag-gray-color);
44 | }
45 |
46 | & .el-tag__close:hover {
47 | background-color: var(--tag-gray-color);
48 | color: #fff;
49 | }
50 | }
51 | @m primary {
52 | background-color: var(--tag-primary-fill);
53 | border-color: var(--tag-primary-border);
54 | color: var(--tag-primary-color);
55 | @when hit {
56 | border-color: var(--tag-primary-color);
57 | }
58 |
59 | & .el-tag__close:hover {
60 | background-color: var(--tag-primary-color);
61 | color: #fff;
62 | }
63 | }
64 | @m success {
65 | background-color: var(--tag-success-fill);
66 | border-color: var(--tag-success-border);
67 | color: var(--tag-success-color);
68 | @when hit {
69 | border-color: var(--tag-success-color);
70 | }
71 |
72 | & .el-tag__close:hover {
73 | background-color: var(--tag-success-color);
74 | color: #fff;
75 | }
76 | }
77 | @m warning {
78 | background-color: var(--tag-warning-fill);
79 | border-color: var(--tag-warning-border);
80 | color: var(--tag-warning-color);
81 | @when hit {
82 | border-color: var(--tag-warning-color);
83 | }
84 |
85 | & .el-tag__close:hover {
86 | background-color: var(--tag-warning-color);
87 | color: #fff;
88 | }
89 | }
90 | @m danger {
91 | background-color: var(--tag-danger-fill);
92 | border-color: var(--tag-danger-border);
93 | color: var(--tag-danger-color);
94 | @when hit {
95 | border-color: var(--tag-danger-color);
96 | }
97 |
98 | & .el-tag__close:hover {
99 | background-color: var(--tag-danger-color);
100 | color: #fff;
101 | }
102 | }
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/view/NavMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
26 |
27 |
28 |
29 |
30 |
31 |
35 |
36 |
37 |
38 |
39 |
40 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
4 |
68 |
69 |
70 |
71 |
75 |
76 |
78 |
--------------------------------------------------------------------------------
/src/view/Form.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 | 处理中心
7 |
8 | 我的工作台
9 | 选项1
10 | 选项2
11 | 选项3
12 |
13 | 订单管理
14 |
15 |
16 |
17 |
18 |
19 | 处理中心
20 |
21 | 我的工作台
22 | 选项1
23 | 选项2
24 | 选项3
25 |
26 | 订单管理
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 导航一
36 |
37 | 分组一
38 | 选项1
39 | 选项2
40 |
41 |
42 | 选项3
43 |
44 |
45 | 导航二
46 | 导航三
47 |
48 |
49 |
50 |
51 |
52 | 导航一
53 |
54 | 选项1
55 | 选项2
56 |
57 |
58 | 选项3
59 |
60 |
61 | 导航二
62 | 导航三
63 |
64 |
65 |
66 |
67 |
4 |
61 |
62 |
63 |
64 |
88 |
89 |
91 |
--------------------------------------------------------------------------------
/element-theme-default/lib/menu.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-menu,.el-menu li{list-style:none}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-menu-item,.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#475669;padding:0 20px;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu{border-radius:2px;position:relative;margin:0;padding-left:0;background-color:#eff2f7}.el-menu--dark{background-color:#324057}.el-menu--dark .el-menu-item,.el-menu--dark .el-submenu__title{color:#c0ccda}.el-menu--dark .el-menu-item:hover,.el-menu--dark .el-submenu__title:hover{background-color:#475669}.el-menu--dark .el-submenu .el-menu{background-color:#1f2f3d}.el-menu--dark .el-submenu .el-menu .el-menu-item:hover{background-color:#475669}.el-menu--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}.el-menu--horizontal .el-submenu{float:left;position:relative}.el-menu--horizontal .el-submenu>.el-menu{position:absolute;top:65px;left:0;border:1px solid #d3dce6;padding:5px 0;background-color:#fff;z-index:100;min-width:100%;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-menu--horizontal .el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:5px solid transparent}.el-menu--horizontal .el-submenu .el-menu-item{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px}.el-menu--horizontal .el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:5px;color:#99a9bf;margin-top:-3px}.el-menu--horizontal .el-menu-item:hover,.el-menu--horizontal .el-submenu__title:hover{background-color:#eff2f7}.el-menu--horizontal>.el-menu-item:hover,.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{border-bottom:5px solid #20a0ff}.el-menu--horizontal.el-menu--dark .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu__title:hover{background-color:#324057}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover,.el-menu-item:hover{background-color:#d3dce6}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title{color:#475669}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active,.el-menu-item.is-active{color:#20a0ff}.el-menu-item [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-menu-item:first-child{margin-left:0}.el-menu-item:last-child{margin-right:0}.el-submenu [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-submenu .el-menu{background-color:#e5e9f2}.el-submenu .el-menu-item:hover,.el-submenu__title:hover{background-color:#d3dce6}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px}.el-submenu.is-opened .el-submenu__icon-arrow{-ms-transform:rotate(180deg);transform:rotateZ(180deg)}.el-submenu.is-active .el-submenu__title{border-bottom-color:#20a0ff}.el-submenu__title{position:relative}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding-top:15px;line-height:normal;font-size:14px;padding-left:20px;color:#99a9bf}
--------------------------------------------------------------------------------
/element-theme-default/lib/time-picker.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-fade-in-enter,.el-fade-in-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-enter-active,.el-fade-in-leave-active,.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;-ms-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-ms-transform:scaleY(1);transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;-ms-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-ms-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-ms-transform:scaleY(1);transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;-ms-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-ms-transform:scaleY(0);transform:scaleY(0)}.el-date-editor{position:relative;display:inline-block}.el-date-editor .el-picker-panel{position:absolute;min-width:180px;box-sizing:border-box;box-shadow:0 2px 6px #ccc;background:#fff;z-index:10;top:41px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.33333%}.el-time-spinner__wrapper{height:190px;overflow:hidden;display:inline-block;width:50%;vertical-align:top;position:relative;-ms-overflow-style:none}.el-time-spinner__wrapper:hover{overflow-y:auto}.el-time-spinner__list{padding:0;margin:0;list-style:none;text-align:center}.el-time-spinner__list::after,.el-time-spinner__list::before{content:'';display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#e5e9f2;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#fff}.el-time-spinner__item.disabled{color:#D3DCE6;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #D3DCE6;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content::after,.el-time-panel__content::before{content:":";top:50%;color:#fff;position:absolute;font-size:14px;margin-top:-15px;line-height:16px;background-color:#20a0ff;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left}.el-time-panel__content::after{left:50%;margin-left:-2px}.el-time-panel__content::before{padding-left:50%;margin-right:-2px}.el-time-panel__content.has-seconds::after{left:66.66667%}.el-time-panel__content.has-seconds::before{padding-left:33.33333%}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:0;font-size:12px;color:#8492a6}.el-time-panel__btn.confirm{font-weight:800;color:#20a0ff}
--------------------------------------------------------------------------------
/src/theme/icon.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'element-icons';
3 | src: url('fonts/element-icons.eot?t=1472440741'); /* IE9*/
4 | src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
5 | url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
6 | url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */
7 | font-weight: 400;
8 | font-style: normal;
9 | }
10 |
11 | [class^="el-icon-"], [class*=" el-icon-"] {
12 | /* use !important to prevent issues with browser extensions that change fonts */
13 | font-family: 'element-icons' !important;
14 | speak: none;
15 | font-style: normal;
16 | font-weight: 400;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 | vertical-align: baseline;
21 | display: inline-block;
22 |
23 | /* Better Font Rendering =========== */
24 | -webkit-font-smoothing: antialiased;
25 | -moz-osx-font-smoothing: grayscale;
26 | }
27 |
28 | .el-icon-arrow-down:before { content: "\e600"; }
29 | .el-icon-arrow-left:before { content: "\e601"; }
30 | .el-icon-arrow-right:before { content: "\e602"; }
31 | .el-icon-arrow-up:before { content: "\e603"; }
32 | .el-icon-caret-bottom:before { content: "\e604"; }
33 | .el-icon-caret-left:before { content: "\e605"; }
34 | .el-icon-caret-right:before { content: "\e606"; }
35 | .el-icon-caret-top:before { content: "\e607"; }
36 | .el-icon-check:before { content: "\e608"; }
37 | .el-icon-circle-check:before { content: "\e609"; }
38 | .el-icon-circle-close:before { content: "\e60a"; }
39 | .el-icon-circle-cross:before { content: "\e60b"; }
40 | .el-icon-close:before { content: "\e60c"; }
41 | .el-icon-upload:before { content: "\e60d"; }
42 | .el-icon-d-arrow-left:before { content: "\e60e"; }
43 | .el-icon-d-arrow-right:before { content: "\e60f"; }
44 | .el-icon-d-caret:before { content: "\e610"; }
45 | .el-icon-date:before { content: "\e611"; }
46 | .el-icon-delete:before { content: "\e612"; }
47 | .el-icon-document:before { content: "\e613"; }
48 | .el-icon-edit:before { content: "\e614"; }
49 | .el-icon-information:before { content: "\e615"; }
50 | .el-icon-loading:before { content: "\e616"; }
51 | .el-icon-menu:before { content: "\e617"; }
52 | .el-icon-message:before { content: "\e618"; }
53 | .el-icon-minus:before { content: "\e619"; }
54 | .el-icon-more:before { content: "\e61a"; }
55 | .el-icon-picture:before { content: "\e61b"; }
56 | .el-icon-plus:before { content: "\e61c"; }
57 | .el-icon-search:before { content: "\e61d"; }
58 | .el-icon-setting:before { content: "\e61e"; }
59 | .el-icon-share:before { content: "\e61f"; }
60 | .el-icon-star-off:before { content: "\e620"; }
61 | .el-icon-star-on:before { content: "\e621"; }
62 | .el-icon-time:before { content: "\e622"; }
63 | .el-icon-warning:before { content: "\e623"; }
64 | .el-icon-delete2:before { content: "\e624"; }
65 | .el-icon-upload2:before { content: "\e627"; }
66 | .el-icon-view:before { content: "\e626"; }
67 |
68 | .el-icon-loading {
69 | animation: rotating 1s linear infinite;
70 | }
71 |
72 | .el-icon--right {
73 | margin-left: 5px;
74 | }
75 | .el-icon--left {
76 | margin-right: 5px;
77 | }
78 |
79 | @keyframes rotating {
80 | 0% {
81 | transform: rotateZ(0deg);
82 | }
83 | 100% {
84 | transform: rotateZ(360deg);
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/theme/spinner.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | :root{
3 | /* Transition
4 | -------------------------- */
5 | /* Colors drak
6 | -------------------------- */
7 | /* Colors tin
8 | -------------------------- */
9 | /* Colors
10 | -------------------------- */
11 | /* Background color
12 | -------------------------- */
13 | /* Border
14 | -------------------------- */
15 | /* Box-shadow
16 | -------------------------- */
17 | /* Fill
18 | -------------------------- */
19 | /* Font
20 | -------------------------- */
21 | /* Size
22 | -------------------------- */
23 | /* z-index
24 | -------------------------- */
25 | /* Disable base
26 | -------------------------- */
27 | /* Icon
28 | -------------------------- */
29 | /* Checkbox
30 | -------------------------- */
31 | /* Radio
32 | -------------------------- */
33 | /* Select
34 | -------------------------- */
35 | /* Alert
36 | -------------------------- */
37 | /* Message Box
38 | -------------------------- */
39 | /* Message
40 | -------------------------- */
41 | /* Notification
42 | -------------------------- */
43 | /* Input
44 | -------------------------- */
45 | /* Cascader
46 | -------------------------- */
47 | /* Group
48 | -------------------------- */
49 | /* Tab
50 | -------------------------- */
51 | /* Button
52 | -------------------------- */
53 | /* cascader
54 | -------------------------- */
55 | /* Switch
56 | -------------------------- */
57 | /* Dialog
58 | -------------------------- */
59 | /* Table
60 | -------------------------- */
61 | /* Pagination
62 | -------------------------- */
63 | /* Popover
64 | -------------------------- */
65 | /* Tooltip
66 | -------------------------- */
67 | /* Tag
68 | -------------------------- */
69 | /* Dropdown
70 | -------------------------- */
71 | /* Badge
72 | -------------------------- */
73 | /* Card
74 | --------------------------*/
75 | /* Slider
76 | --------------------------*/
77 | /* Steps
78 | --------------------------*/
79 | /* NavMenu
80 | --------------------------*/
81 | /* Tabs
82 | --------------------------*/
83 | /* Rate
84 | --------------------------*/
85 | /* DatePicker
86 | --------------------------*/
87 | /* Loading
88 | --------------------------*/
89 | /* Breadcrumd
90 | --------------------------*/
91 | /* Form
92 | --------------------------*/
93 | }
94 |
95 | .el-time-spinner{
96 | width: 100%;
97 | white-space: nowrap;
98 | }
99 |
100 | .el-spinner{
101 | display: inline-block;
102 | vertical-align: middle;
103 | }
104 |
105 | .el-spinner-inner{
106 | animation: rotate 2s linear infinite;
107 | width: 50px;
108 | height: 50px;
109 | }
110 |
111 | .el-spinner-inner .path{
112 | stroke: #ececec;
113 | stroke-linecap: round;
114 | animation: dash 1.5s ease-in-out infinite;
115 | }
116 | @keyframes rotate {
117 | 100% {
118 | transform: rotate(360deg);
119 | }
120 | }
121 |
122 | @keyframes dash {
123 | 0% {
124 | stroke-dasharray: 1, 150;
125 | stroke-dashoffset: 0;
126 | }
127 | 50% {
128 | stroke-dasharray: 90, 150;
129 | stroke-dashoffset: -35;
130 | }
131 | 100% {
132 | stroke-dasharray: 90, 150;
133 | stroke-dashoffset: -124;
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/element-theme-default/src/icon.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'element-icons';
3 | src: url('fonts/element-icons.eot?t=1472440741'); /* IE9*/
4 | src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
5 | url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
6 | url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */
7 | font-weight: normal;
8 | font-style: normal;
9 | }
10 |
11 | [class^="el-icon-"], [class*=" el-icon-"] {
12 | /* use !important to prevent issues with browser extensions that change fonts */
13 | font-family: 'element-icons' !important;
14 | speak: none;
15 | font-style: normal;
16 | font-weight: normal;
17 | font-variant: normal;
18 | text-transform: none;
19 | line-height: 1;
20 | vertical-align: baseline;
21 | display: inline-block;
22 |
23 | /* Better Font Rendering =========== */
24 | -webkit-font-smoothing: antialiased;
25 | -moz-osx-font-smoothing: grayscale;
26 | }
27 |
28 | .el-icon-arrow-down:before { content: "\e600"; }
29 | .el-icon-arrow-left:before { content: "\e601"; }
30 | .el-icon-arrow-right:before { content: "\e602"; }
31 | .el-icon-arrow-up:before { content: "\e603"; }
32 | .el-icon-caret-bottom:before { content: "\e604"; }
33 | .el-icon-caret-left:before { content: "\e605"; }
34 | .el-icon-caret-right:before { content: "\e606"; }
35 | .el-icon-caret-top:before { content: "\e607"; }
36 | .el-icon-check:before { content: "\e608"; }
37 | .el-icon-circle-check:before { content: "\e609"; }
38 | .el-icon-circle-close:before { content: "\e60a"; }
39 | .el-icon-circle-cross:before { content: "\e60b"; }
40 | .el-icon-close:before { content: "\e60c"; }
41 | .el-icon-upload:before { content: "\e60d"; }
42 | .el-icon-d-arrow-left:before { content: "\e60e"; }
43 | .el-icon-d-arrow-right:before { content: "\e60f"; }
44 | .el-icon-d-caret:before { content: "\e610"; }
45 | .el-icon-date:before { content: "\e611"; }
46 | .el-icon-delete:before { content: "\e612"; }
47 | .el-icon-document:before { content: "\e613"; }
48 | .el-icon-edit:before { content: "\e614"; }
49 | .el-icon-information:before { content: "\e615"; }
50 | .el-icon-loading:before { content: "\e616"; }
51 | .el-icon-menu:before { content: "\e617"; }
52 | .el-icon-message:before { content: "\e618"; }
53 | .el-icon-minus:before { content: "\e619"; }
54 | .el-icon-more:before { content: "\e61a"; }
55 | .el-icon-picture:before { content: "\e61b"; }
56 | .el-icon-plus:before { content: "\e61c"; }
57 | .el-icon-search:before { content: "\e61d"; }
58 | .el-icon-setting:before { content: "\e61e"; }
59 | .el-icon-share:before { content: "\e61f"; }
60 | .el-icon-star-off:before { content: "\e620"; }
61 | .el-icon-star-on:before { content: "\e621"; }
62 | .el-icon-time:before { content: "\e622"; }
63 | .el-icon-warning:before { content: "\e623"; }
64 | .el-icon-delete2:before { content: "\e624"; }
65 | .el-icon-upload2:before { content: "\e627"; }
66 | .el-icon-view:before { content: "\e626"; }
67 |
68 | .el-icon-loading {
69 | animation: rotating 1s linear infinite;
70 | }
71 |
72 | .el-icon--right {
73 | margin-left: 5px;
74 | }
75 | .el-icon--left {
76 | margin-right: 5px;
77 | }
78 |
79 | @keyframes rotating {
80 | 0% {
81 | transform: rotateZ(0deg);
82 | }
83 | 100% {
84 | transform: rotateZ(360deg);
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/element-theme/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "_args": [
3 | [
4 | "element-theme@^0.2.0",
5 | "/Users/mro/coding/making-element-ui"
6 | ]
7 | ],
8 | "_from": "element-theme@>=0.2.0 <0.3.0",
9 | "_id": "element-theme@0.2.0",
10 | "_inCache": true,
11 | "_installable": true,
12 | "_location": "/element-theme",
13 | "_nodeVersion": "5.8.0",
14 | "_npmOperationalInternal": {
15 | "host": "packages-18-east.internal.npmjs.com",
16 | "tmp": "tmp/element-theme-0.2.0.tgz_1478405420120_0.41263557970523834"
17 | },
18 | "_npmUser": {
19 | "email": "cinwell.li@gmail.com",
20 | "name": "qingwei.li"
21 | },
22 | "_npmVersion": "3.7.3",
23 | "_phantomChildren": {},
24 | "_requested": {
25 | "name": "element-theme",
26 | "raw": "element-theme@^0.2.0",
27 | "rawSpec": "^0.2.0",
28 | "scope": null,
29 | "spec": ">=0.2.0 <0.3.0",
30 | "type": "range"
31 | },
32 | "_requiredBy": [
33 | "#DEV:/"
34 | ],
35 | "_resolved": "https://registry.npmjs.org/element-theme/-/element-theme-0.2.0.tgz",
36 | "_shasum": "3552e20f8eeec7b1c9318b8ad7847643b2ddb515",
37 | "_shrinkwrap": null,
38 | "_spec": "element-theme@^0.2.0",
39 | "_where": "/Users/mro/coding/making-element-ui",
40 | "author": {
41 | "email": "cinwell.li@gmail.com",
42 | "name": "qingwei-li",
43 | "url": "https://github.com/QingWei-Li"
44 | },
45 | "bin": {
46 | "element-theme": "./bin/element-theme",
47 | "et": "./bin/element-theme"
48 | },
49 | "bugs": {
50 | "url": "https://github.com/ElementUI/element-theme/issues"
51 | },
52 | "dependencies": {
53 | "commander": "^2.9.0",
54 | "gulp": "^3.9.1",
55 | "gulp-cssmin": "^0.1.7",
56 | "gulp-nop": "0.0.3",
57 | "gulp-postcss": "^6.2.0",
58 | "ora": "^0.3.0",
59 | "postcss-salad": "^1.0.5"
60 | },
61 | "description": "Theme generator cli tool for Element",
62 | "devDependencies": {
63 | "element-theme-default": "git+https://github.com/ElementUI/theme-default.git",
64 | "xo": "^0.17.0"
65 | },
66 | "directories": {},
67 | "dist": {
68 | "shasum": "3552e20f8eeec7b1c9318b8ad7847643b2ddb515",
69 | "tarball": "https://registry.npmjs.org/element-theme/-/element-theme-0.2.0.tgz"
70 | },
71 | "engines": {
72 | "node": ">=0.12.0"
73 | },
74 | "files": [
75 | "bin",
76 | "lib"
77 | ],
78 | "gitHead": "a2f090786ecf22cd3dc0a7811171cf59cb55ce97",
79 | "homepage": "https://github.com/ElementUI/element-theme#readme",
80 | "keywords": [
81 | "element-ui",
82 | "vue",
83 | "theme",
84 | "cli"
85 | ],
86 | "license": "MIT",
87 | "main": "index.js",
88 | "maintainers": [
89 | {
90 | "email": "cinwell.li@gmail.com",
91 | "name": "qingwei.li"
92 | }
93 | ],
94 | "name": "element-theme",
95 | "optionalDependencies": {},
96 | "peerDependencies": {
97 | "element-theme-default": "*"
98 | },
99 | "readme": "ERROR: No README data found!",
100 | "repository": {
101 | "type": "git",
102 | "url": "git+ssh://git@github.com/ElementUI/element-theme.git"
103 | },
104 | "scripts": {
105 | "test": "xo"
106 | },
107 | "version": "0.2.0",
108 | "xo": {
109 | "rule": {
110 | "import/no-dynamic-require": 0,
111 | "semi": 0,
112 | "unicorn/no-process-exit": 0
113 | },
114 | "space": true
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/element-theme-default/src/switch.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b switch {
7 | display: inline-block;
8 | position: relative;
9 | font-size: var(--switch-font-size);
10 | line-height: var(--switch-height);
11 | @when disabled {
12 | & .el-switch__core,
13 | & .el-switch__label {
14 | cursor: not-allowed;
15 | }
16 | }
17 |
18 | @e label {
19 | transition: .2s;
20 | position: absolute;
21 | z-index: 10;
22 | size: var(--switch-width) var(--switch-height);
23 | left: 0;
24 | top: 0;
25 | display: inline-block;
26 | font-size: var(--switch-font-size);
27 | cursor: pointer;
28 | user-select: none;
29 | @m left {
30 | i {
31 | left: 6px;
32 | }
33 | }
34 | @m right {
35 | i {
36 | right: 6px;
37 | }
38 | }
39 | & * {
40 | line-height: 1;
41 | top: 4px;
42 | position: absolute;
43 | font-size: var(--switch-font-size);
44 | display: inline-block;
45 | color: var(--color-white);
46 | }
47 | }
48 |
49 | @e input {
50 | display: none;
51 | &:checked + .el-switch__core {
52 | border-color: var(--switch-on-color);
53 | background-color: var(--switch-on-color);
54 | }
55 | }
56 |
57 | @e core {
58 | margin: 0;
59 | display: inline-block;
60 | vertical-align: middle;
61 | position: relative;
62 | size: var(--switch-width) var(--switch-height);
63 | border: 1px solid var(--switch-off-color);
64 | outline: none;
65 | border-radius: var(--switch-core-border-radius);
66 | box-sizing: border-box;
67 | background: var(--switch-off-color);
68 | cursor: pointer;
69 | transition: border-color .3s, background-color .3s;
70 |
71 | & .el-switch__button {
72 | position: absolute 0 * * 0;
73 | border-radius: var(--border-radius-circle);
74 | transition: transform .3s;
75 | size: var(--switch-button-size);
76 | z-index: 20;
77 | background-color: var(--color-white);
78 | }
79 | }
80 |
81 | @when disabled {
82 | .el-switch__core {
83 | border-color: var(--switch-disabled-color) !important;
84 | background: var(--switch-disabled-color) !important;
85 |
86 | & span {
87 | background-color: var(--switch-disabled-text-color) !important;
88 | }
89 |
90 | & ~ .el-switch__label * {
91 | color: var(--switch-disabled-text-color) !important;
92 | }
93 | }
94 |
95 | .el-switch__input:checked + .el-switch__core {
96 | border-color: var(--switch-disabled-color);
97 | background-color: var(--switch-disabled-color);
98 | }
99 | }
100 |
101 | @modifier wide {
102 | .el-switch__label {
103 | &.el-switch__label--left {
104 | span {
105 | left: 10px;
106 | }
107 | }
108 | &.el-switch__label--right {
109 | span {
110 | right: 10px;
111 | }
112 | }
113 | }
114 | }
115 |
116 | & .label-fade-enter,
117 | & .label-fade-leave-active {
118 | opacity: 0;
119 | }
120 | }
121 | }
122 |
--------------------------------------------------------------------------------
/src/theme/rate.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | :root{
3 | /* Transition
4 | -------------------------- */
5 | /* Colors drak
6 | -------------------------- */
7 | /* Colors tin
8 | -------------------------- */
9 | /* Colors
10 | -------------------------- */
11 | /* Background color
12 | -------------------------- */
13 | /* Border
14 | -------------------------- */
15 | /* Box-shadow
16 | -------------------------- */
17 | /* Fill
18 | -------------------------- */
19 | /* Font
20 | -------------------------- */
21 | /* Size
22 | -------------------------- */
23 | /* z-index
24 | -------------------------- */
25 | /* Disable base
26 | -------------------------- */
27 | /* Icon
28 | -------------------------- */
29 | /* Checkbox
30 | -------------------------- */
31 | /* Radio
32 | -------------------------- */
33 | /* Select
34 | -------------------------- */
35 | /* Alert
36 | -------------------------- */
37 | /* Message Box
38 | -------------------------- */
39 | /* Message
40 | -------------------------- */
41 | /* Notification
42 | -------------------------- */
43 | /* Input
44 | -------------------------- */
45 | /* Cascader
46 | -------------------------- */
47 | /* Group
48 | -------------------------- */
49 | /* Tab
50 | -------------------------- */
51 | /* Button
52 | -------------------------- */
53 | /* cascader
54 | -------------------------- */
55 | /* Switch
56 | -------------------------- */
57 | /* Dialog
58 | -------------------------- */
59 | /* Table
60 | -------------------------- */
61 | /* Pagination
62 | -------------------------- */
63 | /* Popover
64 | -------------------------- */
65 | /* Tooltip
66 | -------------------------- */
67 | /* Tag
68 | -------------------------- */
69 | /* Dropdown
70 | -------------------------- */
71 | /* Badge
72 | -------------------------- */
73 | /* Card
74 | --------------------------*/
75 | /* Slider
76 | --------------------------*/
77 | /* Steps
78 | --------------------------*/
79 | /* NavMenu
80 | --------------------------*/
81 | /* Tabs
82 | --------------------------*/
83 | /* Rate
84 | --------------------------*/
85 | /* DatePicker
86 | --------------------------*/
87 | /* Loading
88 | --------------------------*/
89 | /* Breadcrumd
90 | --------------------------*/
91 | /* Form
92 | --------------------------*/
93 | }
94 |
95 | .el-rate{
96 | height: 20px;
97 | line-height: 1;
98 | }
99 |
100 | .el-rate__item{
101 | display: inline-block;
102 | position: relative;
103 | font-size: 0;
104 | vertical-align: middle;
105 | }
106 |
107 | .el-rate__icon{
108 | position: relative;
109 | display: inline-block;
110 | font-size: 18px;
111 | margin-right: 6px;
112 | color: #C6D1DE;
113 | transition: .3s;
114 | }
115 |
116 | .el-rate__icon .path2 {
117 | position: absolute;
118 | left: 0;
119 | top: 0;
120 | }
121 |
122 | .el-rate__icon.hover{
123 | transform: scale(1.15);
124 | }
125 |
126 | .el-rate__decimal{
127 | position: absolute;
128 | top: 0;
129 | left: 0;
130 | display: inline-block;
131 | overflow: hidden;
132 | }
133 |
134 | .el-rate__text{
135 | font-size: 12px;
136 | vertical-align: middle;
137 | }
138 |
--------------------------------------------------------------------------------
/src/theme/badge.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | :root{
3 | /* Transition
4 | -------------------------- */
5 | /* Colors drak
6 | -------------------------- */
7 | /* Colors tin
8 | -------------------------- */
9 | /* Colors
10 | -------------------------- */
11 | /* Background color
12 | -------------------------- */
13 | /* Border
14 | -------------------------- */
15 | /* Box-shadow
16 | -------------------------- */
17 | /* Fill
18 | -------------------------- */
19 | /* Font
20 | -------------------------- */
21 | /* Size
22 | -------------------------- */
23 | /* z-index
24 | -------------------------- */
25 | /* Disable base
26 | -------------------------- */
27 | /* Icon
28 | -------------------------- */
29 | /* Checkbox
30 | -------------------------- */
31 | /* Radio
32 | -------------------------- */
33 | /* Select
34 | -------------------------- */
35 | /* Alert
36 | -------------------------- */
37 | /* Message Box
38 | -------------------------- */
39 | /* Message
40 | -------------------------- */
41 | /* Notification
42 | -------------------------- */
43 | /* Input
44 | -------------------------- */
45 | /* Cascader
46 | -------------------------- */
47 | /* Group
48 | -------------------------- */
49 | /* Tab
50 | -------------------------- */
51 | /* Button
52 | -------------------------- */
53 | /* cascader
54 | -------------------------- */
55 | /* Switch
56 | -------------------------- */
57 | /* Dialog
58 | -------------------------- */
59 | /* Table
60 | -------------------------- */
61 | /* Pagination
62 | -------------------------- */
63 | /* Popover
64 | -------------------------- */
65 | /* Tooltip
66 | -------------------------- */
67 | /* Tag
68 | -------------------------- */
69 | /* Dropdown
70 | -------------------------- */
71 | /* Badge
72 | -------------------------- */
73 | /* Card
74 | --------------------------*/
75 | /* Slider
76 | --------------------------*/
77 | /* Steps
78 | --------------------------*/
79 | /* NavMenu
80 | --------------------------*/
81 | /* Tabs
82 | --------------------------*/
83 | /* Rate
84 | --------------------------*/
85 | /* DatePicker
86 | --------------------------*/
87 | /* Loading
88 | --------------------------*/
89 | /* Breadcrumd
90 | --------------------------*/
91 | /* Form
92 | --------------------------*/
93 | }
94 |
95 | .el-badge{
96 | position: relative;
97 | vertical-align: middle;
98 | display: inline-block
99 | }
100 |
101 | .el-badge__content{
102 | background-color: #f7ba2a;
103 | border-radius: 10px;
104 | color: #fff;
105 | display: inline-block;
106 | font-size: 12px;
107 | height: 18px;
108 | line-height: 18px;
109 | padding: 0 6px;
110 | text-align: center;
111 | white-space: nowrap;
112 | border: 1px solid #fff
113 | }
114 |
115 | .el-badge__content.is-dot{
116 | width: 8px;
117 | height: 8px;
118 | padding: 0;
119 | right: 0;
120 | border-radius: 50%
121 | }
122 |
123 | .el-badge__content.is-fixed{
124 | top: 0;
125 | right: 10px;
126 | position: absolute;
127 | transform: translateY(-50%) translateX(100%)
128 | }
129 |
130 | .el-badge__content.is-fixed.is-dot{
131 | right: 5px
132 | }
133 |
--------------------------------------------------------------------------------
/element-theme-default/lib/tabs.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-tabs__header:after,.el-tabs__header:before{display:table;content:""}.el-tabs__header:after{clear:both}.el-tabs{display:inline-block}.el-tabs__header{border-bottom:1px solid #d3dce6;padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#20a0ff;z-index:1;transition:transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs--card .el-tabs__item.is-active.is-closable .el-icon-close,.el-tabs--card .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--border-card .el-tabs__item,.el-tabs--card .el-tabs__item,.el-tabs__item .el-icon-close{transition:all .3s cubic-bezier(.645,.045,.355,1)}.el-tabs__item{padding:0 16px;height:42px;box-sizing:border-box;line-height:42px;float:left;list-style:none;font-size:14px;color:#8492a6;margin-bottom:-1px;position:relative}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;margin-left:5px}.el-tabs__item .el-icon-close:before{-ms-transform:scale(.7,.7);transform:scale(.7,.7);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#99a9bf;color:#fff}.el-tabs__item:hover{color:#1f2d3d;cursor:pointer}.el-tabs__item.is-disabled{color:#bbb;cursor:default}.el-tabs__item.is-active{color:#20a0ff}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card .el-tabs__active-bar{display:none}.el-tab-pane,.slideInLeft-transition,.slideInRight-transition{display:inline-block}.el-tabs--card .el-tabs__item{border:1px solid transparent}.el-tabs--card .el-tabs__item.is-closable:hover{padding-right:9px;padding-left:9px}.el-tabs--card .el-tabs__item.is-active{border:1px solid #d3dce6;border-bottom-color:#fff;border-radius:4px 4px 0 0}.el-tabs--card .el-tabs__item.is-active.is-closable{padding-right:16px;padding-left:16px}.el-tabs--card .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.el-tabs--border-card{background:#fff;border:1px solid #d3dce6;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card .el-tabs__content{padding:15px}.el-tabs--border-card .el-tabs__header{background-color:#eff2f7;margin:0}.el-tabs--border-card .el-tabs__item{border:1px solid transparent;border-top:0;margin-right:-1px;margin-left:-1px}.el-tabs--border-card .el-tabs__item.is-active{background-color:#fff;border-right-color:#d3dce6;border-left-color:#d3dce6}.el-tabs--border-card .el-tabs__item.is-active:first-child{border-left-color:#d3dce6}.el-tabs--border-card .el-tabs__item.is-active:last-child{border-right-color:#d3dce6}.el-tab-pane{width:100%}.slideInRight-enter{animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave .3s}.slideInLeft-enter{animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave .3s}@keyframes slideInRight-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}100%{transform-origin:0 0;transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(-100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}100%{transform-origin:0 0;transform:translateX(-100%);opacity:0}}
--------------------------------------------------------------------------------
/element-theme-default/lib/base.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.el-fade-in-enter,.el-fade-in-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-enter-active,.el-fade-in-leave-active,.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;-ms-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-ms-transform:scaleY(1);transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;-ms-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-ms-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-ms-transform:scaleY(1);transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;-ms-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-ms-transform:scaleY(0);transform:scaleY(0)}@font-face{font-family:element-icons;src:url(fonts/element-icons.eot?t=1472440741);src:url(fonts/element-icons.woff?t=1472440741) format('woff'),url(fonts/element-icons.ttf?t=1472440741) format('truetype'),url(fonts/element-icons.svg?t=1472440741#el-icon) format('svg');font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-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-loading{animation:rotating 1s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotateZ(0)}100%{transform:rotateZ(360deg)}}
--------------------------------------------------------------------------------
/src/theme/option.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | :root{
3 | /* Transition
4 | -------------------------- */
5 | /* Colors drak
6 | -------------------------- */
7 | /* Colors tin
8 | -------------------------- */
9 | /* Colors
10 | -------------------------- */
11 | /* Background color
12 | -------------------------- */
13 | /* Border
14 | -------------------------- */
15 | /* Box-shadow
16 | -------------------------- */
17 | /* Fill
18 | -------------------------- */
19 | /* Font
20 | -------------------------- */
21 | /* Size
22 | -------------------------- */
23 | /* z-index
24 | -------------------------- */
25 | /* Disable base
26 | -------------------------- */
27 | /* Icon
28 | -------------------------- */
29 | /* Checkbox
30 | -------------------------- */
31 | /* Radio
32 | -------------------------- */
33 | /* Select
34 | -------------------------- */
35 | /* Alert
36 | -------------------------- */
37 | /* Message Box
38 | -------------------------- */
39 | /* Message
40 | -------------------------- */
41 | /* Notification
42 | -------------------------- */
43 | /* Input
44 | -------------------------- */
45 | /* Cascader
46 | -------------------------- */
47 | /* Group
48 | -------------------------- */
49 | /* Tab
50 | -------------------------- */
51 | /* Button
52 | -------------------------- */
53 | /* cascader
54 | -------------------------- */
55 | /* Switch
56 | -------------------------- */
57 | /* Dialog
58 | -------------------------- */
59 | /* Table
60 | -------------------------- */
61 | /* Pagination
62 | -------------------------- */
63 | /* Popover
64 | -------------------------- */
65 | /* Tooltip
66 | -------------------------- */
67 | /* Tag
68 | -------------------------- */
69 | /* Dropdown
70 | -------------------------- */
71 | /* Badge
72 | -------------------------- */
73 | /* Card
74 | --------------------------*/
75 | /* Slider
76 | --------------------------*/
77 | /* Steps
78 | --------------------------*/
79 | /* NavMenu
80 | --------------------------*/
81 | /* Tabs
82 | --------------------------*/
83 | /* Rate
84 | --------------------------*/
85 | /* DatePicker
86 | --------------------------*/
87 | /* Loading
88 | --------------------------*/
89 | /* Breadcrumd
90 | --------------------------*/
91 | /* Form
92 | --------------------------*/
93 | }
94 |
95 | .el-select-dropdown{}
96 |
97 | .el-select-dropdown__item{
98 | font-size: 12px;
99 | padding: 8px 10px;
100 | position: relative;
101 | white-space: nowrap;
102 | overflow: hidden;
103 | text-overflow: ellipsis;
104 | color: #666;
105 | height: 30px;
106 | line-height: 1.5;
107 | box-sizing: border-box;
108 | cursor: pointer
109 | }
110 |
111 | .el-select-dropdown__item.hover{
112 | background-color: #f7f7f7
113 | }
114 |
115 | .el-select-dropdown__item.selected{
116 | color: #fff;
117 | background-color: #d9d9d9
118 | }
119 |
120 | .el-select-dropdown__item.selected.hover{
121 | background-color: #d9d9d9
122 | }
123 |
124 | .el-select-dropdown__item span{
125 | line-height: 1.5 !important
126 | }
127 |
128 | .el-select-dropdown__item.is-disabled{
129 | color: #d9d9d9;
130 | cursor: not-allowed
131 | }
132 |
133 | .el-select-dropdown__item.is-disabled:hover{
134 | background-color: #fff
135 | }
136 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 | var et = require('./element-theme')
4 |
5 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
6 | var htmlWebpackPlugin = require("html-webpack-plugin");
7 | module.exports = {
8 | entry: './src/main.js',
9 | output: {
10 | path: path.resolve(__dirname, './dist'),
11 | // publicPath: '/',
12 | filename: 'build.js'
13 | },
14 | performance: {
15 | hints: false
16 | },
17 | resolve: {
18 | extensions: ['.js', '.vue', '.json']
19 | },
20 | module: {
21 | loaders: [{
22 | test: /\.vue$/,
23 | loader: 'vue-loader'
24 | }, {
25 | test: /\.js$/,
26 | loader: 'babel-loader',
27 | exclude: /node_modules/,
28 | query : {
29 | "presets": [
30 | ["es2015", { "modules": false }]
31 | ],
32 | "plugins": ["transform-vue-jsx"]
33 | }
34 | }, {
35 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
36 | loader: 'file-loader'
37 | }, {
38 | test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
39 | loader: 'file-loader',
40 | query: {
41 | name: '[name].[ext]?[hash]'
42 | }
43 | }, {
44 | test: /\.css$/,
45 | loader: "style-loader!css-loader" //ExtractTextPlugin.extract({fallbackLoader:'style-loader',loader:'css-loader'})
46 | }, {
47 | test: /\.scss$/,
48 | loader: "style-loader!css-loader!sass-loader" //ExtractTextPlugin.extract({loader:'css-loader!sass-loader',fallbackLoader:'style-loader'})
49 | }]
50 | },
51 | plugins : [
52 | new htmlWebpackPlugin({
53 | filename : "index.html",
54 | template : "index.html"
55 | })
56 | ],
57 | devServer: {
58 | historyApiFallback: true,
59 | noInfo: true,
60 | proxy: {
61 | '/api/*': {
62 | target: 'http://localhost',
63 | secure: false,
64 | // pathRewrite : {
65 | // "^/api" : ""
66 | // }
67 | }
68 | }
69 | },
70 | devtool: '#eval-source-map'
71 | }
72 |
73 | if (process.env.NODE_ENV === 'production') {
74 | module.exports.devtool = '#source-map'
75 | module.exports.plugins = (module.exports.plugins || []).concat([
76 | new webpack.DefinePlugin({
77 | 'process.env': {
78 | NODE_ENV: '"production"'
79 | }
80 | }),
81 | new webpack.optimize.UglifyJsPlugin({
82 | compress: {
83 | warnings: false
84 | }
85 | }),
86 | new ExtractTextPlugin("style.css")
87 |
88 | ]);
89 |
90 | module.exports.module.loaders.pop();
91 | module.exports.module.loaders.pop();
92 |
93 | module.exports.module.loaders.push({
94 | test: /\.css$/,
95 | loader: ExtractTextPlugin.extract({fallbackLoader:'style-loader',loader:'css-loader'})
96 | }, {
97 | test: /\.scss$/,
98 | loader: ExtractTextPlugin.extract({loader:'css-loader!sass-loader',fallbackLoader:'style-loader'})
99 | })
100 |
101 | et.run({
102 | config: './element-variables.css',
103 | out: './dist/theme'
104 | })
105 |
106 | } else {
107 |
108 | et.watch({
109 | config: './element-variables.css',
110 | out: './src/theme'
111 | })
112 |
113 | }
114 |
--------------------------------------------------------------------------------
5 |
6 |
7 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
19 | -
20 |
21 |
23 |
24 |
25 |
27 |
28 |
29 |
34 |
35 |
36 |
37 |
40 |
41 |
42 |
44 |
45 | 立即创建
46 | 取消
47 |
48 |
49 |
50 |
51 |
52 |
53 |
55 |
56 |
58 |
59 |
60 |