From 21c579179ca0588abaf425408b4de94cb96e4914 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Thu, 28 Sep 2017 05:01:29 -0500 Subject: [PATCH] remove theme-default (#7273) --- README.md | 2 +- build/bin/gen-cssfile.js | 1 - build/bin/iconInit.js | 2 +- build/config.js | 2 +- build/cooking.test.js | 23 - build/deploy-ci.sh | 5 - .../theme-default => build}/salad.config.json | 0 examples/components/demo-block.vue | 2 +- examples/docs/en-US/custom-theme.md | 4 +- examples/docs/en-US/installation.md | 4 +- examples/docs/en-US/quickstart.md | 4 +- examples/docs/zh-CN/custom-theme.md | 4 +- examples/docs/zh-CN/installation.md | 4 +- examples/docs/zh-CN/quickstart.md | 4 +- examples/icon.json | 2 +- examples/versions.json | 2 +- package.json | 4 +- packages/loading/README.md | 2 +- packages/pagination/README.md | 2 +- packages/select/src/select.vue | 3 + packages/steps/README.md | 2 +- packages/table/README.md | 2 +- packages/theme-default/.gitignore | 3 - packages/theme-default/README.md | 33 - packages/theme-default/gulpfile.js | 21 - packages/theme-default/package.json | 35 - packages/theme-default/src/alert.css | 86 --- packages/theme-default/src/aside.css | 8 - packages/theme-default/src/autocomplete.css | 80 --- packages/theme-default/src/badge.css | 40 -- packages/theme-default/src/base.css | 2 - .../theme-default/src/breadcrumb-item.css | 0 packages/theme-default/src/breadcrumb.css | 45 -- packages/theme-default/src/button-group.css | 0 packages/theme-default/src/button.css | 206 ------ packages/theme-default/src/card.css | 23 - packages/theme-default/src/carousel-item.css | 53 -- packages/theme-default/src/carousel.css | 134 ---- packages/theme-default/src/cascader.css | 180 ----- .../theme-default/src/checkbox-button.css | 0 packages/theme-default/src/checkbox-group.css | 0 packages/theme-default/src/checkbox.css | 255 -------- packages/theme-default/src/col.css | 101 --- packages/theme-default/src/collapse-item.css | 0 packages/theme-default/src/collapse.css | 53 -- packages/theme-default/src/color-picker.css | 266 -------- packages/theme-default/src/common/popup.css | 33 - .../theme-default/src/common/transition.css | 102 --- packages/theme-default/src/common/var.css | 614 ------------------ packages/theme-default/src/container.css | 14 - packages/theme-default/src/date-picker.css | 11 - .../src/date-picker/date-picker.css | 86 --- .../src/date-picker/date-range-picker.css | 112 ---- .../src/date-picker/date-table.css | 85 --- .../src/date-picker/month-table.css | 38 -- .../src/date-picker/picker-panel.css | 114 ---- .../theme-default/src/date-picker/picker.css | 35 - .../src/date-picker/time-picker.css | 87 --- .../src/date-picker/time-range-picker.css | 33 - .../src/date-picker/time-spinner.css | 63 -- .../src/date-picker/year-table.css | 42 -- packages/theme-default/src/dialog.css | 104 --- packages/theme-default/src/dropdown-item.css | 0 packages/theme-default/src/dropdown-menu.css | 0 packages/theme-default/src/dropdown.css | 74 --- .../theme-default/src/fonts/element-icons.ttf | Bin 8884 -> 0 bytes .../src/fonts/element-icons.woff | Bin 5256 -> 0 bytes packages/theme-default/src/footer.css | 9 - packages/theme-default/src/form-item.css | 0 packages/theme-default/src/form.css | 93 --- packages/theme-default/src/header.css | 9 - packages/theme-default/src/icon.css | 88 --- packages/theme-default/src/index.css | 67 -- packages/theme-default/src/input-number.css | 99 --- packages/theme-default/src/input.css | 236 ------- packages/theme-default/src/loading.css | 82 --- packages/theme-default/src/main.css | 11 - .../theme-default/src/menu-item-group.css | 0 packages/theme-default/src/menu-item.css | 0 packages/theme-default/src/menu.css | 275 -------- packages/theme-default/src/message-box.css | 170 ----- packages/theme-default/src/message.css | 101 --- packages/theme-default/src/mixins/_button.css | 51 -- packages/theme-default/src/notification.css | 102 --- packages/theme-default/src/option-group.css | 28 - packages/theme-default/src/option.css | 47 -- packages/theme-default/src/pagination.css | 209 ------ packages/theme-default/src/popover.css | 120 ---- packages/theme-default/src/progress.css | 120 ---- packages/theme-default/src/radio-button.css | 112 ---- packages/theme-default/src/radio-group.css | 16 - packages/theme-default/src/radio.css | 123 ---- packages/theme-default/src/rate.css | 48 -- packages/theme-default/src/reset.css | 79 --- packages/theme-default/src/row.css | 39 -- packages/theme-default/src/scrollbar.css | 71 -- .../theme-default/src/select-dropdown.css | 60 -- packages/theme-default/src/select.css | 145 ----- packages/theme-default/src/slider.css | 207 ------ packages/theme-default/src/spinner.css | 46 -- packages/theme-default/src/step.css | 210 ------ packages/theme-default/src/steps.css | 20 - packages/theme-default/src/submenu.css | 0 packages/theme-default/src/switch.css | 117 ---- packages/theme-default/src/tab-pane.css | 0 packages/theme-default/src/table-column.css | 92 --- packages/theme-default/src/table.css | 474 -------------- packages/theme-default/src/tabs.css | 435 ------------- packages/theme-default/src/tag.css | 105 --- packages/theme-default/src/time-picker.css | 5 - packages/theme-default/src/time-select.css | 38 -- packages/theme-default/src/tooltip.css | 138 ---- packages/theme-default/src/transfer.css | 168 ----- packages/theme-default/src/tree.css | 103 --- packages/theme-default/src/upload.css | 532 --------------- packages/upload/README.md | 2 +- test/unit/index.js | 2 +- 117 files changed, 29 insertions(+), 8626 deletions(-) rename {packages/theme-default => build}/salad.config.json (100%) delete mode 100644 packages/theme-default/.gitignore delete mode 100644 packages/theme-default/README.md delete mode 100644 packages/theme-default/gulpfile.js delete mode 100644 packages/theme-default/package.json delete mode 100644 packages/theme-default/src/alert.css delete mode 100644 packages/theme-default/src/aside.css delete mode 100644 packages/theme-default/src/autocomplete.css delete mode 100644 packages/theme-default/src/badge.css delete mode 100644 packages/theme-default/src/base.css delete mode 100644 packages/theme-default/src/breadcrumb-item.css delete mode 100644 packages/theme-default/src/breadcrumb.css delete mode 100644 packages/theme-default/src/button-group.css delete mode 100644 packages/theme-default/src/button.css delete mode 100644 packages/theme-default/src/card.css delete mode 100644 packages/theme-default/src/carousel-item.css delete mode 100644 packages/theme-default/src/carousel.css delete mode 100644 packages/theme-default/src/cascader.css delete mode 100644 packages/theme-default/src/checkbox-button.css delete mode 100644 packages/theme-default/src/checkbox-group.css delete mode 100644 packages/theme-default/src/checkbox.css delete mode 100644 packages/theme-default/src/col.css delete mode 100644 packages/theme-default/src/collapse-item.css delete mode 100644 packages/theme-default/src/collapse.css delete mode 100644 packages/theme-default/src/color-picker.css delete mode 100644 packages/theme-default/src/common/popup.css delete mode 100644 packages/theme-default/src/common/transition.css delete mode 100644 packages/theme-default/src/common/var.css delete mode 100644 packages/theme-default/src/container.css delete mode 100644 packages/theme-default/src/date-picker.css delete mode 100644 packages/theme-default/src/date-picker/date-picker.css delete mode 100644 packages/theme-default/src/date-picker/date-range-picker.css delete mode 100644 packages/theme-default/src/date-picker/date-table.css delete mode 100644 packages/theme-default/src/date-picker/month-table.css delete mode 100644 packages/theme-default/src/date-picker/picker-panel.css delete mode 100644 packages/theme-default/src/date-picker/picker.css delete mode 100644 packages/theme-default/src/date-picker/time-picker.css delete mode 100644 packages/theme-default/src/date-picker/time-range-picker.css delete mode 100644 packages/theme-default/src/date-picker/time-spinner.css delete mode 100644 packages/theme-default/src/date-picker/year-table.css delete mode 100755 packages/theme-default/src/dialog.css delete mode 100644 packages/theme-default/src/dropdown-item.css delete mode 100644 packages/theme-default/src/dropdown-menu.css delete mode 100644 packages/theme-default/src/dropdown.css delete mode 100644 packages/theme-default/src/fonts/element-icons.ttf delete mode 100644 packages/theme-default/src/fonts/element-icons.woff delete mode 100644 packages/theme-default/src/footer.css delete mode 100644 packages/theme-default/src/form-item.css delete mode 100644 packages/theme-default/src/form.css delete mode 100644 packages/theme-default/src/header.css delete mode 100644 packages/theme-default/src/icon.css delete mode 100644 packages/theme-default/src/index.css delete mode 100644 packages/theme-default/src/input-number.css delete mode 100644 packages/theme-default/src/input.css delete mode 100644 packages/theme-default/src/loading.css delete mode 100644 packages/theme-default/src/main.css delete mode 100644 packages/theme-default/src/menu-item-group.css delete mode 100644 packages/theme-default/src/menu-item.css delete mode 100644 packages/theme-default/src/menu.css delete mode 100644 packages/theme-default/src/message-box.css delete mode 100644 packages/theme-default/src/message.css delete mode 100644 packages/theme-default/src/mixins/_button.css delete mode 100644 packages/theme-default/src/notification.css delete mode 100644 packages/theme-default/src/option-group.css delete mode 100644 packages/theme-default/src/option.css delete mode 100644 packages/theme-default/src/pagination.css delete mode 100644 packages/theme-default/src/popover.css delete mode 100644 packages/theme-default/src/progress.css delete mode 100644 packages/theme-default/src/radio-button.css delete mode 100644 packages/theme-default/src/radio-group.css delete mode 100644 packages/theme-default/src/radio.css delete mode 100644 packages/theme-default/src/rate.css delete mode 100644 packages/theme-default/src/reset.css delete mode 100644 packages/theme-default/src/row.css delete mode 100644 packages/theme-default/src/scrollbar.css delete mode 100644 packages/theme-default/src/select-dropdown.css delete mode 100644 packages/theme-default/src/select.css delete mode 100644 packages/theme-default/src/slider.css delete mode 100644 packages/theme-default/src/spinner.css delete mode 100644 packages/theme-default/src/step.css delete mode 100644 packages/theme-default/src/steps.css delete mode 100644 packages/theme-default/src/submenu.css delete mode 100644 packages/theme-default/src/switch.css delete mode 100644 packages/theme-default/src/tab-pane.css delete mode 100644 packages/theme-default/src/table-column.css delete mode 100644 packages/theme-default/src/table.css delete mode 100644 packages/theme-default/src/tabs.css delete mode 100644 packages/theme-default/src/tag.css delete mode 100644 packages/theme-default/src/time-picker.css delete mode 100644 packages/theme-default/src/time-select.css delete mode 100644 packages/theme-default/src/tooltip.css delete mode 100644 packages/theme-default/src/transfer.css delete mode 100644 packages/theme-default/src/tree.css delete mode 100644 packages/theme-default/src/upload.css diff --git a/README.md b/README.md index 5f9194e6..4e587cd4 100644 --- a/README.md +++ b/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) diff --git a/build/bin/gen-cssfile.js b/build/bin/gen-cssfile.js index a4ce5a24..d3241185 100644 --- a/build/bin/gen-cssfile.js +++ b/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); diff --git a/build/bin/iconInit.js b/build/bin/iconInit.js index 1d23dba8..472d3ef2 100644 --- a/build/bin/iconInit.js +++ b/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 = []; diff --git a/build/config.js b/build/config.js index eaa7cc11..27b84cea 100644 --- a/build/config.js +++ b/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')); diff --git a/build/cooking.test.js b/build/cooking.test.js index 2a9b899a..079815f0 100644 --- a/build/cooking.test.js +++ b/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' }); diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh index fcc00b7b..ad8d9379 100644 --- a/build/deploy-ci.sh +++ b/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 diff --git a/packages/theme-default/salad.config.json b/build/salad.config.json similarity index 100% rename from packages/theme-default/salad.config.json rename to build/salad.config.json diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue index 35bd7992..d92e9343 100644 --- a/examples/components/demo-block.vue +++ b/examples/components/demo-block.vue @@ -177,7 +177,7 @@ '\n'; let jsTpl = (script || '').replace(/export default/, 'var Main =').trim(); let htmlTpl = `${resourcesTpl}\n
\n${html.trim()}\n
`; - 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\')'; diff --git a/examples/docs/en-US/custom-theme.md b/examples/docs/en-US/custom-theme.md index f82290ed..a02544e3 100644 --- a/examples/docs/en-US/custom-theme.md +++ b/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 diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md index f5a64013..931e4469 100644 --- a/examples/docs/en-US/installation.md +++ b/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 - + ``` @@ -26,7 +26,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt - +
diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md index 2b692cab..bfbbcc26 100644 --- a/examples/docs/en-US/quickstart.md +++ b/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" } ]]] } diff --git a/examples/docs/zh-CN/custom-theme.md b/examples/docs/zh-CN/custom-theme.md index 84a0e624..bf0e4faf 100644 --- a/examples/docs/zh-CN/custom-theme.md +++ b/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 ``` ### 初始化变量文件 diff --git a/examples/docs/zh-CN/installation.md b/examples/docs/zh-CN/installation.md index 3f1e12d0..b0076ce9 100644 --- a/examples/docs/zh-CN/installation.md +++ b/examples/docs/zh-CN/installation.md @@ -12,7 +12,7 @@ npm i element-ui -S ```html - + ``` @@ -26,7 +26,7 @@ npm i element-ui -S - +
diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md index 863d57c5..78b64380 100644 --- a/examples/docs/zh-CN/quickstart.md +++ b/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" } ]]] } diff --git a/examples/icon.json b/examples/icon.json index dbe57fdd..0c4aaeb8 100644 --- a/examples/icon.json +++ b/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"] \ No newline at end of file +["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"] \ No newline at end of file diff --git a/examples/versions.json b/examples/versions.json index 8f9e56e3..0acbaeab 100644 --- a/examples/versions.json +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/package.json b/package.json index 8846ef21..e15bcb3c 100644 --- a/package.json +++ b/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", diff --git a/packages/loading/README.md b/packages/loading/README.md index f281596d..2c2d734c 100644 --- a/packages/loading/README.md +++ b/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) ``` diff --git a/packages/pagination/README.md b/packages/pagination/README.md index 1e1ea333..8eb69f52 100644 --- a/packages/pagination/README.md +++ b/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) ``` diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index 4147ce64..417e21c9 100644 --- a/packages/select/src/select.vue +++ b/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(); + } } }, diff --git a/packages/steps/README.md b/packages/steps/README.md index 828724c8..8cc7334f 100644 --- a/packages/steps/README.md +++ b/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) ``` diff --git a/packages/table/README.md b/packages/table/README.md index 72320056..8998842e 100644 --- a/packages/table/README.md +++ b/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) ``` diff --git a/packages/theme-default/.gitignore b/packages/theme-default/.gitignore deleted file mode 100644 index 6ddbcfaa..00000000 --- a/packages/theme-default/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules -lib -npm-debug* diff --git a/packages/theme-default/README.md b/packages/theme-default/README.md deleted file mode 100644 index a947e128..00000000 --- a/packages/theme-default/README.md +++ /dev/null @@ -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 - -``` - -## Import your need -```javascript -import 'element-theme-default/lib/input.css'; -import 'element-theme-default/lib/select.css'; - -// ... -``` diff --git a/packages/theme-default/gulpfile.js b/packages/theme-default/gulpfile.js deleted file mode 100644 index 0e37283c..00000000 --- a/packages/theme-default/gulpfile.js +++ /dev/null @@ -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']); diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json deleted file mode 100644 index d0269cf1..00000000 --- a/packages/theme-default/package.json +++ /dev/null @@ -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 ", - "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": {} -} diff --git a/packages/theme-default/src/alert.css b/packages/theme-default/src/alert.css deleted file mode 100644 index 05e2b1f5..00000000 --- a/packages/theme-default/src/alert.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/aside.css b/packages/theme-default/src/aside.css deleted file mode 100644 index 7d4314b1..00000000 --- a/packages/theme-default/src/aside.css +++ /dev/null @@ -1,8 +0,0 @@ -@charset "UTF-8"; - -@component-namespace el { - @b aside { - overflow: auto; - box-sizing: border-box; - } -} diff --git a/packages/theme-default/src/autocomplete.css b/packages/theme-default/src/autocomplete.css deleted file mode 100644 index 98bd7151..00000000 --- a/packages/theme-default/src/autocomplete.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/badge.css b/packages/theme-default/src/badge.css deleted file mode 100644 index 5332c307..00000000 --- a/packages/theme-default/src/badge.css +++ /dev/null @@ -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%; - } - } - } -} diff --git a/packages/theme-default/src/base.css b/packages/theme-default/src/base.css deleted file mode 100644 index d5da9e9e..00000000 --- a/packages/theme-default/src/base.css +++ /dev/null @@ -1,2 +0,0 @@ -@import "./common/transition.css"; -@import "./icon.css"; diff --git a/packages/theme-default/src/breadcrumb-item.css b/packages/theme-default/src/breadcrumb-item.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/breadcrumb.css b/packages/theme-default/src/breadcrumb.css deleted file mode 100644 index 78e42529..00000000 --- a/packages/theme-default/src/breadcrumb.css +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/packages/theme-default/src/button-group.css b/packages/theme-default/src/button-group.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/button.css b/packages/theme-default/src/button.css deleted file mode 100644 index 37f4e283..00000000 --- a/packages/theme-default/src/button.css +++ /dev/null @@ -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); - } - } - } - } -} diff --git a/packages/theme-default/src/card.css b/packages/theme-default/src/card.css deleted file mode 100644 index 6d92dfee..00000000 --- a/packages/theme-default/src/card.css +++ /dev/null @@ -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); - } - } -} diff --git a/packages/theme-default/src/carousel-item.css b/packages/theme-default/src/carousel-item.css deleted file mode 100644 index eccc4826..00000000 --- a/packages/theme-default/src/carousel-item.css +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/packages/theme-default/src/carousel.css b/packages/theme-default/src/carousel.css deleted file mode 100644 index 08c1ffc1..00000000 --- a/packages/theme-default/src/carousel.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/cascader.css b/packages/theme-default/src/cascader.css deleted file mode 100644 index 615d0bd1..00000000 --- a/packages/theme-default/src/cascader.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/checkbox-button.css b/packages/theme-default/src/checkbox-button.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/checkbox-group.css b/packages/theme-default/src/checkbox-group.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/checkbox.css b/packages/theme-default/src/checkbox.css deleted file mode 100644 index c11b0fa6..00000000 --- a/packages/theme-default/src/checkbox.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/col.css b/packages/theme-default/src/col.css deleted file mode 100644 index 0dce6408..00000000 --- a/packages/theme-default/src/col.css +++ /dev/null @@ -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)%; - } - } -} \ No newline at end of file diff --git a/packages/theme-default/src/collapse-item.css b/packages/theme-default/src/collapse-item.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/collapse.css b/packages/theme-default/src/collapse.css deleted file mode 100644 index 809d51bb..00000000 --- a/packages/theme-default/src/collapse.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/color-picker.css b/packages/theme-default/src/color-picker.css deleted file mode 100644 index e9fc9416..00000000 --- a/packages/theme-default/src/color-picker.css +++ /dev/null @@ -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); - } - } -} diff --git a/packages/theme-default/src/common/popup.css b/packages/theme-default/src/common/popup.css deleted file mode 100644 index 67a20d78..00000000 --- a/packages/theme-default/src/common/popup.css +++ /dev/null @@ -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; -} diff --git a/packages/theme-default/src/common/transition.css b/packages/theme-default/src/common/transition.css deleted file mode 100644 index 7a4dc6dd..00000000 --- a/packages/theme-default/src/common/transition.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css deleted file mode 100644 index 01f8dd4a..00000000 --- a/packages/theme-default/src/common/var.css +++ /dev/null @@ -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; -} diff --git a/packages/theme-default/src/container.css b/packages/theme-default/src/container.css deleted file mode 100644 index 2b8b274f..00000000 --- a/packages/theme-default/src/container.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/date-picker.css b/packages/theme-default/src/date-picker.css deleted file mode 100644 index e4f8e682..00000000 --- a/packages/theme-default/src/date-picker.css +++ /dev/null @@ -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"; \ No newline at end of file diff --git a/packages/theme-default/src/date-picker/date-picker.css b/packages/theme-default/src/date-picker/date-picker.css deleted file mode 100644 index 9bc4eaa2..00000000 --- a/packages/theme-default/src/date-picker/date-picker.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/date-picker/date-range-picker.css b/packages/theme-default/src/date-picker/date-range-picker.css deleted file mode 100644 index ee98fcd4..00000000 --- a/packages/theme-default/src/date-picker/date-range-picker.css +++ /dev/null @@ -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); - } - } - } -} diff --git a/packages/theme-default/src/date-picker/date-table.css b/packages/theme-default/src/date-picker/date-table.css deleted file mode 100644 index c4a12f60..00000000 --- a/packages/theme-default/src/date-picker/date-table.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/date-picker/month-table.css b/packages/theme-default/src/date-picker/month-table.css deleted file mode 100644 index 9aad0e3d..00000000 --- a/packages/theme-default/src/date-picker/month-table.css +++ /dev/null @@ -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); - } - } - } -} diff --git a/packages/theme-default/src/date-picker/picker-panel.css b/packages/theme-default/src/date-picker/picker-panel.css deleted file mode 100644 index b49a69eb..00000000 --- a/packages/theme-default/src/date-picker/picker-panel.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/date-picker/picker.css b/packages/theme-default/src/date-picker/picker.css deleted file mode 100644 index 6ada0d0f..00000000 --- a/packages/theme-default/src/date-picker/picker.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/date-picker/time-picker.css b/packages/theme-default/src/date-picker/time-picker.css deleted file mode 100644 index d559ac02..00000000 --- a/packages/theme-default/src/date-picker/time-picker.css +++ /dev/null @@ -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); - } - } - - } -} diff --git a/packages/theme-default/src/date-picker/time-range-picker.css b/packages/theme-default/src/date-picker/time-range-picker.css deleted file mode 100644 index a0795a79..00000000 --- a/packages/theme-default/src/date-picker/time-range-picker.css +++ /dev/null @@ -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); - } - } -} diff --git a/packages/theme-default/src/date-picker/time-spinner.css b/packages/theme-default/src/date-picker/time-spinner.css deleted file mode 100644 index ab0421e1..00000000 --- a/packages/theme-default/src/date-picker/time-spinner.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/date-picker/year-table.css b/packages/theme-default/src/date-picker/year-table.css deleted file mode 100644 index fba2ae1f..00000000 --- a/packages/theme-default/src/date-picker/year-table.css +++ /dev/null @@ -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); - } - } - } -} diff --git a/packages/theme-default/src/dialog.css b/packages/theme-default/src/dialog.css deleted file mode 100755 index 7d973dd2..00000000 --- a/packages/theme-default/src/dialog.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/dropdown-item.css b/packages/theme-default/src/dropdown-item.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/dropdown-menu.css b/packages/theme-default/src/dropdown-menu.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/dropdown.css b/packages/theme-default/src/dropdown.css deleted file mode 100644 index 796cca7d..00000000 --- a/packages/theme-default/src/dropdown.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/fonts/element-icons.ttf b/packages/theme-default/src/fonts/element-icons.ttf deleted file mode 100644 index a181e979ae7bc43e90553350b348c5990ff63a3e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8884 zcmcgxd2pOZmG9TzeBU>h=Dy?^%_+@jbd0PSX~vf0k!*t(*|E=yy} z1}BkI5C;M=8`(?N?6Opf+TGfaTEcRKB0ylPmc=ykvMy8HF(?$@th_s57aW@GbAVyn08x^?4cwSWE}#%K+=8@KQ3$?yK{ z^;ytILGK=!7@m&rw91U}`xujcuy6dx*q3+y)j`IT#~BMA-Cr3Vb)M)2&3+Cj?gzud zWd-;XfY$vJwZmUbE`1O3o(28+@u`vFL*}C$X#Z}|@17VwJWcD_hfy8^9iJSYsJwCg z^Iu~u+J`=er>ACXKlxniP82-^I>Mm4G`}>@-Yvg(>D8s*$UTCy;;&ohfcu{Km$tpf zdEINwX3{I1{kuco6o|;tc2@3@j)62Yt`|cECz*%di0X{dWy+bha- zxxc3zdg%R>mws&$a7l*-fBTj4P=R3{pf;cjfF|_0#&|vht{7Pta;yOOCN>XRK~9(? z%)*jbmBV%DgXC16l=tqWC=$-w!lg1+dxx0OHe|Ev*@kW7IwZjd7 ziglm@#LlS;TBwcHtqWT0CaiE>&|<~0@^wK2#Jbf5Ev!LBE@*(*OLaj5u#T)QXtBRw z5p_WWu(qr&Xt7VBU0u)stT(F*T4?M*E@%L3fYk*JfHknXpaHN8Ru?n?7Q*U+2EbNW zUC;nn4XXL$d4S;pAx}X8DGgcQg02asUf(F3$SY6NnSRtzm z8UTA_bwLAQnXE2o0Bn@i1r109Y`q3mO1hW_3XWVAZTHXaMY+)ddZJ zrL(%A0kC;i7c>CY&*}}pK4A3*U`MdJs0YB_V0A$Q^j(aM9byl&?=y|M=z1EX574LR z-?)|E%sEJDt$n@oSC;1byKj?Ev znN%jBrjj{nJq44BFOVKQ9jT@)Er*5%hML|NFO6> zC=>ml_BQ@7`D3Ywv)rw1?Hcsu<6iTe-Q#KYcs^oQWZBHQ$?2epV89|xWR zb1&FJUVBUWf|x`2Vr&@V$AqP|1&Spq=15U3gwz+L7zKj#U*2{nebvJ=1+R8MyTe;( z_s};at|<4KWd|*|yW-rX{Uz;pQ=-eQ9pEH$;Z>LJmI$W@H)upbpE}J)G7a=L_fSwl2cpzV*K`NH`8<4F{=&I4}+C#c(bV8{12V^(q;~qnA zMI|K)c^0f?vCq((hoGFcNuLioL8rugXoF%t`1`Ket1;KF!cl#TKP0?~G1uu#!a+eg z-Ew1;ri#&<7UgZx(qj<{Q>C<(XlrSCymv`W(oW%dDBXv-35IpZI>?7mx}oy1r#-r zL)(@5@}rRSiIw{P5>d~)gjbWX+UY(twm?F_r(%&(yfq!w-rutBrYH^Z(df2;$l@MH ztJfW&4+=til8;6Pwnf1d?o;^rrMpdt$KXBT8^kvBMR~r=u@O@i*b}U&538P!k)EKJ zUe0d+%KbZb-2atljqG-cYWJJH=Ci6=P<`rOP#$UCY?kJKS4UKZf#0vH=gfNHgVbv_ z=h4d0VP4lEEc_Lf#9*8h3^)kgt4dO6kV%&*AM_SkDa|s73j&N=&)8c6wlimJ6G9~EIGqymB9aW=#>r+oz11*jEix!kVcUkQ#=cHfEa*o5p zOu;(*(Vws{NRglc$jME6S-;iX!M!Ck3sl zr>>YNeoFP53ug1ef*F}#J-L9SPgPHzRFV133x@42&l$5oA(%Rr%LnVTK$$XSU=w{g zQaRI(1lDwrpN?xs{2glpbexXs4DARV*BLJuxpw4QH5;~$NL12Knna;Yr5t5a{YV_7 z`cp`v6fE?ol4-+O0&wZPc((c>NqXQ8Ge2?19S=xmfb^m2i|_Q=tRGRm>PM}1?>m(T zs^ce6bV8C&++mhZj8`8}J`-@Avs%x&Z~*fq4fbjHI-FD9t9rY(t8#yj3)KDu?`XQF z+vH12&{5KTCUm5$dd;@0a;0ndQf}fJzox^xwwt}Sl8wFoLFpv)w22r;77iU+>0a`3 z5A=9=bC|jct2Qs*yQMi#-7CnEP>3SE8;Lgd@_!12v={RN&x?Hn<5-%P&cT-i5fdSz zp+tX5*oNQj3j`Bo>Ua00VKganC)@(~x3$TS=UdWkEmAs?PDctKU;Gh&QhSP+A=DQ0ynIF+L-ddM zyCk(yrlbZ-IPucSTW+BOy?FksM=l)9<$CY@y!Q01^y2ehJ@Wj)-aC79x=k#fFS>VM z=}q0sVO`4Gmrg3eQ1Zq8H~G(KXXkaDozZp4d=mdxcuT3RbA2cNwU>j5L{R%}C>{@q z*lWq~kBGkAxF;G1hv+Vdd4Y9czH)>vFFyd>fq?t**G#6@9!E-nM3CkiCy0JV1QP)= z%8-h>2=6ZS<3jwNXPaPuy6vG8u?qdzVD2j!D{DZJl{LViu~%1bAlk6{)!reZp~6av zw;Sx<73^h--i3Cr<&EapoxJUm9KFio^P+t95a&ayU%5)TzTRhX9(UrVrSD>~my9VC zTZ`HAN&236jv`}XPbz=C*nA7B1%3zEb1$6mu^dTbtNx;5-EL; zx;J){NJJa>9dR+GU+aD?g?9Re7bjDc^kUx-Y?&q5)1)nw1n~Gs6PWo2*0Shp&bV4cO!HY76}rD)4MQuGv_xC^5=~FUJAyN zVfw7o1Wy=sYAqZ{3Aik|`wHT!}Ta9Ax24OR_C}st=}b+X)sCcbMS&gT+19>+%VPE za2CB$FrpG7y+AM-<^6%;Ac{v7 zBQ@;iZs|LSEpP(2>7g>h=JnKvX=!svxWtPXx_}@$*p`#TjlB_1qaY&(eF4PQs$7-| zd1)e?4FhC)^>zK9cyFGmTR400oU46Y5^SPzYp6Nm zi2bcCTO5QC$ckBHv)Odk;y^D&?B3z z;7jK$SQW&dzh0U(ZN_=Kj*WP%J5df^IsXGl6`+ZcH#06%P}-g#Zu2 zBt+eO5QGSh(LgjVi@P*#Rl0qVus0ZvYGE>X+hyvjYQX198c(4t1P%^@Yxt+hcR$t&T3uSq8SC zUz7gez%zVDpcMFH^tamWe}p2-KH2bPcD&u;bxX!+g*X658BQ)-@N=+FA#N zeJ_fNUl2`}^;!`Vt-N)+ao>d|J|*SVqfxgWnZ79|Y8IhTvbhlxU3u5O_|s%>D%G1L z)|^T;lNYtcQ>7j=-!1(Z_H4u}gKP^M$C4rN#T#525qeQPrTGhgkl{rLjq4^};Skv4 z?h+V947P)zGODwRoyjS*(oPj}fZomfU|r^WuL-O^>T>&c@!LoeF1 z_^{Q=d7fLX+5qL^vU*OD`A)lK!(jK~ce@8Sh$heUSo_2O9`3jHJY%ubOWM2;N%NxU zns^I8ym+58WVeT${5#u(y^lbN#rsM-x0U$&(YM7u9ZID_({?;eBd)j}@JUfVUvA-bRB~z3s@=Q9eDz0F_RKjs49)y(m@`2`3`THKEa7UOP^hF}R z1`0d!)7<$n&)jkC;p6l3chaWg=UweFr}o9F_N(gXXq8+@>5T=^Xd#k~TtXIqa^YUu zboAIU(Q?i`cHSAwI*E%WZqZQt-zwHyoPYDC?O5*sD_{rUi7A7iLtJ$dx?zdOE|uVv zkc%Z#6)ak&@#GUgpqw%}FZSx!mSU^4v$d#SWwal)cyv9RM7N+clcW)&F*tP-#K@4q}7P|q(%NK@h&LdoW!e^ z;T@OXoTUF-{GvT((;lp=#@_?Jopu;h9c=q{)HBYbhooOfv*PvK z!o_C}Em-A*8Q2oQ7sH~b@*d$aiN0Lw9+uvc7l+=c6} zAKS8J^}w#RYj+JucW)UJv{uNJN*V2K?Zr|?m-7JMD@_=3l~We93vFfpg$rZr~E|Z#8fe@UsnEhTUFh;0pM! zH*hQ4O=<(Tu{7pPNWoEWI zH5u>Ct!{9(R3sfqYz2&;^bPsOKarf#o{)N=c4wdsML9?^;5 z=SHR`@JVYEn_(3;%xXwS5#HX$jv%cfaG1hmjOl3&^(t_=-Iw?`gWksuf;X(Uzr1W^ z&E2Ru!)DP^$ctkUa%}Y#(zbw})azZT$1FbT?86nchTj-kk3rTHn*g@Cp_%Ay9C(~f z>t(k?&IoGf*nYj$G#g+&_$`lQxqeO`;RF_1*sA_#ZRA&G-NZ>E6Um5QR5Fu@L~LY7 z2;)EyUns6`Ky;&{qUQi@usjncS@wo{fms1skQx+%x# zuyuH5W@@f`bZTz0fsR+kYBqyAQ{A_}W;XDH)AkV65~^|l}jZvQ?s-3h+ruPr^ly;NA08CMwdc((=wrpS4X?` z4osskI%TvnUa3{gqf;XXCn}RQQ)RSTvsGcoGZVu#7^*6yRVVkEPNPFF{22WKj#>G6ZJ%4}tLW@NuQTdCF1PM+P55u0ag!!zAeV`Hj; zOqy!diHbTmJTr+ps-Z;Qbf{XHQ;h-SJ(rKVdwP7hI(dmDhHJ3gm#J!Sni@h4in0F( DUVwKw diff --git a/packages/theme-default/src/fonts/element-icons.woff b/packages/theme-default/src/fonts/element-icons.woff deleted file mode 100644 index 7ad74d306f0f6f1c1fe742ce24be0955eff40731..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5256 zcmY+IcQo8V`}V(U_0@YX!4kbh??RMlv0Bt+_1>*cbcyH^T@Zp0L6qpLlSIvm1hGnp zPLxF3-#*Xt{`21Fe9p{uow;Y`%=~rVp+*lL03ZMtbSVJjKjWR&|LOnC|Nqd2nP~t3 zh#2Qe;m~NhZP_=1iAmx-C7iyG!`%Ez=PttA!4K!f;?M#B@GRFOQUX`6Fc$#88v_6e zApl^E?0i%Z?B?v?1OQa0xI76QGL#t-!EQJc0H_6UnhOUn2_6BVn|BZr=jq_IDvs8+ zJJ=~NU&MdbrQo#9e+VIt6!dmL;?AYsz-dk#Tp(p2&Bwvp831VTad*Mx<2hXF{OI-b z4GaPRTK)gs8;@rTPt5}$$xr15}_fdA%T9E$tztPPBb zjY+W7T|)NS7oOtao-Zqf6yz6$L!Pah_6r=geD2QU4ma)~&?)(V&d8HB?ehJ`$3 zy#B4GhlWJv-Zv-tTbg9Mral0}35Tv8Nmiu>b z2C<5gEGHIeipS9jcJBa2Hc$^BSIgL~T{ zOPE-mSg>CxKq+@kE%$^=ea)WNAd`l5{3Js_JH&Lf@^_WF^eeu_tgk6~F|YK!_ovqusaf;#^L4R0OLSmHMDlTy`w4(|)ZjknKoo?5{4~tV@GtT6xuS8pAP6 z%CkDrt6H;0ZSsiv!|a<)X}eYMDiOHux89&IHSNv^hJu8&LLlY$jiN>;GUZkVSy_Gj zGMF}uA=gQU!!6y?I=O}?&-7ahSE9yyrqA>q<-&7Er#N?{-8p`ZdFV3ubi)A-q@2TJ8Cpd(e58kQfR_4BKG%$ z`A#h4uH!eIp9g~EQFqy1z*r63a$^}a)mUb@Na_f&%p7F>liZHxgJ_VaZ-)ZY6JHqW zPe#O2v}JBGjMwc(G}12Vw8@K|YZb~?PR{vS&AT(xHGte&boLoZWu|PLeW*fYbPu0* ziT7faP*+^`N%TBS^J#q^RR4aZu8QU&I@(%h389RbOj<8f3t8Z>4>DVA;|J$Whe11Uw5#xG3Lt)$v>@Kd;29m0}{5t+zh6a^90G=@^c^Vi{>*zmTa6 zgHkA5TLlXBqg{OaGNx6+S@|VOJmieNI;p+{!j?I7$I#VhW@CIly8TfG2_pbK8sY5bGMM(dgqGx${SR^vP)3q851oz4rt1COZj`vSk~>(6d{F9doZhm>0* zb6*zxnp0@zQ(}{I`M_a=;o=fu^&lyy_V?a*Ru+GA5>NUgpGm)MaSDxeEQ-@t&C&iA z)+P7-ms58JTUQcwyr~twn4`I73<_3@skO+4)7re&?})IA47fVyw~t)DdjJ{?pQSyw zp-QNuqK+mK)DhyK^p3fgM88dKM2gbNSPsLR;4mU^l~-u>W)J$J$zJFs1)4ThT|L1o zb6|P-kHNInFW&Q)e9jhr9?wdkiN;xp;ud(gf6a=AyQBx-z5Pe{pIN?LgLc;0qigxH z!px=xk=dB2F4Vo#fn1;^i>-uAxQ}`=le#WeMe9VR} z2r}HV{a1a;r8tH3RsFiZ*7TL8X*B`#QnLXc5A$|#CyCp5^-ZuPGm8aAfb9b_+Ck1k zY9&B#_b8mFE4qCTZ^A$9`9llqY2mnn2A<>ia;Ge&a`jv4UQ%xuq-oqF# zSUTLC=!${cX04+Zw7QmpJ5|AW4fX)L?XCvvW4j0J?na}#l`aP#Z9Y=u(=fgt69Zay zg%;0tN4It7=SJPP7xYs(^cpqG8BaeekXc;GhI0I*sqY`F`?WkHFf>^N$mETeX;-4Z zlGa&AvxmY43$&amimIk3U;p9^+lw7hg4VW-g&=!u|bNo zkPT>GtNSF>(q=7#{FU$i!PiXPgS(zC8S-4zuf5d#d)j>#!$`}mj^d|LXke;+>Y=Z&tB@dNsNg*?l zWR4+pPU@kngD3bj^y+1zR%RD#uK%3F5H<+vJFyo% zVYV07*A|`e$silO!8RaC9-p)+ONfa-$Y^VzEun;N0e;gl20lCwe~OdF>&lVn0NU?{ z26>7h7Mq3lh+JUPg-pjM1wVX~1#Nn+PcTCE!g&*v*w<$}?0#qIFDUzthffAKv-fG0 zg+I(hNf%D^w2HDeZb~Ty=IT}6N?hMd8)i+@LP)~KSFtRuRh?_5)Yyj5)*!2vXcmLl z6~YVKYlz}?r@Xo1{(=0tY0+(Vw|6wF*+Sshw{<6w!!Db{zF4~XR>FNB{P)Rj?)1ef zRbIl?QVVF30QW}J=L+m%@8~L((W~c-`gW6+%6Rly3zG1u2m~ug=6R1rDd=TwqfeH4 zjfvgx!G~2*-b0IGj_wlP_HdmoaB z9u)tc+oouP31NxXI!zpA>gj2kFDGGHL1sKey*@aBhg@e-^vH0vTd-33a zk(bTnni9X#qWXA`;f=8~1H8=&E^Xxj63J$7_@detLM1%Tl#hPFjYmbet4+nr^x!;4j{9yit(^e_;B2YL{pcfT zHEEW(lE?FeG~{IOtv_cTp@s{@c)#^iV>%GyEK*IHNVk`)0ZH6>Wlg1P(xI_PNUi@$Jj}!6I<|mPhV`xiIZ0vKU(f8$BHz-8uiQDwZ`;o~<@|^R zA!T#z-85e;=!wr1e0#$%qS$NhHyjFn@bW^VUQ{-=#B5{=JBbOl^wiV$5Zn;t%1N-M^zl+G^#dLRu_7Z;OoCE|Q*sfLDt&f}p zQ_IZq`GSRzsbFQ)G3`CY0mFyXc%lwW~X`ke&7J6WemN*6`&kF4MH&(xt5HTnA zy$F`2|HEpP8e5!$l2<))EUR*xNtx$AS)I~~l$VF=r*CQQpf^tqe(xF_-JN-}76?sv zZ6ofc?>%+_wLHuQhc5ZY%C%njT#JqnKkJugU83HuDNjlo`{#~UzY#?B<_pbSYEuJ> z`t1yl-ivlvw_3frI(t%0&(iQfohR0C19qm#C9gu4PLa+JCb2ymP#S@zPZSQ)j0UTdT`tWy1`@g+_m=-vI1BGS*g$eK2tAwf6412m zEx-7X`D0y6rAJ_`7VdMAvl-v`8OaIl?0WpA%3;iHHA~j=a-`nuN3i9`TJxPYsaN&H zc}eaO#AxXt5}CFNhj_lxFxLP`vF75r7@YR;?59$OAe-|{m9@Im|4SNy$w@RJWG!@Q4}{pWkB=OH;o<#8Y%n~FQi+6i+Y**9(bi)8Cj zU!tKmOX)>UUEfVrQ*Z5bFY(iCCbhkVb2^x06KaxYNaLB3B%j$d|8eox(CEO28Oppd zJw6^^Z*g~Cb?qDow6JLunv$oZvlZJuN~X5WXf08{TiSm6IofxYc4373Ly}sCjWf7! zp!)RGDv!1yI(U-#yjq*D*+CJUx9@d|kbm^-wMK!ZEWgzi+U{~eU%p7hHTJ1A~t$Ur>+GDLBR?4i0h5LS4?gSIxf(uuYsy ze|$Ej?t<2JYlF`|FlcSW%g}M8&X}>Ld%eZyZ<*_L(*3!qDfJ(NtjUCk z&BpSEjP8=0^6bBrvC{`K2iI@f8?iZd7tc!>`H(+6q_U=6YKFTupe#EFscQH*J7G2i`$I6{;#n^of1B2&LP2y=XW3HYa2ds932k-Y6u_j zqLM13`CDH7v5;lb!(bKG6U#t12Ig1eoW*GJa%2S6Z)=kZ+pN%9$$2P8v@S<8xn$T; zP(Z2ewM?MNuT#r|er#~I=bJFuzqUkLKe@x|%06pX+ z5&f2`Itgu3U(Sv1lqRmWYtUkR2`r6RW5g>d$+q_jM)Y=tzd)zdHw<^V(Me)IYsrQX zC&M}$6>Lu_<>Wc{GdWuhpH$pL+h2W7z4hHHGMRNPIsVsnl|5^HRGpjqD^le|XzT^N zYwnWL>0zMUmsIVkY0jB=VNN=dtI~vk2+r0*$54W+NoMP~+m>LC2jIA25v#ZARUkkC;?Os8p9*SGr_CETLLqIJ;1%- z1AHicIsSM2zXbOP+z4g~sR#uLy$Gj?03tb}Jz`7Z6A~GcCnWu(=A<1EQpi0>2&53w z`~P|y)6Q=Ya0CE?a{a>7AWXu-Rloo<1~i6y58Etd!$CEw#Iip^Y^iwo^uu~Obn5=m z6Dgu5vo$)}7`ff+v2&|kgR0!(WLiHwL$!xFu<7G9GGa&1(Vr2DQi>;d9VmXK;!@T| z+6Xt3k`9et+Q#g|M9+;jKX#GRMAp-?geWCP-X)Z@WXO>Rqp5c{aYV;ZyC}PZ@=Pfr-w@Z~G%_L|MA>v&0N6+-&Q3 zq=9?P3n}owQfrb5zubAZuPj|)OowBy*P zn5Tn_wfrBOS5>{&582Djq(2Gpz0Y642{$v}WU82yRhgumXqod>_i!&j7JC~lnhc6l zJ=HU*@g{9ux`;w>TxvrXWjNRr5sJA}HA4gwWLLc7o(*)t72-GBSj;w@T!JQOAhRM_ zg>X!KNI|A4m3rhGN+zV~sq)@BkSvFiF!W24DqhEX(Sefo@q4Pcv<}KZqNL>P?nIs@ zesK8$ky?28#%+fPWF;>Y#o`BZ?QGikSAV=>dZYGz6Zo-d*S|8aYiDwszd8FW?XP{s zvr10K^gvyq;36yLM@|G-1IcS>gR&4Zf=e`^#z#F(>2>0GQCe$8ZDusr+59&>r2D(`d4(fxyH`1$1+#Cc?F?!$31f4G!@X{Vqy0G0b3fi A;{X5v diff --git a/packages/theme-default/src/footer.css b/packages/theme-default/src/footer.css deleted file mode 100644 index 1c3001d2..00000000 --- a/packages/theme-default/src/footer.css +++ /dev/null @@ -1,9 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b footer { - padding: var(--footer-padding); - box-sizing: border-box; - } -} diff --git a/packages/theme-default/src/form-item.css b/packages/theme-default/src/form-item.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/form.css b/packages/theme-default/src/form.css deleted file mode 100644 index 285d51a3..00000000 --- a/packages/theme-default/src/form.css +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/packages/theme-default/src/header.css b/packages/theme-default/src/header.css deleted file mode 100644 index 22a1645c..00000000 --- a/packages/theme-default/src/header.css +++ /dev/null @@ -1,9 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b header { - padding: var(--header-padding); - box-sizing: border-box; - } -} diff --git a/packages/theme-default/src/icon.css b/packages/theme-default/src/icon.css deleted file mode 100644 index 8c1df1d3..00000000 --- a/packages/theme-default/src/icon.css +++ /dev/null @@ -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); - } -} diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css deleted file mode 100644 index f423a3bd..00000000 --- a/packages/theme-default/src/index.css +++ /dev/null @@ -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"; diff --git a/packages/theme-default/src/input-number.css b/packages/theme-default/src/input-number.css deleted file mode 100644 index d8ef67ea..00000000 --- a/packages/theme-default/src/input-number.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/input.css b/packages/theme-default/src/input.css deleted file mode 100644 index 53a6f804..00000000 --- a/packages/theme-default/src/input.css +++ /dev/null @@ -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); - } - } - } - } -} diff --git a/packages/theme-default/src/loading.css b/packages/theme-default/src/loading.css deleted file mode 100644 index d7b3900e..00000000 --- a/packages/theme-default/src/loading.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/main.css b/packages/theme-default/src/main.css deleted file mode 100644 index 22e8bdd0..00000000 --- a/packages/theme-default/src/main.css +++ /dev/null @@ -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); - } -} diff --git a/packages/theme-default/src/menu-item-group.css b/packages/theme-default/src/menu-item-group.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/menu-item.css b/packages/theme-default/src/menu-item.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/menu.css b/packages/theme-default/src/menu.css deleted file mode 100644 index 7e784676..00000000 --- a/packages/theme-default/src/menu.css +++ /dev/null @@ -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; -} diff --git a/packages/theme-default/src/message-box.css b/packages/theme-default/src/message-box.css deleted file mode 100644 index 7364f88c..00000000 --- a/packages/theme-default/src/message-box.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/message.css b/packages/theme-default/src/message.css deleted file mode 100644 index 3e738bec..00000000 --- a/packages/theme-default/src/message.css +++ /dev/null @@ -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%); - } -} diff --git a/packages/theme-default/src/mixins/_button.css b/packages/theme-default/src/mixins/_button.css deleted file mode 100644 index 8f065fe0..00000000 --- a/packages/theme-default/src/mixins/_button.css +++ /dev/null @@ -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; -} diff --git a/packages/theme-default/src/notification.css b/packages/theme-default/src/notification.css deleted file mode 100644 index 742cfbd2..00000000 --- a/packages/theme-default/src/notification.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/option-group.css b/packages/theme-default/src/option-group.css deleted file mode 100644 index 9682c160..00000000 --- a/packages/theme-default/src/option-group.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/option.css b/packages/theme-default/src/option.css deleted file mode 100644 index 200bde84..00000000 --- a/packages/theme-default/src/option.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/pagination.css b/packages/theme-default/src/pagination.css deleted file mode 100644 index 5cbf127c..00000000 --- a/packages/theme-default/src/pagination.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/popover.css b/packages/theme-default/src/popover.css deleted file mode 100644 index ff0b9943..00000000 --- a/packages/theme-default/src/popover.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/progress.css b/packages/theme-default/src/progress.css deleted file mode 100644 index 65fb2916..00000000 --- a/packages/theme-default/src/progress.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/radio-button.css b/packages/theme-default/src/radio-button.css deleted file mode 100644 index f62becd1..00000000 --- a/packages/theme-default/src/radio-button.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/packages/theme-default/src/radio-group.css b/packages/theme-default/src/radio-group.css deleted file mode 100644 index c322deca..00000000 --- a/packages/theme-default/src/radio-group.css +++ /dev/null @@ -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); - } - - } -} diff --git a/packages/theme-default/src/radio.css b/packages/theme-default/src/radio.css deleted file mode 100644 index 50e24e2b..00000000 --- a/packages/theme-default/src/radio.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/rate.css b/packages/theme-default/src/rate.css deleted file mode 100644 index c6cc34d5..00000000 --- a/packages/theme-default/src/rate.css +++ /dev/null @@ -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; - } - } -} diff --git a/packages/theme-default/src/reset.css b/packages/theme-default/src/reset.css deleted file mode 100644 index 546b36b3..00000000 --- a/packages/theme-default/src/reset.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/packages/theme-default/src/row.css b/packages/theme-default/src/row.css deleted file mode 100644 index 062ab111..00000000 --- a/packages/theme-default/src/row.css +++ /dev/null @@ -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; - } - } - - } -} diff --git a/packages/theme-default/src/scrollbar.css b/packages/theme-default/src/scrollbar.css deleted file mode 100644 index e4e3a3ca..00000000 --- a/packages/theme-default/src/scrollbar.css +++ /dev/null @@ -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%; - } - } - } - } -} diff --git a/packages/theme-default/src/select-dropdown.css b/packages/theme-default/src/select-dropdown.css deleted file mode 100644 index f9cbd26b..00000000 --- a/packages/theme-default/src/select-dropdown.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/select.css b/packages/theme-default/src/select.css deleted file mode 100644 index 6e7e826c..00000000 --- a/packages/theme-default/src/select.css +++ /dev/null @@ -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); - } - } - } -} diff --git a/packages/theme-default/src/slider.css b/packages/theme-default/src/slider.css deleted file mode 100644 index 6d5c5eab..00000000 --- a/packages/theme-default/src/slider.css +++ /dev/null @@ -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); - } - } - } - } - } - } -} diff --git a/packages/theme-default/src/spinner.css b/packages/theme-default/src/spinner.css deleted file mode 100644 index c8985efe..00000000 --- a/packages/theme-default/src/spinner.css +++ /dev/null @@ -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; - } -} diff --git a/packages/theme-default/src/step.css b/packages/theme-default/src/step.css deleted file mode 100644 index dc1d4331..00000000 --- a/packages/theme-default/src/step.css +++ /dev/null @@ -1,210 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b step { - position: relative; - vertical-align: top; - - &:last-child .el-step__main { - padding-right: 0; - } - - @when horizontal { - display: inline-block; - } - - @when vertical { - & .el-step__head, - & .el-step__main { - display: inline-block; - } - - & .el-step__main { - padding-left: 10px; - } - } - - @e line { - display: inline-block; - position: absolute; - border-color: inherit; - background-color: var(--color-extra-light-silver); - - @when icon { - @when horizontal { - right: 4px; - } - } - - @when horizontal { - top: 15px; - height: 2px; - left: 32px; - right: 0; - } - - @when vertical { - width: 2px; - box-sizing: border-box; - top: 32px; - bottom: 0; - left: 15px; - } - } - - @e line-inner { - display: block; - border-width: 1px; - border-style: solid; - border-color: inherit; - transition: all 150ms; - box-sizing: border-box; - width: 0; - height: 0; - } - - @e icon { - display: block; - line-height: 28px; - - > * { - line-height: inherit; - vertical-align: middle; - } - } - - @e head { - circle: 28px transparent; - text-align: center; - line-height: 28px; - font-size: 28px; - vertical-align: top; - transition: all 150ms; - - @when text { - font-size: 14px; - border-width: 2px; - border-style: solid; - - @when process { - color: var(--color-white); - background-color: var(--color-extra-light-silver); - border-color: var(--color-extra-light-silver); - } - - @when wait { - color: var(--color-extra-light-silver); - background-color: var(--color-white); - border-color: var(--color-extra-light-silver); - } - - @when success { - color: var(--color-white); - background-color: var(--color-success); - border-color: var(--color-success); - } - - @when error { - color: var(--color-white); - background-color: var(--color-danger); - border-color: var(--color-danger); - } - - @when finish { - color: var(--color-white); - background-color: var(--color-primary); - border-color: var(--color-primary); - } - } - - @when process { - color: var(--color-extra-light-silver); - border-color: var(--color-extra-light-silver); - } - - @when wait { - color: var(--color-extra-light-silver); - border-color: var(--color-extra-light-silver); - } - - @when success { - color: var(--color-success); - border-color: var(--color-success); - } - - @when error { - color: var(--color-danger); - border-color: var(--color-danger); - } - - @when finish { - color: var(--color-primary); - border-color: var(--color-primary); - } - } - - @e main { - white-space: normal; - padding-right: 10px; - text-align: left; - } - - @e title { - font-size: 14px; - line-height: 32px; - display: inline-block; - - @when process { - font-weight: 700; - color: var(--color-extra-light-black); - } - - @when wait { - font-weight: normal; - color: var(--color-light-silver); - } - - @when success { - font-weight: 700; - color: var(--color-success); - } - - @when error { - font-weight: 700; - color: var(--color-danger); - } - - @when finish { - font-weight: 700; - color: var(--color-primary); - } - } - - @e description { - font-size: 12px; - font-weight: normal; - line-height: 14px; - - @when process { - color: var(--color-base-silver); - } - - @when wait { - color: var(--color-extra-light-silver); - } - - @when success { - color: var(--color-success); - } - - @when error { - color: var(--color-danger); - } - - @when finish { - color: var(--color-primary); - } - } - } -} diff --git a/packages/theme-default/src/steps.css b/packages/theme-default/src/steps.css deleted file mode 100644 index 5d302373..00000000 --- a/packages/theme-default/src/steps.css +++ /dev/null @@ -1,20 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b steps { - font-size: 0; - - > :last-child .el-step__line { - display: none; - } - - @when horizontal { - white-space: nowrap; - - @when center { - text-align: center; - } - } - } -} diff --git a/packages/theme-default/src/submenu.css b/packages/theme-default/src/submenu.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css deleted file mode 100644 index 19cd9710..00000000 --- a/packages/theme-default/src/switch.css +++ /dev/null @@ -1,117 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b switch { - display: inline-block; - position: relative; - font-size: var(--switch-font-size); - line-height: var(--switch-height); - height: var(--switch-height); - vertical-align: middle; - @when disabled { - & .el-switch__core, - & .el-switch__label { - cursor: not-allowed; - } - } - - @e label { - transition: .2s; - position: absolute; - size: var(--switch-width) var(--switch-height); - left: 0; - top: 0; - display: inline-block; - font-size: var(--switch-font-size); - cursor: pointer; - @m left { - i { - left: 6px; - } - } - @m right { - i { - right: 6px; - } - } - & * { - line-height: 1; - top: 4px; - position: absolute; - font-size: var(--switch-font-size); - display: inline-block; - color: var(--color-white); - } - } - - @e input { - display: none; - } - - @e core { - margin: 0; - display: inline-block; - position: relative; - size: var(--switch-width) var(--switch-height); - border: 1px solid var(--switch-off-color); - outline: none; - border-radius: var(--switch-core-border-radius); - box-sizing: border-box; - background: var(--switch-off-color); - cursor: pointer; - transition: border-color .3s, background-color .3s; - - & .el-switch__button { - position: absolute 0 * * 0; - border-radius: var(--border-radius-circle); - transition: transform .3s; - size: var(--switch-button-size); - background-color: var(--color-white); - } - } - - @when checked { - .el-switch__core { - border-color: var(--switch-on-color); - background-color: var(--switch-on-color); - } - } - - @when disabled { - .el-switch__core { - border-color: var(--switch-disabled-color) !important; - background: var(--switch-disabled-color) !important; - - & span { - background-color: var(--switch-disabled-text-color) !important; - } - - & ~ .el-switch__label * { - color: var(--switch-disabled-text-color) !important; - } - } - } - - @modifier wide { - .el-switch__label { - &.el-switch__label--left { - span { - left: 10px; - } - } - &.el-switch__label--right { - span { - right: 10px; - } - } - } - } - - & .label-fade-enter, - & .label-fade-leave-active { - opacity: 0; - } - } -} diff --git a/packages/theme-default/src/tab-pane.css b/packages/theme-default/src/tab-pane.css deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/theme-default/src/table-column.css b/packages/theme-default/src/table-column.css deleted file mode 100644 index 7e4a38c9..00000000 --- a/packages/theme-default/src/table-column.css +++ /dev/null @@ -1,92 +0,0 @@ -@charset "UTF-8"; -@import "./checkbox.css"; -@import "./tag.css"; -@import "./common/var.css"; - -@component-namespace el { - @b table-column { - @m selection .cell { - padding-left: 14px; - padding-right: 14px; - } - } - - @b table-filter { - border: solid 1px var(--color-base-gray); - border-radius: 2px; - background-color: var(--color-white); - box-shadow: var(--dropdown-menu-box-shadow); - box-sizing: border-box; - margin: 2px 0; - - /** used for dropdown mode */ - @e list { - padding: 5px 0; - margin: 0; - list-style: none; - min-width: 100px; - } - - @e list-item { - line-height: 36px; - padding: 0 10px; - cursor: pointer; - font-size: var(--font-size-base); - - &:hover { - background-color: var(--dropdown-menuItem-hover-fill); - color: var(--dropdown-menuItem-hover-color); - } - - @when active { - background-color: var(--color-primary); - color: var(--color-white); - } - } - - @e content { - min-width: 100px; - } - - @e bottom { - border-top: 1px solid var(--color-base-gray); - padding: 8px; - - button { - background: transparent; - border: none; - color: var(--color-base-silver); - cursor: pointer; - font-size: var(--font-size-base); - padding: 0 3px; - - &:hover { - color: var(--color-primary); - } - - &:focus { - outline: none; - } - - &.is-disabled { - color: var(--color-extra-light-silver); - cursor: not-allowed; - } - } - } - - @e checkbox-group { - padding: 10px; - - label.el-checkbox { - display: block; - margin-bottom: 8px; - margin-left: 5px; - } - - .el-checkbox:last-child { - margin-bottom: 0; - } - } - } -} \ No newline at end of file diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css deleted file mode 100644 index 863bcc38..00000000 --- a/packages/theme-default/src/table.css +++ /dev/null @@ -1,474 +0,0 @@ -@charset "UTF-8"; -@import "./checkbox.css"; -@import "./tag.css"; -@import "./common/var.css"; - -@component-namespace el { - - @b table { - position: relative; - overflow: hidden; - box-sizing: border-box; - width: 100%; - max-width: 100%; - background-color: var(--color-white); - border: 1px solid var(--table-border-color); - font-size: 14px; - color: var(--table-text-color); - - &::before { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 1px; - background-color: var(--table-border-color); - z-index: 1; - } - - &::after { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 1px; - height: 100%; - background-color: var(--table-border-color); - z-index: 1; - } - - .el-tooltip.cell { - white-space: nowrap; - min-width: 50px; - } - - @e empty-block { - position: relative; - min-height: 60px; - text-align: center; - width: 100%; - height: 100%; - } - - @e empty-text { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - color: color(var(--color-primary) s(16%) l(44%)); - } - - @e expand-column { - .cell { - padding: 0; - text-align: center; - } - } - - @e expand-icon { - position: relative; - cursor: pointer; - color: #666; - font-size: 12px; - transition: transform 0.2s ease-in-out; - height: 40px; - - @m expanded { - transform: rotate(90deg); - } - - > .el-icon { - position: absolute; - left: 50%; - top: 50%; - margin-left: -5px; - margin-top: -5px; - } - } - - @e expanded-cell { - padding: 20px 50px; - background-color: var(--color-dark-white); - box-shadow: inset 0 2px 0 #f4f4f4; - - &:hover { - background-color: var(--color-dark-white) !important; - } - } - - @modifier fit { - border-right: 0; - border-bottom: 0; - - & th.gutter, td.gutter { - border-right-width: 1px; - } - } - - & th { - white-space: nowrap; - overflow: hidden; - } - - & th, td { - height: 40px; - min-width: 0; - box-sizing: border-box; - text-overflow: ellipsis; - vertical-align: middle; - position: relative; - - @when center { - text-align: center; - } - - @when left { - text-align: left; - } - - @when right { - text-align: right; - } - } - - & th.is-leaf, td { - border-bottom: 1px solid var(--table-border-color); - } - - & th.is-sortable { - cursor: pointer; - } - - @modifier border { - & th, td { - border-right: 1px solid var(--table-border-color); - } - - & th { - border-bottom: 1px solid var(--table-border-color); - } - } - - @modifier hidden { - visibility: hidden; - } - - & th { - background-color: var(--table-header-background); - text-align: left; - } - - & th > div { - display: inline-block; - padding-left: 18px; - padding-right: 18px; - line-height: 40px; - box-sizing: border-box; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - & td > div { - box-sizing: border-box; - } - - @e fixed, fixed-right { - position: absolute; - top: 0; - left: 0; - box-shadow: 1px 0 8px #d3d4d6; - overflow-x: hidden; - - &::before { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 1px; - background-color: var(--table-border-color); - z-index: 4; - } - } - - @e fixed-right-patch { - position: absolute; - top: -1px; - right: 0; - background-color: var(--table-header-background); - border-bottom: 1px solid var(--table-border-color); - } - - @e fixed-right { - top: 0; - left: auto; - right: 0; - - box-shadow: -1px 0 8px #d3d4d6; - - .el-table__fixed-header-wrapper, - .el-table__fixed-body-wrapper, - .el-table__fixed-footer-wrapper { - left: auto; - right: 0; - } - } - - @e fixed-header-wrapper { - position: absolute; - left: 0; - top: 0; - z-index: 3; - - & thead div { - background-color: var(--table-header-background); - color: var(--table-text-color); - } - } - - @e fixed-footer-wrapper { - position: absolute; - left: 0; - bottom: 0; - z-index: 3; - - & tbody td { - border-top: 1px solid var(--table-border-color); - background-color: var(--table-footer-background); - color: var(--table-text-color); - } - } - - @e fixed-body-wrapper { - position: absolute; - left: 0; - top: 37px; - overflow: hidden; - z-index: 3; - } - - @e header-wrapper, body-wrapper, footer-wrapper { - width: 100%; - } - - @e footer-wrapper { - margin-top: -1px; - td { - border-top: 1px solid var(--table-border-color); - } - } - - @e header, body, footer { - table-layout: fixed; - } - - @e header-wrapper, footer-wrapper { - overflow: hidden; - - & thead div { - background-color: var(--table-header-background); - color: var(--table-text-color); - } - - & tbody td { - background-color: var(--table-footer-background); - color: var(--table-text-color); - } - } - - @e body-wrapper { - overflow: auto; - position: relative; - } - - & th.required > div::before { - display: inline-block; - content: ""; - width: 8px; - height: 8px; - border-radius: 50%; - background: #ff4d51; - margin-right: 5px; - vertical-align: middle; - } - - & th > .cell { - position: relative; - word-wrap: normal; - text-overflow: ellipsis; - display: inline-block; - line-height: 30px; - vertical-align: middle; - width: 100%; - box-sizing: border-box; - - &.highlight { - color: var(--color-primary); - } - } - - & .caret-wrapper { - position: relative; - cursor: pointer; - display: inline-block; - vertical-align: middle; - margin-left: 5px; - margin-top: -2px; - width: 16px; - height: 30px; - overflow: initial; - } - - & .sort-caret { - display: inline-block; - width: 0; - height: 0; - border: 0; - content: ""; - position: absolute; - left: 3px; - z-index: 2; - - &.ascending { - top: 9px; - border-top: none; - border-right: 5px solid transparent; - border-bottom: 5px solid var(--color-light-silver); - border-left: 5px solid transparent; - } - - &.descending { - bottom: 9px; - border-top: 5px solid var(--color-light-silver); - border-right: 5px solid transparent; - border-bottom: none; - border-left: 5px solid transparent; - } - } - - & .ascending .sort-caret.ascending { - border-bottom-color: var(--color-extra-light-black); - } - - & .descending .sort-caret.descending { - border-top-color: var(--color-extra-light-black); - } - - & th.gutter, td.gutter { - width: 15px; - border-right-width: 0; - border-bottom-width: 0; - padding: 0; - } - - & td.gutter { - width: 0; - } - - & td.is-hidden, th.is-hidden { - > * { - visibility: hidden; - } - } - - & .cell { - box-sizing: border-box; - overflow: hidden; - text-overflow: ellipsis; - white-space: normal; - word-break: break-all; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; - } - - & tr input[type="checkbox"] { - margin: 0; - } - - & tr { - background-color: var(--color-white); - } - - @modifier striped { - & .el-table__body { - & tr.el-table__row--striped { - td { - background: #FAFAFA; - background-clip: padding-box; - } - - &.current-row td { - background: color(var(--color-primary) tint(92%)); - } - } - } - } - - @e body { - tr.hover-row { - &, &.el-table__row--striped { - &, &.current-row { - > td { - background-color: var(--color-extra-light-gray); - } - } - } - } - - tr.current-row > td { - background: color(var(--color-primary) tint(92%)); - } - } - - @e column-resize-proxy { - position: absolute; - left: 200px; - top: 0; - bottom: 0; - width: 0; - border-left: 1px solid var(--table-border-color); - z-index: 10; - } - - & .hidden-columns { - visibility: hidden; - position: absolute; - z-index: -1; - } - - @e column-filter-trigger { - display: inline-block; - line-height: 34px; - margin-left: 5px; - cursor: pointer; - - & i { - color: var(--color-light-silver); - } - } - - @modifier enable-row-transition { - .el-table__body td { - transition: background-color .25s ease; - } - } - - @modifier enable-row-hover { - .el-table__body tr:hover > td { - background-color: var(--color-extra-light-gray); - background-clip: padding-box; - } - } - - @modifier fluid-height { - .el-table__fixed, - .el-table__fixed-right { - bottom: 0; - overflow: hidden; - } - } - } -} diff --git a/packages/theme-default/src/tabs.css b/packages/theme-default/src/tabs.css deleted file mode 100644 index 8787cb97..00000000 --- a/packages/theme-default/src/tabs.css +++ /dev/null @@ -1,435 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b tabs { - @e header { - border-bottom: 1px solid var(--color-base-gray); - padding: 0; - position: relative; - margin: 0 0 15px; - } - @e active-bar { - position: absolute; - bottom: 0; - left: 0; - height: 3px; - background-color: var(--color-primary); - z-index: 1; - transition: transform .3s cubic-bezier(.645,.045,.355,1); - list-style: none; - } - @e new-tab { - float: right; - border: 1px solid #d3dce6; - height: 18px; - width: @height; - line-height: @height; - margin: 12px 0 9px 10px; - border-radius: 3px; - text-align: center; - font-size: 12px; - color: #d3dce6; - cursor: pointer; - transition: all .15s; - - .el-icon-plus { - transform: scale(0.8, 0.8); - } - - &:hover { - color: var(--color-primary); - } - } - @e nav-wrap { - overflow: hidden; - margin-bottom: -1px; - position: relative; - - @when scrollable { - padding: 0 15px; - box-sizing: border-box; - } - } - @e nav-scroll { - overflow: hidden; - } - @e nav-next, nav-prev { - position: absolute; - cursor: pointer; - line-height: 44px; - font-size: 12px; - color: var(--color-base-silver); - } - @e nav-next { - right: 0; - } - @e nav-prev { - left: 0; - } - @e nav { - white-space: nowrap; - position: relative; - transition: transform .3s; - float: left; - } - @e item { - padding: 0 16px; - height: 42px; - box-sizing: border-box; - line-height: 40px; - display: inline-block; - list-style: none; - font-size: 14px; - color: var(--color-base-silver); - position: relative; - - & .el-icon-close { - border-radius: 50%; - text-align: center; - transition: all .3s cubic-bezier(.645,.045,.355,1); - margin-left: 5px; - &:before { - transform: scale(.7, .7); - display: inline-block; - } - - &:hover { - background-color: var(--color-light-silver); - color: var(--color-white); - } - } - - @when active { - color: var(--color-primary); - } - - &:hover { - color: var(--color-base-black); - cursor: pointer; - } - - @when disabled { - color: var(--disabled-color-base); - cursor: default; - } - } - @e content { - overflow: hidden; - position: relative; - } - @m card { - > .el-tabs__header .el-tabs__active-bar { - display: none; - } - > .el-tabs__header .el-tabs__item .el-icon-close { - position: relative; - font-size: 12px; - width: 0; - height: 14px; - vertical-align: middle; - line-height: 15px; - overflow: hidden; - top: -1px; - right: -2px; - transform-origin: 100% 50%; - } - > .el-tabs__header .el-tabs__item { - border: 1px solid transparent; - transition: all .3s cubic-bezier(.645,.045,.355,1); - - &.is-closable { - &:hover { - padding: * 9px; - - & .el-icon-close { - width: 14px; - } - } - } - &.is-active { - border: 1px solid var(--color-base-gray); - border-bottom-color: var(--color-white); - border-radius: 4px 4px 0 0; - - &.is-closable { - padding: * 16px; - - .el-icon-close { - width: 14px; - } - } - } - } - } - @m border-card { - background: var(--color-white); - border: 1px solid var(--color-base-gray); - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04); - - >.el-tabs__content { - padding: 15px; - } - >.el-tabs__header { - background-color: var(--color-extra-light-gray); - margin: 0; - } - >.el-tabs__header .el-tabs__item { - transition: all .3s cubic-bezier(.645,.045,.355,1); - border: 1px solid transparent; - margin: -1px -1px 0; - - &.is-active { - background-color: var(--color-white); - border-right-color: var(--color-base-gray); - border-left-color: var(--color-base-gray); - } - } - } - @m bottom { - .el-tabs__header { - margin-bottom: 0; - margin-top: 10px; - } - &.el-tabs--border-card { - .el-tabs__header { - border-bottom: 0; - border-top: 1px solid var(--color-base-gray); - } - .el-tabs__nav-wrap { - margin-top: -1px; - margin-bottom: 0; - } - .el-tabs__item { - border: 1px solid transparent; - margin: 0 -1px -1px -1px; - } - } - } - @m left, right { - overflow: hidden; - - .el-tabs__header, - .el-tabs__nav-wrap, - .el-tabs__nav-scroll { - height: 100%; - } - - .el-tabs__active-bar { - top: 0; - bottom: auto; - width: 3px; - height: auto; - } - - .el-tabs__nav-wrap { - margin-bottom: 0; - - &.is-scrollable { - padding: 30px 0; - } - } - - .el-tabs__nav { - float: none; - } - .el-tabs__item { - display: block; - } - - .el-tabs__nav-prev, - .el-tabs__nav-next { - height: 30px; - line-height: 30px; - width: 100%; - text-align: center; - cursor: pointer; - - i { - transform: rotateZ(90deg); - } - } - .el-tabs__nav-prev { - left: auto; - top: 0; - } - .el-tabs__nav-next { - right: auto; - bottom: 0; - } - } - @m left { - .el-tabs__header { - float: left; - border-bottom: none; - border-right: 1px solid var(--color-base-gray); - margin-bottom: 0; - margin-right: 10px; - } - .el-tabs__nav-wrap { - margin-right: -1px; - } - .el-tabs__active-bar { - right: 0; - left: auto; - } - .el-tabs__item { - text-align: right; - } - - &.el-tabs--card { - .el-tabs__item.is-active { - border: 1px solid rgb(209, 219, 229); - border-right-color: #fff; - border-radius: 4px 0 0 4px; - } - - .el-tabs__new-tab { - float: none; - } - } - - &.el-tabs--border-card { - .el-tabs__item { - border: 1px solid transparent; - margin: -1px 0 -1px -1px; - - &.is-active { - border-color: transparent; - border-top-color: rgb(209, 219, 229); - border-bottom-color: rgb(209, 219, 229); - } - } - } - } - @m right { - .el-tabs__header { - float: right; - border-bottom: none; - border-left: 1px solid var(--color-base-gray); - margin-bottom: 0; - margin-left: 10px; - } - - .el-tabs__nav-wrap { - margin-left: -1px; - } - - .el-tabs__active-bar { - left: 0; - } - - &.el-tabs--card { - .el-tabs__item.is-active { - border: 1px solid rgb(209, 219, 229); - border-left-color: #fff; - border-radius: 0 4px 4px 0; - } - } - &.el-tabs--border-card { - .el-tabs__item { - border: 1px solid transparent; - margin: -1px -1px -1px 0; - - &.is-active { - border-color: transparent; - border-top-color: rgb(209, 219, 229); - border-bottom-color: rgb(209, 219, 229); - } - } - } - } - } -} - -.slideInRight-transition, -.slideInLeft-transition { - display: inline-block; -} -.slideInRight-enter { - animation: slideInRight-enter .3s; -} -.slideInRight-leave { - position: absolute; - left: 0; - right: 0; - animation: slideInRight-leave .3s; -} -.slideInLeft-enter { - animation: slideInLeft-enter .3s; -} -.slideInLeft-leave { - position: absolute; - left: 0; - right: 0; - animation: slideInLeft-leave .3s; -} - -@keyframes slideInRight-enter { - 0% { - opacity: 0; - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(100%); - transform: translateX(100%) - } - - to { - opacity: 1; - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(0); - transform: translateX(0) - } -} -@keyframes slideInRight-leave { - 0% { - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(0); - transform: translateX(0); - opacity: 1 - } - - 100% { - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(100%); - transform: translateX(100%); - opacity: 0 - } -} -@keyframes slideInLeft-enter { - 0% { - opacity: 0; - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(-100%); - transform: translateX(-100%) - } - - to { - opacity: 1; - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(0); - transform: translateX(0) - } -} -@keyframes slideInLeft-leave { - 0% { - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(0); - transform: translateX(0); - opacity: 1 - } - - 100% { - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - opacity: 0 - } -} diff --git a/packages/theme-default/src/tag.css b/packages/theme-default/src/tag.css deleted file mode 100644 index 1c29d104..00000000 --- a/packages/theme-default/src/tag.css +++ /dev/null @@ -1,105 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b tag { - background-color: var(--tag-fill); - display: inline-block; - padding: var(--tag-padding); - height: 24px; - line-height: calc(@height - 2); - font-size: var(--tag-font-size); - color: var(--tag-color); - border-radius: var(--tag-border-radius); - box-sizing: border-box; - border: 1px solid transparent; - white-space: nowrap; - - & .el-icon-close { - border-radius: 50%; - text-align: center; - position: relative; - cursor: pointer; - font-size: 12px; - transform: scale(.75, .75); - height: 18px; - width: 18px; - line-height: 18px; - vertical-align: middle; - top: -1px; - right: -2px; - - &:hover { - background-color: var(--color-white); - color: var(--tag-fill); - } - } - - @m gray { - background-color: var(--tag-gray-fill); - border-color: var(--tag-gray-border); - color: var(--tag-gray-color); - @when hit { - border-color: var(--tag-gray-color); - } - - & .el-tag__close:hover { - background-color: var(--tag-gray-color); - color: var(--color-white); - } - } - @m primary { - background-color: var(--tag-primary-fill); - border-color: var(--tag-primary-border); - color: var(--tag-primary-color); - @when hit { - border-color: var(--tag-primary-color); - } - - & .el-tag__close:hover { - background-color: var(--tag-primary-color); - color: var(--color-white); - } - } - @m success { - background-color: var(--tag-success-fill); - border-color: var(--tag-success-border); - color: var(--tag-success-color); - @when hit { - border-color: var(--tag-success-color); - } - - & .el-tag__close:hover { - background-color: var(--tag-success-color); - color: var(--color-white); - } - } - @m warning { - background-color: var(--tag-warning-fill); - border-color: var(--tag-warning-border); - color: var(--tag-warning-color); - @when hit { - border-color: var(--tag-warning-color); - } - - & .el-tag__close:hover { - background-color: var(--tag-warning-color); - color: var(--color-white); - } - } - @m danger { - background-color: var(--tag-danger-fill); - border-color: var(--tag-danger-border); - color: var(--tag-danger-color); - @when hit { - border-color: var(--tag-danger-color); - } - - & .el-tag__close:hover { - background-color: var(--tag-danger-color); - color: var(--color-white); - } - } - } -} diff --git a/packages/theme-default/src/time-picker.css b/packages/theme-default/src/time-picker.css deleted file mode 100644 index 357bb841..00000000 --- a/packages/theme-default/src/time-picker.css +++ /dev/null @@ -1,5 +0,0 @@ -@import "./date-picker/picker.css"; -@import "./date-picker/time-spinner.css"; -@import "./date-picker/time-picker.css"; -@import "./input.css"; -@import "./scrollbar.css"; diff --git a/packages/theme-default/src/time-select.css b/packages/theme-default/src/time-select.css deleted file mode 100644 index 701b2020..00000000 --- a/packages/theme-default/src/time-select.css +++ /dev/null @@ -1,38 +0,0 @@ -@import "./date-picker/picker.css"; -@import "./date-picker/date-picker.css"; -@import "./common/var.css"; -@import "./scrollbar.css"; - -.time-select { - margin: 5px 0; - min-width: 0; -} - -.time-select .el-picker-panel__content { - max-height: 200px; - margin: 0; -} - -.time-select-item { - padding: 8px 10px; - font-size: 14px; -} - -.time-select-item.selected:not(.disabled) { - background-color: var(--datepicker-active-color); - color: var(--color-white); - - &:hover { - background-color: var(--color-primary); - } -} - -.time-select-item.disabled { - color: var(--datepicker-border-color); - cursor: not-allowed; -} - -.time-select-item:hover { - background-color: var(--datepicker-cell-hover-color); - cursor: pointer; -} diff --git a/packages/theme-default/src/tooltip.css b/packages/theme-default/src/tooltip.css deleted file mode 100644 index de600515..00000000 --- a/packages/theme-default/src/tooltip.css +++ /dev/null @@ -1,138 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b tooltip { - @e popper { - position: absolute; - border-radius: 4px; - padding: var(--tooltip-padding); - z-index: var(--index-popper); - font-size: var(--tooltip-font-size); - line-height: 1.2; - - .popper__arrow, - .popper__arrow::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - .popper__arrow { - border-width: var(--tooltip-arrow-size); - } - - .popper__arrow::after { - content: " "; - border-width: 5px; - } - - &[x-placement^="top"] { - margin-bottom: calc(var(--tooltip-arrow-size) + 6px); - } - - &[x-placement^="top"] .popper__arrow { - bottom: -var(--tooltip-arrow-size); - border-top-color: var(--tooltip-border-color); - border-bottom-width: 0; - - &::after { - bottom: 1px; - margin-left: -5px; - border-top-color: var(--tooltip-fill); - border-bottom-width: 0; - } - } - - &[x-placement^="bottom"] { - margin-top: calc(var(--tooltip-arrow-size) + 6px); - } - - &[x-placement^="bottom"] .popper__arrow { - top: -var(--tooltip-arrow-size); - border-top-width: 0; - border-bottom-color: var(--tooltip-border-color); - - &::after { - top: 1px; - margin-left: -5px; - border-top-width: 0; - border-bottom-color: var(--tooltip-fill); - } - } - - &[x-placement^="right"] { - margin-left: calc(var(--tooltip-arrow-size) + 6px); - } - - &[x-placement^="right"] .popper__arrow { - left: -var(--tooltip-arrow-size); - border-right-color: var(--tooltip-border-color); - border-left-width: 0; - - &::after { - bottom: -5px; - left: 1px; - border-right-color: var(--tooltip-fill); - border-left-width: 0; - } - } - - &[x-placement^="left"] { - margin-right: calc(var(--tooltip-arrow-size) + 6px); - } - - &[x-placement^="left"] .popper__arrow { - right: -var(--tooltip-arrow-size); - border-right-width: 0; - border-left-color: var(--tooltip-border-color); - - &::after { - right: 1px; - bottom: -5px; - margin-left: -5px; - border-right-width: 0; - border-left-color: var(--tooltip-fill); - } - } - - @when dark { - background: var(--tooltip-fill); - color: var(--tooltip-color); - } - - @when light { - background: var(--tooltip-color); - border: 1px solid var(--tooltip-fill); - - &[x-placement^="top"] .popper__arrow { - border-top-color: var(--tooltip-fill); - &::after { - border-top-color: var(--tooltip-color); - } - } - &[x-placement^="bottom"] .popper__arrow { - border-bottom-color: var(--tooltip-fill); - &::after { - border-bottom-color: var(--tooltip-color); - } - } - &[x-placement^="left"] .popper__arrow { - border-left-color: var(--tooltip-fill); - &::after { - border-left-color: var(--tooltip-color); - } - } - &[x-placement^="right"] .popper__arrow { - border-right-color: var(--tooltip-fill); - &::after { - border-right-color: var(--tooltip-color); - } - } - } - } - } -} diff --git a/packages/theme-default/src/transfer.css b/packages/theme-default/src/transfer.css deleted file mode 100644 index 13ea6e68..00000000 --- a/packages/theme-default/src/transfer.css +++ /dev/null @@ -1,168 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; -@import "./input.css"; -@import "./button.css"; -@import "./checkbox.css"; -@import "./checkbox-group.css"; - -@component-namespace el { - @b transfer { - font-size: var(--font-size-base); - - @e buttons { - display: inline-block; - vertical-align: middle; - padding: 0 10px; - - .el-button { - display: block; - margin: 0 auto; - padding: 8px 12px; - - &:first-child { - margin-bottom: 6px; - } - } - - .el-button [class*="el-icon-"] + span { - margin-left: 0; - } - } - } - - @b transfer-panel { - border: 1px solid var(--transfer-border-color); - background: var(--color-white); - box-shadow: var(--transfer-box-shadow); - display: inline-block; - vertical-align: middle; - width: var(--transfer-panel-width); - box-sizing: border-box; - position: relative; - - @e body { - padding-bottom: var(--transfer-panel-footer-height); - height: var(--transfer-panel-body-height); - } - - @e list { - margin: 0; - padding: 6px 0; - list-style: none; - height: var(--transfer-panel-body-height); - overflow: auto; - box-sizing: border-box; - - @when filterable { - height: calc(var(--transfer-panel-body-height) - var(--transfer-filter-height) - 10px); - } - } - - @e item { - height: var(--transfer-item-height); - line-height: var(--transfer-item-height); - padding-left: 20px; - display: block; - - & + .el-transfer-panel__item { - margin-left: 0; - } - - &.el-checkbox { - color: var(--color-extra-light-black); - } - - &:hover { - background: var(--transfer-item-hover-background); - } - - .el-checkbox__label { - width: 100%; - @utils-ellipsis; - display: block; - box-sizing: border-box; - padding-left: 28px; - } - - .el-checkbox__input { - position: absolute; - top: 9px; - } - } - - @e filter { - margin-top: 10px; - text-align: center; - padding: 0 10px; - width: 100%; - box-sizing: border-box; - - .el-input__inner { - height: var(--transfer-filter-height); - width: 100%; - display: inline-block; - box-sizing: border-box; - } - - .el-input__icon { - right: 10px; - } - - .el-icon-circle-close { - cursor: pointer; - } - } - - .el-transfer-panel__header { - height: var(--transfer-panel-header-height); - line-height: var(--transfer-panel-header-height); - background: var(--transfer-panel-header-background); - margin: 0; - padding-left: 20px; - border-bottom: 1px solid var(--transfer-border-color); - box-sizing: border-box; - color: var(--color-base-black); - } - - .el-transfer-panel__footer { - height: var(--transfer-panel-footer-height); - background: var(--color-white); - margin: 0; - padding: 0; - border-top: 1px solid var(--transfer-border-color); - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: var(--index-normal); - @utils-vertical-center; - - .el-checkbox { - padding-left: 20px; - color: var(--color-base-silver); - } - } - - .el-transfer-panel__empty { - margin: 0; - height: var(--transfer-item-height); - line-height: var(--transfer-item-height); - padding: 6px 20px 0; - color: var(--color-base-silver); - } - - .el-checkbox__label { - padding-left: 14px; - } - - .el-checkbox__inner { - size: 14px; - border-radius: 3px; - &::after { - height: 6px; - width: 3px; - left: 4px; - } - } - } -} diff --git a/packages/theme-default/src/tree.css b/packages/theme-default/src/tree.css deleted file mode 100644 index 940cf7ba..00000000 --- a/packages/theme-default/src/tree.css +++ /dev/null @@ -1,103 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b tree { - cursor: default; - background: var(--color-white); - border: 1px solid var(--color-base-gray); - - @e empty-block { - position: relative; - min-height: 60px; - text-align: center; - width: 100%; - height: 100%; - } - - @e empty-text { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - color: color(var(--color-primary) s(16%) l(44%)); - } - } - - @b tree-node { - white-space: nowrap; - - @e content { - line-height: 36px; - height: 36px; - cursor: pointer; - - & > .el-checkbox, - & > .el-tree-node__expand-icon { - margin-right: 8px; - } - & > .el-checkbox { - vertical-align: middle; - } - &:hover { - background: var(--color-light-gray); - } - } - - @e expand-icon { - display: inline-block; - cursor: pointer; - width: 0; - height: 0; - vertical-align: middle; - margin-left: 10px; - border: 6px solid transparent; - border-right-width: 0; - border-left-color: var(--color-light-silver); - border-left-width: 7px; - - transform: rotate(0deg); - transition: transform 0.3s ease-in-out; - - &:hover { - border-left-color: #999; - } - - &.expanded { - transform: rotate(90deg); - } - - &.is-leaf { - border-color: transparent; - cursor: default; - } - } - - @e label { - font-size: var(--font-size-base); - vertical-align: middle; - display: inline-block; - } - - @e loading-icon { - display: inline-block; - vertical-align: middle; - margin-right: 4px; - font-size: var(--font-size-base); - color: var(--color-light-silver); - } - - & > .el-tree-node__children { - overflow: hidden; - background-color: transparent; - } - - &.is-expanded > .el-tree-node__children { - display: block; - } - } -} - -.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { - background-color: color(var(--color-primary) tint(92%)); -} diff --git a/packages/theme-default/src/upload.css b/packages/theme-default/src/upload.css deleted file mode 100644 index 2d1e1472..00000000 --- a/packages/theme-default/src/upload.css +++ /dev/null @@ -1,532 +0,0 @@ -@charset "UTF-8"; -@import "./progress.css"; -@import "./common/var.css"; - -@component-namespace el { - @b upload { - display: inline-block; - text-align: center; - cursor: pointer; - - @e input { - display: none; - } - @e tip { - font-size: 12px; - color: var(--color-base-silver); - margin-top: 7px; - } - & iframe { - position: absolute; - z-index: -1; - top: 0; - left: 0; - opacity: 0; - filter: alpha(opacity=0); - } - /* 照片墙模式 */ - @m picture-card { - background-color: #fbfdff; - border: 1px dashed #c0ccda; - border-radius: 6px; - box-sizing: border-box; - width: 148px; - height: @width; - cursor: pointer; - line-height: calc(@height - 2); - vertical-align: top; - - i { - font-size: 28px; - color: #8c939d; - } - - &:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - } - } - @b upload-dragger { - background-color: #fff; - border: 1px dashed #d9d9d9; - border-radius: 6px; - box-sizing: border-box; - width: 360px; - height: 180px; - text-align: center; - cursor: pointer; - position: relative; - overflow: hidden; - - & .el-icon-upload { - font-size: 67px; - color: var(--color-light-silver); - margin: 40px 0 16px; - line-height: 50px; - } - - & + .el-upload__tip { - text-align: center; - } - & ~ .el-upload__files { - border-top: 1px solid rgba(var(--color-extra-light-silver), .2); - margin-top: 7px; - padding-top: 5px; - } - .el-upload__text { - color: var(--color-light-silver); - font-size: 14px; - text-align: center; - - & em { - color: var(--color-primary); - font-style: normal; - } - } - - &:hover { - border-color: var(--color-primary); - } - - @when dragover { - background-color: rgba(32, 159, 255, .06); - border: 2px dashed var(--color-primary); - } - } - @b upload-list { - margin: 0; - padding: 0; - list-style: none; - - @e item { - transition: all .5s cubic-bezier(.55,0,.1,1); - font-size: 14px; - color: var(--color-extra-light-black); - line-height: 1.8; - margin-top: 5px; - position: relative; - box-sizing: border-box; - border-radius: 4px; - width: 100%; - position: relative; - - & .el-progress { - position: absolute; - top: 20px; - width: 100%; - } - & .el-progress__text { - position: absolute; - right: 0; - top: -13px; - right: 0; - } - .el-progress-bar { - margin-right: 0; - padding-right: 0; - } - &:first-child { - margin-top: 10px; - } - & .el-icon-upload-success { - color: var(--color-success); - } - & .el-icon-close { - display: none; - position: absolute; - top: 5px; - right: 5px; - cursor: pointer; - opacity: .75; - color: var(--color-extra-light-black); - transform: scale(.7); - - &:hover { - opacity: 1; - } - } - &:hover { - background-color: var(--color-extra-light-gray); - - .el-icon-close { - display: inline-block; - } - .el-progress__text { - display: none; - } - } - @when success { - .el-upload-list__item-status-label { - display: block; - } - .el-upload-list__item-name:hover { - color: var(--link-hover-color); - cursor: pointer; - } - &:hover { - .el-upload-list__item-status-label { - display: none; - } - } - } - } - @when disabled { - .el-upload-list__item:hover .el-upload-list__item-status-label { - display: block; - } - } - @e item-name { - color: var(--color-extra-light-black); - display: block; - margin-right: 40px; - overflow: hidden; - padding-left: 4px; - text-overflow: ellipsis; - transition: color .3s; - white-space: nowrap; - - [class^="el-icon"] { - color: var(--color-light-silver); - margin-right: 7px; - height: 100%; - line-height: inherit; - } - } - @e item-status-label { - position: absolute; - right: 5px; - top: 0; - line-height: inherit; - display: none; - } - @e item-delete { - position: absolute; - right: 10px; - top: 0; - font-size: 12px; - color: var(--color-extra-light-black); - display: none; - - &:hover { - color: var(--color-primary); - } - } - @m picture-card { - margin: 0; - display: inline; - vertical-align: top; - - .el-upload-list__item { - overflow: hidden; - background-color: #fff; - border: 1px solid #c0ccda; - border-radius: 6px; - box-sizing: border-box; - width: 148px; - height: @width; - margin: 0 8px 8px 0; - display: inline-block; - - & .el-icon-check, - & .el-icon-circle-check { - color: var(--color-white); - } - - & .el-icon-close { - display: none; - } - - &:hover { - .el-upload-list__item-status-label { - display: none; - } - .el-progress__text { - display: block; - } - } - } - .el-upload-list__item-name { - display: none; - } - .el-upload-list__item-thumbnail { - width: 100%; - height: 100%; - } - .el-upload-list__item-status-label { - position: absolute; - right: -15px; - top: -6px; - width: 40px; - height: 24px; - background: #13ce66; - text-align: center; - transform: rotate(45deg); - box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2); - - i { - font-size: 12px; - margin-top: 11px; - transform: rotate(-45deg) scale(0.8); - } - } - .el-upload-list__item-actions { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - cursor: default; - text-align: center; - color: #fff; - opacity: 0; - font-size: 20px; - background-color: rgba(0, 0, 0, .5); - transition: opacity .3s; - @utils-vertical-center; - - span { - display: none; - cursor: pointer; - } - span + span { - margin-left: 15px; - } - - .el-upload-list__item-delete { - position: static; - font-size: inherit; - color: inherit; - } - - &:hover { - opacity: 1; - span { - display: inline-block; - } - } - } - .el-progress { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - bottom: auto; - width: 126px; - - .el-progress__text { - top: 50%; - } - } - } - @m picture { - .el-upload-list__item { - overflow: hidden; - background-color: #fff; - border: 1px solid #c0ccda; - border-radius: 6px; - box-sizing: border-box; - margin-top: 10px; - padding: 10px 10px 10px 90px; - height: 92px; - - & .el-icon-check, - & .el-icon-circle-check { - color: var(--color-white); - } - &:hover { - .el-upload-list__item-status-label { - background: transparent; - box-shadow: none; - top: -2px; - right: -12px; - } - .el-progress__text { - display: block; - } - } - &.is-success { - .el-upload-list__item-name { - line-height: 70px; - margin-top: 0; - - i { - display: none; - } - } - } - } - .el-upload-list__item-thumbnail { - vertical-align: middle; - display: inline-block; - width: 70px; - height: 70px; - float: left; - position: relative; - z-index: 1; - margin-left: -80px; - } - .el-upload-list__item-name { - display: block; - margin-top: 20px; - - i { - font-size: 70px; - line-height: 1; - position: absolute; - left: 9px; - top: 10px; - } - } - .el-upload-list__item-status-label { - position: absolute; - right: -17px; - top: -7px; - width: 46px; - height: 26px; - background: #13ce66; - text-align: center; - transform: rotate(45deg); - box-shadow: 0 1px 1px #ccc; - - i { - font-size: 12px; - margin-top: 12px; - transform: rotate(-45deg) scale(0.8); - } - } - .el-progress { - position: relative; - top: -7px; - } - } - } - @b upload-cover { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: hidden; - z-index: 10; - cursor: default; - @utils-vertical-center; - - & img { - display: block; - width: 100%; - height: 100%; - } - - @e label { - position: absolute; - right: -15px; - top: -6px; - width: 40px; - height: 24px; - background: #13ce66; - text-align: center; - transform: rotate(45deg); - box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2); - - i { - font-size: 12px; - margin-top: 11px; - transform: rotate(-45deg) scale(0.8); - color: #fff; - } - } - - @e progress { - display: inline-block; - vertical-align: middle; - position: static; - width: 243px; - - & + .el-upload__inner { - opacity: 0; - } - } - - @e content { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - @e interact { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(#000, .72); - text-align: center; - - & .btn { - display: inline-block; - color: var(--color-white); - font-size: 14px; - cursor: pointer; - vertical-align: middle; - transition: var(--md-fade-transition); - margin-top: 60px; - - & i { - margin-top: 0; - } - - & span { - opacity: 0; - transition: opacity .15s linear; - } - - &:not(:first-child) { - margin-left: 35px; - } - - &:hover { - transform: translateY(-13px); - - & span { - opacity: 1; - } - } - - & i { - color: var(--color-white); - display: block; - font-size: 24px; - line-height: inherit; - margin: 0 auto 5px; - } - } - } - - @e title { - position: absolute; - bottom: 0; - left: 0; - background-color: var(--color-white); - height: 36px; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: normal; - text-align: left; - padding: 0 10px; - margin: 0; - line-height: 36px; - font-size: 14px; - color: var(--color-extra-light-black); - } - - & + .el-upload__inner { - opacity: 0; - position: relative; - z-index: 1; - } - } -} diff --git a/packages/upload/README.md b/packages/upload/README.md index 64dea7e5..9dbe1bc1 100644 --- a/packages/upload/README.md +++ b/packages/upload/README.md @@ -13,7 +13,7 @@ npm i element-upload -D ```javascript import Vue from 'vue' import ElUpload from 'element-upload' -import 'element-theme-default/dist/upload.css' +import 'element-theme-chalk/dist/upload.css' Vue.use(ElUpload) ``` diff --git a/test/unit/index.js b/test/unit/index.js index c1157e78..facac592 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -1,7 +1,7 @@ // Polyfill fn.bind() for PhantomJS /* eslint-disable no-extend-native */ Function.prototype.bind = require('function-bind'); -require('packages/theme-default/src/index.css'); +require('packages/theme-chalk/lib/index.css'); // require all test files (files that ends with .spec.js) const testsContext = require.context('./specs', true, /\.spec$/);