remove theme-default (#7273)

README.md

@@ -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) 

build/bin/gen-cssfile.js

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

build/bin/iconInit.js

@@ -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 = [];
 

build/config.js

@@ -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'));

build/cooking.test.js

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

build/deploy-ci.sh

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

examples/components/demo-block.vue

@@ -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\')';

examples/docs/en-US/custom-theme.md

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

examples/docs/en-US/installation.md

@@ -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">

examples/docs/en-US/quickstart.md

@@ -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"
     }
   ]]]
 }

examples/docs/zh-CN/custom-theme.md

@@ -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
 ```
 
 ### 初始化变量文件

examples/docs/zh-CN/installation.md

@@ -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">

examples/docs/zh-CN/quickstart.md

@@ -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"
     }
   ]]]
 }

examples/icon.json

@@ -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"]

examples/versions.json

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

package.json

@@ -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",

packages/loading/README.md

@@ -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)
 ```

packages/pagination/README.md

@@ -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)
 ```

packages/select/src/select.vue

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

packages/steps/README.md

@@ -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)
 ```

packages/table/README.md

@@ -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)
 ```

packages/theme-default/.gitignore

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

packages/theme-default/README.md

@@ -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';
-
-// ...
-```

packages/theme-default/gulpfile.js

@@ -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']);

packages/theme-default/package.json

@@ -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": {}
-}

packages/theme-default/src/alert.css

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

packages/theme-default/src/aside.css

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

packages/theme-default/src/autocomplete.css

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

packages/theme-default/src/badge.css

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

packages/theme-default/src/base.css

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

packages/theme-default/src/breadcrumb.css

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

packages/theme-default/src/button.css

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

packages/theme-default/src/card.css

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

packages/theme-default/src/carousel-item.css

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

packages/theme-default/src/carousel.css

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

packages/theme-default/src/cascader.css

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

packages/theme-default/src/checkbox.css

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

packages/theme-default/src/col.css

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

packages/theme-default/src/collapse.css

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

packages/theme-default/src/color-picker.css

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

packages/theme-default/src/common/popup.css

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

packages/theme-default/src/common/transition.css

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

packages/theme-default/src/common/var.css

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

packages/theme-default/src/container.css

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

packages/theme-default/src/date-picker.css

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

packages/theme-default/src/date-picker/date-picker.css

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

packages/theme-default/src/date-picker/date-range-picker.css

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

packages/theme-default/src/date-picker/date-table.css

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

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

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

packages/theme-default/src/date-picker/picker-panel.css

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

packages/theme-default/src/date-picker/picker.css

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

packages/theme-default/src/date-picker/time-picker.css

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

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

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

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

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

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

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

packages/theme-default/src/dialog.css

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

packages/theme-default/src/dropdown.css

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

packages/theme-default/src/footer.css

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

packages/theme-default/src/form.css

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

packages/theme-default/src/header.css

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

packages/theme-default/src/icon.css

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

packages/theme-default/src/index.css

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

packages/theme-default/src/input-number.css

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

packages/theme-default/src/input.css

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

packages/theme-default/src/loading.css

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

packages/theme-default/src/main.css

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

packages/theme-default/src/menu.css

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

packages/theme-default/src/message-box.css

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

packages/theme-default/src/message.css

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

packages/theme-default/src/mixins/_button.css

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

packages/theme-default/src/notification.css

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

packages/theme-default/src/option-group.css

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

packages/theme-default/src/option.css

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

packages/theme-default/src/pagination.css

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

packages/theme-default/src/popover.css

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

packages/theme-default/src/progress.css

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

packages/theme-default/src/radio-button.css

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

packages/theme-default/src/radio-group.css

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

packages/theme-default/src/radio.css

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

packages/theme-default/src/rate.css

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

packages/theme-default/src/reset.css

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

packages/theme-default/src/row.css

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

packages/theme-default/src/scrollbar.css

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

packages/theme-default/src/select-dropdown.css

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

packages/theme-default/src/select.css

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

packages/theme-default/src/slider.css

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

packages/theme-default/src/spinner.css

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