From 482f752b9f4280491ed1904c4566d29afe78ea7b Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Wed, 2 Nov 2016 12:24:05 +0800 Subject: [PATCH] Remove submodule --- .github/CONTRIBUTING.md | 2 +- .gitmodules | 3 - build/deploy-ci.sh | 17 + build/release.sh | 2 - package.json | 3 +- packages/theme-default | 1 - packages/theme-default/.gitignore | 3 + packages/theme-default/README.md | 33 ++ packages/theme-default/gulpfile.js | 37 ++ packages/theme-default/package.json | 37 ++ packages/theme-default/src/alert.css | 86 +++ packages/theme-default/src/autocomplete.css | 74 +++ 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 | 186 ++++++ packages/theme-default/src/card.css | 23 + packages/theme-default/src/cascader.css | 45 ++ packages/theme-default/src/checkbox-group.css | 0 packages/theme-default/src/checkbox.css | 137 +++++ packages/theme-default/src/col.css | 24 + .../theme-default/src/common/transition.css | 113 ++++ packages/theme-default/src/common/var.css | 542 ++++++++++++++++++ packages/theme-default/src/core/dropdown.css | 45 ++ packages/theme-default/src/core/input.css | 55 ++ packages/theme-default/src/core/option.css | 72 +++ packages/theme-default/src/core/tag.css | 29 + packages/theme-default/src/date-picker.css | 8 + .../src/date-picker/date-picker.css | 103 ++++ .../src/date-picker/date-range-picker.css | 129 +++++ .../src/date-picker/date-table.css | 75 +++ .../src/date-picker/month-table.css | 31 + .../src/date-picker/picker-panel.css | 113 ++++ .../theme-default/src/date-picker/picker.css | 123 ++++ .../src/date-picker/time-picker.css | 78 +++ .../src/date-picker/time-range-picker.css | 34 ++ .../src/date-picker/time-spinner.css | 53 ++ .../src/date-picker/year-table.css | 35 ++ packages/theme-default/src/dialog.css | 107 ++++ packages/theme-default/src/dropdown-item.css | 0 packages/theme-default/src/dropdown-menu.css | 0 packages/theme-default/src/dropdown.css | 65 +++ .../theme-default/src/fonts/element-icons.eot | Bin 0 -> 13524 bytes .../theme-default/src/fonts/element-icons.svg | 146 +++++ .../theme-default/src/fonts/element-icons.ttf | Bin 0 -> 13248 bytes .../src/fonts/element-icons.woff | Bin 0 -> 8004 bytes packages/theme-default/src/form-item.css | 0 packages/theme-default/src/form.css | 84 +++ packages/theme-default/src/icon.css | 86 +++ packages/theme-default/src/index.css | 42 ++ packages/theme-default/src/input-number.css | 86 +++ packages/theme-default/src/input.css | 220 +++++++ packages/theme-default/src/loading.css | 44 ++ .../theme-default/src/menu-item-group.css | 0 packages/theme-default/src/menu-item.css | 0 packages/theme-default/src/menu.css | 214 +++++++ packages/theme-default/src/message-box.css | 149 +++++ packages/theme-default/src/message.css | 75 +++ packages/theme-default/src/mixins/_button.css | 49 ++ packages/theme-default/src/notification.css | 78 +++ packages/theme-default/src/option-group.css | 28 + packages/theme-default/src/option.css | 47 ++ packages/theme-default/src/pagination.css | 203 +++++++ packages/theme-default/src/popover.css | 120 ++++ packages/theme-default/src/progress.css | 119 ++++ packages/theme-default/src/radio-button.css | 0 packages/theme-default/src/radio-group.css | 0 packages/theme-default/src/radio.css | 211 +++++++ packages/theme-default/src/rate.css | 46 ++ packages/theme-default/src/row.css | 39 ++ .../theme-default/src/select-dropdown.css | 55 ++ packages/theme-default/src/select.css | 137 +++++ packages/theme-default/src/slider.css | 142 +++++ packages/theme-default/src/spinner.css | 46 ++ packages/theme-default/src/step.css | 204 +++++++ packages/theme-default/src/steps.css | 16 + packages/theme-default/src/submenu.css | 0 packages/theme-default/src/switch.css | 119 ++++ packages/theme-default/src/tab-pane.css | 0 packages/theme-default/src/table-column.css | 85 +++ packages/theme-default/src/table.css | 365 ++++++++++++ packages/theme-default/src/tabs.css | 238 ++++++++ packages/theme-default/src/tag.css | 92 +++ packages/theme-default/src/time-picker.css | 3 + packages/theme-default/src/time-select.css | 42 ++ packages/theme-default/src/tooltip.css | 145 +++++ packages/theme-default/src/tree.css | 92 +++ packages/theme-default/src/upload.css | 265 +++++++++ 90 files changed, 6733 insertions(+), 9 deletions(-) delete mode 100644 .gitmodules delete mode 160000 packages/theme-default create mode 100644 packages/theme-default/.gitignore create mode 100644 packages/theme-default/README.md create mode 100644 packages/theme-default/gulpfile.js create mode 100644 packages/theme-default/package.json create mode 100644 packages/theme-default/src/alert.css create mode 100644 packages/theme-default/src/autocomplete.css create mode 100644 packages/theme-default/src/badge.css create mode 100644 packages/theme-default/src/base.css create mode 100644 packages/theme-default/src/breadcrumb-item.css create mode 100644 packages/theme-default/src/breadcrumb.css create mode 100644 packages/theme-default/src/button-group.css create mode 100644 packages/theme-default/src/button.css create mode 100644 packages/theme-default/src/card.css create mode 100644 packages/theme-default/src/cascader.css create mode 100644 packages/theme-default/src/checkbox-group.css create mode 100644 packages/theme-default/src/checkbox.css create mode 100644 packages/theme-default/src/col.css create mode 100644 packages/theme-default/src/common/transition.css create mode 100644 packages/theme-default/src/common/var.css create mode 100644 packages/theme-default/src/core/dropdown.css create mode 100644 packages/theme-default/src/core/input.css create mode 100644 packages/theme-default/src/core/option.css create mode 100644 packages/theme-default/src/core/tag.css create mode 100644 packages/theme-default/src/date-picker.css create mode 100644 packages/theme-default/src/date-picker/date-picker.css create mode 100644 packages/theme-default/src/date-picker/date-range-picker.css create mode 100644 packages/theme-default/src/date-picker/date-table.css create mode 100644 packages/theme-default/src/date-picker/month-table.css create mode 100644 packages/theme-default/src/date-picker/picker-panel.css create mode 100644 packages/theme-default/src/date-picker/picker.css create mode 100644 packages/theme-default/src/date-picker/time-picker.css create mode 100644 packages/theme-default/src/date-picker/time-range-picker.css create mode 100644 packages/theme-default/src/date-picker/time-spinner.css create mode 100644 packages/theme-default/src/date-picker/year-table.css create mode 100755 packages/theme-default/src/dialog.css create mode 100644 packages/theme-default/src/dropdown-item.css create mode 100644 packages/theme-default/src/dropdown-menu.css create mode 100644 packages/theme-default/src/dropdown.css create mode 100644 packages/theme-default/src/fonts/element-icons.eot create mode 100644 packages/theme-default/src/fonts/element-icons.svg create mode 100644 packages/theme-default/src/fonts/element-icons.ttf create mode 100644 packages/theme-default/src/fonts/element-icons.woff create mode 100644 packages/theme-default/src/form-item.css create mode 100644 packages/theme-default/src/form.css create mode 100644 packages/theme-default/src/icon.css create mode 100644 packages/theme-default/src/index.css create mode 100644 packages/theme-default/src/input-number.css create mode 100644 packages/theme-default/src/input.css create mode 100644 packages/theme-default/src/loading.css create mode 100644 packages/theme-default/src/menu-item-group.css create mode 100644 packages/theme-default/src/menu-item.css create mode 100644 packages/theme-default/src/menu.css create mode 100644 packages/theme-default/src/message-box.css create mode 100644 packages/theme-default/src/message.css create mode 100644 packages/theme-default/src/mixins/_button.css create mode 100644 packages/theme-default/src/notification.css create mode 100644 packages/theme-default/src/option-group.css create mode 100644 packages/theme-default/src/option.css create mode 100644 packages/theme-default/src/pagination.css create mode 100644 packages/theme-default/src/popover.css create mode 100644 packages/theme-default/src/progress.css create mode 100644 packages/theme-default/src/radio-button.css create mode 100644 packages/theme-default/src/radio-group.css create mode 100644 packages/theme-default/src/radio.css create mode 100644 packages/theme-default/src/rate.css create mode 100644 packages/theme-default/src/row.css create mode 100644 packages/theme-default/src/select-dropdown.css create mode 100644 packages/theme-default/src/select.css create mode 100644 packages/theme-default/src/slider.css create mode 100644 packages/theme-default/src/spinner.css create mode 100644 packages/theme-default/src/step.css create mode 100644 packages/theme-default/src/steps.css create mode 100644 packages/theme-default/src/submenu.css create mode 100644 packages/theme-default/src/switch.css create mode 100644 packages/theme-default/src/tab-pane.css create mode 100644 packages/theme-default/src/table-column.css create mode 100644 packages/theme-default/src/table.css create mode 100644 packages/theme-default/src/tabs.css create mode 100644 packages/theme-default/src/tag.css create mode 100644 packages/theme-default/src/time-picker.css create mode 100644 packages/theme-default/src/time-select.css create mode 100644 packages/theme-default/src/tooltip.css create mode 100644 packages/theme-default/src/tree.css create mode 100644 packages/theme-default/src/upload.css diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index eba933692..44c82bad2 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -33,7 +33,7 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡 ## 开发环境搭建 首先你需要 Node.js 4+ 和 NPM 3+ ```shell -git clone git@github.com:ElemeFE/element.git --recursive +git clone git@github.com:ElemeFE/element.git npm run dev # open http://localhost:8085 diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index 2600d332d..000000000 --- a/.gitmodules +++ /dev/null @@ -1,3 +0,0 @@ -[submodule "packages/theme-default"] - path = packages/theme-default - url = https://github.com/ElementUI/theme-default diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh index dd922d2e3..589fb3f35 100644 --- a/build/deploy-ci.sh +++ b/build/deploy-ci.sh @@ -16,6 +16,23 @@ if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then cd ../.. fi +# push theme-default +if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then + cd temp_web + git clone https://$GH_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default + git config user.name "element_bot" + git config user.email "element_bot" + rm -rf * + cp -rf ../../packages/theme-default/** . + git add -A . + git commit -m "$TRAVIS_COMMIT_MSG" + if [ "$TRAVIS_TAG" ]; then + git tag $TRAVIS_TAG + fi + git push origin master --tags + cd ../.. +fi + # build lib if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then npm run dist diff --git a/build/release.sh b/build/release.sh index 605fbbe06..86febdf1c 100644 --- a/build/release.sh +++ b/build/release.sh @@ -14,9 +14,7 @@ then # publish theme echo "Releasing theme-default $VERSION ..." cd packages/theme-default - git checkout master npm version $VERSION --message "[release] $VERSION" - git push origin master --tags npm publish --tag next cd ../.. diff --git a/package.json b/package.json index 2aa3c2473..cf088fb3a 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "packages" ], "scripts": { - "bootstrap": "npm i && npm run submodule:fetch", + "bootstrap": "npm i", "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js", "build:theme": "npm run submodule:fetch && node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default", "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js", @@ -21,7 +21,6 @@ "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet", "pub": "sh build/release.sh", "pub:all": "npm run dist:all && lerna publish", - "submodule:fetch": "git submodule foreach 'git checkout master && git pull' && git submodule update", "test": "npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run", "test:watch": "karma start test/unit/karma.conf.js" }, diff --git a/packages/theme-default b/packages/theme-default deleted file mode 160000 index d8d012b4a..000000000 --- a/packages/theme-default +++ /dev/null @@ -1 +0,0 @@ -Subproject commit d8d012b4ac597297517fae0f9d05ac5d0d68fc5c diff --git a/packages/theme-default/.gitignore b/packages/theme-default/.gitignore new file mode 100644 index 000000000..6ddbcfaad --- /dev/null +++ b/packages/theme-default/.gitignore @@ -0,0 +1,3 @@ +node_modules +lib +npm-debug* diff --git a/packages/theme-default/README.md b/packages/theme-default/README.md new file mode 100644 index 000000000..7b563524d --- /dev/null +++ b/packages/theme-default/README.md @@ -0,0 +1,33 @@ +# 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/dist/input.css'; +import 'element-theme-default/dist/select.css'; + +// ... +``` diff --git a/packages/theme-default/gulpfile.js b/packages/theme-default/gulpfile.js new file mode 100644 index 000000000..5856951b2 --- /dev/null +++ b/packages/theme-default/gulpfile.js @@ -0,0 +1,37 @@ +'use strict'; + +const gulp = require('gulp'); +const postcss = require('gulp-postcss'); +const cssmin = require('gulp-cssmin'); + +const salad = require('postcss-salad')({ + browser: ['ie > 9', 'last 2 version'], + features: { + 'bem': { + 'shortcuts': { + 'component': 'b', + 'modifier': 'm', + 'descendent': 'e' + }, + 'separators': { + 'descendent': '__', + 'modifier': '--' + } + } + } +}); + +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 new file mode 100644 index 000000000..3402c28b8 --- /dev/null +++ b/packages/theme-default/package.json @@ -0,0 +1,37 @@ +{ + "name": "element-theme-default", + "version": "1.0.0", + "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": { + "vue-popup": "^0.2.9" + } +} diff --git a/packages/theme-default/src/alert.css b/packages/theme-default/src/alert.css new file mode 100644 index 000000000..a5ce5b8ef --- /dev/null +++ b/packages/theme-default/src/alert.css @@ -0,0 +1,86 @@ +@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: #fff; + 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-left: 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: #fff; + font-size: var(--alert-description-font-size); + margin: 5px 0 0 0; + } + + @e closebtn { + font-size: var(--alert-close-font-size); + color: #fff; + 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/autocomplete.css b/packages/theme-default/src/autocomplete.css new file mode 100644 index 000000000..b81ee9641 --- /dev/null +++ b/packages/theme-default/src/autocomplete.css @@ -0,0 +1,74 @@ +@charset "UTF-8"; +@import "./input.css"; +@import "./common/var.css"; + +@component-namespace el { + @b autocomplete { + position: relative; + + @e suggestions { + position: absolute; + left: 0; + top: 110%; + margin: 0; + background-color: #fff; + border: 1px solid #D3DCE6; + width: 100%; + padding: 6px 0; + z-index: 10; + border-radius: 2px; + max-height: 280px; + box-sizing: border-box; + overflow: auto; + box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12); + + & li { + list-style: none; + line-height: 36px; + padding: 0 10px; + margin: 0; + cursor: pointer; + color: #475669; + font-size: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.highlighted, + &:hover { + background-color: var(--color-primary); + color: #fff; + } + &:active { + background-color: darken(var(--color-primary), 0.2); + } + &.divider { + margin-top: 6px; + border-top: 1px solid #D3DCE6; + } + &.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: #fff; + } + } + + & .el-icon-loading { + vertical-align: middle; + } + } + } + } +} diff --git a/packages/theme-default/src/badge.css b/packages/theme-default/src/badge.css new file mode 100644 index 000000000..1ee409e7f --- /dev/null +++ b/packages/theme-default/src/badge.css @@ -0,0 +1,40 @@ +@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: #fff; + 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 #fff; + + @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 new file mode 100644 index 000000000..d5da9e9e1 --- /dev/null +++ b/packages/theme-default/src/base.css @@ -0,0 +1,2 @@ +@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 new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/breadcrumb.css b/packages/theme-default/src/breadcrumb.css new file mode 100644 index 000000000..bc0631e6f --- /dev/null +++ b/packages/theme-default/src/breadcrumb.css @@ -0,0 +1,45 @@ +@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: #c0ccda; + } + @e item { + float: left; + + @e inner { + &, & a { + transition: color .15s linear; + color:#475669; + + &:hover { + color: var(--color-primary); + cursor: pointer; + } + } + } + + &:last-child { + .el-breadcrumb__item__inner, + .el-breadcrumb__item__inner a { + &, &:hover { + color: #99a9bf; + 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 new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/button.css b/packages/theme-default/src/button.css new file mode 100644 index 000000000..0fb24a53e --- /dev/null +++ b/packages/theme-default/src/button.css @@ -0,0 +1,186 @@ +@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); + color: var(--button-default-color); + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: none; + margin: 0; + @utils-user-select none; + + @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius); + + &:hover { + 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 { + background: #fff; + border-color: var(--color-primary); + color: var(--color-primary); + } + + &:active { + background: #fff; + 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 { + color: var(--button-disabled-color); + cursor: not-allowed; + background-image: none; + background-color: var(--button-disabled-fill); + border-color: var(--button-disabled-border); + } + + &.is-plain { + &, + &:hover { + background-color: #fff; + border-color: #d3dce6; + color: #C0CCDA; + } + } + } + + @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 text { + border: none; + color: var(--color-primary); + background: transparent; + + &:hover { + color: tint(var(--color-primary), var(--button-hover-tint-percent)); + } + &:active { + color: shade(var(--color-primary), var(--button-active-shade-percent)); + } + } + @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); + } + } + + @b button-group { + @utils-clearfix; + display: inline-block; + + & .el-button { + float: left; + position: relative; + + &: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, + &: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(#fff, 0.5); + } + &:last-child { + border-left-color: rgba(#fff, 0.5); + } + &:not(:first-child):not(:last-child) { + border-left-color: rgba(#fff, 0.5); + border-right-color: rgba(#fff, 0.5); + } + } + } + } +} diff --git a/packages/theme-default/src/card.css b/packages/theme-default/src/card.css new file mode 100644 index 000000000..c080c43cd --- /dev/null +++ b/packages/theme-default/src/card.css @@ -0,0 +1,23 @@ +@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: #fff; + 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/cascader.css b/packages/theme-default/src/cascader.css new file mode 100644 index 000000000..a79fe34e2 --- /dev/null +++ b/packages/theme-default/src/cascader.css @@ -0,0 +1,45 @@ +@charset "UTF-8"; +@import "./input.css"; +@import "./common/var.css"; +/*@import "./core/dropdown.css";*/ + +@component-namespace element { + + @b cascader { + display: inline-block; + position: relative; + + @e dropdown { + background-color: var(--cascader-menu-fill); + border: var(--cascader-menu-border); + border-radius: var(--cascader-menu-radius); + box-shadow: var(--cascader-menu-submenu-shadow); + margin-top: 5px; + max-height: var(--cascader-height); + position: absolute; + white-space: nowrap; + z-index: 10; + } + + @e wrap { + overflow: hidden; + } + + @e menu { + border: 0; + box-shadow: none; + display: inline-block; + margin: 0; + position: relative; + vertical-align: top; + + &::before { + border-left: var(--cascader-menu-border); + content: " "; + height: var(--cascader-height); + left: 0; + position: absolute; + } + } + } +} diff --git a/packages/theme-default/src/checkbox-group.css b/packages/theme-default/src/checkbox-group.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/checkbox.css b/packages/theme-default/src/checkbox.css new file mode 100644 index 000000000..ca9fadcbf --- /dev/null +++ b/packages/theme-default/src/checkbox.css @@ -0,0 +1,137 @@ +@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; + } + @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); + + &:not(.is-disabled):hover { + border-color: var(--checkbox-input-border-color-hover); + } + + &::after { + 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; + } + + @when disabled { + 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; + } + } + + @when checked { + background-color: var(--checkbox-checked-input-fill); + border-color: var(--checkbox-checked-input-border-color); + + &::after { + transform: rotate(45deg) scaleY(1); + } + } + + @when focus { + border-color: var(--checkbox-input-border-color-hover); + } + + &.is-disabled.is-checked { + 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); + } + } + + @when indeterminate { + 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; + } + } + + &.is-disabled.is-indeterminate { + 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); + } + } + } + + @e original { + opacity: 0; + outline: none; + position: absolute; + margin: 0; + left: -999px; + } + + @e label { + font-size: var(--checkbox-font-size); + padding-left: 5px; + } + + & + .el-checkbox { + margin-left: 15px; + } + } +} diff --git a/packages/theme-default/src/col.css b/packages/theme-default/src/col.css new file mode 100644 index 000000000..d15eeb4b8 --- /dev/null +++ b/packages/theme-default/src/col.css @@ -0,0 +1,24 @@ +@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; +} + +@for $i from 1 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)%; + } +} diff --git a/packages/theme-default/src/common/transition.css b/packages/theme-default/src/common/transition.css new file mode 100644 index 000000000..bc522d3ff --- /dev/null +++ b/packages/theme-default/src/common/transition.css @@ -0,0 +1,113 @@ +@charset "UTF-8"; +@import './var.css'; + +.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; +} + +.fade-in-enter-active, +.fade-in-leave-active { + transition: all .3s cubic-bezier(.55,0,.1,1); +} + +.fade-in-enter, +.fade-in-leave-active { + opacity: 0; +} + +.md-fade-center-enter-active, +.md-fade-center-leave-active { + transition: all .3s cubic-bezier(.55,0,.1,1); +} +.md-fade-center-enter, +.md-fade-center-leave, +.md-fade-center-leave-active { + opacity: 0; + transform: scaleY(0); +} + +.md-fade-bottom-enter-active, +.md-fade-bottom-leave-active { + opacity: 1; + transform: scaleY(1); + transition: var(--md-fade-transition); + transform-origin: center top; +} +.md-fade-bottom-enter, +.md-fade-bottom-leave, +.md-fade-bottom-leave-active { + opacity: 0; + transform: scaleY(0); +} + +.md-fade-top-enter-active, +.md-fade-top-leave-active { + opacity: 1; + transform: scaleY(1); + transition: var(--md-fade-transition); + transform-origin: center bottom; +} + +.md-fade-top-enter, +.md-fade-top-leave, +.md-fade-top-leave-active { + opacity: 0; + transform: scaleY(0); +} + +.md-fade-left-enter-active, +.md-fade-left-leave-active { + opacity: 1; + transform: scaleX(1); + transition: var(--md-fade-transition); + transform-origin: right center; +} +.md-fade-left-enter, +.md-fade-left-leave, +.md-fade-left-leave-active { + opacity: 0; + transform: scaleX(0); +} + +.md-fade-right-enter-active, +.md-fade-right-leave-active { + opacity: 1; + transform: scaleX(1); + transition: var(--md-fade-transition); + transform-origin: left center; +} +.md-fade-right-enter, +.md-fade-right-leave, +.md-fade-right-leave-active { + opacity: 0; + transform: scaleX(0); +} + +.fade-enter-active, +.fade-leave-active { + transition: opacity .3s cubic-bezier(.645,.045,.355,1); +} +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +.list-move, .list-enter-active, .list-leave-active { + transition: all .5s cubic-bezier(.55,0,.1,1); +} +.list-enter, .list-leave-active { + opacity: 0; + transform: translate(0, -30px); +} +/*.list-leave-active { + position: absolute; + opacity: 0; + transform: scaleY(0.01) translate(30px, 0); +}*/ diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css new file mode 100644 index 000000000..4655412f5 --- /dev/null +++ b/packages/theme-default/src/common/var.css @@ -0,0 +1,542 @@ +:root { + + /* Transition + -------------------------- */ + --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-blue: #2e90fe; + --color-blue-light: #5da9ff; + --color-blue-lighter: rgba(var(--color-blue), 0.12); + --color-white: #fff; + --color-black: #000; + --color-grey: #C0CCDA; + + /* Link + -------------------------- */ + --link-color: #475669; + --link-hover-color: var(--color-primary); + + /* Border + -------------------------- */ + --border-width-base: 1px; + --border-style-base: solid; + --border-color-base: var(--color-grey); + --border-color-hover: #8492a6; + --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%; + --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light); + + /* 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: #1f2d3d; + --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: #EFF2F7; + --disabled-color-base: #bbb; + --disabled-border-base: #D3DCE6; + + /* Icon + -------------------------- */ + --icon-color: #666; + + /* Checkbox + -------------------------- */ + --checkbox-font-size: 14px; + --checkbox-color: #1f2d3d; + --checkbox-input-height: 18px; + --checkbox-input-width: 18px; + --checkbox-input-border-radius: var(--border-radius-base); + --checkbox-input-fill: #fff; + --checkbox-input-border: var(--border-base); + --checkbox-input-border-color: var(--border-color-base); + --checkbox-icon-color: #fff; + + --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: #fff; + + --checkbox-checked-input-border-color: var(--color-blue); + --checkbox-checked-input-fill: var(--color-primary); + --checkbox-checked-icon-color: var(--fill-base); + + --checkbox-input-shadow-hover: var(--shadow-base); + --checkbox-input-border-color-hover: var(--color-primary); + + /* Radio + -------------------------- */ + --radio-font-size: 14px; + --radio-color: #1f2d3d; + --radio-input-height: 18px; + --radio-input-width: 18px; + --radio-input-border-radius: var(--border-radius-circle); + --radio-input-fill: #fff; + --radio-input-border: var(--border-base); + --radio-input-border-color: var(--border-color-base); + --radio-icon-color: #fff; + + --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: #fff; + + --radio-checked-input-border-color: var(--color-primary); + --radio-checked-input-fill: #fff; + --radio-checked-icon-color: var(--color-primary); + + --radio-input-shadow-hover: var(--shadow-base); + --radio-input-border-color-hover: var(--color-primary); + + --radio-button-font-size: var(--font-size-base); + + /* 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: #99a9bf; + + --select-input-color: var(--color-grey); + --select-multiple-input-color: #666; + --select-input-focus-background: #2ea0ff; + --select-input-font-size: 12px; + + --select-tag-height: 24px; + --select-tag-color: var(--color-white); + --select-tag-background: var(--color-primary); + + --select-option-color: #475669; + --select-option-disabled-color: var(--color-grey); + --select-option-height: 36px; + --select-option-hover-background: #e5e9f2; + --select-option-selected: var(--color-primary); + --select-option-selected-hover: #1D8CE0; + + --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 #d3dce6; + + /* 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: #475669; + --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: #8492a6; + --message-close-color: var(--color-grey); + --message-close-hover-color: #99A9BF; + + --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: #8492a6; + --notification-title-font-size: 16px; + --notification-title-color: #1f2d3d; + + --notification-close-color: var(--color-grey); + --notification-close-hover-color: #99A9BF; + + --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-shadow-hover: var(--shadow-base); + --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: #fff; + --input-fill-disabled: var(--disabled-fill-base); + --input-color-disabled: var(--font-color-disabled-base); + --input-icon-color: var(--color-grey); + --input-placeholder-color: #99a9bf; + --input-max-width: 314px; + + --input-hover-border: var(--border-color-hover); + + --input-focus-border: var(--color-primary); + --input-focus-fill: #fff; + + --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: #C0CCDA; + + --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-blue); + --cascader-menu-option-fill-active: rgba(var(--color-blue), 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-blue); + --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-blue); + --tab-horizontal-border: 2px solid #438de0; + + /* Button + -------------------------- */ + --button-font-size: 14px; + --button-border-radius: var(--border-radius-base); + --button-paddding: 5px 20px; + --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: #1F2D3D; + --button-default-fill: #fff; + --button-default-border: #c4c4c4; + + --button-ghost-color: #666; + --button-ghost-fill: transparent; + --button-ghost-border: none; + + --button-disabled-color: #C0CCDA; + --button-disabled-fill: #EFF2F7; + --button-disabled-border: #D3DCE6; + + --button-primary-border: var(--color-primary); + --button-primary-color: #fff; + --button-primary-fill: var(--color-primary); + + --button-success-border: var(--color-success); + --button-success-color: #fff; + --button-success-fill: var(--color-success); + + --button-warning-border: var(--color-warning); + --button-warning-color: #fff; + --button-warning-fill: var(--color-warning); + + --button-danger-border: var(--color-danger); + --button-danger-color: #fff; + --button-danger-fill: var(--color-danger); + + --button-info-border: var(--color-info); + --button-info-color: #fff; + --button-info-fill: var(--color-info); + + --button-hover-tint-percent: 20%; + --button-active-shade-percent: 10%; + + + /* cascader + -------------------------- */ + --cascader-height: 200px; + + /* Switch + -------------------------- */ + --switch-on-color: #20a0ff; + --switch-off-color: #C0CCDA; + --switch-disabled-color: #E5E9F3; + --switch-disabled-text-color: #F9FAFC; + + --switch-font-size: var(--font-size-base); + --switch-core-border-radius: 12px; + --switch-size: 46px 22px; + --switch-button-size: 16px; + + /* Dialog + -------------------------- */ + --dialog-background-color: var(--color-blue); + --dialog-footer-background: var(--color-blue-lighter); + --dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + --dialog-tiny-width: 30%; + --dialog-small-width: 50%; + --dialog-large-width: 90%; + --dialog-close-color: var(--color-grey); + --dialog-close-hover-color: var(--color-primary); + --dialog-title-font-size: 16px; + --dialog-font-size: 14px; + + /* Table + -------------------------- */ + --table-border-color: #e0e6ed; + --table-text-color: #1f2d3d; + --table-header-background: #EFF2F7; + + /* Pagination + -------------------------- */ + --pagination-font-size: 13px; + --pagination-fill: var(--color-white); + --pagination-color: #475669; + --pagination-border-radius: 2px; + --pagination-button-color: #99a9bf; + --pagination-button-size: 28px; + --pagination-button-disabled-color: #e4e4e4; + --pagination-button-disabled-fill: var(--color-white); + --pagination-border-color: #D3DCE6; + --pagination-hover-fill: var(--color-primary); + --pagination-hover-color: var(--color-white); + + /* Popover + -------------------------- */ + --popover-fill: #fff; + --popover-font-size: 12px; + --popover-border-color: #d3dce6; + --popover-arrow-size: 6px; + --popover-padding: 10px; + --popover-title-font-size: 13px; + --popover-title-color: #1f2d3d; + + /* Tooltip + -------------------------- */ + --tooltip-fill: #1f2d3d; + --tooltip-color: #fff; + --tooltip-font-size: 12px; + --tooltip-border-color: #1f2d3d; + --tooltip-arrow-size: 6px; + --tooltip-padding: 10px; + + /* Tag + -------------------------- */ + --tag-padding: 0 5px; + --tag-fill: #8492a6; + --tag-border: #8492a6; + --tag-color: #fff; + --tag-close-color: #666; + --tag-font-size: 12px; + --tag-border-radius: 4px; + + --tag-gray-fill: #e5e9f2; + --tag-gray-border: #e5e9f2; + --tag-gray-color: #475669; + + --tag-primary-fill: rgba(32,159,255,0.10); + --tag-primary-border: rgba(32,159,255,0.20); + --tag-primary-color: #20a0ff; + + --tag-success-fill: rgba(18,206,102,0.10); + --tag-success-border: rgba(18,206,102,0.20); + --tag-success-color: #13ce66; + + --tag-warning-fill: rgba(247,186,41,0.10); + --tag-warning-border: rgba(247,186,41,0.20); + --tag-warning-color: #f7ba2a; + + --tag-danger-fill: rgba(255,73,73,0.10); + --tag-danger-border: rgba(255,73,73,0.20); + --tag-danger-color: #ff4949; + + /* Dropdown + -------------------------- */ + --dropdown-menu-box-shadow: var(--box-shadow-dark); + --dropdown-menuItem-hover-fill: #e5e9f2; + --dropdown-menuItem-hover-color: #475669; + + /* 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: #e5e9f2; + --slider-button-hover-color: #1d8ce0; + --slider-stop-background-color: var(--color-grey); + --slider-disable-color: var(--color-grey); + + --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; + + /* Steps + --------------------------*/ + --menu-item-color: #475669; + --menu-item-fill: #eff2f7; + --menu-item-hover-fill: #d3dce6; + --submenu-item-fill: #e5e9f2; + + --dark-menu-item-color: #475669; + --dark-menu-item-fill: #324057; + --dark-menu-item-hover-fill: #475669; + --dark-submenu-item-fill: #1f2d3d; + + /* Rate + --------------------------*/ + --rate-height: 20px; + --rate-font-size: var(--font-size-base); + --rate-icon-size: 18px; + --rate-icon-margin: 6px; + --rate-icon-color: #C6D1DE; + + /* DatePicker + --------------------------*/ + --datepicker-color: #475669; + --datepicker-off-color: #ddd; + --datepicker-header-color: #8492a6; + --datepicker-icon-color: #99a9bf; + --datepicker-trigger-color: #c0ccda; + --datepicker-border-color: #d3dce6; + --datepicker-inner-border-color: #e4e4e4; + --datepicker-cell-hover-color: #e5e9f2; + --datepicker-inrange-color: #D3ECFF; + --datepicker-inrange-hover-color: #AFDCFF; + --datepicker-active-color: #20a0ff; + --datepicker-text-hover-color: #20a0ff; +} diff --git a/packages/theme-default/src/core/dropdown.css b/packages/theme-default/src/core/dropdown.css new file mode 100644 index 000000000..15a045db2 --- /dev/null +++ b/packages/theme-default/src/core/dropdown.css @@ -0,0 +1,45 @@ +@charset "UTF-8"; +@import "../common/var.css"; +@import "./option.css"; + +@component-namespace element { + + @b dropdown { + background-color: var(--dropdown-fill); + border: var(--dropdown-border); + border-radius: var(--dropdown-radius); + box-shadow: var(--dropdown-shadow); + left: 0; + list-style-type: none; + margin: -var(--dropdown-border-width); + margin-top: 5px; + min-width: calc(var(--input-width) + 4); + padding: 0; + position: absolute; + white-space: nowrap; + z-index: var(--index-normal); + + @e empty { + color: var(--dropdown-option-empty-color); + font-size: var(--input-font-size); + padding: 7px; + text-align: center; + } + + @e list { + margin: 0; + max-height: var(--cascader-height); + overflow: auto; + padding: 0; + } + + @e option { + max-height: 250px; + overflow: auto; + } + + &:empty { + display: none; + } + } +} diff --git a/packages/theme-default/src/core/input.css b/packages/theme-default/src/core/input.css new file mode 100644 index 000000000..1630321ee --- /dev/null +++ b/packages/theme-default/src/core/input.css @@ -0,0 +1,55 @@ +@charset "UTF-8"; +@import "../common/var.css"; + +@component-namespace element-core { + + @b input { + background-color: var(--input-fill); + border: var(--input-border); + border-radius: var(--input-border-radius); + box-sizing: border-box; + color: var(--input-color); + cursor: text; + display: inline-block; + font-size: var(--input-font-size); + min-height: var(--input-height); + min-width: var(--input-width); + padding: 2px; + position: relative; + vertical-align: middle; + + @when disabled { + background-color: var(--input-fill-disabled); + border-color: inherit; + box-shadow: none; + color: var(--input-color-disabled); + cursor: not-allowed; + } + + @when readonly { + cursor: pointer; + } + + @when multiple { + cursor: text; + } + + &:hover, + &.is-active { + border-color: var(--input-focus-border); + box-shadow: var(--input-shadow-hover); + } + + @e original { + background-color: inherit; + border: none; + box-sizing: border-box; + cursor: inherit; + height: 100%; + line-height: 1.2; + outline: none; + padding: 5px 7px; + width: auto; + } + } +} diff --git a/packages/theme-default/src/core/option.css b/packages/theme-default/src/core/option.css new file mode 100644 index 000000000..dde059657 --- /dev/null +++ b/packages/theme-default/src/core/option.css @@ -0,0 +1,72 @@ +@charset "UTF-8"; +@import "../common/var.css"; + +@component-namespace element { + + @b option { + box-sizing: border-box; + color: var(--dropdown-color); + cursor: pointer; + display: block; + font-size: var(--dropdown-font-size); + padding: 9px; + + @e remark { + color: var(--dropdown-option-pinyin-color); + float: right; + } + + @m arrow { + + &:not(.is-last)::after { + border-left: 1px solid var(--dropdown-border-color); + border-top: 1px solid var(--dropdown-border-color); + content: " "; + height: 4px; + margin-top: 6px; + position: absolute; + right: 12px; + transform: rotate(135deg); + width: 4px; + } + } + + @when disabled { + background-color: transparent; + color: var(--dropdown-option-color-disabled); + cursor: not-allowed; + } + + &:hover, + &.is-hover { + background-color: var(--dropdown-option-fill-hover); + color: var(--dropdown-option-color-hover); + } + + @when selected { + background-color: var(--dropdown-option-fill-active); + color: var(--dropdown-option-color-active); + } + } + + @b optiongroup { + list-style: none; + padding-left: 0; + + & .element-option { + padding-left: 21px; + } + + @e title { + box-sizing: border-box; + color: var(--dropdown-group-color); + display: inline-block; + font-size: var(--dropdown-font-size); + padding: 8px; + + &:hover { + background-color: inherit; + } + } + } +} diff --git a/packages/theme-default/src/core/tag.css b/packages/theme-default/src/core/tag.css new file mode 100644 index 000000000..2fc4aabf5 --- /dev/null +++ b/packages/theme-default/src/core/tag.css @@ -0,0 +1,29 @@ +@charset "UTF-8"; +@import "../common/var.css"; + +@component-namespace element-core { + + @b tag { + background-color: var(--tag-fill); + border: 0; + border-radius: var(--tag-border-radius); + color: var(--tag-color); + height: 22px; + margin: 1px; + outline: 0; + padding: 3px 16px 3px 3px; + position: relative; + + @e button { + color: var(--tag-close-color); + cursor: pointer; + line-height: 1; + + /* 增大可点击面积 */ + padding: 5px; + position: absolute; + right: 0; + top: 0; + } + } +} diff --git a/packages/theme-default/src/date-picker.css b/packages/theme-default/src/date-picker.css new file mode 100644 index 000000000..3854024fc --- /dev/null +++ b/packages/theme-default/src/date-picker.css @@ -0,0 +1,8 @@ +@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"; diff --git a/packages/theme-default/src/date-picker/date-picker.css b/packages/theme-default/src/date-picker/date-picker.css new file mode 100644 index 000000000..5d6acc056 --- /dev/null +++ b/packages/theme-default/src/date-picker/date-picker.css @@ -0,0 +1,103 @@ +@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 editor { + position: relative; + border: 1px solid #c0ccda; + border-radius: 4px; + padding: 5px 10px; + box-sizing: border-box; + height: 28px; + outline: none; + appearance: none; + transition: border 0.3s; + width: 100%; + + &:hover { + border-color: #20a0ff; + } + } + + @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 new file mode 100644 index 000000000..b99d142d6 --- /dev/null +++ b/packages/theme-default/src/date-picker/date-range-picker.css @@ -0,0 +1,129 @@ +@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 editor { + position: relative; + border: 1px solid #c0ccda; + border-radius: 4px; + padding: 5px 10px; + box-sizing: border-box; + height: 28px; + outline: none; + appearance: none; + transition: border 0.3s; + width: 100%; + + &:hover { + border-color: #20a0ff; + } + } + + @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: #fff; + } + } + } +} diff --git a/packages/theme-default/src/date-picker/date-table.css b/packages/theme-default/src/date-picker/date-table.css new file mode 100644 index 000000000..6d37e6d38 --- /dev/null +++ b/packages/theme-default/src/date-picker/date-table.css @@ -0,0 +1,75 @@ +@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); + } + + &.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, + &.start-date, + &.end-date { + background-color: var(--datepicker-active-color) !important; + color: #fff; + } + + &.disabled { + background-color: #f4f4f4; + opacity: 1; + cursor: not-allowed; + color: #ccc; + text-decoration: line-through; + } + + &.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 new file mode 100644 index 000000000..ac6a42740 --- /dev/null +++ b/packages/theme-default/src/date-picker/month-table.css @@ -0,0 +1,31 @@ +@import "../common/var.css"; + +@component-namespace el { + @b month-table { + font-size: 12px; + margin: -1px; + + td { + text-align: center; + padding: 20px 3px; + cursor: pointer; + + .cell { + width: 48px; + height: 32px; + display: block; + line-height: 32px; + color: var(--datepicker-color); + + &:hover { + background-color: var(--datepicker-cell-hover-color); + } + } + + &.current .cell { + background-color: var(--datepicker-active-color) !important; + color: #fff; + } + } + } +} \ No newline at end of file diff --git a/packages/theme-default/src/date-picker/picker-panel.css b/packages/theme-default/src/date-picker/picker-panel.css new file mode 100644 index 000000000..edb283537 --- /dev/null +++ b/packages/theme-default/src/date-picker/picker-panel.css @@ -0,0 +1,113 @@ +@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: #fff; + 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: #fff; + 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: #e5e9f2; + } + + &.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: #55a4ff; + 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: #f9fafc; + } + + .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 new file mode 100644 index 000000000..1ee8c5a43 --- /dev/null +++ b/packages/theme-default/src/date-picker/picker.css @@ -0,0 +1,123 @@ +@import "../common/var.css"; +@import "../common/transition.css"; + +@component-namespace el { + @b date-editor { + position: relative; + display: inline-block; + box-sizing: border-box; + height: 36px; + width: 182px; + + @e editor { + border: 1px solid #c0ccda; + border-radius: 4px; + line-height: 18px; + height: 36px; + padding: 3px 10px; + width: 100%; + box-sizing: border-box; + transition: border 0.3s; + color: #666; + font-size: 14px; + + &::-webkit-input-placeholder { + color: var(--input-placeholder-color); + font-size: 14px; + } + + &::-moz-placeholder { + color: #bbb; + font-size: 14px; + } + + &:-ms-input-placeholder { + color: #bbb; + font-size: 14px; + } + + &::placeholder { + color: #bbb; + font-size: 14px; + } + } + + @e trigger { + &.el-icon { + cursor: pointer; + position: absolute; + display: inline-block; + width: 16px; + right: 10px; + top: 0; + bottom: 0; + color: var(--datepicker-trigger-color); + font-size: 16px; + line-height: 38px; + } + } + + @e clear { + cursor: pointer; + position: absolute; + width: 20px; + right: 0; + top: 0; + bottom: 0; + line-height: 36px; + color: var(--datepicker-icon-color); + + &:hover { + color: var(--datepicker-text-hover-color); + } + } + + @when have-trigger { + .el-date-editor__editor { + padding-right: 20px; + } + + .el-date-editor__clear { + right: 22px; + } + } + + &.lg { + .el-date-editor__editor { + padding: 6px 4px; + } + } + + &.sm { + .el-date-editor__editor { + padding: 1px 1px; + } + } + + .el-picker-panel { + position: absolute; + min-width: 180px; + box-sizing: border-box; + box-shadow: 0 2px 6px #ccc; + background: #fff; + z-index: 10; + top: 41px; + } + } + + .el-date-editor__editor:focus, + .el-date-editor:hover > .el-date-editor__editor, + .el-date-editor.is-active > .el-date-editor__editor { + outline: none; + border-color: var(--datepicker-active-color); + } + + .el-date-editor .el-date-editor__clear { + display: none; + } + + .el-date-editor.is-filled:hover .el-date-editor__clear, + .el-date-editor.is-filled.is-active > .el-date-editor__clear { + display: inline-block; + } +} diff --git a/packages/theme-default/src/date-picker/time-picker.css b/packages/theme-default/src/date-picker/time-picker.css new file mode 100644 index 000000000..e5e50be2c --- /dev/null +++ b/packages/theme-default/src/date-picker/time-picker.css @@ -0,0 +1,78 @@ +@import "../common/var.css"; + +@component-namespace el { + @b time-panel { + margin: 5px 0; + border: solid 1px #d3dce6; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04); + border-radius: 2px; + position: absolute; + width: 180px; + left: 0; + z-index: 1000; + user-select: none; + + @e content { + font-size: 0; + display: flex; + position: relative; + overflow: hidden; + + &::after, &::before { + content: ":"; + top: 50%; + color: #fff; + position: absolute; + font-size: 14px; + margin-top: -15px; + line-height: 16px; + background-color: #20a0ff; + height: 32px; + z-index: -1; + left: 0; + right: 0; + box-sizing: border-box; + padding-top: 6px; + text-align: left; + } + + &::after { + left: calc(100%/3*2); + margin-left: -2px; + } + + &::before { + padding-left: calc(100%/3); + margin-right: -2px; + } + } + + @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: #8492a6; + + &.confirm { + font-weight: 800; + color: #20a0ff; + } + } + + } +} diff --git a/packages/theme-default/src/date-picker/time-range-picker.css b/packages/theme-default/src/date-picker/time-range-picker.css new file mode 100644 index 000000000..863544e63 --- /dev/null +++ b/packages/theme-default/src/date-picker/time-range-picker.css @@ -0,0 +1,34 @@ +@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; + display: flex; + } + + @e cell { + box-sizing: border-box; + margin: 0; + padding: 4px 7px 7px; + flex: 1; + } + + @e header { + margin-bottom: 5px; + text-align: center; + font-size: 14px; + } + + @e body { + display: flex; + 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 new file mode 100644 index 000000000..aaf7a5c80 --- /dev/null +++ b/packages/theme-default/src/date-picker/time-spinner.css @@ -0,0 +1,53 @@ +@import "../common/var.css"; + +@component-namespace el { + @b time-spinner { + @e wrapper { + height: 190px; + overflow: hidden; + flex: 1; + vertical-align: top; + position: relative; + -ms-overflow-style: none; + + &:hover { + overflow-y: auto; + } + } + + @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: #E5E9F2; + cursor: pointer; + } + + &.active:not(.disabled) { + color: #fff; + } + + &.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 new file mode 100644 index 000000000..9e988ff28 --- /dev/null +++ b/packages/theme-default/src/date-picker/year-table.css @@ -0,0 +1,35 @@ +@import "../common/var.css"; + +@component-namespace el { + @b year-table { + font-size: 12px; + margin: -1px; + + .el-icon { + color: var(--datepicker-icon-color); + } + + td { + text-align: center; + padding: 20px 3px; + cursor: pointer; + + .cell { + width: 48px; + height: 32px; + display: block; + line-height: 32px; + color: var(--datepicker-color); + } + + &.available .cell:hover { + background-color: var(--datepicker-cell-hover-color); + } + + &.current .cell { + background-color: var(--datepicker-active-color) !important; + color: #fff; + } + } + } +} \ No newline at end of file diff --git a/packages/theme-default/src/dialog.css b/packages/theme-default/src/dialog.css new file mode 100755 index 000000000..d98418e60 --- /dev/null +++ b/packages/theme-default/src/dialog.css @@ -0,0 +1,107 @@ +@charset "UTF-8"; +@import "./common/var.css"; +@import "vue-popup/lib/popup.css"; + +@component-namespace el { + + @b dialog { + position: absolute; + left: 50%; + transform: translateX(-50%); + background: #fff; + border-radius: var(--border-radius-small); + box-shadow: var(--dialog-box-shadow); + box-sizing: border-box; + + @modifier tiny { + width: var(--dialog-tiny-width); + } + + @modifier small { + width: var(--dialog-small-width); + } + + @modifier large { + width: var(--dialog-large-width); + } + + @modifier full { + width: 100%; + top: 0; + height: 100%; + overflow: auto; + } + + @e wrapper { + position: fixed 0 0 0 0; + overflow: auto; + margin: 0; + } + + @e header { + padding: 20px 20px 0; + } + + @e close { + cursor: pointer; + color: var(--dialog-close-color); + + &:hover { + color: var(--dialog-close-hover-color); + } + } + + @e title { + line-height: 1; + font-size: var(--dialog-title-font-size); + font-weight: bold; + color: #1f2d3d; + } + + @e body { + padding: 30px 20px; + color: #475669; + font-size: var(--dialog-font-size); + } + + @e headerbtn { + float: right; + } + + @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 new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/dropdown-menu.css b/packages/theme-default/src/dropdown-menu.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/dropdown.css b/packages/theme-default/src/dropdown.css new file mode 100644 index 000000000..7b839336b --- /dev/null +++ b/packages/theme-default/src/dropdown.css @@ -0,0 +1,65 @@ +@charset "UTF-8"; +@import "./common/var.css"; +@import "./button.css"; + +@component-namespace el { + @b dropdown { + display: inline-block; + position: relative; + color: #475669; + font-size: var(--font-size-base); + + .el-button-group { + display: block; + } + + @e menu{ + margin: 5px 0; + background-color: #fff; + border: 1px solid #D3DCE6; + box-shadow: var(--dropdown-menu-box-shadow); + padding: 6px 0; + z-index: 10; + position: absolute; + top: 0; + left: 0; + min-width: 100px; + + & li { + list-style: none; + line-height: 36px; + padding: 0 10px; + margin: 0; + cursor: pointer; + + &:hover { + background-color: var(--dropdown-menuItem-hover-fill); + color: var(--dropdown-menuItem-hover-color); + } + &.divider { + margin-top: 6px; + border-top: 1px solid #D3DCE6; + } + &.divider:last-child { + margin-bottom: -6px; + } + } + } + & .el-dropdown__caret-button { + padding: * 5px; + + & .el-dropdown__icon { + padding-left: 0; + } + } + @e icon { + font-size: 12px; + margin: 0 3px; + } + @m text { + .el-button--text { + padding: 0; + } + } + } +} diff --git a/packages/theme-default/src/fonts/element-icons.eot b/packages/theme-default/src/fonts/element-icons.eot new file mode 100644 index 0000000000000000000000000000000000000000..ef3c80bfd89a81d9a0fea0fa10ff2c17ccb1bc34 GIT binary patch literal 13524 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 G$o~U=VVzt6 literal 0 HcmV?d00001 diff --git a/packages/theme-default/src/fonts/element-icons.svg b/packages/theme-default/src/fonts/element-icons.svg new file mode 100644 index 000000000..d59c78da9 --- /dev/null +++ b/packages/theme-default/src/fonts/element-icons.svg @@ -0,0 +1,146 @@ + + + + +Created by FontForge 20120731 at Tue Sep 6 12:16:07 2016 + By admin + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/theme-default/src/fonts/element-icons.ttf b/packages/theme-default/src/fonts/element-icons.ttf new file mode 100644 index 0000000000000000000000000000000000000000..9c1b720057b90619c4d176c51d4655241d6fbe0e GIT binary patch literal 13248 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 literal 0 HcmV?d00001 diff --git a/packages/theme-default/src/fonts/element-icons.woff b/packages/theme-default/src/fonts/element-icons.woff new file mode 100644 index 0000000000000000000000000000000000000000..2bbd019f86b1ca03d86da1937b9b0875ac167659 GIT binary patch literal 8004 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 TSZf2mM%0568V~@|u($jl7?i}s literal 0 HcmV?d00001 diff --git a/packages/theme-default/src/form-item.css b/packages/theme-default/src/form-item.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/form.css b/packages/theme-default/src/form.css new file mode 100644 index 000000000..1bb37fb12 --- /dev/null +++ b/packages/theme-default/src/form.css @@ -0,0 +1,84 @@ +@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; + padding: 0 0 10px 0; + } + } + @m inline { + & .el-form-item { + display: inline-block; + margin-right: 10px; + vertical-align: top; + } + } + } + @b form-item { + margin-bottom: 22px; + @utils-clearfix; + + & .el-form-item { + margin-bottom: 0; + + & .el-form-item__content { + margin-left: 0 !important; + } + } + + @e label { + text-align: right; + vertical-align: middle; + float: left; + font-size: 14px; + color: #5e6d82; + 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: #ff4949; + font-size: 12px; + line-height: 1; + padding-top: 4px; + position: absolute; + top: 100%; + left: 0; + } + & .el-button + .el-button, + & .el-checkbox + .el-checkbox, + & .el-radio + .el-radio { + margin-left: 10px; + } + + @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); + } + } + } +} diff --git a/packages/theme-default/src/icon.css b/packages/theme-default/src/icon.css new file mode 100644 index 000000000..bd2428cc3 --- /dev/null +++ b/packages/theme-default/src/icon.css @@ -0,0 +1,86 @@ +@font-face { + font-family: 'element-icons'; + src:url('fonts/element-icons.eot?t=1472440741'), /* IE9*/ + url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */ + url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */ + 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-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 new file mode 100644 index 000000000..df2aac229 --- /dev/null +++ b/packages/theme-default/src/index.css @@ -0,0 +1,42 @@ +@import "./base.css"; +@import "./button.css"; +@import "./input.css"; +@import "./select.css"; +@import "./alert.css"; +@import "./notification.css"; +@import "./slider.css"; +@import "./checkbox.css"; +@import "./radio.css"; +@import "./switch.css"; +@import "./dropdown.css"; +@import "./dropdown-menu.css"; +@import "./loading.css"; +@import "./dialog.css"; +@import "./table.css"; +@import "./table-column.css"; +@import "./pagination.css"; +@import "./popover.css"; +@import "./tooltip.css"; +@import "./autocomplete.css"; +@import "./message.css"; +@import "./message-box.css"; +@import "./date-picker.css"; +@import "./time-picker.css"; +@import "./time-select.css"; +@import "./input-number.css"; +@import "./tag.css"; +@import "./breadcrumb.css"; +@import "./form.css"; +@import "./tabs.css"; +@import "./progress.css"; +@import "./tree.css"; +@import "./menu.css"; +@import "./upload.css"; +@import "./row.css"; +@import "./col.css"; +@import "./spinner.css"; +@import "./badge.css"; +@import "./card.css"; +@import "./rate.css"; +@import "./steps.css"; +@import "./step.css"; diff --git a/packages/theme-default/src/input-number.css b/packages/theme-default/src/input-number.css new file mode 100644 index 000000000..45054a72a --- /dev/null +++ b/packages/theme-default/src/input-number.css @@ -0,0 +1,86 @@ +@charset "UTF-8"; +@import "./input.css"; +@import "./common/var.css"; + +@component-namespace el { + @b input-number { + display: inline-block; + overflow: hidden; + width: 180px; + position: relative; + + & .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: #99A9BF; + cursor: pointer; + position: absolute; + + &:hover { + color: var(--color-primary); + } + + @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: var(--input-large-height); + 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: var(--input-small-height); + 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); + } + } + } +} diff --git a/packages/theme-default/src/input.css b/packages/theme-default/src/input.css new file mode 100644 index 000000000..2708e8073 --- /dev/null +++ b/packages/theme-default/src/input.css @@ -0,0 +1,220 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b input { + position: relative; + font-size: var(--font-size-base); + + @e inner { + display: block; + padding: 3px 10px; + box-sizing: border-box; + width: 100%; + height: var(--input-height); + color: var(--input-color); + background-color: #fff; + background-image: none; + border: var(--input-border); + border-radius: 4px; + transition: var(--border-transition-base); + outline: none; + line-height: normal; + + &::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; + text-align: center; + color: var(--input-icon-color); + + &:after { + content: ''; + height: 100%; + width: 0; + display: inline-block; + vertical-align: middle; + } + + & + .el-input__inner { + padding-right: 35px; + } + } + + @when active { + .el-input__inner { + outline: none; + border-color: var(--input-focus-border); + } + } + + @when disabled { + .el-input__inner { + background-color: var(--disabled-fill-base); + border-color: var(--disabled-border-base); + color: var(--disabled-color-base); + cursor: not-allowed; + + &::placeholder { + color: var(--input-disabled-placeholder-color); + } + } + } + + .el-icon-loading { + animation: validating-rotating 1s linear infinite; + } + @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 { + display: table; + border-collapse: separate; + + & > .el-input__inner { + vertical-align: middle; + display: table-cell; + } + @e append, prepend { + background-color: #f9fafc; + color: #99a9bf; + vertical-align: middle; + display: table-cell; + position: relative; + border: var(--border-base); + border-radius: 4px; + padding: 0 10px; + width: 1%; + white-space: nowrap; + + & .el-select, + & .el-button { + display: block; + margin: -10px; + } + + & .el-button, + & .el-select .el-input__inner, + & .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; + } + & .el-input__inner:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + & .el-input__inner:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + & .el-input__inner:not(:first-child):not(:last-child) { + border-radius: 0; + } + } + + @b textarea { + + @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: #fff; + background-image: none; + border: var(--input-border); + border-radius: 4px; + 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(--disabled-fill-base); + border-color: var(--disabled-border-base); + color: var(--disabled-color-base); + cursor: not-allowed; + + &::placeholder { + color: var(--input-disabled-placeholder-color); + } + } + } + } +} + +@keyframes validating-rotating { + 0% { + transform: translate(0, -50%) rotateZ(0deg); + } + 100% { + transform: translate(0, -50%) rotateZ(360deg); + } +} diff --git a/packages/theme-default/src/loading.css b/packages/theme-default/src/loading.css new file mode 100644 index 000000000..5a71bc893 --- /dev/null +++ b/packages/theme-default/src/loading.css @@ -0,0 +1,44 @@ +.el-loading-spinner { + height: 12px; + width: 60px; + top: 50%; + left: 50%; + font-size: 0; + text-align: center; + margin-top: -6px; + margin-left: -30px; + z-index: 10001; +} + +.el-loading-bubble { + height: 12px; + width: 12px; + background-color: #fff; + margin: 0 3px; + border-radius: 50%; + display: inline-block; + animation: 1s cubic-bezier(.2,.68,.18,1.08) infinite both bubble-pulse; +} + +.el-loading-bubble.bubble1 { + animation-delay: .16s; +} + +.el-loading-bubble.bubble2 { + animation-delay: .32s; +} + +.el-loading-bubble.bubble3 { + animation-delay: .48s; +} + +@keyframes bubble-pulse { + 0%, 80% { + transform: scale(1); + opacity: 1; + } + 45% { + transform: scale(0); + opacity: 0; + } +} \ No newline at end of file diff --git a/packages/theme-default/src/menu-item-group.css b/packages/theme-default/src/menu-item-group.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/menu-item.css b/packages/theme-default/src/menu-item.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/menu.css b/packages/theme-default/src/menu.css new file mode 100644 index 000000000..3bc891f11 --- /dev/null +++ b/packages/theme-default/src/menu.css @@ -0,0 +1,214 @@ +@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: #c0ccda; + + &:hover { + background-color: #475669; + } + } + + & .el-submenu .el-menu { + background-color: #1f2f3d; + + & .el-menu-item:hover { + background-color: #475669; + } + } + } + @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; + + &: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 #d3dce6; + padding: 5px 0; + background-color: #fff; + 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: #fff; + float: none; + height: 36px; + line-height: 36px; + padding: 0 10px; + } + + & .el-submenu__icon-arrow { + position: static; + vertical-align: middle; + margin-left: 5px; + color: #99a9bf; + 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: #475669; + + &:hover { + background-color: #d3dce6; + } + } + .el-menu-item.is-active { + color: var(--color-primary); + } + } + } + } + } + @b menu-item { + @extend menu-item; + + & [class^="el-icon-"] { + vertical-align: baseline; + margin-right: 10px; + } + &:first-child { + margin-left: 0; + } + &:last-child { + margin-right: 0; + } + &:hover { + background-color: #d3dce6; + } + @when active { + color: var(--color-primary); + } + } + + @b submenu { + @e title { + position: relative; + @extend menu-item; + + &:hover { + background-color: #d3dce6; + } + } + & .el-menu { + background-color: #e5e9f2; + } + & .el-menu-item { + height: 50px; + line-height: 50px; + padding: 0 45px; + + &:hover { + background-color: #d3dce6; + } + } + @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__icon-arrow { + transform: rotateZ(180deg); + } + } + [class^="el-icon-"] { + vertical-align: baseline; + margin-right: 10px; + } + } + + @b menu-item-group { + > ul { + padding: 0; + } + @e title { + padding-top: 15px; + line-height: normal; + font-size: 14px; + padding-left: 20px; + color: #99a9bf; + } + } +} diff --git a/packages/theme-default/src/message-box.css b/packages/theme-default/src/message-box.css new file mode 100644 index 000000000..21d62ce95 --- /dev/null +++ b/packages/theme-default/src/message-box.css @@ -0,0 +1,149 @@ +@charset "UTF-8"; +@import "./common/var.css"; +@import "./button.css"; +@import "./input.css"; +@import "vue-popup/lib/popup.css"; + +@component-namespace el { + + @b message-box { + position: fixed; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + background-color: #fff; + width: var(--msgbox-width); + border-radius: var(--msgbox-border-radius); + font-size: var(--msgbox-font-size); + -webkit-user-select: none; + overflow: hidden; + backface-visibility: hidden; + + @e header { + padding: 20px 20px 0; + } + + @e content { + padding: 30px 20px; + color: var(--msgbox-content-color); + font-size: var(--msgbox-content-font-size); + position: relative; + } + + @e close { + display: inline-block; + position: absolute; + top: 19px; + right: 20px; + color: #999; + cursor: pointer; + line-height: 20px; + text-align: center; + + &:hover { + color: var(--color-primary); + } + } + + @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(-50%, calc(-50% - 20px), 0); + opacity: 0; + } + 100% { + transform: translate3d(-50%, -50%, 0); + opacity: 1; + } +} + +@keyframes msgbox-fade-out { + 0% { + transform: translate3d(-50%, -50%, 0); + opacity: 1; + } + 100% { + transform: translate3d(-50%, calc(-50% - 20px), 0); + opacity: 0; + } +} diff --git a/packages/theme-default/src/message.css b/packages/theme-default/src/message.css new file mode 100644 index 000000000..3899245ed --- /dev/null +++ b/packages/theme-default/src/message.css @@ -0,0 +1,75 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + + @b message { + box-shadow: var(--message-shadow); + min-width: var(--message-min-width); + padding: var(--message-padding); + box-sizing: border-box; + border-radius: var(--border-radius-small); + position: fixed; + left: 50%; + top: 20px; + transform: translateX(-50%); + background-color: #fff; + transition: opacity 0.3s, transform .4s; + overflow: hidden; + z-index: var(--index-popper); + + @e group { + margin-left: 38px; + position: relative; + + & p { + font-size: var(--font-size-base); + line-height: 20px; + margin: 0 34px 0 0; + white-space: nowrap; + color: var(--message-content-color); + text-align: justify; + } + } + + @e icon { + size: 40px; + position: absolute; + left: 0; + top: 0; + } + + @e closeBtn { + position: absolute 3px 0 * *; + 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 new file mode 100644 index 000000000..55288e9e4 --- /dev/null +++ b/packages/theme-default/src/mixins/_button.css @@ -0,0 +1,49 @@ +@define-mixin button-variant $color, $background-color, $border-color { + color: $color; + background-color: $background-color; + border-color: $border-color; + + &:hover { + 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 { + background: #fff; + border-color: $border-color; + color: $background-color; + } + + &:active { + background: #fff; + 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 new file mode 100644 index 000000000..b6952c296 --- /dev/null +++ b/packages/theme-default/src/notification.css @@ -0,0 +1,78 @@ +@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; + right: 16px; + background-color: #fff; + box-shadow: var(--notification-shadow); + transition: opacity 0.3s, transform .3s, right .3s, top 0.4s; + overflow: hidden; + z-index: var(--index-popper); + + @e group { + & span { + font-size: var(--notification-title-font-size); + color: var(--notification-title-color); + } + + & p { + font-size: var(--notification-font-size); + line-height: 21px; + margin: 10px 0 0 0; + color: var(--notification-color); + text-align: justify; + } + } + + @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 { + transform: translateX(100%); + right: 0; + } + + .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 new file mode 100644 index 000000000..9682c160c --- /dev/null +++ b/packages/theme-default/src/option-group.css @@ -0,0 +1,28 @@ +@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 new file mode 100644 index 000000000..a0b9eb5fe --- /dev/null +++ b/packages/theme-default/src/option.css @@ -0,0 +1,47 @@ +@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 { + 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 new file mode 100644 index 000000000..e2ca22d5d --- /dev/null +++ b/packages/theme-default/src/pagination.css @@ -0,0 +1,203 @@ +@charset "UTF-8"; +@import "./select.css"; +@import "./common/var.css"; + +@component-namespace el { + @b pagination { + white-space: nowrap; + padding: 2px 5px; + background: var(--pagination-fill); + color: var(--pagination-color); + + 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; + } + } + + 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; + 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; + + &::-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; + + 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; + + &: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 new file mode 100644 index 000000000..ff0b99434 --- /dev/null +++ b/packages/theme-default/src/popover.css @@ -0,0 +1,120 @@ +@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 new file mode 100644 index 000000000..c9e6ba896 --- /dev/null +++ b/packages/theme-default/src/progress.css @@ -0,0 +1,119 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b progress { + position: relative; + line-height: 1; + + @e text { + font-size:14px; + color:#475669; + 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: #e5e9f2; + 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; + + @utils-vertical-center; + } + @e innerText { + display: inline-block; + vertical-align: middle; + color: #fff; + font-size: 12px; + margin: 0 5px; + } + } +} + +@keyframes progress { + 0% { + background-position: 0 0; + } + 100% { + background-position: 32px 0; + } +} diff --git a/packages/theme-default/src/radio-button.css b/packages/theme-default/src/radio-button.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/radio-group.css b/packages/theme-default/src/radio-group.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/radio.css b/packages/theme-default/src/radio.css new file mode 100644 index 000000000..a48b28efe --- /dev/null +++ b/packages/theme-default/src/radio.css @@ -0,0 +1,211 @@ +@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; + + & + .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; + } + @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; + + &:not(.is-disabled):hover { + border-color: var(--radio-input-border-color-hover); + } + + &::after { + circle: 6px #fff; + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0); + transition: transform .15s cubic-bezier(.71,-.46,.88,.6); + } + + @when disabled { + 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; + } + } + + @when checked { + border-color: var(--radio-checked-input-border-color); + background: var(--radio-checked-icon-color); + + &::after { + transform: translate(-50%, -50%) scale(1); + } + } + + @when focus { + border-color: var(--radio-input-border-color-hover); + } + + &.is-disabled.is-checked { + 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); + } + } + } + + @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; + } + } + + @b radio-group { + display: inline-block; + font-size: 0; + + & .el-radio { + font-size: var(--radio-font-size); + } + + } + @b radio-button { + position: relative; + overflow: hidden; + 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); + 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(--border-transition-base), var(--color-transition-base); + @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 orig-radio { + opacity: 0; + outline: none; + position: absolute; + z-index: -1; + left: -999px; + + &:checked { + & + .el-radio-button__inner { + z-index: 1; + color: var(--color-primary); + border-color: @color; + } + } + + &:disabled { + & + .el-radio-button__inner { + z-index: -1; + color: var(--button-disabled-color); + cursor: not-allowed; + background-image: none; + background-color: var(--button-disabled-fill); + border-color: var(--button-disabled-border); + } + } + } + + &:not(:last-child) { + margin-right: -1px; + } + &:first-child { + .el-radio-button__inner { + border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); + } + } + &:last-child { + .el-radio-button__inner { + border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; + } + } + @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/rate.css b/packages/theme-default/src/rate.css new file mode 100644 index 000000000..7f08c3e4e --- /dev/null +++ b/packages/theme-default/src/rate.css @@ -0,0 +1,46 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + + @b rate { + height: var(--rate-height); + @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/row.css b/packages/theme-default/src/row.css new file mode 100644 index 000000000..062ab1116 --- /dev/null +++ b/packages/theme-default/src/row.css @@ -0,0 +1,39 @@ +@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/select-dropdown.css b/packages/theme-default/src/select-dropdown.css new file mode 100644 index 000000000..2c0ce7c39 --- /dev/null +++ b/packages/theme-default/src/select-dropdown.css @@ -0,0 +1,55 @@ +@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; + } + } + } + } + + @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__list { + list-style: none; + padding: var(--select-dropdown-padding); + margin: 0; + width: 100%; + max-height: var(--select-dropdown-max-height); + box-sizing: border-box; + overflow-y: auto; + } +} diff --git a/packages/theme-default/src/select.css b/packages/theme-default/src/select.css new file mode 100644 index 000000000..f42d20968 --- /dev/null +++ b/packages/theme-default/src/select.css @@ -0,0 +1,137 @@ +@charset "UTF-8"; +@import "./common/var.css"; +@import "./select-dropdown.css"; +@import "./input.css"; +@import "./tag.css"; +@import "./option.css"; +@import "./option-group.css"; + +@component-namespace el { + + @b select { + display: block; + position: relative; + + @when small { + & input { + border-radius: var(--border-radius-small); + height: 28px; + } + } + + &:hover { + .el-input__inner { + border-color: var(--select-border-color-hover); + } + } + + & .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); + } + } + } + + & .el-input__inner { + cursor: pointer; + + &:focus { + border-color: var(--select-input-focus-background); + } + } + + &.is-disabled { + & .el-input__inner { + cursor: not-allowed; + + &:hover { + border-color: var(--select-disabled-border); + } + } + } + } + + @e input { + border: none; + outline: none; + padding: 0; + margin: 4px 0 -3px 10px; + color: var(--select-multiple-input-color); + font-size: var(--select-font-size); + vertical-align: baseline; + appearance: none; + height: 28px; + background-color: transparent; + } + + @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-top); + } + + & .el-tag__close { + margin-top: -2px; + } + + & .el-tag { + height: var(--select-tag-height); + line-height: var(--select-tag-height); + box-sizing: border-box; + margin: 6px 0 0 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 new file mode 100644 index 000000000..f8141892c --- /dev/null +++ b/packages/theme-default/src/slider.css @@ -0,0 +1,142 @@ +@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: 7px; + } + + @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; + + .el-tooltip { + line-height: 1; + height: 100%; + display: block; + } + + .el-tooltip::after { + content: ''; + width: 0; + height: 100%; + display: inline-block; + vertical-align: middle; + } + + .el-tooltip__rel { + vertical-align: middle; + } + + &: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; + + &: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%); + } + } +} diff --git a/packages/theme-default/src/spinner.css b/packages/theme-default/src/spinner.css new file mode 100644 index 000000000..40ed622b3 --- /dev/null +++ b/packages/theme-default/src/spinner.css @@ -0,0 +1,46 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b time-spinner { + display: flex; + width: 100%; + } + + @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 new file mode 100644 index 000000000..2e47b3ef3 --- /dev/null +++ b/packages/theme-default/src/step.css @@ -0,0 +1,204 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b step { + position: relative; + vertical-align: top; + + @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: #c0ccda; + + @when icon { + @when horizontal { + right: 4px; + } + } + + @when horizontal { + top: 15px; + height: 2px; + left: 30px; + right: 0; + } + + @when vertical { + width: 2px; + box-sizing: border-box; + top: 30px; + bottom: 0; + } + } + + @e line-inner { + display: inherit; + border-width: 1px; + border-style: solid; + border-color: inherit; + transition: all 150ms; + 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: #fff; + background-color: #c0ccda; + border-color: #c0ccda; + } + + @when wait { + color: #c0ccda; + background-color: #fff; + border-color: #c0ccda; + } + + @when success { + color: #fff; + background-color: #13ce66; + border-color: #13ce66; + } + + @when error { + color: #fff; + background-color: #ff4949; + border-color: #ff4949; + } + + @when finish { + color: #fff; + background-color: #20a0ff; + border-color: #20a0ff; + } + } + + @when process { + color: #c0ccda; + border-color: #c0ccda; + } + + @when wait { + color: #c0ccda; + border-color: #c0ccda; + } + + @when success { + color: #13ce66; + border-color: #13ce66; + } + + @when error { + color: #ff4949; + border-color: #ff4949; + } + + @when finish { + color: #20a0ff; + border-color: #20a0ff; + } + } + + @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: #475669; + } + + @when wait { + font-weight: normal; + color: #99a9bf; + } + + @when success { + font-weight: 700; + color: #13ce66; + } + + @when error { + font-weight: 700; + color: #ff4949; + } + + @when finish { + font-weight: 700; + color: #20a0ff; + } + } + + @e description { + font-size: 12px; + font-weight: normal; + line-height: 14px; + + @when process { + color: #8492a6; + } + + @when wait { + color: #c0ccda; + } + + @when success { + color: #13ce66; + } + + @when error { + color: #ff4949; + } + + @when finish { + color: #20a0ff; + } + } + } +} diff --git a/packages/theme-default/src/steps.css b/packages/theme-default/src/steps.css new file mode 100644 index 000000000..a2e841b1b --- /dev/null +++ b/packages/theme-default/src/steps.css @@ -0,0 +1,16 @@ +@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; + } + } +} diff --git a/packages/theme-default/src/submenu.css b/packages/theme-default/src/submenu.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css new file mode 100644 index 000000000..e2630d825 --- /dev/null +++ b/packages/theme-default/src/switch.css @@ -0,0 +1,119 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + + @b switch { + display: inline-block; + position: relative; + font-size: var(--switch-font-size); + @when disabled { + & .el-switch__core, + & .el-switch__label { + cursor: not-allowed; + } + } + + @e label { + transition: .2s; + position: absolute; + z-index: 10; + size: var(--switch-size); + left: 0; + top: 0; + display: inline-block; + font-size: var(--switch-font-size); + cursor: pointer; + user-select: none; + @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 { + &:checked + .el-switch__core { + border-color: var(--switch-on-color); + background-color: var(--switch-on-color); + } + } + + @e core { + margin: 0; + display: inline-block; + vertical-align: middle; + position: relative; + size: var(--switch-size); + 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); + z-index: 20; + background-color: var(--color-white); + } + } + + @when disabled { + .el-switch__core { + border-color: var(--switch-disabled-color); + background: var(--switch-disabled-color); + + & span { + background-color: var(--switch-disabled-text-color); + } + + & ~ .el-switch__label * { + color: var(--switch-disabled-text-color); + } + } + + .el-switch__input:checked + .el-switch__core { + border-color: var(--switch-disabled-color); + background-color: var(--switch-disabled-color); + } + } + + @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 new file mode 100644 index 000000000..e69de29bb diff --git a/packages/theme-default/src/table-column.css b/packages/theme-default/src/table-column.css new file mode 100644 index 000000000..f367c8f3e --- /dev/null +++ b/packages/theme-default/src/table-column.css @@ -0,0 +1,85 @@ +@charset "UTF-8"; +@import "./checkbox.css"; +@import "./tag.css"; +@import "./common/var.css"; + +@component-namespace el { + @b table-filter { + border: solid 1px #d3dce6; + border-radius: 2px; + background-color: #fff; + 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: #20a0ff; + color: #fff; + } + } + + @e content { + min-width: 100px; + } + + @e bottom { + border-top: 1px solid #d3dce6; + padding: 8px; + + button { + background: transparent; + border: none; + color: #8492a6; + cursor: pointer; + font-size: var(--font-size-base); + padding: 0 3px; + + &:hover { + color: #20a0ff; + } + + &:focus { + outline: none; + } + + &.is-disabled { + color: #c0ccda; + cursor: not-allowed; + } + } + } + + @e checkbox-group { + padding: 10px; + + .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 new file mode 100644 index 000000000..b69cde133 --- /dev/null +++ b/packages/theme-default/src/table.css @@ -0,0 +1,365 @@ +@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: #fff; + border-collapse: collapse; + 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 { + display: block; + } + + .el-tooltip__rel { + display: block; + + .cell > * { + white-space: nowrap; + } + } + + @e empty-block { + display: table; + min-height: 60px; + text-align: center; + width: 100%; + height: 100%; + } + + @e empty-text { + display: table-cell; + vertical-align: middle; + color: #5e6d82; + } + + @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; + border-bottom: 1px solid var(--table-border-color); + + @when center { + text-align: center; + } + + @when left { + text-align: left; + } + + @when right { + text-align: right; + } + } + + @modifier border { + & th, td { + border-right: 1px solid var(--table-border-color); + } + } + + & 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 { + top: 0; + left: auto; + right: 0; + + box-shadow: -1px 0 8px #d3d4d6; + + .el-table__fixed-header-wrapper, .el-table__fixed-body-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-body-wrapper { + position: absolute; + left: 0; + top: 37px; + overflow: hidden; + z-index: 3; + } + + @e header-wrapper, body-wrapper { + width: 100%; + } + + @e header, body { + table-layout: fixed; + } + + @e header-wrapper { + overflow: hidden; + + & thead div { + background-color: var(--table-header-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: 20px; + vertical-align: middle; + width: 100%; + box-sizing: border-box; + + &.highlight { + color: #20a0ff; + } + } + + & .caret-wrapper { + position: relative; + cursor: pointer; + display: inline-block; + vertical-align: middle; + margin-left: 5px; + margin-top: -2px; + width: 16px; + height: 34px; + overflow: initial; + } + + & .sort-caret { + display: inline-block; + width: 0; + height: 0; + border: 0; + content: ""; + position: absolute; + left: 3px; + z-index: 2; + + &.ascending { + top: 11px; + border-top: none; + border-right: 5px solid transparent; + border-bottom: 5px solid #99a9bf; + border-left: 5px solid transparent; + } + + &.descending { + bottom: 11px; + border-top: 5px solid #99a9bf; + border-right: 5px solid transparent; + border-bottom: none; + border-left: 5px solid transparent; + } + } + + & .ascending .sort-caret.ascending { + border-bottom-color: #475669; + } + + & .descending .sort-caret.descending { + border-top-color: #475669; + } + + & 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; + line-height: 24px; + padding-left: 18px; + padding-right: 18px; + } + + & tr input[type="checkbox"] { + margin: 0; + } + + & tr { + background-color: #fff; + } + + @modifier striped { + & .el-table__body { + & tr:nth-child(2n) { + background: #FAFAFA; + + &.current-row { + background: #EFF7FF; + } + } + } + } + + @e body { + tr { + transition: background-color .25s ease-in-out; + } + + tr.current-row { + background: #eff7ff; + } + } + + @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: #99a9bf; + } + } + } +} + +.el-table .el-table__body tr.hover-row { + background-color: #eff2f7; +} diff --git a/packages/theme-default/src/tabs.css b/packages/theme-default/src/tabs.css new file mode 100644 index 000000000..0c03a36df --- /dev/null +++ b/packages/theme-default/src/tabs.css @@ -0,0 +1,238 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b tabs { + display: inline-block; + + @e header { + border-bottom: 1px solid #d3dce6; + padding: 0; + position: relative; + margin: 0 0 15px; + @utils-clearfix; + } + @e active-bar { + position: absolute; + bottom: -1px; + 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 item { + padding: 0 16px; + height: 42px; + box-sizing: border-box; + line-height: @height; + float: left; + list-style: none; + font-size: 14px; + color: #8492a6; + margin-bottom: -1px; + position: relative; + + @when active { + color: var(--color-primary); + } + + &:hover { + color: #1f2d3d; + cursor: pointer; + } + } + @e content { + white-space: nowrap; + overflow: hidden; + position: relative; + } + @m card { + .el-tabs__active-bar { + display: none; + } + & .el-icon-close { + font-size: 12px; + vertical-align: middle; + line-height: 15px; + overflow: hidden; + width: 0; + height: 14px; + border-radius: 50%; + text-align: center; + transform-origin: 100% 50%; + transition: all .3s cubic-bezier(.645,.045,.355,1); + position: relative; + top: -1px; + right: -2px; + + &:before { + transform: scale(.7, .7); + display: inline-block; + } + + &:hover { + background-color: #99a9bf; + color: #fff; + } + } + .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 #d3dce6; + border-bottom-color: #fff; + border-radius: 4px 4px 0 0; + + &.is-closable { + padding: * 16px; + + .el-icon-close { + width: 14px; + } + } + } + } + } + @m border-card { + background: #fff; + border: 1px solid #d3dce6; + 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: #eff2f7; + margin: 0; + } + .el-tabs__item { + transition: all .3s cubic-bezier(.645,.045,.355,1); + border: 1px solid transparent; + border-top: 0; + margin: * -1px; + + &.is-active { + background-color: #fff; + border-right-color: #d3dce6; + border-left-color: #d3dce6; + + &:first-child { + border-left-color: #d3dce6; + } + &:last-child { + border-right-color: #d3dce6; + } + } + + } + } + } + @b tab-pane { + width: 100%; + display: inline-block; + } +} + +.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 new file mode 100644 index 000000000..504dfd43f --- /dev/null +++ b/packages/theme-default/src/tag.css @@ -0,0 +1,92 @@ +@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: 22px; + line-height: @height; + font-size: var(--tag-font-size); + color: var(--tag-color); + border-radius: var(--tag-border-radius); + border: 1px solid var(--tag-border); + + @when hit { + border-color: var(--tag-primary-color); + } + + & .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: #fff; + color: var(--tag-fill); + } + } + + @m gray { + background-color: var(--tag-gray-fill); + border-color: var(--tag-gray-border); + color: var(--tag-gray-color); + + & .el-tag__close:hover { + background-color: var(--tag-gray-color); + color: #fff; + } + } + @m primary { + background-color: var(--tag-primary-fill); + border-color: var(--tag-primary-border); + color: var(--tag-primary-color); + + & .el-tag__close:hover { + background-color: var(--tag-primary-color); + color: #fff; + } + } + @m success { + background-color: var(--tag-success-fill); + border-color: var(--tag-success-border); + color: var(--tag-success-color); + + & .el-tag__close:hover { + background-color: var(--tag-success-color); + color: #fff; + } + } + @m warning { + background-color: var(--tag-warning-fill); + border-color: var(--tag-warning-border); + color: var(--tag-warning-color); + + & .el-tag__close:hover { + background-color: var(--tag-warning-color); + color: #fff; + } + } + @m danger { + background-color: var(--tag-danger-fill); + border-color: var(--tag-danger-border); + color: var(--tag-danger-color); + + & .el-tag__close:hover { + background-color: var(--tag-danger-color); + color: #fff; + } + } + } +} diff --git a/packages/theme-default/src/time-picker.css b/packages/theme-default/src/time-picker.css new file mode 100644 index 000000000..f7769050c --- /dev/null +++ b/packages/theme-default/src/time-picker.css @@ -0,0 +1,3 @@ +@import "./date-picker/picker.css"; +@import "./date-picker/time-spinner.css"; +@import "./date-picker/time-picker.css"; diff --git a/packages/theme-default/src/time-select.css b/packages/theme-default/src/time-select.css new file mode 100644 index 000000000..407a20812 --- /dev/null +++ b/packages/theme-default/src/time-select.css @@ -0,0 +1,42 @@ +@import "./date-picker/picker.css"; +@import "./date-picker/date-picker.css"; +@import "./common/var.css"; + +.time-select { + margin: 5px 0; + min-width: 0; +} + +.time-select .el-picker-panel__content { + max-height: 200px; + overflow: hidden; + margin: 0; + + &:hover { + overflow-y: auto; + } +} + +.time-select-item { + padding: 8px 10px; + font-size: 14px; +} + +.time-select-item.selected:not(.disabled) { + background-color: var(--datepicker-active-color); + color: #fff; + + &:hover { + background-color: #1d8ce0; + } +} + +.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 new file mode 100644 index 000000000..b2dfca68f --- /dev/null +++ b/packages/theme-default/src/tooltip.css @@ -0,0 +1,145 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b tooltip { + display: inline-block; + + @e rel { + display: inline-block; + position: relative; + } + + @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/tree.css b/packages/theme-default/src/tree.css new file mode 100644 index 000000000..2a5dbcb88 --- /dev/null +++ b/packages/theme-default/src/tree.css @@ -0,0 +1,92 @@ +@charset "UTF-8"; +@import "./common/var.css"; + +@component-namespace el { + @b tree { + cursor: default; + background: #ffffff; + border: 1px solid #d3dce6; + } + + @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: #e5e9f2; + } + } + + @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: #99a9bf; + 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: 14px; + vertical-align: middle; + display: inline-block; + } + + @e icon { + display: inline-block; + vertical-align: middle; + font-size: 14px; + color: #99a9bf; + } + + & > .el-tree-node__children { + overflow: hidden; + background-color: transparent; + /** padding-left: 16px; */ + display: none; + } + + &.expanded > .el-tree-node__children { + display: block; + } + } +} + +.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { + background-color: #eff7ff; +} + +.collapse-transition { + transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; +} diff --git a/packages/theme-default/src/upload.css b/packages/theme-default/src/upload.css new file mode 100644 index 000000000..026a35a80 --- /dev/null +++ b/packages/theme-default/src/upload.css @@ -0,0 +1,265 @@ +@charset "UTF-8"; +@import "./progress.css"; +@import "./common/var.css"; + +@component-namespace el { + @b upload { + width: 360px; + + @e input { + display: none; + } + @e inner { + display: inline-block; + position: relative; + + & iframe { + position: absolute; + z-index: -1; + top: 0; + left: 0; + opacity: 0; + filter: alpha(opacity=0); + } + } + @e files { + margin: 0; + padding: 0; + list-style: none; + margin-bottom: 10px; + } + @e file { + transition: all .5s cubic-bezier(.55,0,.1,1); + font-size: 14px; + color: #475669; + line-height: 32px; + position: relative; + box-sizing: border-box; + border-radius: 4px; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + position: relative; + + a { + color: #475669; + transition: color .3s; + padding-left: 4px; + + [class^="el-icon"] { + color: #99a9bf; + margin-right: 7px; + height: 100%; + line-height: inherit; + } + } + & .el-progress { + position: absolute; + bottom: -3px; + width: 100%; + } + & .el-progress__text { + position: absolute; + right: 0; + top: -10px; + right: 0; + } + .el-progress-bar { + margin-right: 0; + padding-right: 0; + } + &:hover { + background-color: #eff2f7; + } + @when finished { + & a:hover { + color: var(--link-hover-color); + cursor: pointer; + } + &:hover { + .el-upload__btn-delete { + display: block; + cursor: pointer; + } + } + } + } + @e tip { + font-size: 12px; + color: #8492a6; + margin-top: 7px; + } + @e btn-delete { + position: absolute; + right: 15px; + top: 0; + font-size: 12px; + color: var(--color-primary); + display: none; + } + } + @b dragger { + background-color: #f9fafc; + border: 1px solid #c0ccda; + box-sizing: border-box; + width: 360px; + height: 180px; + border-radius: 4px; + text-align: center; + cursor: pointer; + position: relative; + overflow: hidden; + + & .el-upload__inner { + display: block; + height: 100%; + } + & .el-icon-upload { + font-size: 67px; + color: #99a9bf; + margin: 40px 0 16px; + line-height: 50px; + } + + & + .el-upload__tip { + text-align: center; + } + & ~ .el-upload__files { + margin-top: 7px; + padding-top: 5px; + border-top: 1px solid rgba(#c0ccda, .2); + } + + @e 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: auto; + } + + @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: #fff; + 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: #fff; + display: block; + font-size: 24px; + line-height: inherit; + margin: 0 auto 5px; + } + } + } + + @e title { + position: absolute; + bottom: 0; + left: 0; + background-color: #fff; + 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: #475669; + } + + & + .el-upload__inner { + opacity: 0; + position: relative; + z-index: 1; + } + } + + @e text { + color: #99a9bf; + font-size: 14px; + text-align: center; + + & em { + color: var(--color-primary); + font-style: normal; + } + } + + &:not(.is-showCover):hover { + border-color: var(--color-primary); + } + + @when dragOver { + background-color: rgba(32, 159, 255, .06); + border: 2px dashed var(--color-primary); + } + } +}