test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-29 18:57:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

remove theme-default (#7273)

Browse Source
This commit is contained in:
杨奕 2017-09-28 05:01:29 -05:00 committed by Black Wayne
parent a0682ed983
commit 21c579179c
117 changed files with 29 additions and 8626 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -10,7 +10,7 @@
[![npm package](https://img.shields.io/npm/v/element-ui.svg)](https://www.npmjs.org/package/element-ui)
[![NPM downloads](http://img.shields.io/npm/dm/element-ui.svg)](https://npmjs.org/package/element-ui)
![JS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS)
![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-default/index.css?compression=gzip&label=gzip%20size:%20CSS)
![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS)
[![Join the chat at https://gitter.im/ElemeFE/element](https://badges.gitter.im/ElemeFE/element.svg)](https://gitter.im/ElemeFE/element?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(Chinese)
[![Join the chat at https://gitter.im/element-en/Lobby](https://badges.gitter.im/element-en/Lobby.svg)](https://gitter.im/element-en/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(English)
[![OpenCollective](https://opencollective.com/element/backers/badge.svg)](#backers)

1
build/bin/gen-cssfile.js
View File

@ -2,7 +2,6 @@ var fs = require('fs');
var path = require('path');
var Components = require('../../components.json');
var themes = [
'theme-default',
'theme-chalk'
];
Components = Object.keys(Components);

2
build/bin/iconInit.js
View File

@ -3,7 +3,7 @@
var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-default/src/icon.css'), 'utf8');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
var nodes = postcss.parse(fontFile).nodes;
var classList = [];

2
build/config.js
View File

@ -2,7 +2,7 @@ var path = require('path');
var fs = require('fs');
var nodeExternals = require('webpack-node-externals');
var Components = require('../components.json');
var saladConfig = require('../packages/theme-default/salad.config.json');
var saladConfig = require('./salad.config.json');
var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));

23
build/cooking.test.js
View File

@ -10,29 +10,6 @@ cooking.set({
alias: Object.assign(config.alias, {
'vue$': 'vue/dist/vue.common.js'
}),
postcss: function(webapck) {
return [
require('postcss-salad')({
browsers: ['ie > 8', 'last 2 versions', 'Chrome > 24'],
features: {
'partialImport': {
addDependencyTo: webapck
},
'bem': {
'shortcuts': {
'component': 'b',
'modifier': 'm',
'descendent': 'e'
},
'separators': {
'descendent': '__',
'modifier': '--'
}
}
}
})
];
},
sourceMap: '#inline-source-map'
});

5
build/deploy-ci.sh
View File

@ -8,9 +8,6 @@ if [ "$ROT_TOKEN" = "" ]; then
exit 0
fi
SUB_FOLDER=$(echo "2.0.0-alpha.1" | grep -o -E "\d+\.\d+")
echo $SUB_FOLDER
# release
if [ "$TRAVIS_TAG" ]; then
# build lib
@ -42,8 +39,6 @@ if [ "$TRAVIS_TAG" ]; then
git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
# build sub folder
echo $TRAVIS_TAG
SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
echo $SUB_FOLDER
SUB_FOLDER='2.0'
mkdir $SUB_FOLDER

0
packages/theme-default/salad.config.json → build/salad.config.json
View File

2
examples/components/demo-block.vue
View File

@ -177,7 +177,7 @@
'\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
jsTpl = jsTpl
? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
: 'new Vue().$mount(\'#app\')';

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

@ -20,10 +20,10 @@ npm i element-theme -g
Then install the default theme from npm or GitHub.
```shell
# from npm
npm i element-theme-default -D
npm i element-theme-chalk -D
# from GitHub
npm i https://github.com/ElementUI/theme-default -D
npm i https://github.com/ElementUI/theme-chalk -D
```
### Initialize variable file

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

@ -12,7 +12,7 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
```html
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
@ -26,7 +26,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

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

@ -137,7 +137,7 @@ In main.js:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
@ -168,7 +168,7 @@ Then edit .babelrc:
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
"styleLibraryName": "theme-chalk"
}
]]]
}

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

@ -22,10 +22,10 @@ npm i element-theme -g
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
```shell
# 从 npm
npm i element-theme-default -D
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-default -D
npm i https://github.com/ElementUI/theme-chalk -D
```
### 初始化变量文件

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

@ -12,7 +12,7 @@ npm i element-ui -S
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
@ -26,7 +26,7 @@ npm i element-ui -S
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

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

@ -137,7 +137,7 @@ if (process.env.NODE_ENV === 'production') {
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
@ -168,7 +168,7 @@ npm install babel-plugin-component -D
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
"styleLibraryName": "theme-chalk"
}
]]]
}

2
examples/icon.json
View File

@ -1 +1 @@
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view","circle-check-plain","circle-cross-plain","information-plain","warning-plain"]
["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning_default","delete2","upload2","view","circle-check-plain","circle-cross-plain","information-plain","warning-plain","info","error","success","warning","sort-down","sort-up"]

2
examples/versions.json
View File

@ -1 +1 @@
{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.4":"1.4"}
{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.6":"1.4","1.4.4":"2.0"}

4
package.json
View File

@ -25,8 +25,8 @@
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh",
"pub:all": "npm run dist:all && lerna publish --skip-git && git commit -am 'publish independent packages' && git push eleme dev",
"test": "npm run lint && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
"test:watch": "karma start test/unit/karma.conf.js"
"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
"test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
},
"repository": {
"type": "git",

2
packages/loading/README.md
View File

@ -13,7 +13,7 @@ npm i element-loading -D
```javascript
import Vue from 'vue'
import ElLoading from 'element-loading'
import 'element-theme-default/dist/loading.css'
import 'element-theme-chalk/dist/loading.css'
Vue.use(ElLoading)
```

2
packages/pagination/README.md
View File

@ -13,7 +13,7 @@ npm i element-pagination -D
```javascript
import Vue from 'vue'
import ElPagination from 'element-pagination'
import 'element-theme-default/dist/pagination.css'
import 'element-theme-chalk/dist/pagination.css'
Vue.use(ElPagination)
```

3
packages/select/src/select.vue
View File

@ -590,6 +590,9 @@
toggleMenu() {
if (!this.disabled) {
this.visible = !this.visible;
if (this.visible) {
(this.$refs.input || this.$refs.reference).focus();
}
}
},

2
packages/steps/README.md
View File

@ -13,7 +13,7 @@ npm i element-steps -D
```javascript
import Vue from 'vue'
import ElStep from 'element-steps'
import 'element-theme-default/dist/step.css'
import 'element-theme-chalk/dist/step.css'
Vue.use(ElStep)
```

2
packages/table/README.md
View File

@ -13,7 +13,7 @@ npm i element-table -D
```javascript
import Vue from 'vue'
import ElTable from 'element-table'
import 'element-theme-default'
import 'element-theme-chalk'
Vue.use(ElTable)
```

3
packages/theme-default/.gitignore vendored
View File

@ -1,3 +0,0 @@
node_modules
lib
npm-debug*

33
packages/theme-default/README.md
View File

@ -1,33 +0,0 @@
# element-theme-default
> element component defualt theme.
## Installation
```shell
npm i element-theme-default -S
```
## Usage
Use Sass Or postcss-import
```css
@import 'element-theme-default';
```
Or Use webpack
```javascript
import 'element-theme-default';
```
Or
```html
<link rel="stylesheet" href="path/to/node_modules/element-theme-default/lib/index.css">
```
## Import your need
```javascript
import 'element-theme-default/lib/input.css';
import 'element-theme-default/lib/select.css';
// ...
```

21
packages/theme-default/gulpfile.js
View File

@ -1,21 +0,0 @@
'use strict';
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssmin = require('gulp-cssmin');
var salad = require('postcss-salad')(require('./salad.config.json'));
gulp.task('compile', function() {
return gulp.src('./src/*.css')
.pipe(postcss([salad]))
.pipe(cssmin())
.pipe(gulp.dest('./lib'));
});
gulp.task('copyfont', function() {
return gulp.src('./src/fonts/**')
.pipe(cssmin())
.pipe(gulp.dest('./lib/fonts'));
});
gulp.task('build', ['compile', 'copyfont']);

35
packages/theme-default/package.json
View File

@ -1,35 +0,0 @@
{
"name": "element-theme-default",
"version": "1.4.4",
"description": "Element component default theme.",
"main": "lib/index.css",
"style": "lib/index.css",
"files": [
"lib",
"src"
],
"scripts": {
"build": "gulp build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ElementUI/theme-default.git"
},
"keywords": [
"element",
"theme"
],
"author": "haiping.zeng <qingwei.li@ele.me>",
"license": "MIT",
"bugs": {
"url": "https://github.com/ElementUI/theme-default/issues"
},
"homepage": "https://github.com/ElementUI/theme-default#readme",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-cssmin": "^0.1.7",
"gulp-postcss": "^6.1.1",
"postcss-salad": "^1.0.5"
},
"dependencies": {}
}

86
packages/theme-default/src/alert.css
View File

@ -1,86 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b alert {
width: 100%;
padding: var(--alert-padding);
margin: 0;
box-sizing: border-box;
border-radius: var(--alert-border-radius);
position: relative;
background-color: var(--color-white);
overflow: hidden;
color: var(--color-white);
opacity: 1;
display: table;
transition: opacity .2s;
@modifier success {
background-color: var(--alert-success-color);
}
@modifier info {
background-color: var(--alert-info-color);
}
@modifier warning {
background-color: var(--alert-warning-color);
}
@modifier error {
background-color: var(--alert-danger-color);
}
@e content {
display: table-cell;
padding: 0 8px;
}
@e icon {
font-size: var(--alert-icon-size);
width: var(--alert-icon-size);
display: table-cell;
color: var(--color-white);
vertical-align: middle;
@when big {
font-size: var(--alert-icon-large-size);
width: var(--alert-icon-large-size);
}
}
@e title {
font-size: var(--alert-title-font-size);
line-height: 18px;
@when bold {
font-weight: bold;
}
}
& .el-alert__description {
color: var(--color-white);
font-size: var(--alert-description-font-size);
margin: 5px 0 0 0;
}
@e closebtn {
font-size: var(--alert-close-font-size);
color: var(--color-white);
opacity: 1;
position: absolute 12px 15px * *;
cursor: pointer;
@when customed {
font-style: normal;
font-size: var(--alert-close-customed-font-size);
top: 9px;
}
}
}
.el-alert-fade-enter,
.el-alert-fade-leave-active {
opacity: 0;
}
}

8
packages/theme-default/src/aside.css
View File

@ -1,8 +0,0 @@
@charset "UTF-8";
@component-namespace el {
@b aside {
overflow: auto;
box-sizing: border-box;
}
}

80
packages/theme-default/src/autocomplete.css
View File

@ -1,80 +0,0 @@
@charset "UTF-8";
@import "./input.css";
@import "./common/var.css";
@import "./scrollbar.css";
@component-namespace el {
@b autocomplete {
position: relative;
display: inline-block;
}
@b autocomplete-suggestion {
margin: 5px 0;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
@e wrap {
max-height: 280px;
overflow: auto;
background-color: var(--color-white);
border: 1px solid var(--color-base-gray);
padding: 6px 0;
border-radius: 2px;
box-sizing: border-box;
}
@e list {
margin: 0;
padding: 0;
}
& li {
list-style: none;
line-height: 36px;
padding: 0 10px;
margin: 0;
cursor: pointer;
color: var(--color-extra-light-black);
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: var(--select-option-hover-background);
}
&.highlighted {
background-color: var(--color-primary);
color: var(--color-white);
}
&:active {
background-color: darken(var(--color-primary), 0.2);
}
&.divider {
margin-top: 6px;
border-top: 1px solid var(--color-base-gray);
}
&.divider:last-child {
margin-bottom: -6px;
}
}
@when loading {
li {
text-align: center;
height: 100px;
line-height: 100px;
font-size: 20px;
color: #999;
@utils-vertical-center;
&:hover {
background-color: var(--color-white);
}
}
& .el-icon-loading {
vertical-align: middle;
}
}
}
}

40
packages/theme-default/src/badge.css
View File

@ -1,40 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b badge {
position: relative;
vertical-align: middle;
display: inline-block;
@e content {
background-color: var(--badge-fill);
border-radius: var(--badge-radius);
color: var(--color-white);
display: inline-block;
font-size: var(--badge-font-size);
height: var(--badge-size);
line-height: var(--badge-size);
padding: 0 var(--badge-padding);
text-align: center;
white-space: nowrap;
border: 1px solid var(--color-white);
@when fixed {
position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
transform: translateY(-50%) translateX(100%);
@when dot {
right: 5px;
}
}
@when dot {
size: 8px 8px;
padding: 0;
right: 0;
border-radius: 50%;
}
}
}
}

2
packages/theme-default/src/base.css
View File

@ -1,2 +0,0 @@
@import "./common/transition.css";
@import "./icon.css";

0
packages/theme-default/src/breadcrumb-item.css
View File

45
packages/theme-default/src/breadcrumb.css
View File

@ -1,45 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b breadcrumb {
font-size:13px;
line-height: 1;
@utils-clearfix;
@e separator {
margin: 0 8px;
color: var(--color-extra-light-silver);
}
@e item {
float: left;
@e inner {
&, & a {
transition: color .15s linear;
color:var(--color-extra-light-black);
&:hover {
color: var(--color-primary);
cursor: pointer;
}
}
}
&:last-child {
.el-breadcrumb__item__inner,
.el-breadcrumb__item__inner a {
&, &:hover {
color: var(--color-light-silver);
cursor: text;
}
}
.el-breadcrumb__separator {
display: none;
}
}
}
}
}

0
packages/theme-default/src/button-group.css
View File

206
packages/theme-default/src/button.css
View File

@ -1,206 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@import './mixins/button';
@component-namespace el {
@b button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: var(--button-default-fill);
border: var(--border-base);
border-color: var(--button-default-border);
color: var(--button-default-color);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
@utils-user-select none;
& + .el-button {
margin-left: 10px;
}
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
&:hover,
&:focus {
color: var(--color-primary);
border-color: @color;
}
&:active {
color: shade(var(--color-primary), var(--button-active-shade-percent));
border-color: @color;
outline: none;
}
&::-moz-focus-inner {
border: 0;
}
& [class*="el-icon-"] {
& + span {
margin-left: 5px;
}
}
@when plain {
&:hover,
&:focus {
background: var(--color-white);
border-color: var(--color-primary);
color: var(--color-primary);
}
&:active {
background: var(--color-white);
border-color: shade(var(--color-primary), var(--button-active-shade-percent));
color: shade(var(--color-primary), var(--button-active-shade-percent));
outline: none;
}
}
@when active {
color: shade(var(--color-primary), var(--button-active-shade-percent));
border-color: @color;
}
@when disabled {
&,
&:hover,
&:focus {
color: var(--button-disabled-color);
cursor: not-allowed;
background-image: none;
background-color: var(--button-disabled-fill);
border-color: var(--button-disabled-border);
}
&.el-button--text {
background-color: transparent;
}
&.is-plain {
&,
&:hover,
&:focus {
background-color: var(--color-white);
border-color: var(--color-base-gray);
color: var(--color-extra-light-silver);
}
}
}
@when loading {
position: relative;
pointer-events: none;
&:before {
pointer-events: none;
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255,255,255,.35);
}
}
@m primary {
@mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
}
@m success {
@mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
}
@m warning {
@mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
}
@m danger {
@mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
}
@m info {
@mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
}
@m large {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
}
@m small {
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
}
@m mini {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
}
@m text {
border: none;
color: var(--color-primary);
background: transparent;
padding-left: 0;
padding-right: 0;
&:hover,
&:focus {
color: tint(var(--color-primary), var(--button-hover-tint-percent));
}
&:active {
color: shade(var(--color-primary), var(--button-active-shade-percent));
}
}
}
@b button-group {
@utils-clearfix;
display: inline-block;
vertical-align: middle;
& .el-button {
float: left;
position: relative;
& + .el-button {
margin-left: 0;
}
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:not(:last-child) {
margin-right: -1px;
}
&:hover,
&:focus,
&:active {
z-index: 1;
}
@when active {
z-index: 1;
}
}
@each $type in (primary, success, warning, danger, info) {
.el-button--$type {
&:first-child {
border-right-color: rgba(var(--color-white), 0.5);
}
&:last-child {
border-left-color: rgba(var(--color-white), 0.5);
}
&:not(:first-child):not(:last-child) {
border-left-color: rgba(var(--color-white), 0.5);
border-right-color: rgba(var(--color-white), 0.5);
}
}
}
}
}

23
packages/theme-default/src/card.css
View File

@ -1,23 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b card {
border: 1px solid var(--card-border-color);
border-radius: var(--card-border-radius);
background-color: var(--color-white);
overflow: hidden;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
0px 0px 6px 0px rgba(0, 0, 0, .04);
@e header {
padding: calc(var(--card-padding) - 2) var(--card-padding);
border-bottom: 1px solid var(--card-border-color);
box-sizing: border-box;
}
@e body {
padding: var(--card-padding);
}
}
}

53
packages/theme-default/src/carousel-item.css
View File

@ -1,53 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b carousel {
@e item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
z-index: calc(var(--index-normal) - 1);
@when active {
z-index: calc(var(--index-normal) + 1);
}
@when animating {
transition: transform .4s ease-in-out;
}
@modifier card {
width: 50%;
transition: transform .4s ease-in-out;
&.is-in-stage {
cursor: pointer;
z-index: var(--index-normal);
&:hover .el-carousel__mask,
&.is-hover .el-carousel__mask {
opacity: 0.12;
}
}
&.is-active {
z-index: calc(var(--index-normal) + 1);
}
}
}
@e mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--color-white);
opacity: 0.24;
transition: .2s;
}
}
}

134
packages/theme-default/src/carousel.css
View File

@ -1,134 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b carousel {
overflow-x: hidden;
position: relative;
@e container {
position: relative;
height: 300px;
}
@e arrow {
border: none;
outline: none;
padding: 0;
margin: 0;
size: var(--carousel-arrow-size);
cursor: pointer;
transition: .3s;
border-radius: 50%;
background-color: var(--carousel-arrow-background);
color: var(--color-white);
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
text-align: center;
font-size: var(--carousel-arrow-font-size);
@modifier left {
left: 16px;
}
@modifier right {
right: 16px;
}
&:hover {
background-color: var(--carousel-arrow-hover-background);
}
& i {
cursor: pointer;
}
}
@e indicators {
position: absolute;
list-style: none;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin: 0;
padding: 0;
z-index: calc(var(--index-normal) + 1);
@modifier outside {
bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2);
text-align: center;
position: static;
transform: none;
.el-carousel__indicator:hover button {
opacity: 0.64;
}
button {
background-color: var(--carousel-indicator-out-color);
opacity: 0.24;
}
}
@modifier labels {
left: 0;
right: 0;
transform: none;
text-align: center;
.el-carousel__button {
size: auto auto;
padding: 2px 18px;
font-size: 12px;
}
.el-carousel__indicator {
padding: 6px 4px;
}
}
}
@e indicator {
display: inline-block;
background-color: transparent;
padding: var(--carousel-indicator-padding-vertical) var(--carousel-indicator-padding-horizontal);
cursor: pointer;
&:hover button {
opacity: 0.72;
}
@when active {
button {
opacity: 1;
}
}
}
@e button {
display: block;
opacity: 0.48;
size: var(--carousel-indicator-width) var(--carousel-indicator-height);
background-color: var(--color-white);
border: none;
outline: none;
padding: 0;
margin: 0;
cursor: pointer;
transition: .3s;
}
}
.carousel-arrow-left-enter,
.carousel-arrow-left-leave-active {
transform: translateY(-50%) translateX(-10px);
opacity: 0;
}
.carousel-arrow-right-enter,
.carousel-arrow-right-leave-active {
transform: translateY(-50%) translateX(10px);
opacity: 0;
}
}

180
packages/theme-default/src/cascader.css
View File

@ -1,180 +0,0 @@
@charset "UTF-8";
@import "./input.css";
@import "./common/var.css";
@component-namespace el {
@b cascader {
display: inline-block;
position: relative;
.el-input,
.el-input__inner {
cursor: pointer;
}
.el-input__icon {
transition: none;
}
.el-icon-caret-bottom {
transition: transform .3s;
@when reverse {
transform: rotateZ(180deg);
}
}
.el-icon-circle-close {
z-index: calc(var(--index-normal) + 1);
}
.el-input__suffix-inner {
position: relative;
z-index: 2;
}
@e label {
position: absolute;
left: 0;
top: 0;
height: 100%;
line-height: 36px;
padding: 0 25px 0 10px;
color: var(--input-color);
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
text-align: left;
span {
color: var(--color-light-silver);
}
}
@m large {
font-size: var(--input-large-font-size);
.el-cascader__label {
line-height: calc(var(--input-large-height) - 2);
}
}
@m small {
font-size: var(--input-small-font-size);
.el-cascader__label {
line-height: calc(var(--input-small-height) - 2);
}
}
@when disabled {
.el-cascader__label {
z-index: calc(var(--index-normal) + 1);
color: var(--disabled-color-base);
}
}
}
@b cascader-menus {
white-space: nowrap;
background: #fff;
position: absolute;
margin: 5px 0;
z-index: calc(var(--index-normal) + 1);
border: var(--select-dropdown-border);
border-radius: var(--border-radius-small);
box-shadow: var(--select-dropdown-shadow);
}
@b cascader-menu {
display: inline-block;
vertical-align: top;
height: 204px;
overflow: auto;
border-right: var(--select-dropdown-border);
background-color: var(--select-dropdown-background);
box-sizing: border-box;
margin: 0;
padding: 6px 0;
min-width: 160px;
&:last-child {
border-right: 0;
}
@e item {
font-size: var(--select-font-size);
padding: 8px 30px 8px 10px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--select-option-color);
height: var(--select-option-height);
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
@e keyword {
font-weight: bold;
}
@m extensible {
&:after {
font-family: 'element-icons';
content: "\e606";
font-size: 12px;
transform: scale(0.8);
color: rgb(191, 203, 217);
position: absolute;
right: 10px;
margin-top: 1px;
}
}
@when disabled {
color: var(--select-option-disabled-color);
background-color: var(--select-option-disabled-background);
cursor: not-allowed;
&:hover {
background-color: var(--color-white);
}
}
@when active {
color: var(--color-white);
background-color: var(--select-option-selected);
&:hover {
background-color: var(--select-option-selected-hover);
}
}
&:hover {
background-color: var(--select-option-hover-background);
}
&.selected {
color: var(--color-white);
background-color: var(--select-option-selected);
&.hover {
background-color: var(--select-option-selected-hover);
}
}
}
@m flexible {
height: auto;
max-height: 180px;
overflow: auto;
.el-cascader-menu__item {
overflow: visible;
}
}
}
}

0
packages/theme-default/src/checkbox-button.css
View File

0
packages/theme-default/src/checkbox-group.css
View File

255
packages/theme-default/src/checkbox.css
View File

@ -1,255 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b checkbox {
color: var(--checkbox-color);
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
@utils-user-select none;
@e input {
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
@when disabled {
.el-checkbox__inner {
background-color: var(--checkbox-disabled-input-fill);
border-color: var(--checkbox-disabled-input-border-color);
cursor: not-allowed;
&::after {
cursor: not-allowed;
border-color: var(--checkbox-disabled-icon-color);
}
& + .el-checkbox__label {
cursor: not-allowed;
}
}
&.is-checked {
.el-checkbox__inner {
background-color: var(--checkbox-disabled-checked-input-fill);
border-color: var(--checkbox-disabled-checked-input-border-color);
&::after {
border-color: var(--checkbox-disabled-checked-icon-color);
}
}
}
&.is-indeterminate {
.el-checkbox__inner {
background-color: var(--checkbox-disabled-checked-input-fill);
border-color: var(--checkbox-disabled-checked-input-border-color);
&::before {
border-color: var(--checkbox-disabled-checked-icon-color);
}
}
}
& + .el-checkbox__label {
color: var(--disabled-color-base);
cursor: not-allowed;
}
}
@when checked {
.el-checkbox__inner {
background-color: var(--checkbox-checked-input-fill);
border-color: var(--checkbox-checked-input-border-color);
&::after {
transform: rotate(45deg) scaleY(1);
}
}
}
@when focus { /*focus时 视觉上区分*/
.el-checkbox__inner {
border-color: var(--checkbox-input-border-color-hover);
box-shadow: 0 0 1px 0 var(--checkbox-input-border-color-hover);
}
}
@when indeterminate {
.el-checkbox__inner {
background-color: var(--checkbox-checked-input-fill);
border-color: var(--checkbox-checked-input-border-color);
&::before {
content: '';
position: absolute;
display: block;
border: 1px solid var(--checkbox-checked-icon-color);
margin-top: -1px;
left: 3px;
right: 3px;
top: 50%;
}
&::after {
display: none;
}
}
}
}
@e inner {
display: inline-block;
position: relative;
border: var(--checkbox-input-border);
border-radius: var(--checkbox-input-border-radius);
box-sizing: border-box;
rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
z-index: var(--index-normal);
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
background-color .25s cubic-bezier(.71,-.46,.29,1.46);
&:hover {
border-color: var(--checkbox-input-border-color-hover);
}
&::after {
box-sizing: content-box;
content: "";
border: 2px solid var(--checkbox-checked-icon-color);
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 4px;
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
transform-origin: center;
}
}
@e original {
opacity: 0;
outline: none;
position: absolute;
margin: 0;
size: 0;
left: -999px;
}
@e label {
font-size: var(--checkbox-font-size);
padding-left: 5px;
}
& + .el-checkbox {
margin-left: 15px;
}
}
@b checkbox-button {
position: relative;
display: inline-block;
@e inner {
display: inline-block;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: var(--button-default-fill);
border: var(--border-base);
border-left: 0;
color: var(--button-default-color);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
position: relative;
cursor: pointer;
transition: var(--all-transition);
@utils-user-select none;
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
&:hover {
color: var(--color-primary);
}
& [class*="el-icon-"] {
line-height: 0.9;
& + span {
margin-left: 5px;
}
}
}
@e original {
opacity: 0;
outline: none;
position: absolute;
margin: 0;
left: -999px;
}
&.is-checked {
& .el-checkbox-button__inner {
color: var(--checkbox-button-checked-color);
background-color: var(--checkbox-button-checked-fill);
border-color: var(--checkbox-button-checked-border-color);
box-shadow: -1px 0 0 0 var(--checkbox-button-checked-border-color);
}
}
&.is-disabled {
& .el-checkbox-button__inner {
color: var(--button-disabled-color);
cursor: not-allowed;
background-image: none;
background-color: var(--button-disabled-fill);
border-color: var(--button-disabled-border);
box-shadow: none;
}
}
&:first-child {
.el-checkbox-button__inner {
border-left: var(--border-base);
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
box-shadow: none !important;
}
}
&.is-focus {
& .el-checkbox-button__inner {
border-color: var(--checkbox-button-checked-border-color);
box-shadow: 0 0 1px 0 var(--checkbox-button-checked-border-color) !important;
}
}
&:last-child {
.el-checkbox-button__inner {
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
}
@m large {
& .el-checkbox-button__inner {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
}
}
@m small {
& .el-checkbox-button__inner {
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
}
}
@m mini {
& .el-checkbox-button__inner {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
}
}
}
}

101
packages/theme-default/src/col.css
View File

@ -1,101 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
.el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 {
float: left;
box-sizing: border-box;
}
.el-col-0 {
width: 0;
}
@for $i from 0 to 24 {
.el-col-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
.el-col-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
@media (max-width: 768px) {
@for $i from 0 to 24 {
.el-col-xs-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
}
@media (min-width: 768px) {
@for $i from 0 to 24 {
.el-col-sm-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
.el-col-sm-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-sm-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-sm-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
}
@media (min-width: 992px) {
@for $i from 0 to 24 {
.el-col-md-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
.el-col-md-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-md-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-md-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
}
@media (min-width: 1200px) {
@for $i from 0 to 24 {
.el-col-lg-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
.el-col-lg-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-lg-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-lg-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
}

0
packages/theme-default/src/collapse-item.css
View File

53
packages/theme-default/src/collapse.css
View File

@ -1,53 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b collapse {
border: 1px solid var(--collapse-border-color);
border-radius: var(--collapse-border-radius);
}
@b collapse-item {
@e header {
height: var(--collapse-header-height);
line-height: @height;
padding-left: 15px;
background-color: var(--collapse-header-fill);
color: var(--collapse-header-color);
cursor: pointer;
border-bottom: 1px solid var(--collapse-border-color);
font-size: var(--collapse-header-size);
@e arrow {
margin-right: 8px;
transition: transform .3s;
}
}
@e wrap {
will-change: height;
background-color: var(--collapse-content-fill);
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid var(--collapse-border-color);
}
@e content {
padding: 10px 15px;
font-size: var(--collapse-content-size);
color: var(--collapse-content-color);
line-height: 1.769230769230769;
}
@when active {
> .el-collapse-item__header {
.el-collapse-item__header__arrow {
transform: rotate(90deg);
}
}
}
&:last-child {
margin-bottom: -1px;
}
}
}

266
packages/theme-default/src/color-picker.css
View File

@ -1,266 +0,0 @@
@import "./common/var.css";
@component-namespace el-color {
@component hue-slider {
position: relative;
box-sizing: border-box;
width: 280px;
height: 12px;
background-color: #f00;
padding: 0 2px;
@descendent bar {
position: relative;
background: linear-gradient(
to right, #f00 0%,
#ff0 17%, #0f0 33%,
#0ff 50%, #00f 67%,
#f0f 83%, #f00 100%);
height: 100%;
}
@descendent thumb {
position: absolute;
cursor: pointer;
box-sizing: border-box;
left: 0;
top: 0;
width: 4px;
height: 100%;
border-radius: 1px;
background: #fff;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
z-index: 1;
}
@when vertical {
width: 12px;
height: 180px;
padding: 2px 0;
.el-color-hue-slider__bar {
background: linear-gradient(
to bottom, #f00 0%,
#ff0 17%, #0f0 33%,
#0ff 50%, #00f 67%,
#f0f 83%, #f00 100%);
}
.el-color-hue-slider__thumb {
left: 0;
top: 0;
width: 100%;
height: 4px;
}
}
}
@component svpanel {
position: relative;
width: 280px;
height: 180px;
@descendent white, black {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@descendent white {
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
@descendent black {
background: linear-gradient(to top, #000, rgba(0,0,0,0));
}
@descendent cursor {
position: absolute;
> div {
cursor: head;
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
}
}
}
@component alpha-slider {
position: relative;
box-sizing: border-box;
width: 280px;
height: 12px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
@descendent bar {
position: relative;
background: linear-gradient(
to right, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
height: 100%;
}
@descendent thumb {
position: absolute;
cursor: pointer;
box-sizing: border-box;
left: 0;
top: 0;
width: 4px;
height: 100%;
border-radius: 1px;
background: #fff;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
z-index: 1;
}
@when vertical {
width: 20px;
height: 180px;
.el-color-alpha-slider__bar {
background: linear-gradient(
to bottom, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
}
.el-color-alpha-slider__thumb {
left: 0;
top: 0;
width: 100%;
height: 4px;
}
}
}
@component dropdown {
width: 300px;
@descendent main-wrapper {
margin-bottom: 6px;
&::after {
content: "";
display: table;
clear: both;
}
}
@descendent btns {
margin-top: 6px;
text-align: right;
}
@descendent value {
float: left;
line-height: 26px;
font-size: 12px;
color: var(--color-base-black);
}
@descendent btn {
border: 1px solid #dcdcdc;
color: #333;
line-height: 24px;
border-radius: 2px;
padding: 0 20px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
&[disabled] {
color: #cccccc;
cursor: not-allowed;
}
&:hover {
color: var(--color-primary);
border-color: var(--color-primary);
}
}
@descendent link-btn {
cursor: pointer;
color: var(--color-primary);
text-decoration: none;
padding: 15px;
font-size: 12px;
&:hover {
color: tint(var(--color-primary), var(--button-hover-tint-percent));
}
}
}
@component picker {
display: inline-block;
position: relative;
line-height: normal;
@descendent trigger {
display: inline-block;
box-sizing: border-box;
height: 36px;
padding: 6px;
border: 1px solid #bfcbd9;
border-radius: 4px;
font-size: 0;
}
@descendent color {
position: relative;
display: inline-block;
box-sizing: border-box;
border: 1px solid #666;
width: 22px;
height: 22px;
text-align: center;
@when alpha {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
}
@descendent color-inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
@descendent empty {
font-size: 12px;
vertical-align: middle;
color: #666;
position: absolute;
top: 4px;
left: 4px;
}
@descendent icon {
display: inline-block;
position: relative;
top: -6px;
margin-left: 8px;
width: 12px;
color: #888;
font-size: 12px;
}
@descendent panel {
position: absolute;
z-index: 10;
padding: 6px;
background-color: var(--color-white);
border: 1px solid var(--color-base-gray);
box-shadow: var(--dropdown-menu-box-shadow);
}
}
}

33
packages/theme-default/src/common/popup.css
View File

@ -1,33 +0,0 @@
.v-modal-enter {
animation: v-modal-in .2s ease;
}
.v-modal-leave {
animation: v-modal-out .2s ease forwards;
}
@keyframes v-modal-in {
0% {
opacity: 0;
}
100% {
}
}
@keyframes v-modal-out {
0% {
}
100% {
opacity: 0;
}
}
.v-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background: #000;
}

102
packages/theme-default/src/common/transition.css
View File

@ -1,102 +0,0 @@
@charset "UTF-8";
@import './var.css';
/* DEPRECATED */
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
transition: var(--fade-linear-transition);
}
.fade-in-linear-enter,
.fade-in-linear-leave,
.fade-in-linear-leave-active {
opacity: 0;
}
.el-fade-in-linear-enter-active,
.el-fade-in-linear-leave-active {
transition: var(--fade-linear-transition);
}
.el-fade-in-linear-enter,
.el-fade-in-linear-leave,
.el-fade-in-linear-leave-active {
opacity: 0;
}
.el-fade-in-enter-active,
.el-fade-in-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-fade-in-enter,
.el-fade-in-leave-active {
opacity: 0;
}
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
opacity: 0;
transform: scaleX(0);
}
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: var(--md-fade-transition);
transform-origin: center top;
}
.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}
.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
opacity: 1;
transform: scaleY(1);
transition: var(--md-fade-transition);
transform-origin: center bottom;
}
.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
opacity: 0;
transform: scaleY(0);
}
.el-zoom-in-left-enter-active,
.el-zoom-in-left-leave-active {
opacity: 1;
transform: scale(1, 1);
transition: var(--md-fade-transition);
transform-origin: top left;
}
.el-zoom-in-left-enter,
.el-zoom-in-left-leave-active {
opacity: 0;
transform: scale(.45, .45);
}
.collapse-transition {
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}
.el-list-enter-active,
.el-list-leave-active {
transition: all 1s;
}
.el-list-enter, .el-list-leave-active {
opacity: 0;
transform: translateY(-30px);
}
.el-opacity-transition {
transition: opacity .3s cubic-bezier(.55,0,.1,1);
}

614
packages/theme-default/src/common/var.css
View File

@ -1,614 +0,0 @@
:root {
/* Transition
-------------------------- */
--all-transition: all .3s cubic-bezier(.645,.045,.355,1);
--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
--fade-linear-transition: opacity 200ms linear;
--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1);
--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
/* Colors
-------------------------- */
--color-primary: #20a0ff;
--color-success: #13ce66;
--color-warning: #f7ba2a;
--color-danger: #ff4949;
--color-info: #50bfff;
--color-secondary: color(var(--color-primary) s(99%) l(*0.9));
--color-white: #fff;
--color-dark-white: color(var(--color-white) blend(var(--color-primary) 2%));
--color-black: #000;
--color-base-black: color(var(--color-primary) h(+6) s(33%) l(18%));
--color-light-black: color(var(--color-base-black) h(+5) s(27%) l(27%));
--color-extra-light-black: color(var(--color-base-black) h(+2) s(19%) l(35%));
--color-base-silver: color(var(--color-base-black) h(+3) s(16%) l(58%));
--color-light-silver: color(var(--color-base-black) h(+3) s(23%) l(67%));
--color-extra-light-silver: color(var(--color-base-black) s(26%) l(80%));
--color-base-gray: color(var(--color-base-black) s(28%) l(86%));
--color-light-gray: color(var(--color-base-black) h(+10) s(33%) l(92%));
--color-extra-light-gray: color(var(--color-base-black) h(+6) s(33%) l(95%));
/* Link
-------------------------- */
--link-color: var(--color-extra-light-black);
--link-hover-color: var(--color-primary);
/* Border
-------------------------- */
--border-width-base: 1px;
--border-style-base: solid;
--border-color-base: var(--color-extra-light-silver);
--border-color-hover: var(--color-base-silver);
--border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-radius-circle: 100%;
/* Box-shadow
-------------------------- */
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
/* Fill
-------------------------- */
--fill-base: var(--color-white);
/* Font
-------------------------- */
--font-size-base: 14px;
--font-color-base: var(--color-base-black);
--font-color-disabled-base: #bbb;
/* Size
-------------------------- */
--size-base: 14px;
/* z-index
-------------------------- */
--index-normal: 1;
--index-top: 1000;
--index-popper: 2000;
/* Disable base
-------------------------- */
--disabled-fill-base: var(--color-extra-light-gray);
--disabled-color-base: #bbb;
--disabled-border-base: var(--color-base-gray);
/* Icon
-------------------------- */
--icon-color: #666;
/* Checkbox
-------------------------- */
--checkbox-font-size: 14px;
--checkbox-color: var(--color-base-black);
--checkbox-input-height: 18px;
--checkbox-input-width: 18px;
--checkbox-input-border-radius: var(--border-radius-base);
--checkbox-input-fill: var(--color-white);
--checkbox-input-border: var(--border-base);
--checkbox-input-border-color: var(--border-color-base);
--checkbox-icon-color: var(--color-white);
--checkbox-disabled-input-border-color: var(--disabled-border-base);
--checkbox-disabled-input-fill: var(--disabled-fill-base);
--checkbox-disabled-icon-color: var(--disabled-fill-base);
--checkbox-disabled-checked-input-fill: var(--disabled-border-base);
--checkbox-disabled-checked-input-border-color: var(--disabled-border-base);
--checkbox-disabled-checked-icon-color: var(--color-white);
--checkbox-checked-input-border-color: var(--color-secondary);
--checkbox-checked-input-fill: var(--color-primary);
--checkbox-checked-icon-color: var(--fill-base);
--checkbox-input-border-color-hover: var(--color-primary);
--checkbox-button-font-size: var(--font-size-base);
--checkbox-button-checked-fill: var(--color-primary);
--checkbox-button-checked-color: var(--color-white);
--checkbox-button-checked-border-color: var(--color-primary);
/* Radio
-------------------------- */
--radio-font-size: 14px;
--radio-color: var(--color-base-black);
--radio-input-height: 18px;
--radio-input-width: 18px;
--radio-input-border-radius: var(--border-radius-circle);
--radio-input-fill: var(--color-white);
--radio-input-border: var(--border-base);
--radio-input-border-color: var(--border-color-base);
--radio-icon-color: var(--color-white);
--radio-disabled-input-border-color: var(--disabled-border-base);
--radio-disabled-input-fill: var(--disabled-fill-base);
--radio-disabled-icon-color: var(--disabled-fill-base);
--radio-disabled-checked-input-fill: var(--disabled-border-base);
--radio-disabled-checked-input-border-color: var(--disabled-border-base);
--radio-disabled-checked-icon-color: var(--color-white);
--radio-checked-input-border-color: var(--color-primary);
--radio-checked-input-fill: var(--color-white);
--radio-checked-icon-color: var(--color-primary);
--radio-input-border-color-hover: var(--color-primary);
--radio-button-font-size: var(--font-size-base);
--radio-button-checked-fill: var(--color-primary);
--radio-button-checked-color: var(--color-white);
--radio-button-checked-border-color: var(--color-primary);
/* Select
-------------------------- */
--select-border-color-hover: var(--border-color-hover);
--select-disabled-border: var(--disabled-border-base);
--select-font-size: var(--font-size-base);
--select-close-hover-color: var(--color-light-silver);
--select-input-color: var(--color-extra-light-silver);
--select-multiple-input-color: #666;
--select-input-focus-background: var(--color-primary);
--select-input-font-size: 12px;
--select-tag-height: 24px;
--select-tag-color: var(--color-white);
--select-tag-background: var(--color-primary);
--select-option-color: var(--link-color);
--select-option-disabled-color: var(--color-extra-light-silver);
--select-option-disabled-background: var(--color-white);
--select-option-height: 36px;
--select-option-hover-background: var(--color-light-gray);
--select-option-selected: var(--color-primary);
--select-option-selected-hover: shade(var(--color-primary), 0.12);
--select-group-color: #999;
--select-group-height: 30px;
--select-group-font-size: 12px;
--select-dropdown-background: var(--color-white);
--select-dropdown-shadow: var(--box-shadow-base);
--select-dropdown-empty-color: #999;
--select-dropdown-max-height: 274px;
--select-dropdown-padding: 6px 0;
--select-dropdown-empty-padding: 10px 0;
--select-dropdown-border: solid 1px var(--disabled-border-base);
/* Alert
-------------------------- */
--alert-padding: 8px 16px;
--alert-border-radius: var(--border-radius-base);
--alert-title-font-size: 13px;
--alert-description-font-size: 12px;
--alert-close-font-size: 12px;
--alert-close-customed-font-size: 13px;
--alert-success-color: var(--color-success);
--alert-info-color: var(--color-info);
--alert-warning-color: var(--color-warning);
--alert-danger-color: var(--color-danger);
--alert-icon-size: 16px;
--alert-icon-large-size: 28px;
/* Message Box
-------------------------- */
--msgbox-width: 420px;
--msgbox-border-radius: 3px;
--msgbox-font-size: 16px;
--msgbox-content-font-size: 14px;
--msgbox-content-color: var(--link-color);
--msgbox-error-font-size: 12px;
--msgbox-success-color: var(--color-success);
--msgbox-info-color: var(--color-info);
--msgbox-warning-color: var(--color-warning);
--msgbox-danger-color: var(--color-danger);
/* Message
-------------------------- */
--message-shadow: var(--box-shadow-base);
--message-min-width: 300px;
--message-padding: 10px 12px;
--message-content-color: var(--border-color-hover);
--message-close-color: var(--color-extra-light-silver);
--message-close-hover-color: var(--color-light-silver);
--message-success-color: var(--color-success);
--message-info-color: var(--color-info);
--message-warning-color: var(--color-warning);
--message-danger-color: var(--color-danger);
/* Notification
-------------------------- */
--notification-width: 330px;
--notification-padding: 20px;
--notification-shadow: var(--box-shadow-base);
--notification-icon-size: 40px;
--notification-font-size: var(--font-size-base);
--notification-color: var(--border-color-hover);
--notification-title-font-size: 16px;
--notification-title-color: var(--color-base-black);
--notification-close-color: var(--color-extra-light-silver);
--notification-close-hover-color: var(--color-light-silver);
--notification-success-color: var(--color-success);
--notification-info-color: var(--color-info);
--notification-warning-color: var(--color-warning);
--notification-danger-color: var(--color-danger);
/* Input
-------------------------- */
--input-font-size: var(--font-size-base);
--input-color: var(--font-color-base);
--input-width: 140px;
--input-height: 36px;
--input-border: var(--border-base);
--input-border-color: var(--border-color-base);
--input-border-radius: var(--border-radius-base);
--input-border-color-hover: var(--border-color-hover);
--input-fill: var(--color-white);
--input-fill-disabled: var(--disabled-fill-base);
--input-color-disabled: var(--font-color-disabled-base);
--input-icon-color: var(--color-extra-light-silver);
--input-placeholder-color: var(--color-light-silver);
--input-max-width: 314px;
--input-hover-border: var(--border-color-hover);
--input-focus-border: var(--color-primary);
--input-focus-fill: var(--color-white);
--input-disabled-fill: var(--disabled-fill-base);
--input-disabled-border: var(--disabled-border-base);
--input-disabled-color: var(--disabled-color-base);
--input-disabled-placeholder-color: var(--color-extra-light-silver);
--input-large-font-size: 16px;
--input-large-height: 42px;
--input-small-font-size: 13px;
--input-small-height: 30px;
--input-mini-font-size: 12px;
--input-mini-height: 22px;
/* Cascader
-------------------------- */
--cascader-menu-fill: var(--fill-base);
--cascader-menu-font-size: var(--font-size-base);
--cascader-menu-radius: var(--border-radius-base);
--cascader-menu-border: var(--border-base);
--cascader-menu-border-color: var(--border-color-base);
--cascader-menu-border-width: var(--border-width-base);
--cascader-menu-color: var(--font-color-base);
--cascader-menu-option-color-active: var(--color-secondary);
--cascader-menu-option-fill-active: rgba(var(--color-secondary), 0.12);
--cascader-menu-option-color-hover: var(--font-color-base);
--cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06);
--cascader-menu-option-color-disabled: #999;
--cascader-menu-option-fill-disabled: rgba(var(--color-black), 0.06);
--cascader-menu-option-empty-color: #666;
--cascader-menu-group-color: #999;
--cascader-menu-shadow: 0 1px 2px rgba(var(--color-black), 0.14), 0 0 3px rgba(var(--color-black), 0.14);
--cascader-menu-option-pinyin-color: #999;
--cascader-menu-submenu-shadow: 1px 1px 2px rgba(var(--color-black), 0.14), 1px 0 2px rgba(var(--color-black), 0.14);
/* Group
-------------------------- */
--group-option-flex: 0 0 (1/5) * 100%;
--group-option-offset-bottom: 12px;
--group-option-fill-hover: rgba(var(--color-black), 0.06);
--group-title-color: var(--color-black);
--group-title-font-size: var(--font-size-base);
--group-title-width: 66px;
/* Tab
-------------------------- */
--tab-font-size: var(--font-size-base);
--tab-border-line: 1px solid #e4e4e4;
--tab-header-color-active: var(--color-secondary);
--tab-header-color-hover: var(--font-color-base);
--tab-header-color: var(--font-color-base);
--tab-header-fill-active: rgba(var(--color-black), 0.06);
--tab-header-fill-hover: rgba(var(--color-black), 0.06);
--tab-vertical-header-width: 90px;
--tab-vertical-header-count-color: var(--color-white);
--tab-vertical-header-count-fill: var(--color-secondary);
/* Button
-------------------------- */
--button-font-size: 14px;
--button-border-radius: var(--border-radius-base);
--button-padding-vertical: 10px;
--button-padding-horizontal: 15px;
--button-large-font-size: 16px;
--button-large-padding-vertical: 11px;
--button-large-padding-horizontal: 19px;
--button-small-font-size: 12px;
--button-small-padding-vertical: 7px;
--button-small-padding-horizontal: 9px;
--button-mini-font-size: 12px;
--button-mini-padding-vertical: 4px;
--button-mini-padding-horizontal: 4px;
--button-default-color: var(--color-base-black);
--button-default-fill: var(--color-white);
--button-default-border: #c4c4c4;
--button-ghost-color: #666;
--button-ghost-fill: transparent;
--button-ghost-border: none;
--button-disabled-color: var(--color-extra-light-silver);
--button-disabled-fill: var(--color-extra-light-gray);
--button-disabled-border: var(--disabled-border-base);
--button-primary-border: var(--color-primary);
--button-primary-color: var(--color-white);
--button-primary-fill: var(--color-primary);
--button-success-border: var(--color-success);
--button-success-color: var(--color-white);
--button-success-fill: var(--color-success);
--button-warning-border: var(--color-warning);
--button-warning-color: var(--color-white);
--button-warning-fill: var(--color-warning);
--button-danger-border: var(--color-danger);
--button-danger-color: var(--color-white);
--button-danger-fill: var(--color-danger);
--button-info-border: var(--color-info);
--button-info-color: var(--color-white);
--button-info-fill: var(--color-info);
--button-hover-tint-percent: 20%;
--button-active-shade-percent: 10%;
/* cascader
-------------------------- */
--cascader-height: 200px;
/* Switch
-------------------------- */
--switch-on-color: var(--color-primary);
--switch-off-color: var(--color-extra-light-silver);
--switch-disabled-color: var(--color-light-gray);
--switch-disabled-text-color: var(--color-dark-white);
--switch-font-size: var(--font-size-base);
--switch-core-border-radius: 12px;
--switch-width: 46px;
--switch-height: 22px;
--switch-button-size: 16px;
/* Dialog
-------------------------- */
--dialog-background-color: var(--color-secondary);
--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--dialog-close-color: var(--color-extra-light-silver);
--dialog-close-hover-color: var(--color-primary);
--dialog-title-font-size: 16px;
--dialog-font-size: 14px;
/* Table
-------------------------- */
--table-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
--table-text-color: var(--color-base-black);
--table-header-background: var(--color-extra-light-gray);
--table-footer-background: var(--color-dark-white);
/* Pagination
-------------------------- */
--pagination-font-size: 13px;
--pagination-fill: var(--color-white);
--pagination-color: var(--link-color);
--pagination-border-radius: 2px;
--pagination-button-color: var(--color-light-silver);
--pagination-button-size: 28px;
--pagination-button-disabled-color: #e4e4e4;
--pagination-button-disabled-fill: var(--color-white);
--pagination-border-color: var(--disabled-border-base);
--pagination-hover-fill: var(--color-primary);
--pagination-hover-color: var(--color-white);
/* Popover
-------------------------- */
--popover-fill: var(--color-white);
--popover-font-size: 12px;
--popover-border-color: var(--disabled-border-base);
--popover-arrow-size: 6px;
--popover-padding: 10px;
--popover-title-font-size: 13px;
--popover-title-color: var(--color-base-black);
/* Tooltip
-------------------------- */
--tooltip-fill: var(--color-base-black);
--tooltip-color: var(--color-white);
--tooltip-font-size: 12px;
--tooltip-border-color: var(--color-base-black);
--tooltip-arrow-size: 6px;
--tooltip-padding: 10px;
/* Tag
-------------------------- */
--tag-padding: 0 5px;
--tag-fill: var(--border-color-hover);
--tag-color: var(--color-white);
--tag-close-color: #666;
--tag-font-size: 12px;
--tag-border-radius: 4px;
--tag-gray-fill: var(--color-light-gray);
--tag-gray-border: var(--color-light-gray);
--tag-gray-color: var(--link-color);
--tag-primary-fill: rgba(var(--color-primary),0.10);
--tag-primary-border: rgba(var(--color-primary),0.20);
--tag-primary-color: var(--color-primary);
--tag-success-fill: rgba(18,206,102,0.10);
--tag-success-border: rgba(18,206,102,0.20);
--tag-success-color: var(--color-success);
--tag-warning-fill: rgba(247,186,41,0.10);
--tag-warning-border: rgba(247,186,41,0.20);
--tag-warning-color: var(--color-warning);
--tag-danger-fill: rgba(255,73,73,0.10);
--tag-danger-border: rgba(255,73,73,0.20);
--tag-danger-color: var(--color-danger);
/* Dropdown
-------------------------- */
--dropdown-menu-box-shadow: var(--box-shadow-dark);
--dropdown-menuItem-hover-fill: var(--color-light-gray);
--dropdown-menuItem-hover-color: var(--link-color);
/* Badge
-------------------------- */
--badge-fill: var(--color-danger);
--badge-radius: 10px;
--badge-font-size: 12px;
--badge-padding: 6px;
--badge-size: 18px;
/* Card
--------------------------*/
--card-border-color: var(--disabled-border-base);
--card-border-radius: 4px;
--card-padding: 20px;
/* Slider
--------------------------*/
--slider-main-background-color: var(--color-primary);
--slider-runway-background-color: var(--color-light-gray);
--slider-button-hover-color: shade(var(--color-primary), 0.12);
--slider-stop-background-color: var(--color-extra-light-silver);
--slider-disable-color: var(--color-extra-light-silver);
--slider-margin: 16px 0;
--slider-border-radius: 3px;
--slider-height: 4px;
--slider-button-size: 12px;
--slider-button-wrapper-size: 36px;
--slider-button-wrapper-offset: -16px;
/* Steps
--------------------------*/
--steps-border-color: var(--disabled-border-base);
--steps-border-radius: 4px;
--steps-padding: 20px;
/* Menu
--------------------------*/
--menu-item-color: var(--link-color);
--menu-item-fill: var(--color-extra-light-gray);
--menu-item-hover-fill: var(--disabled-border-base);
--dark-menu-item-color: var(--link-color);
--dark-menu-item-fill: var(--color-light-black);
--dark-menu-item-hover-fill: var(--link-color);
/* Rate
--------------------------*/
--rate-height: 20px;
--rate-font-size: var(--font-size-base);
--rate-icon-size: 18px;
--rate-icon-margin: 6px;
--rate-icon-color: var(--color-extra-light-silver);
/* DatePicker
--------------------------*/
--datepicker-color: var(--link-color);
--datepicker-off-color: #ddd;
--datepicker-header-color: var(--border-color-hover);
--datepicker-icon-color: var(--color-light-silver);
--datepicker-border-color: var(--disabled-border-base);
--datepicker-inner-border-color: #e4e4e4;
--datepicker-cell-hover-color: var(--color-light-gray);
--datepicker-inrange-color: tint(var(--color-primary), 0.8);
--datepicker-inrange-hover-color: tint(var(--color-primary), 0.64);
--datepicker-active-color: var(--color-primary);
--datepicker-text-hover-color: var(--color-primary);
/* Loading
--------------------------*/
--loading-spinner-size: 42px;
--loading-fullscreen-spinner-size: 50px;
/* Scrollbar
--------------------------*/
--scrollbar-background-color: rgba(var(--color-light-silver), .3);
--scrollbar-hover-background-color: rgba(var(--color-light-silver), .5);
/* Carousel
--------------------------*/
--carousel-arrow-font-size: 12px;
--carousel-arrow-size: 36px;
--carousel-arrow-background: rgba(31, 45, 61, 0.11);
--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
--carousel-indicator-width: 30px;
--carousel-indicator-height: 2px;
--carousel-indicator-padding-horizontal: 4px;
--carousel-indicator-padding-vertical: 12px;
--carousel-indicator-out-color: var(--border-color-hover);
/* Collapse
--------------------------*/
--collapse-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
--collapse-header-height: 43px;
--collapse-border-radius: 0;
--collapse-header-padding: 20px;
--collapse-header-fill: var(--color-white);
--collapse-header-color: var(--color-extra-light-black);
--collapse-header-size: 13px;
--collapse-content-fill: var(--color-dark-white);
--collapse-content-size: 13px;
--collapse-content-color: var(--color-base-black);
/* Transfer
--------------------------*/
--transfer-border-color: var(--color-base-gray);
--transfer-box-shadow: var(--box-shadow-base);
--transfer-panel-width: 200px;
--transfer-panel-header-height: 36px;
--transfer-panel-header-background: var(--color-dark-white);
--transfer-panel-footer-height: 36px;
--transfer-panel-body-height: 246px;
--transfer-item-height: 32px;
--transfer-item-hover-background: var(--color-light-gray);
--transfer-filter-height: 22px;
/* Header
--------------------------*/
--header-padding: 0 20px;
/* Footer
--------------------------*/
--footer-padding: 0 20px;
/* Main
--------------------------*/
--main-padding: 20px;
}

14
packages/theme-default/src/container.css
View File

@ -1,14 +0,0 @@
@charset "UTF-8";
@component-namespace el {
@b container {
display: flex;
flex-direction: row;
flex: 1;
box-sizing: border-box;
@when vertical {
flex-direction: column;
}
}
}

11
packages/theme-default/src/date-picker.css
View File

@ -1,11 +0,0 @@
@import "./date-picker/date-table.css";
@import "./date-picker/month-table.css";
@import "./date-picker/year-table.css";
@import "./date-picker/time-spinner.css";
@import "./date-picker/picker.css";
@import "./date-picker/date-picker.css";
@import "./date-picker/date-range-picker.css";
@import "./date-picker/time-range-picker.css";
@import "./date-picker/time-picker.css";
@import "./input.css";
@import "./scrollbar.css";

86
packages/theme-default/src/date-picker/date-picker.css
View File

@ -1,86 +0,0 @@
@import "../common/var.css";
@import "./picker-panel.css";
@component-namespace el {
@b date-picker {
min-width: 254px;
&.has-sidebar.has-time {
min-width: 434px;
}
&.has-sidebar {
min-width: 370px;
}
&.has-time {
min-width: 324px;
}
.el-picker-panel__content {
min-width: 224px;
}
table {
table-layout: fixed;
width: 100%;
}
@e editor-wrap {
position: relative;
display: table-cell;
padding: 0 5px;
}
@e time-header {
position: relative;
border-bottom: 1px solid var(--datepicker-inner-border-color);
font-size: 12px;
padding: 8px 5px 5px 5px;
display: table;
width: 100%;
box-sizing: border-box;
}
@e header {
margin: 12px;
text-align: center;
}
@e header-label {
font-size: 14px;
padding: 0 5px;
line-height: 22px;
text-align: center;
cursor: pointer;
&:hover {
color: var(--datepicker-text-hover-color);
}
&.active {
color: var(--datepicker-active-color);
}
}
@e prev-btn {
float: left;
}
@e next-btn {
float: right;
}
@e time-wrap {
padding: 10px;
text-align: center;
}
@e time-label {
float: left;
cursor: pointer;
line-height: 30px;
margin-left: 10px;
}
}
}

112
packages/theme-default/src/date-picker/date-range-picker.css
View File

@ -1,112 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b date-range-picker {
min-width: 520px;
&.has-sidebar.has-time {
min-width: 766px;
}
&.has-sidebar {
min-width: 620px;
}
&.has-time {
min-width: 660px;
}
table {
table-layout: fixed;
width: 100%;
}
.el-picker-panel__body {
min-width: 513px;
}
.el-picker-panel__content {
margin: 0;
}
@e header {
position: relative;
text-align: center;
height: 28px;
button {
float: left;
}
div {
font-size: 14px;
margin-right: 50px;
}
}
@e content {
float: left;
width: 50%;
box-sizing: border-box;
margin: 0;
padding: 16px;
@when left {
border-right: 1px solid var(--datepicker-inner-border-color);
}
@when right {
.el-date-range-picker__header {
button {
float: right;
}
div {
margin-left: 50px;
margin-right: 50px;
}
}
}
}
@e editors-wrap {
box-sizing: border-box;
display: table-cell;
@when right {
text-align: right;
}
}
@e time-header {
position: relative;
border-bottom: 1px solid var(--datepicker-inner-border-color);
font-size: 12px;
padding: 8px 5px 5px 5px;
display: table;
width: 100%;
box-sizing: border-box;
> .el-icon-arrow-right {
font-size: 20px;
vertical-align: middle;
display: table-cell;
color: var(--datepicker-icon-color);
}
}
@e time-picker-wrap {
position: relative;
display: table-cell;
padding: 0 5px;
.el-picker-panel {
position: absolute;
top: 13px;
right: 0;
z-index: 1;
background: var(--color-white);
}
}
}
}

85
packages/theme-default/src/date-picker/date-table.css
View File

@ -1,85 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b date-table {
font-size: 12px;
min-width: 224px;
user-select: none;
@when week-mode {
.el-date-table__row {
&:hover {
background-color: var(--datepicker-cell-hover-color);
}
&.current {
background-color: var(--datepicker-inrange-color);
}
}
}
td {
width: 32px;
height: 32px;
box-sizing: border-box;
text-align: center;
cursor: pointer;
&.next-month,
&.prev-month {
color: var(--datepicker-off-color);
}
&.today {
color: var(--datepicker-text-hover-color);
position: relative;
&:before {
content: " ";
position: absolute;
top: 0px;
right: 0px;
width: 0;
height: 0;
border-top: 0.5em solid var(--datepicker-active-color);
border-left: .5em solid transparent;
}
}
&.available:hover {
background-color: var(--datepicker-cell-hover-color);
}
&.in-range {
background-color: var(--datepicker-inrange-color);
&:hover {
background-color: var(--datepicker-inrange-hover-color);
}
}
&.current:not(.disabled),
&.start-date,
&.end-date {
background-color: var(--datepicker-active-color) !important;
color: var(--color-white);
}
&.disabled {
background-color: #f4f4f4;
opacity: 1;
cursor: not-allowed;
color: #ccc;
}
&.week {
font-size: 80%;
color: var(--datepicker-header-color);
}
}
th {
padding: 5px;
color: var(--datepicker-header-color);
font-weight: 400;
}
}
}

38
packages/theme-default/src/date-picker/month-table.css
View File

@ -1,38 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b month-table {
font-size: 12px;
margin: -1px;
border-collapse: collapse;
td {
text-align: center;
padding: 20px 3px;
cursor: pointer;
&.disabled .cell {
background-color: #f4f4f4;
cursor: not-allowed;
color: #ccc;
}
.cell {
width: 48px;
height: 32px;
display: block;
line-height: 32px;
color: var(--datepicker-color);
&:hover {
background-color: var(--datepicker-cell-hover-color);
}
}
&.current:not(.disabled) .cell {
background-color: var(--datepicker-active-color) !important;
color: var(--color-white);
}
}
}
}

114
packages/theme-default/src/date-picker/picker-panel.css
View File

@ -1,114 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b picker-panel {
color: var(--datepicker-color);
border: 1px solid var(--datepicker-border-color);
box-shadow: 0 2px 6px #ccc;
background: var(--color-white);
border-radius: 2px;
line-height: 20px;
margin: 5px 0;
@e body, body-wrapper {
&::after {
content: "";
display: table;
clear: both;
}
}
@e content {
position: relative;
margin: 15px;
}
@e footer {
border-top: 1px solid var(--datepicker-inner-border-color);
padding: 4px;
text-align: right;
background-color: var(--color-white);
position: relative;
}
@e shortcut {
display: block;
width: 100%;
border: 0;
background-color: transparent;
line-height: 28px;
font-size: 14px;
color: var(--datepicker-color);
padding-left: 12px;
text-align: left;
outline: none;
cursor: pointer;
&:hover {
background-color: var(--datepicker-cell-hover-color);
}
&.active {
background-color: #e6f1fe;
color: var(--datepicker-active-color);
}
}
@e btn {
border: 1px solid #dcdcdc;
color: #333;
line-height: 24px;
border-radius: 2px;
padding: 0 20px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
&[disabled] {
color: #cccccc;
cursor: not-allowed;
}
}
@e icon-btn {
font-size: 12px;
color: var(--datepicker-icon-color);
border: 0;
background: transparent;
cursor: pointer;
outline: none;
margin-top: 3px;
&:hover {
color: var(--datepicker-text-hover-color);
}
}
@e link-btn {
cursor: pointer;
color: var(--color-primary);
text-decoration: none;
padding: 15px;
font-size: 12px;
}
}
.el-picker-panel *[slot=sidebar],
.el-picker-panel__sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 110px;
border-right: 1px solid var(--datepicker-inner-border-color);
box-sizing: border-box;
padding-top: 6px;
background-color: var(--color-dark-white);
overflow: auto;
}
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
.el-picker-panel__sidebar + .el-picker-panel__body {
margin-left: 110px;
}
}

35
packages/theme-default/src/date-picker/picker.css
View File

@ -1,35 +0,0 @@
@import "../common/var.css";
@import "../common/transition.css";
@component-namespace el {
@b date-editor {
position: relative;
display: inline-block;
&.el-input {
width: 193px;
}
@m daterange {
&.el-input {
width: 220px;
}
}
@m datetimerange {
&.el-input {
width: 350px;
}
}
.el-picker-panel {
position: absolute;
min-width: 180px;
box-sizing: border-box;
box-shadow: 0 2px 6px #ccc;
background: var(--color-white);
z-index: 10;
top: 41px;
}
}
}

87
packages/theme-default/src/date-picker/time-picker.css
View File

@ -1,87 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b time-panel {
margin: 5px 0;
border: solid 1px var(--datepicker-border-color);
background-color: var(--color-white);
box-shadow: var(--box-shadow-base);
border-radius: 2px;
position: absolute;
width: 180px;
left: 0;
z-index: var(--index-top);
user-select: none;
@e content {
font-size: 0;
position: relative;
overflow: hidden;
&::after, &::before {
content: ":";
top: 50%;
color: var(--color-white);
position: absolute;
font-size: 14px;
margin-top: -15px;
line-height: 16px;
background-color: var(--datepicker-active-color);
height: 32px;
z-index: -1;
left: 0;
right: 0;
box-sizing: border-box;
padding-top: 6px;
text-align: left;
}
&::after {
left: 50%;
margin-left: -2px;
}
&::before {
padding-left: 50%;
margin-right: -2px;
}
&.has-seconds {
&::after {
left: calc(100% / 3 * 2);
}
&::before {
padding-left: calc(100% / 3);
}
}
}
@e footer {
border-top: 1px solid var(--datepicker-inner-border-color);
padding: 4px;
height: 36px;
line-height: 25px;
text-align: right;
box-sizing: border-box;
}
@e btn {
border: none;
line-height: 28px;
padding: 0 5px;
margin: 0 5px;
cursor: pointer;
background-color: transparent;
outline: none;
font-size: 12px;
color: var(--color-base-silver);
&.confirm {
font-weight: 800;
color: var(--datepicker-active-color);
}
}
}
}

33
packages/theme-default/src/date-picker/time-range-picker.css
View File

@ -1,33 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b time-range-picker {
min-width: 354px;
overflow: visible;
@e content {
position: relative;
text-align: center;
padding: 10px;
}
@e cell {
box-sizing: border-box;
margin: 0;
padding: 4px 7px 7px;
width: 50%;
display: inline-block;
}
@e header {
margin-bottom: 5px;
text-align: center;
font-size: 14px;
}
@e body {
border-radius:2px;
border: 1px solid var(--datepicker-border-color);
}
}
}

63
packages/theme-default/src/date-picker/time-spinner.css
View File

@ -1,63 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b time-spinner {
&.has-seconds {
.el-time-spinner__wrapper {
width: 33%;
}
.el-time-spinner__wrapper:nth-child(2) {
margin-left: 1%;
}
}
@e wrapper {
max-height: 190px;
overflow: auto;
display: inline-block;
width: 50%;
vertical-align: top;
position: relative;
& .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
padding-bottom: 15px;
}
}
@e list {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
&::after,
&::before {
content: '';
display: block;
width: 100%;
height: 80px;
}
}
@e item {
height: 32px;
line-height: 32px;
font-size: 12px;
&:hover:not(.disabled):not(.active) {
background: var(--datepicker-cell-hover-color);
cursor: pointer;
}
&.active:not(.disabled) {
color: var(--color-white);
}
&.disabled {
color: var(--datepicker-border-color);
cursor: not-allowed;
}
}
}
}

42
packages/theme-default/src/date-picker/year-table.css
View File

@ -1,42 +0,0 @@
@import "../common/var.css";
@component-namespace el {
@b year-table {
font-size: 12px;
margin: -1px;
border-collapse: collapse;
.el-icon {
color: var(--datepicker-icon-color);
}
td {
text-align: center;
padding: 20px 3px;
cursor: pointer;
&.disabled .cell {
background-color: #f4f4f4;
cursor: not-allowed;
color: #ccc;
}
.cell {
width: 48px;
height: 32px;
display: block;
line-height: 32px;
color: var(--datepicker-color);
&:hover {
background-color: var(--datepicker-cell-hover-color);
}
}
&.current:not(.disabled) .cell {
background-color: var(--datepicker-active-color) !important;
color: var(--color-white);
}
}
}
}

104
packages/theme-default/src/dialog.css
View File

@ -1,104 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@import "./common/popup.css";
@component-namespace el {
@b dialog {
position: relative;
margin: 0 auto 50px;
background: var(--color-white);
border-radius: var(--border-radius-small);
box-shadow: var(--dialog-box-shadow);
box-sizing: border-box;
width: 50%;
@when fullscreen {
width: 100%;
margin-top: 0;
margin-bottom: 0;
height: 100%;
overflow: auto;
}
@e wrapper {
position: fixed 0 0 0 0;
overflow: auto;
margin: 0;
}
@e header {
padding: 20px 20px 0;
@utils-clearfix;
}
@e headerbtn {
float: right;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
font-size: 16px;
.el-dialog__close {
color: var(--dialog-close-color);
}
&:focus, &:hover {
.el-dialog__close {
color: var(--dialog-close-hover-color);
}
}
}
@e title {
line-height: 1;
font-size: var(--dialog-title-font-size);
font-weight: bold;
color: var(--color-base-black);
}
@e body {
padding: 30px 20px;
color: var(--color-extra-light-black);
font-size: var(--dialog-font-size);
}
@e footer {
padding: 10px 20px 15px;
text-align: right;
box-sizing: border-box;
}
}
.dialog-fade-enter-active {
animation: dialog-fade-in .3s;
}
.dialog-fade-leave-active {
animation: dialog-fade-out .3s;
}
@keyframes dialog-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
}

0
packages/theme-default/src/dropdown-item.css
View File

0
packages/theme-default/src/dropdown-menu.css
View File

74
packages/theme-default/src/dropdown.css
View File

@ -1,74 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@import "./button.css";
@component-namespace el {
@b dropdown {
display: inline-block;
position: relative;
color: var(--color-extra-light-black);
font-size: var(--font-size-base);
.el-button-group {
display: block;
.el-button {
float: none;
}
}
& .el-dropdown__caret-button {
padding: * 5px;
& .el-dropdown__icon {
padding-left: 0;
}
}
@e icon {
font-size: 12px;
margin: 0 3px;
}
}
@b dropdown-menu {
margin: 5px 0;
background-color: var(--color-white);
border: 1px solid var(--color-base-gray);
box-shadow: var(--dropdown-menu-box-shadow);
padding: 6px 0;
z-index: 10;
position: absolute;
top: 0;
left: 0;
min-width: 100px;
@e item {
list-style: none;
line-height: 36px;
padding: 0 10px;
margin: 0;
cursor: pointer;
&:not(.is-disabled):hover {
background-color: var(--dropdown-menuItem-hover-fill);
color: var(--dropdown-menuItem-hover-color);
}
@m divided {
position: relative;
margin-top: 6px;
border-top: 1px solid var(--color-base-gray);
&:before {
content: '';
height: 6px;
display: block;
margin: 0 -10px;
background-color: var(--color-white);
}
}
@when disabled {
cursor: default;
color: var(--color-extra-light-silver);
pointer-events: none;
}
}
}
}

BIN
packages/theme-default/src/fonts/element-icons.ttf
View File

Binary file not shown.

BIN
packages/theme-default/src/fonts/element-icons.woff
View File

Binary file not shown.

9
packages/theme-default/src/footer.css
View File

@ -1,9 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b footer {
padding: var(--footer-padding);
box-sizing: border-box;
}
}

0
packages/theme-default/src/form-item.css
View File

93
packages/theme-default/src/form.css
View File

@ -1,93 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b form {
@m label-left {
& .el-form-item__label {
text-align: left;
}
}
@m label-top {
& .el-form-item__label {
float: none;
display: inline-block;
text-align: left;
padding: 0 0 10px 0;
}
}
@m inline {
& .el-form-item {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
& .el-form-item__label {
float: none;
display: inline-block;
}
& .el-form-item__content {
display: inline-block;
vertical-align: top;
}
&.el-form--label-top .el-form-item__content {
display: block;
}
}
}
@b form-item {
margin-bottom: 22px;
@utils-clearfix;
& .el-form-item {
margin-bottom: 0;
}
@e label {
text-align: right;
vertical-align: middle;
float: left;
font-size: 14px;
color: var(--color-extra-light-black);
line-height: 1;
padding: 11px 12px 11px 0;
box-sizing: border-box;
}
@e content {
line-height: 36px;
position: relative;
font-size: 14px;
@utils-clearfix;
}
@e error {
color: var(--color-danger);
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
top: 100%;
left: 0;
}
@when required {
.el-form-item__label:before {
content: '*';
color: var(--color-danger);
margin-right: 4px;
}
}
@when error {
& .el-input__inner,
& .el-textarea__inner {
border-color: var(--color-danger);
}
& .el-input-group__append,
& .el-input-group__prepend, {
& .el-input__inner {
border-color: transparent;
}
}
}
}
}

9
packages/theme-default/src/header.css
View File

@ -1,9 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b header {
padding: var(--header-padding);
box-sizing: border-box;
}
}

88
packages/theme-default/src/icon.css
View File

@ -1,88 +0,0 @@
@font-face {
font-family: 'element-icons';
src: url('fonts/element-icons.woff?t=1501582787037') format('woff'), /* chrome, firefox */
url('fonts/element-icons.ttf?t=1501582787037') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-style: normal;
}
[class^="el-icon-"], [class*=" el-icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'element-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-arrow-down:before { content: "\e600"; }
.el-icon-arrow-left:before { content: "\e601"; }
.el-icon-arrow-right:before { content: "\e602"; }
.el-icon-arrow-up:before { content: "\e603"; }
.el-icon-caret-bottom:before { content: "\e604"; }
.el-icon-caret-left:before { content: "\e605"; }
.el-icon-caret-right:before { content: "\e606"; }
.el-icon-caret-top:before { content: "\e607"; }
.el-icon-check:before { content: "\e608"; }
.el-icon-circle-check:before { content: "\e609"; }
.el-icon-circle-close:before { content: "\e60a"; }
.el-icon-circle-cross:before { content: "\e60b"; }
.el-icon-close:before { content: "\e60c"; }
.el-icon-upload:before { content: "\e60d"; }
.el-icon-d-arrow-left:before { content: "\e60e"; }
.el-icon-d-arrow-right:before { content: "\e60f"; }
.el-icon-d-caret:before { content: "\e610"; }
.el-icon-date:before { content: "\e611"; }
.el-icon-delete:before { content: "\e612"; }
.el-icon-document:before { content: "\e613"; }
.el-icon-edit:before { content: "\e614"; }
.el-icon-information:before { content: "\e615"; }
.el-icon-loading:before { content: "\e616"; }
.el-icon-menu:before { content: "\e617"; }
.el-icon-message:before { content: "\e618"; }
.el-icon-minus:before { content: "\e619"; }
.el-icon-more:before { content: "\e61a"; }
.el-icon-picture:before { content: "\e61b"; }
.el-icon-plus:before { content: "\e61c"; }
.el-icon-search:before { content: "\e61d"; }
.el-icon-setting:before { content: "\e61e"; }
.el-icon-share:before { content: "\e61f"; }
.el-icon-star-off:before { content: "\e620"; }
.el-icon-star-on:before { content: "\e621"; }
.el-icon-time:before { content: "\e622"; }
.el-icon-warning:before { content: "\e623"; }
.el-icon-delete2:before { content: "\e624"; }
.el-icon-upload2:before { content: "\e627"; }
.el-icon-view:before { content: "\e626"; }
.el-icon-circle-check-plain:before { content: "\e625"; }
.el-icon-circle-cross-plain:before { content: "\e628"; }
.el-icon-information-plain:before { content: "\e629"; }
.el-icon-warning-plain:before { content: "\e62a"; }
.el-icon-loading {
animation: rotating 1s linear infinite;
}
.el-icon--right {
margin-left: 5px;
}
.el-icon--left {
margin-right: 5px;
}
@keyframes rotating {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}

67
packages/theme-default/src/index.css
View File

@ -1,67 +0,0 @@
@import "./base.css";
@import "./pagination.css";
@import "./dialog.css";
@import "./autocomplete.css";
@import "./dropdown.css";
@import "./dropdown-menu.css";
@import "./dropdown-item.css";
@import "./menu.css";
@import "./submenu.css";
@import "./menu-item.css";
@import "./menu-item-group.css";
@import "./input.css";
@import "./input-number.css";
@import "./radio.css";
@import "./radio-group.css";
@import "./radio-button.css";
@import "./checkbox.css";
@import "./checkbox-button.css";
@import "./checkbox-group.css";
@import "./switch.css";
@import "./select.css";
@import "./button.css";
@import "./button-group.css";
@import "./table.css";
@import "./table-column.css";
@import "./date-picker.css";
@import "./time-select.css";
@import "./time-picker.css";
@import "./popover.css";
@import "./tooltip.css";
@import "./message-box.css";
@import "./breadcrumb.css";
@import "./breadcrumb-item.css";
@import "./form.css";
@import "./form-item.css";
@import "./tabs.css";
@import "./tab-pane.css";
@import "./tag.css";
@import "./tree.css";
@import "./alert.css";
@import "./notification.css";
@import "./slider.css";
@import "./loading.css";
@import "./row.css";
@import "./col.css";
@import "./upload.css";
@import "./progress.css";
@import "./spinner.css";
@import "./message.css";
@import "./badge.css";
@import "./card.css";
@import "./rate.css";
@import "./steps.css";
@import "./step.css";
@import "./carousel.css";
@import "./scrollbar.css";
@import "./carousel-item.css";
@import "./collapse.css";
@import "./collapse-item.css";
@import "./cascader.css";
@import "./color-picker.css";
@import "./transfer.css";
@import "./container.css";
@import "./header.css";
@import "./aside.css";
@import "./main.css";
@import "./footer.css";

99
packages/theme-default/src/input-number.css
View File

@ -1,99 +0,0 @@
@charset "UTF-8";
@import "./input.css";
@import "./common/var.css";
@component-namespace el {
@b input-number {
display: inline-block;
width: 180px;
position: relative;
line-height: normal;
& .el-input {
display: block;
}
& .el-input__inner {
appearance: none;
padding-right: calc(var(--input-height) * 2 + 10);
}
@e increase, decrease {
height: auto;
border-left: var(--border-base);
width: var(--input-height);
line-height: calc(var(--input-height) - 2);
top: 1px;
text-align: center;
color: var(--color-light-silver);
cursor: pointer;
position: absolute;
z-index: 1;
&:hover {
color: var(--color-primary);
&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
border-color: var(--input-focus-border);
}
}
@when disabled {
color: var(--disabled-border-base);
cursor: not-allowed;
}
}
@e increase {
right: 0;
}
@e decrease {
right: calc(var(--input-height) + 1px);
}
@when disabled {
& .el-input-number__increase, .el-input-number__decrease {
border-color: var(--disabled-border-base);
color: var(--disabled-border-base);
&:hover {
color: var(--disabled-border-base);
cursor: not-allowed;
}
}
}
@m large {
width: 200px;
& .el-input-number__increase, .el-input-number__decrease {
line-height: calc(var(--input-large-height) - 2);
width: var(--input-large-height);
font-size: var(--input-large-font-size);
}
& .el-input-number__decrease {
right: calc(var(--input-large-height) + 1px);
}
& .el-input__inner {
padding-right: calc(var(--input-large-height) * 2 + 10);
}
}
@m small {
width: 130px;
& .el-input-number__increase, .el-input-number__decrease {
line-height: calc(var(--input-small-height) - 2);
width: var(--input-small-height);
font-size: var(--input-small-font-size);
}
& .el-input-number__decrease {
right: calc(var(--input-small-height) + 1px);
}
& .el-input__inner {
padding-right: calc(var(--input-small-height) * 2 + 10);
}
}
@when without-controls {
& .el-input__inner {
padding-right: 10px;
}
}
}
}

236
packages/theme-default/src/input.css
View File

@ -1,236 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b input {
position: relative;
font-size: var(--font-size-base);
display: inline-block;
width: 100%;
@e inner {
appearance: none;
background-color: var(--input-fill);
background-image: none;
border-radius: var(--input-border-radius);
border: var(--input-border);
box-sizing: border-box;
color: var(--input-color);
display: inline-block;
font-size: inherit;
height: var(--input-height);
line-height: 1;
outline: none;
padding: 3px 10px;
transition: var(--border-transition-base);
width: 100%;
&::placeholder {
color: var(--input-placeholder-color);
}
&:hover {
border-color: var(--input-hover-border);
}
&:focus {
outline: none;
border-color: var(--input-focus-border);
}
}
@e icon {
position: absolute;
width: 35px;
height: 100%;
right: 0;
top: 0;
text-align: center;
color: var(--input-icon-color);
transition: all .3s;
&:after {
content: '';
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
& + .el-input__inner {
padding-right: 35px;
}
@when clickable {
&:hover {
cursor: pointer;
color: var(--input-hover-border);
& + .el-input__inner {
border-color: var(--input-hover-border);
}
}
}
}
@when active {
.el-input__inner {
outline: none;
border-color: var(--input-focus-border);
}
}
@when disabled {
.el-input__inner {
background-color: var(--input-disabled-fill);
border-color: var(--input-disabled-border);
color: var(--input-disabled-color);
cursor: not-allowed;
&::placeholder {
color: var(--input-disabled-placeholder-color);
}
}
.el-input__icon {
cursor: not-allowed;
}
}
@m large {
font-size: var(--input-large-font-size);
& .el-input__inner {
height: var(--input-large-height);
}
}
@m small {
font-size: var(--input-small-font-size);
& .el-input__inner {
height: var(--input-small-height);
}
}
@m mini {
font-size: var(--input-mini-font-size);
& .el-input__inner {
height: var(--input-mini-height);
}
}
}
@b input-group {
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
& > .el-input__inner {
vertical-align: middle;
display: table-cell;
}
@e append, prepend {
background-color: var(--color-dark-white);
color: var(--color-light-silver);
vertical-align: middle;
display: table-cell;
position: relative;
border: var(--border-base);
border-radius: var(--input-border-radius);
padding: 0 10px;
width: 1px;
white-space: nowrap;
& .el-select,
& .el-button {
display: block;
margin: -10px;
}
& button.el-button,
& div.el-select .el-input__inner,
& div.el-select:hover .el-input__inner {
border-color: transparent;
background-color: transparent;
color: inherit;
border-top: 0;
border-bottom: 0;
}
& .el-button,
& .el-input {
font-size: inherit;
}
}
@e prepend {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@e append {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@m prepend {
.el-input__inner {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
@m append {
.el-input__inner {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
@b textarea {
display: inline-block;
width: 100%;
vertical-align: bottom;
@e inner {
display: block;
resize: vertical;
padding: 5px 7px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
font-size: var(--font-size-base);
color: var(--input-color);
background-color: var(--input-fill);
background-image: none;
border: var(--input-border);
border-radius: var(--input-border-radius);
transition: var(--border-transition-base);
&::placeholder {
color: var(--input-placeholder-color);
}
&:hover {
border-color: var(--input-hover-border);
}
&:focus {
outline: none;
border-color: var(--input-focus-border);
}
}
@when disabled {
.el-textarea__inner {
background-color: var(--input-disabled-fill);
border-color: var(--input-disabled-border);
color: var(--input-disabled-color);
cursor: not-allowed;
&::placeholder {
color: var(--input-disabled-placeholder-color);
}
}
}
}
}

82
packages/theme-default/src/loading.css
View File

@ -1,82 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b loading-mask {
position: absolute;
z-index: 10000;
background-color: rgba(255, 255, 255, .9);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 0.3s;
@when fullscreen {
position: fixed;
.el-loading-spinner {
margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
.circular {
size: var(--loading-fullscreen-spinner-size);
}
}
}
}
@b loading-spinner {
top: 50%;
margin-top: calc(- var(--loading-spinner-size) / 2);
width: 100%;
text-align: center;
position: absolute;
.el-loading-text {
color: var(--color-primary);
margin: 3px 0;
font-size: 14px;
}
.circular {
size: var(--loading-spinner-size);
animation: loading-rotate 2s linear infinite;
}
.path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: var(--color-primary);
stroke-linecap: round;
}
}
}
.el-loading-fade-enter,
.el-loading-fade-leave-active {
opacity: 0;
}
@keyframes loading-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}

11
packages/theme-default/src/main.css
View File

@ -1,11 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b main {
flex: 1;
overflow: auto;
box-sizing: border-box;
padding: var(--main-padding);
}
}

0
packages/theme-default/src/menu-item-group.css
View File

0
packages/theme-default/src/menu-item.css
View File

275
packages/theme-default/src/menu.css
View File

@ -1,275 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@define-extend menu-item {
height: 56px;
line-height: 56px;
font-size: 14px;
color: var(--menu-item-color);
padding: 0 20px;
cursor: pointer;
position: relative;
transition: border-color .3s, background-color .3s, color .3s;
box-sizing: border-box;
white-space: nowrap;
}
@component-namespace el {
@b menu {
border-radius: 2px;
list-style: none;
position: relative;
margin: 0;
padding-left: 0;
background-color: var(--menu-item-fill);
@utils-clearfix;
& li {
list-style: none;
}
@m dark {
background-color: var(--dark-menu-item-fill);
& .el-menu-item,
& .el-submenu__title {
color: var(--color-extra-light-silver);
&:hover {
background-color: var(--color-extra-light-black);
}
}
& .el-submenu .el-menu {
background-color: var(--color-base-black);
& .el-menu-item:hover {
background-color: var(--color-extra-light-black);
}
}
}
@m horizontal {
& .el-menu-item {
float: left;
height: 60px;
line-height: 60px;
margin: 0;
cursor: pointer;
position: relative;
box-sizing: border-box;
border-bottom: 5px solid transparent;
a,
a:hover {
color: inherit;
}
&:hover {
background-color: var(--menu-item-hover-fill);
}
}
& .el-submenu {
float: left;
position: relative;
> .el-menu {
position: absolute;
top: 65px;
left: 0;
border:1px solid var(--color-base-gray);
padding: 5px 0;
background-color: var(--color-white);
z-index: 100;
min-width: 100%;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
}
& .el-submenu__title {
height: 60px;
line-height: 60px;
border-bottom: 5px solid transparent;
}
& .el-menu-item {
background-color: var(--color-white);
float: none;
height: 36px;
line-height: 36px;
padding: 0 10px;
}
& .el-submenu__icon-arrow {
position: static;
vertical-align: middle;
margin-left: 5px;
color: var(--color-light-silver);
margin-top: -3px;
}
}
& .el-menu-item:hover,
& .el-submenu__title:hover {
background-color: var(--menu-item-fill);
}
& > .el-menu-item:hover,
& > .el-submenu:hover .el-submenu__title,
& > .el-submenu.is-active .el-submenu__title {
border-bottom: 5px solid var(--color-primary);
}
&.el-menu--dark {
& .el-menu-item:hover,
& .el-submenu__title:hover {
background-color: var(--dark-menu-item-fill);
}
& .el-submenu {
.el-menu-item,
.el-submenu-title {
color: var(--color-extra-light-black);
&:hover {
background-color: var(--color-base-gray);
}
}
.el-menu-item.is-active {
color: var(--color-primary);
}
}
}
}
@m collapse {
width: 64px;
> .el-menu-item,
> .el-submenu > .el-submenu__title {
[class^="el-icon-"] {
margin: 0;
vertical-align: middle;
width: 24px;
text-align: center;
}
.el-submenu__icon-arrow {
display: none;
}
span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
.el-submenu {
position: relative;
& .el-menu {
position: absolute;
margin-left: 5px;
top: 0;
left: 100%;
z-index: 10;
}
&.is-opened {
> .el-submenu__title .el-submenu__icon-arrow {
transform: none;
}
}
}
}
}
@b menu-item {
@extend menu-item;
& [class^="el-icon-"] {
margin-right: 5px;
width: 24px;
text-align: center;
}
& * {
vertical-align: middle;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
&:hover {
background-color: var(--color-base-gray);
}
@when active {
color: var(--color-primary);
}
}
@b submenu {
@e title {
position: relative;
@extend menu-item;
&:hover {
background-color: var(--color-base-gray);
}
& * {
vertical-align: middle;
}
}
& .el-menu {
background-color: var(--color-light-gray);
}
& .el-menu-item {
height: 50px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
&:hover {
background-color: var(--color-base-gray);
}
}
@e icon-arrow {
position: absolute;
top: 50%;
right: 20px;
margin-top: -7px;
transition: transform .3s;
font-size: 12px;
}
@when active {
.el-submenu__title {
border-bottom-color: var(--color-primary);
}
}
@when opened {
> .el-submenu__title .el-submenu__icon-arrow {
transform: rotateZ(180deg);
}
}
[class^="el-icon-"] {
vertical-align: middle;
margin-right: 5px;
width: 24px;
text-align: center;
}
}
@b menu-item-group {
> ul {
padding: 0;
}
@e title {
padding-top: 15px;
line-height: normal;
font-size: 14px;
padding-left: 20px;
color: var(--color-light-silver);
}
}
}
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
transition: .2s;
opacity: 0;
}

170
packages/theme-default/src/message-box.css
View File

@ -1,170 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@import "./common/popup.css";
@import "./button.css";
@import "./input.css";
@component-namespace el {
@b message-box {
text-align: left;
display: inline-block;
vertical-align: middle;
background-color: var(--color-white);
width: var(--msgbox-width);
border-radius: var(--msgbox-border-radius);
font-size: var(--msgbox-font-size);
overflow: hidden;
backface-visibility: hidden;
@e wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
&::after {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
}
@e header {
position: relative;
padding: 20px 20px 0;
}
@e headerbtn {
position: absolute;
top: 19px;
right: 20px;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
.el-message-box__close {
color: #999;
}
&:focus, &:hover {
.el-message-box__close {
color: var(--color-primary);
}
}
}
@e content {
padding: 30px 20px;
color: var(--msgbox-content-color);
font-size: var(--msgbox-content-font-size);
position: relative;
}
@e input {
padding-top: 15px;
& input.invalid {
border-color: var(--color-danger);
&:focus {
border-color: var(--color-danger);
}
}
}
@e errormsg {
color: var(--color-danger);
font-size: var(--msgbox-error-font-size);
min-height: 18px;
margin-top: 2px;
}
@e title {
padding-left: 0;
margin-bottom: 0;
font-size: var(--msgbox-font-size);
font-weight: bold;
height: 18px;
color: #333;
}
@e message {
margin: 0;
& p {
margin: 0;
line-height: 1.4;
}
}
@e btns {
padding: 10px 20px 15px;
text-align: right;
& button:nth-child(2) {
margin-left: 10px;
}
}
@e btns-reverse {
flex-direction: row-reverse;
}
@e status {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 36px !important;
&.el-icon-circle-check {
color: var(--msgbox-success-color);
}
&.el-icon-information {
color: var(--msgbox-info-color);
}
&.el-icon-warning {
color: var(--msgbox-warning-color);
}
&.el-icon-circle-cross {
color: var(--msgbox-danger-color);
}
}
}
}
.msgbox-fade-enter-active {
animation: msgbox-fade-in .3s;
}
.msgbox-fade-leave-active {
animation: msgbox-fade-out .3s;
}
@keyframes msgbox-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes msgbox-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}

101
packages/theme-default/src/message.css
View File

@ -1,101 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b message {
box-shadow: var(--message-shadow);
min-width: var(--message-min-width);
box-sizing: border-box;
border-radius: var(--border-radius-small);
position: fixed;
left: 50%;
top: 20px;
transform: translateX(-50%);
background-color: var(--color-white);
transition: opacity 0.3s, transform .4s;
overflow: hidden;
@e group {
margin-left: 40px;
position: relative;
height: 20px;
line-height: 20px;
display: flex;
align-items: center;
padding: var(--message-padding);
& p {
font-size: var(--font-size-base);
margin: 0 34px 0 0;
white-space: nowrap;
color: var(--message-content-color);
text-align: justify;
}
}
@e icon {
size: 40px;
display: inline-block;
float: left;
text-align: center;
i {
line-height: 40px;
&.el-message__type {
color: var(--color-white);
}
}
@modifier info {
background-color: var(--color-info);
}
@modifier warning {
background-color: var(--color-warning);
}
@modifier error {
background-color: var(--color-danger);
}
@modifier success {
background-color: var(--color-success);
}
}
@e closeBtn {
position: absolute 13px 12px * *;
cursor: pointer;
color: var(--message-close-color);
font-size: var(--font-size-base);
&:hover {
color: var(--message-close-hover-color);
}
}
& .el-icon-circle-check {
color: var(--message-success-color);
}
& .el-icon-circle-cross {
color: var(--message-danger-color);
}
& .el-icon-information {
color: var(--message-info-color);
}
& .el-icon-warning {
color: var(--message-warning-color);
}
}
.el-message-fade-enter,
.el-message-fade-leave-active {
opacity: 0;
transform: translate(-50%, -100%);
}
}

51
packages/theme-default/src/mixins/_button.css
View File

@ -1,51 +0,0 @@
@define-mixin button-variant $color, $background-color, $border-color {
color: $color;
background-color: $background-color;
border-color: $border-color;
&:hover,
&:focus {
background: tint($background-color, var(--button-hover-tint-percent));
border-color: tint($border-color, var(--button-hover-tint-percent));
color: $color;
}
&:active {
background: shade($background-color, var(--button-active-shade-percent));
border-color: shade($border-color, var(--button-active-shade-percent));
color: $color;
outline: none;
}
&.is-active {
background: shade($background-color, var(--button-active-shade-percent));
border-color: shade($border-color, var(--button-active-shade-percent));
color: $color;
}
&.is-plain {
background: var(--button-default-fill);
border: var(--border-base);
color: var(--button-default-color);
&:hover,
&:focus {
background: var(--color-white);
border-color: $border-color;
color: $background-color;
}
&:active {
background: var(--color-white);
border-color: shade($border-color, var(--button-active-shade-percent));
color: shade($background-color, var(--button-active-shade-percent));
outline: none;
}
}
}
@define-mixin button-size $padding-vertical, $padding-horizontal, $font-size, $border-radius {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
border-radius: $border-radius;
}

102
packages/theme-default/src/notification.css
View File

@ -1,102 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b notification {
width: var(--notification-width);
padding: var(--notification-padding);
box-sizing: border-box;
border-radius: var(--border-radius-small);
position: fixed;
background-color: var(--color-white);
box-shadow: var(--notification-shadow);
transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
overflow: hidden;
&.right {
right: 16px;
}
&.left {
left: 16px;
}
@e group {
margin-left: 0;
@when with-icon {
margin-left: 55px;
}
}
@e title {
font-weight: normal;
font-size: var(--notification-title-font-size);
color: var(--notification-title-color);
margin: 0;
}
@e content {
font-size: var(--notification-font-size);
line-height: 21px;
margin: 10px 0 0 0;
color: var(--notification-color);
text-align: justify;
p {
margin: 0;
}
}
@e icon {
size: var(--notification-icon-size);
font-size: var(--notification-icon-size);
float: left;
position: relative;
top: 3px;
}
@e closeBtn {
position: absolute 20px 20px * *;
cursor: pointer;
color: var(--notification-close-color);
font-size: var(--notification-font-size);
&:hover {
color: var(--notification-close-hover-color);
}
}
& .el-icon-circle-check {
color: var(--notification-success-color);
}
& .el-icon-circle-cross {
color: var(--notification-danger-color);
}
& .el-icon-information {
color: var(--notification-info-color);
}
& .el-icon-warning {
color: var(--notification-warning-color);
}
}
.el-notification-fade-enter {
&.right {
right: 0;
transform: translateX(100%);
}
&.left {
left: 0;
transform: translateX(-100%);
}
}
.el-notification-fade-leave-active {
opacity: 0;
}
}

28
packages/theme-default/src/option-group.css
View File

@ -1,28 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b select-group {
margin: 0;
padding: 0;
@e wrap {
list-style: none;
margin: 0;
padding: 0;
}
@e title {
padding-left: 10px;
font-size: var(--select-group-font-size);
color: var(--select-group-color);
height: var(--select-group-height);
line-height: var(--select-group-height);
}
& .el-select-dropdown__item {
padding-left: 20px;
}
}
}

47
packages/theme-default/src/option.css
View File

@ -1,47 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b select-dropdown {
@e item {
font-size: var(--select-font-size);
padding: 8px 10px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--select-option-color);
height: var(--select-option-height);
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
@when disabled {
color: var(--select-option-disabled-color);
cursor: not-allowed;
&:hover {
background-color: var(--color-white);
}
}
&.hover, &:hover {
background-color: var(--select-option-hover-background);
}
&.selected {
color: var(--color-white);
background-color: var(--select-option-selected);
&.hover {
background-color: var(--select-option-selected-hover);
}
}
& span {
line-height: 1.5 !important;
}
}
}
}

209
packages/theme-default/src/pagination.css
View File

@ -1,209 +0,0 @@
@charset "UTF-8";
@import "./select.css";
@import "./common/var.css";
@component-namespace el {
@b pagination {
white-space: nowrap;
padding: 2px 5px;
color: var(--pagination-color);
@utils-clearfix;
span,
button {
display: inline-block;
font-size: var(--pagination-font-size);
min-width: var(--pagination-button-size);
height: var(--pagination-button-size);
line-height: var(--pagination-button-size);
vertical-align: top;
box-sizing: border-box;
}
.el-select .el-input {
width: 110px;
input {
padding-right: 25px;
border-radius: var(--border-radius-small);
height: 28px;
}
}
button {
border: none;
padding: 0 6px;
background: transparent;
&:focus {
outline: none;
}
&:hover {
color: var(--pagination-hover-fill);
}
&.disabled {
color: var(--pagination-button-disabled-color);
background-color: var(--pagination-button-disabled-fill);
cursor: not-allowed;
}
}
.btn-prev,
.btn-next {
background: center center no-repeat;
background-size: 16px;
background-color: var(--pagination-fill);
border: 1px solid var(--pagination-border-color);
cursor: pointer;
margin: 0;
color: var(--pagination-button-color);
.el-icon {
display: block;
font-size: 12px;
}
}
.btn-prev {
border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius);
border-right: 0;
}
.btn-next {
border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0;
border-left: 0;
}
@m small {
.btn-prev,
.btn-next,
.el-pager li,
.el-pager li:last-child {
border-color: transparent;
font-size: 12px;
line-height: 22px;
height: 22px;
min-width: 22px;
}
.arrow.disabled {
visibility: hidden;
}
.el-pager li {
border-radius: var(--pagination-border-radius);
}
}
@e sizes {
margin: 0 10px 0 0;
.el-input .el-input__inner {
font-size: 13px;
border-color: var(--pagination-border-color);
&:hover {
border-color: var(--pagination-hover-fill);
}
}
}
@e jump {
margin-left: 10px;
}
@e total {
margin: 0 10px;
}
@e rightwrapper {
float: right;
}
@e editor {
border: 1px solid var(--pagination-border-color);
border-radius: var(--pagination-border-radius);
line-height: 18px;
padding: 4px 2px;
width: 30px;
text-align: center;
margin: 0 6px;
box-sizing: border-box;
transition: border .3s;
-moz-appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
&:focus {
outline: none;
border-color: var(--pagination-hover-fill);
};
}
}
@b pager {
user-select: none;
list-style: none;
display: inline-block;
vertical-align: top;
font-size: 0;
padding: 0;
margin: 0;
li {
padding: 0 4px;
border: 1px solid var(--pagination-border-color);
border-right: 0;
background: var(--pagination-fill);
vertical-align: top;
display: inline-block;
font-size: var(--pagination-font-size);
min-width: var(--pagination-button-size);
height: var(--pagination-button-size);
line-height: var(--pagination-button-size);
cursor: pointer;
box-sizing: border-box;
text-align: center;
margin: 0;
&:last-child {
border-right: 1px solid var(--pagination-border-color);
}
&.btn-quicknext,
&.btn-quickprev {
line-height: 28px;
color: var(--pagination-button-color);
}
&.btn-quickprev:hover {
cursor: pointer;
}
&.btn-quicknext:hover {
cursor: pointer;
}
&.active + li {
border-left: 0;
padding-left: 5px;
}
&:hover {
color: var(--pagination-hover-fill);
}
&.active {
border-color: var(--pagination-hover-fill);
background-color: var(--pagination-hover-fill);
color: var(--pagination-hover-color);
cursor: default;
}
}
}
}

120
packages/theme-default/src/popover.css
View File

@ -1,120 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b popover {
position: absolute;
background: var(--popover-fill);
min-width: 150px;
border-radius: 2px;
border: 1px solid var(--popover-border-color);
padding: var(--popover-padding);
z-index: var(--index-popper);
font-size: var(--popover-font-size);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
0px 0px 6px 0px rgba(0, 0, 0, .04);
.popper__arrow,
.popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popper__arrow {
border-width: var(--popover-arrow-size);
}
.popper__arrow::after {
content: " ";
border-width: var(--popover-arrow-size);
}
&[x-placement^="top"] {
margin-bottom: calc(var(--popover-arrow-size) + 6);
}
&[x-placement^="top"] .popper__arrow {
bottom: -var(--popover-arrow-size);
left: 50%;
margin-right: calc(var(--tooltip-arrow-size) / 2);
border-top-color: var(--popover-border-color);
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: -var(--popover-arrow-size);
border-top-color: var(--popover-fill);
border-bottom-width: 0;
}
}
&[x-placement^="bottom"] {
margin-top: calc(var(--popover-arrow-size) + 6);
}
&[x-placement^="bottom"] .popper__arrow {
top: -var(--popover-arrow-size);
left: 50%;
margin-right: calc(var(--tooltip-arrow-size) / 2);
border-top-width: 0;
border-bottom-color: var(--popover-border-color);
&::after {
top: 1px;
margin-left: -var(--popover-arrow-size);
border-top-width: 0;
border-bottom-color: var(--popover-fill);
}
}
&[x-placement^="right"] {
margin-left: calc(var(--popover-arrow-size) + 6);
}
&[x-placement^="right"] .popper__arrow {
top: 50%;
left: -var(--popover-arrow-size);
margin-bottom: calc(var(--tooltip-arrow-size) / 2);
border-right-color: var(--popover-border-color);
border-left-width: 0;
&::after {
bottom: -var(--popover-arrow-size);
left: 1px;
border-right-color: var(--popover-fill);
border-left-width: 0;
}
}
&[x-placement^="left"] {
margin-right: calc(var(--popover-arrow-size) + 6);
}
&[x-placement^="left"] .popper__arrow {
top: 50%;
right: -var(--popover-arrow-size);
margin-bottom: calc(var(--tooltip-arrow-size) / 2);
border-right-width: 0;
border-left-color: var(--popover-border-color);
&::after {
right: 1px;
bottom: -var(--popover-arrow-size);
margin-left: -var(--popover-arrow-size);
border-right-width: 0;
border-left-color: var(--popover-fill);
}
}
@e title {
color: var(--popover-title-color);
font-size: var(--popover-title-font-size);
line-height: 1;
margin-bottom: 9px;
}
}
}

120
packages/theme-default/src/progress.css
View File

@ -1,120 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b progress {
position: relative;
line-height: 1;
@e text {
font-size:14px;
color:var(--color-extra-light-black);
display: inline-block;
vertical-align: middle;
margin-left: 10px;
line-height: 1;
i {
vertical-align: middle;
display: block;
}
}
@m circle {
display: inline-block;
.el-progress__text {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
margin: 0;
transform: translate(0, -50%);
i {
vertical-align: middle;
display: inline-block;
}
}
}
@m without-text {
.el-progress__text {
display: none;
}
.el-progress-bar {
padding-right: 0;
margin-right: 0;
display: block;
}
}
@m text-inside {
.el-progress-bar {
padding-right: 0;
margin-right: 0;
}
}
@when success {
.el-progress-bar__inner {
background-color: var(--color-success);
}
.el-progress__text {
color: var(--color-success);
}
}
@when exception {
.el-progress-bar__inner {
background-color: var(--color-danger);
}
.el-progress__text {
color: var(--color-danger);
}
}
}
@b progress-bar {
padding-right: 50px;
display: inline-block;
vertical-align: middle;
width: 100%;
margin-right: -55px;
box-sizing: border-box;
@e outer {
height: 6px;
border-radius: 100px;
background-color: var(--color-light-gray);
overflow: hidden;
position: relative;
vertical-align: middle;
}
@e inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: 2px 0 0 2px;
background-color: var(--color-primary);
text-align: right;
border-radius: 100px;
line-height: 1;
white-space: nowrap;
@utils-vertical-center;
}
@e innerText {
display: inline-block;
vertical-align: middle;
color: var(--color-white);
font-size: 12px;
margin: 0 5px;
}
}
}
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: 32px 0;
}
}

112
packages/theme-default/src/radio-button.css
View File

@ -1,112 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b radio-button {
position: relative;
display: inline-block;
@e inner {
display: inline-block;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: var(--button-default-fill);
border: var(--border-base);
border-left: 0;
color: var(--button-default-color);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
position: relative;
cursor: pointer;
transition: var(--all-transition);
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
&:hover {
color: var(--color-primary);
}
& [class*="el-icon-"] {
line-height: 0.9;
& + span {
margin-left: 5px;
}
}
}
@e orig-radio {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
left: -999px;
&:checked {
& + .el-radio-button__inner {
color: var(--radio-button-checked-color);
background-color: var(--radio-button-checked-fill);
border-color: var(--radio-button-checked-border-color);
box-shadow: -1px 0 0 0 var(--radio-button-checked-border-color);
}
}
&:disabled {
& + .el-radio-button__inner {
color: var(--button-disabled-color);
cursor: not-allowed;
background-image: none;
background-color: var(--button-disabled-fill);
border-color: var(--button-disabled-border);
box-shadow: none;
}
}
}
&:first-child {
.el-radio-button__inner {
border-left: var(--border-base);
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
box-shadow: none !important;
}
}
&:focus {
outline: none;
.el-radio-button__inner { /*获得焦点时 样式提醒*/
box-shadow: 0 0 1px 1px var(--radio-button-checked-border-color) !important;
}
}
&:last-child {
.el-radio-button__inner {
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
}
&:first-child:last-child {
.el-radio-button__inner {
border-radius: var(--border-radius-base);
}
}
@m large {
& .el-radio-button__inner {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
}
}
@m small {
& .el-radio-button__inner {
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
}
}
@m mini {
& .el-radio-button__inner {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
}
}
}
}

16
packages/theme-default/src/radio-group.css
View File

@ -1,16 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b radio-group {
display: inline-block;
font-size: 0;
line-height: 1;
vertical-align: middle;
& .el-radio {
font-size: var(--radio-font-size);
}
}
}

123
packages/theme-default/src/radio.css
View File

@ -1,123 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@import './mixins/button';
@component-namespace el {
@b radio {
color: var(--radio-color);
position: relative;
cursor: pointer;
display: inline-block;
white-space: nowrap;
@utils-user-select none;
&:focus { /*获得焦点时 样式提醒*/
outline: none;
.el-radio__inner {
box-shadow: 0 0 1px 1px var(--radio-input-border-color-hover);
}
}
& + .el-radio {
margin-left: 15px;
}
@e input {
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
@when disabled {
.el-radio__inner {
background-color: var(--radio-disabled-input-fill);
border-color: var(--radio-disabled-input-border-color);
cursor: not-allowed;
&::after {
cursor: not-allowed;
background-color: var(--radio-disabled-icon-color);
}
& + .el-radio__label {
cursor: not-allowed;
}
}
&.is-checked {
.el-radio__inner {
background-color: var(--radio-disabled-checked-input-fill);
border-color: var(--radio-disabled-checked-input-border-color);
&::after {
background-color: var(--radio-disabled-checked-icon-color);
}
}
}
& + .el-radio__label {
color: var(--disabled-color-base);
cursor: not-allowed;
}
}
@when checked {
.el-radio__inner {
border-color: var(--radio-checked-input-border-color);
background: var(--radio-checked-icon-color);
&::after {
transform: translate(-50%, -50%) scale(1);
}
}
}
@when focus {
.el-radio__inner {
border-color: var(--radio-input-border-color-hover);
}
}
}
@e inner {
border: var(--radio-input-border);
border-radius: var(--radio-input-border-radius);
circle: var(--radio-input-width) var(--radio-input-fill);
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
&:hover {
border-color: var(--radio-input-border-color-hover);
}
&::after {
circle: 6px var(--color-white);
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
}
}
@e original {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
@e label {
font-size: var(--radio-font-size);
padding-left: 5px;
}
}
}

48
packages/theme-default/src/rate.css
View File

@ -1,48 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b rate {
height: var(--rate-height);
line-height: 1;
@e item {
display: inline-block;
position: relative;
font-size: 0;
vertical-align: middle;
}
@e icon {
position: relative;
display: inline-block;
font-size: var(--rate-icon-size);
margin-right: var(--rate-icon-margin);
color: var(--rate-icon-color);
transition: .3s;
&.hover {
transform: scale(1.15);
}
.path2 {
position: absolute;
left: 0;
top: 0;
}
}
@e decimal {
position: absolute;
top: 0;
left: 0;
display: inline-block;
overflow: hidden;
}
@e text {
font-size: var(--rate-font-size);
vertical-align: middle;
}
}
}

79
packages/theme-default/src/reset.css
View File

@ -1,79 +0,0 @@
@import './common/var.css';
@reset-global pc;
body {
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
font-weight: 400;
font-size: var(--font-size-base);
color: var(--color-base-black);
}
a {
color: var(--color-primary);
text-decoration: none;
&:hover,
&:focus {
color: tint(var(--color-primary), var(--button-hover-tint-percent));
}
&:active {
color: shade(var(--color-primary), var(--button-active-shade-percent));
}
}
h1, h2, h3, h4, h5, h6 {
color: var(--font-color-base);
font-weight: inherit;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
h1 {
font-size: calc(var(--font-size-base) + 6px);
}
h2 {
font-size: calc(var(--font-size-base) + 4px);
}
h3 {
font-size: calc(var(--font-size-base) + 2px);
}
h4, h5, h6, p {
font-size: inherit;
}
p {
line-height: 1.8;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
sup, sub {
font-size: calc(var(--font-size-base) - 1px);
}
small {
font-size: calc(var(--font-size-base) - 2px);
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eeeeee;
}

39
packages/theme-default/src/row.css
View File

@ -1,39 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b row {
position: relative;
box-sizing: border-box;
@utils-clearfix;
@m flex {
display: flex;
&:before,
&:after {
display: none;
}
@when justify-center {
justify-content: center;
}
@when justify-end {
justify-content: flex-end;
}
@when justify-space-between {
justify-content: space-between;
}
@when justify-space-around {
justify-content: space-around;
}
@when align-middle {
align-items: center;
}
@when align-bottom {
align-items: flex-end;
}
}
}
}

71
packages/theme-default/src/scrollbar.css
View File

@ -1,71 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b scrollbar {
overflow: hidden;
position: relative;
&:hover,
&:active,
&:focus {
.el-scrollbar__bar {
opacity: 1;
transition: opacity 340ms ease-out;
}
}
@e wrap {
overflow: scroll;
@m hidden-default {
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
}
@e thumb {
position: relative;
display: block;
size: 0;
cursor: pointer;
border-radius: inherit;
background-color: var(--scrollbar-background-color);
transition: .3s background-color;
&:hover {
background-color: var(--scrollbar-hover-background-color);
}
}
@e bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
transition: opacity 120ms ease-out;
@when vertical {
width: 6px;
top: 2px;
> div {
width: 100%;
}
}
@when horizontal {
height: 6px;
left: 2px;
> div {
height: 100%;
}
}
}
}
}

60
packages/theme-default/src/select-dropdown.css
View File

@ -1,60 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b select-dropdown {
position: absolute;
z-index: 1001;
border: var(--select-dropdown-border);
border-radius: var(--border-radius-small);
background-color: var(--select-dropdown-background);
box-shadow: var(--select-dropdown-shadow);
box-sizing: border-box;
margin: 5px 0;
@when multiple {
& .el-select-dropdown__item.selected {
color: var(--select-option-selected);
background-color: var(--select-dropdown-background);
&.hover {
background-color: var(--select-option-hover-background);
}
&::after {
position: absolute;
right: 10px;
font-family: 'element-icons';
content: "\E608";
font-size: 11px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}
.el-scrollbar.is-empty .el-select-dropdown__list{
padding: 0;
}
}
@b select-dropdown__empty {
padding: var(--select-dropdown-empty-padding);
margin: 0;
text-align: center;
color: var(--select-dropdown-empty-color);
font-size: var(--select-font-size);
}
@b select-dropdown__wrap {
max-height: var(--select-dropdown-max-height);
}
@b select-dropdown__list {
list-style: none;
padding: var(--select-dropdown-padding);
margin: 0;
box-sizing: border-box;
}
}

145
packages/theme-default/src/select.css
View File

@ -1,145 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@import "./select-dropdown.css";
@import "./input.css";
@import "./tag.css";
@import "./option.css";
@import "./option-group.css";
@import "./scrollbar.css";
@component-namespace el {
@b select {
display: inline-block;
position: relative;
&:hover {
.el-input__inner {
border-color: var(--select-border-color-hover);
}
}
& .el-input__inner {
cursor: pointer;
padding-right: 35px;
&:focus {
border-color: var(--select-input-focus-background);
}
}
& .el-input {
& .el-input__icon {
color: var(--select-input-color);
font-size: var(--select-input-font-size);
transition: transform .3s;
transform: translateY(-50%) rotateZ(180deg);
line-height: 16px;
top: 50%;
cursor: pointer;
@when reverse {
transform: translateY(-50%);
}
@when show-close {
transition: 0s;
size: 16px;
font-size: var(--select-font-size);
right: 8px;
text-align: center;
transform: translateY(-50%) rotateZ(180deg);
border-radius: var(--border-radius-circle);
color: var(--select-input-color);
&:hover {
color: var(--select-close-hover-color);
}
}
}
&.is-disabled {
& .el-input__inner {
cursor: not-allowed;
&:hover {
border-color: var(--select-disabled-border);
}
}
}
&.is-focus .el-input__inner {
border-color: var(--input-focus-border);
}
}
& > .el-input {
display: block;
}
@e input {
border: none;
outline: none;
padding: 0;
margin-left: 10px;
color: var(--select-multiple-input-color);
font-size: var(--select-font-size);
vertical-align: baseline;
appearance: none;
height: 28px;
background-color: transparent;
@when mini {
height: 14px;
}
}
@e close {
cursor: pointer;
position: absolute;
top: 8px;
z-index: var(--index-top);
right: 25px;
color: var(--select-input-color);
line-height: 18px;
font-size: var(--select-input-font-size);
&:hover {
color: var(--select-close-hover-color);
}
}
@e tags {
position: absolute;
line-height: normal;
white-space: normal;
z-index: var(--index-normal);
top: 50%;
transform: translateY(-50%);
}
& .el-tag__close {
margin-top: -2px;
}
& .el-tag {
height: var(--select-tag-height);
line-height: var(--select-tag-height);
box-sizing: border-box;
margin: 3px 0 3px 6px;
}
@e tag {
display: inline-block;
height: var(--select-tag-height);
line-height: var(--select-tag-height);
font-size: var(--select-font-size);
border-radius: var(--border-radius-base);
color: var(--select-tag-color);
background-color: var(--select-tag-background);
& .el-icon-close {
font-size: var(--select-input-font-size);
}
}
}
}

207
packages/theme-default/src/slider.css
View File

@ -1,207 +0,0 @@
@charset "UTF-8";
@import "./input-number.css";
@import "./tooltip.css";
@import "./common/var.css";
@component-namespace el {
@b slider {
@utils-clearfix;
@e runway {
width: 100%;
height: var(--slider-height);
margin: var(--slider-margin);
background-color: var(--slider-runway-background-color);
border-radius: var(--slider-border-radius);
position: relative;
cursor: pointer;
vertical-align: middle;
&.show-input {
margin-right: 160px;
width: auto;
}
&.disabled {
cursor: default;
.el-slider__bar, .el-slider__button {
background-color: var(--slider-disable-color);
}
.el-slider__button-wrapper {
&:hover,
&.hover {
cursor: not-allowed;
}
&.dragging {
cursor: not-allowed;
}
}
.el-slider__button {
&:hover,
&.hover,
&.dragging {
transform: scale(1);
}
&:hover,
&.hover {
cursor: not-allowed;
}
&.dragging {
cursor: not-allowed;
}
}
}
}
@e input {
float: right;
margin-top: 3px;
}
@e bar {
height: var(--slider-height);
background-color: var(--slider-main-background-color);
border-top-left-radius: var(--slider-border-radius);
border-bottom-left-radius: var(--slider-border-radius);
position: absolute;
}
@e button-wrapper {
size: var(--slider-button-wrapper-size);
position: absolute;
z-index: 1001;
top: var(--slider-button-wrapper-offset);
transform: translateX(-50%);
background-color: transparent;
text-align: center;
user-select: none;
@utils-vertical-center;
.el-tooltip {
vertical-align: middle;
display: inline-block;
}
&:hover,
&.hover {
cursor: grab;
}
&.dragging {
cursor: grabbing;
}
}
@e button {
size: var(--slider-button-size);
background-color: var(--slider-main-background-color);
border-radius: 50%;
transition: .2s;
user-select: none;
&:hover,
&.hover,
&.dragging {
transform: scale(1.5);
background-color: var(--slider-button-hover-color);
}
&:hover,
&.hover {
cursor: grab;
}
&.dragging {
cursor: grabbing;
}
}
@e stop {
position: absolute;
size: var(--slider-height);
border-radius: var(--border-radius-circle);
background-color: var(--slider-stop-background-color);
transform: translateX(-50%);
}
@when vertical {
position: relative;
.el-slider__runway {
width: 4px;
height: 100%;
margin: 0 16px;
}
.el-slider__bar {
width: 4px;
height: auto;
border-radius: 0 0 3px 3px;
}
.el-slider__button-wrapper {
top: auto;
left: var(--slider-button-wrapper-offset);
transform: translateY(50%);
}
.el-slider__stop {
transform: translateY(50%);
}
&.el-slider--with-input {
padding-bottom: calc(var(--input-large-height) + 22px);
.el-slider__input {
overflow: visible;
float: none;
position: absolute;
bottom: 22px;
width: 36px;
margin-top: 15px;
.el-input__inner {
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
.el-input-number__decrease,
.el-input-number__increase
{
top: var(--input-small-height);
margin-top: -1px;
border: var(--input-border);
line-height: 20px;
box-sizing: border-box;
transition: var(--border-transition-base);
}
.el-input-number__decrease {
width: 18px;
right: 18px;
border-bottom-left-radius: var(--input-border-radius);
}
.el-input-number__increase {
width: 19px;
border-bottom-right-radius: var(--input-border-radius);
& ~ .el-input .el-input__inner {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
&:hover {
.el-input-number__decrease,
.el-input-number__increase
{
border-color: var(--input-hover-border);
}
}
&:active {
.el-input-number__decrease,
.el-input-number__increase
{
border-color: var(--input-focus-border);
}
}
}
}
}
}
}

46
packages/theme-default/src/spinner.css
View File

@ -1,46 +0,0 @@
@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b time-spinner {
width: 100%;
white-space: nowrap;
}
@b spinner {
display: inline-block;
vertical-align: middle;
}
@b spinner-inner {
animation: rotate 2s linear infinite;
width: 50px;
height: 50px;
& .path {
stroke: #ececec;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
}
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}

Some files were not shown because too many files have changed in this diff Show More