diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index bfb41275f..eba933692 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -33,6 +33,7 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡 ## 开发环境搭建 首先你需要 Node.js 4+ 和 NPM 3+ ```shell +git clone git@github.com:ElemeFE/element.git --recursive npm run dev # open http://localhost:8085 diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 000000000..2600d332d --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "packages/theme-default"] + path = packages/theme-default + url = https://github.com/ElementUI/theme-default diff --git a/package.json b/package.json index 49dc697b3..b3eb54012 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ ], "scripts": { "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js", - "dev": "npm install && npm run build:file && cooking watch -c build/cooking.demo.js -p", + "dev": "npm run bootstrap && npm install && npm run build:file && cooking watch -c build/cooking.demo.js -p", "dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:theme", "dist:all": "node build/bin/build-all.js && npm run build:theme", - "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default", + "build:theme": "git submodule update --remote && node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default", "deploy": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui", "pub": "sh build/release.sh", "pub:all": "npm run dist:all && lerna publish", @@ -21,7 +21,8 @@ "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage", "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet", "test:watch": "karma start test/unit/karma.conf.js", - "test": "npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run" + "bootstrap": "cd packages/theme-default && npm i --production && cd ../..", + "test": "npm run bootstrap && npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run" }, "repository": { "type": "git", diff --git a/packages/theme-default b/packages/theme-default new file mode 160000 index 000000000..1d92c70ea --- /dev/null +++ b/packages/theme-default @@ -0,0 +1 @@ +Subproject commit 1d92c70ea7e47432fb81021d10d142b37fe3e104 diff --git a/packages/theme-default/README.md b/packages/theme-default/README.md deleted file mode 100644 index 7c214858d..000000000 --- a/packages/theme-default/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# element-theme-default -> element component defualt theme. - -## 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 deleted file mode 100644 index 5856951b2..000000000 --- a/packages/theme-default/gulpfile.js +++ /dev/null @@ -1,37 +0,0 @@ -'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 deleted file mode 100644 index be02878cf..000000000 --- a/packages/theme-default/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "element-theme-default", - "version": "1.0.0", - "description": "Element component default theme.", - "main": "lib/index.css", - "files": [ - "lib", - "src" - ], - "scripts": { - "build": "postcss -c postcss.conf.js" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/element-component/element-theme-default.git" - }, - "keywords": [ - "element", - "theme" - ], - "author": "haiping.zeng ", - "license": "MIT", - "bugs": { - "url": "https://github.com/element-component/element-theme-default/issues" - }, - "homepage": "https://github.com/element-component/element-theme-default#readme", - "devDependencies": { - "gulp": "^3.9.1", - "gulp-cssmin": "^0.1.7", - "gulp-postcss": "^6.1.1", - "postcss-salad": "^1.0.5" - } -} diff --git a/packages/theme-default/src/alert.css b/packages/theme-default/src/alert.css deleted file mode 100644 index a5ce5b8ef..000000000 --- a/packages/theme-default/src/alert.css +++ /dev/null @@ -1,86 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b alert { - width: 100%; - padding: var(--alert-padding); - margin: 0; - box-sizing: border-box; - border-radius: var(--alert-border-radius); - position: relative; - background-color: var(--color-white); - overflow: hidden; - color: #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 deleted file mode 100644 index b81ee9641..000000000 --- a/packages/theme-default/src/autocomplete.css +++ /dev/null @@ -1,74 +0,0 @@ -@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 deleted file mode 100644 index 1ee409e7f..000000000 --- a/packages/theme-default/src/badge.css +++ /dev/null @@ -1,40 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b badge { - position: relative; - vertical-align: middle; - display: inline-block; - - @e content { - background-color: var(--badge-fill); - border-radius: var(--badge-radius); - color: #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 deleted file mode 100644 index d5da9e9e1..000000000 --- a/packages/theme-default/src/base.css +++ /dev/null @@ -1,2 +0,0 @@ -@import "./common/transition.css"; -@import "./icon.css"; diff --git a/packages/theme-default/src/breadcrumb-item.css b/packages/theme-default/src/breadcrumb-item.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/breadcrumb.css b/packages/theme-default/src/breadcrumb.css deleted file mode 100644 index bc0631e6f..000000000 --- a/packages/theme-default/src/breadcrumb.css +++ /dev/null @@ -1,45 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b breadcrumb { - font-size:13px; - line-height: 1; - @utils-clearfix; - - @e separator { - margin: 0 8px; - color: #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 deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/button.css b/packages/theme-default/src/button.css deleted file mode 100644 index 0fb24a53e..000000000 --- a/packages/theme-default/src/button.css +++ /dev/null @@ -1,186 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; -@import './mixins/button'; - -@component-namespace el { - @b button { - display: inline-block; - line-height: 1; - white-space: nowrap; - cursor: pointer; - background: var(--button-default-fill); - border: var(--border-base); - 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 deleted file mode 100644 index c080c43cd..000000000 --- a/packages/theme-default/src/card.css +++ /dev/null @@ -1,23 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b card { - border: 1px solid var(--card-border-color); - border-radius: var(--card-border-radius); - background-color: #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 deleted file mode 100644 index a79fe34e2..000000000 --- a/packages/theme-default/src/cascader.css +++ /dev/null @@ -1,45 +0,0 @@ -@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 deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/checkbox.css b/packages/theme-default/src/checkbox.css deleted file mode 100644 index ca9fadcbf..000000000 --- a/packages/theme-default/src/checkbox.css +++ /dev/null @@ -1,137 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b checkbox { - color: var(--checkbox-color); - position: relative; - cursor: pointer; - display: inline-block; - white-space: nowrap; - @utils-user-select none; - - @e input { - white-space: nowrap; - cursor: pointer; - outline: none; - display: inline-block; - line-height: 1; - position: relative; - vertical-align: middle; - } - @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 deleted file mode 100644 index d15eeb4b8..000000000 --- a/packages/theme-default/src/col.css +++ /dev/null @@ -1,24 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -.el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 { - float: left; - box-sizing: border-box; -} - -@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 deleted file mode 100644 index bc522d3ff..000000000 --- a/packages/theme-default/src/common/transition.css +++ /dev/null @@ -1,113 +0,0 @@ -@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 deleted file mode 100644 index c37796b7c..000000000 --- a/packages/theme-default/src/common/var.css +++ /dev/null @@ -1,527 +0,0 @@ -: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; -} diff --git a/packages/theme-default/src/core/dropdown.css b/packages/theme-default/src/core/dropdown.css deleted file mode 100644 index 15a045db2..000000000 --- a/packages/theme-default/src/core/dropdown.css +++ /dev/null @@ -1,45 +0,0 @@ -@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 deleted file mode 100644 index 1630321ee..000000000 --- a/packages/theme-default/src/core/input.css +++ /dev/null @@ -1,55 +0,0 @@ -@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 deleted file mode 100644 index dde059657..000000000 --- a/packages/theme-default/src/core/option.css +++ /dev/null @@ -1,72 +0,0 @@ -@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 deleted file mode 100644 index 2fc4aabf5..000000000 --- a/packages/theme-default/src/core/tag.css +++ /dev/null @@ -1,29 +0,0 @@ -@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 deleted file mode 100644 index 3854024fc..000000000 --- a/packages/theme-default/src/date-picker.css +++ /dev/null @@ -1,8 +0,0 @@ -@import "./date-picker/date-table.css"; -@import "./date-picker/month-table.css"; -@import "./date-picker/year-table.css"; -@import "./date-picker/time-spinner.css"; -@import "./date-picker/picker.css"; -@import "./date-picker/date-picker.css"; -@import "./date-picker/date-range-picker.css"; -@import "./date-picker/time-range-picker.css"; diff --git a/packages/theme-default/src/date-picker/date-picker.css b/packages/theme-default/src/date-picker/date-picker.css deleted file mode 100644 index 2f385f169..000000000 --- a/packages/theme-default/src/date-picker/date-picker.css +++ /dev/null @@ -1,103 +0,0 @@ -@import "./vars.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 deleted file mode 100644 index f09f70145..000000000 --- a/packages/theme-default/src/date-picker/date-range-picker.css +++ /dev/null @@ -1,129 +0,0 @@ -@import './vars.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 deleted file mode 100644 index abe8e527e..000000000 --- a/packages/theme-default/src/date-picker/date-table.css +++ /dev/null @@ -1,75 +0,0 @@ -@import "./vars.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 deleted file mode 100644 index 760e4616f..000000000 --- a/packages/theme-default/src/date-picker/month-table.css +++ /dev/null @@ -1,31 +0,0 @@ -@import "./vars.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 deleted file mode 100644 index 99740e66b..000000000 --- a/packages/theme-default/src/date-picker/picker-panel.css +++ /dev/null @@ -1,113 +0,0 @@ -@import './vars.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 deleted file mode 100644 index 2115ea85d..000000000 --- a/packages/theme-default/src/date-picker/picker.css +++ /dev/null @@ -1,123 +0,0 @@ -@import "./vars.css"; -@import "../../../theme-default/src/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 deleted file mode 100644 index 5da9fa10f..000000000 --- a/packages/theme-default/src/date-picker/time-picker.css +++ /dev/null @@ -1,78 +0,0 @@ -@import "./vars.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 deleted file mode 100644 index a0c1da36b..000000000 --- a/packages/theme-default/src/date-picker/time-range-picker.css +++ /dev/null @@ -1,34 +0,0 @@ -@import './vars.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 deleted file mode 100644 index 786a414d9..000000000 --- a/packages/theme-default/src/date-picker/time-spinner.css +++ /dev/null @@ -1,53 +0,0 @@ -@import "./vars.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/vars.css b/packages/theme-default/src/date-picker/vars.css deleted file mode 100644 index 3e5fa2e29..000000000 --- a/packages/theme-default/src/date-picker/vars.css +++ /dev/null @@ -1,14 +0,0 @@ -:root { - --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; -} \ No newline at end of file diff --git a/packages/theme-default/src/date-picker/year-table.css b/packages/theme-default/src/date-picker/year-table.css deleted file mode 100644 index ec0fce46d..000000000 --- a/packages/theme-default/src/date-picker/year-table.css +++ /dev/null @@ -1,35 +0,0 @@ -@import "./vars.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 deleted file mode 100755 index 7bdf1e2b2..000000000 --- a/packages/theme-default/src/dialog.css +++ /dev/null @@ -1,107 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; -@import '../../../node_modules/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 deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/dropdown-menu.css b/packages/theme-default/src/dropdown-menu.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/dropdown.css b/packages/theme-default/src/dropdown.css deleted file mode 100644 index 7b839336b..000000000 --- a/packages/theme-default/src/dropdown.css +++ /dev/null @@ -1,65 +0,0 @@ -@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 deleted file mode 100644 index ef3c80bfd..000000000 Binary files a/packages/theme-default/src/fonts/element-icons.eot and /dev/null differ diff --git a/packages/theme-default/src/fonts/element-icons.svg b/packages/theme-default/src/fonts/element-icons.svg deleted file mode 100644 index d59c78da9..000000000 --- a/packages/theme-default/src/fonts/element-icons.svg +++ /dev/null @@ -1,146 +0,0 @@ - - - - -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 deleted file mode 100644 index 9c1b72005..000000000 Binary files a/packages/theme-default/src/fonts/element-icons.ttf and /dev/null differ diff --git a/packages/theme-default/src/fonts/element-icons.woff b/packages/theme-default/src/fonts/element-icons.woff deleted file mode 100644 index 2bbd019f8..000000000 Binary files a/packages/theme-default/src/fonts/element-icons.woff and /dev/null differ diff --git a/packages/theme-default/src/form-item.css b/packages/theme-default/src/form-item.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/form.css b/packages/theme-default/src/form.css deleted file mode 100644 index 1bb37fb12..000000000 --- a/packages/theme-default/src/form.css +++ /dev/null @@ -1,84 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b form { - @m label-left { - & .el-form-item__label { - text-align: left; - } - } - @m label-top { - & .el-form-item__label { - float: none; - display: inline-block; - 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 deleted file mode 100644 index bd2428cc3..000000000 --- a/packages/theme-default/src/icon.css +++ /dev/null @@ -1,86 +0,0 @@ -@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 deleted file mode 100644 index df2aac229..000000000 --- a/packages/theme-default/src/index.css +++ /dev/null @@ -1,42 +0,0 @@ -@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 deleted file mode 100644 index 45054a72a..000000000 --- a/packages/theme-default/src/input-number.css +++ /dev/null @@ -1,86 +0,0 @@ -@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 deleted file mode 100644 index 2708e8073..000000000 --- a/packages/theme-default/src/input.css +++ /dev/null @@ -1,220 +0,0 @@ -@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 deleted file mode 100644 index 5a71bc893..000000000 --- a/packages/theme-default/src/loading.css +++ /dev/null @@ -1,44 +0,0 @@ -.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 deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/menu-item.css b/packages/theme-default/src/menu-item.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/menu.css b/packages/theme-default/src/menu.css deleted file mode 100644 index d402ea25c..000000000 --- a/packages/theme-default/src/menu.css +++ /dev/null @@ -1,214 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@define-extend menu-item { - height: 56px; - line-height: 56px; - font-size: 14px; - color: var(--menu-item-color); - padding: 0 20px; - cursor: pointer; - position: relative; - transition: border-color .3s, background-color .3s, color .3s; - box-sizing: border-box; - white-space: nowrap; -} - -@component-namespace el { - @b menu { - border-radius: 2px; - list-style: none; - position: relative; - margin: 0; - padding-left: 0; - background-color: var(--menu-item-fill); - @utils-clearfix; - - & li { - list-style: none; - } - - @m dark { - background-color: var(--dark-menu-item-fill); - - & .el-menu-item, - & .el-submenu__title { - color: #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: 1; - 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 deleted file mode 100644 index 7b683667d..000000000 --- a/packages/theme-default/src/message-box.css +++ /dev/null @@ -1,149 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; -@import "./button.css"; -@import "./input.css"; -@import '../../../node_modules/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 deleted file mode 100644 index 3899245ed..000000000 --- a/packages/theme-default/src/message.css +++ /dev/null @@ -1,75 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b message { - box-shadow: var(--message-shadow); - min-width: var(--message-min-width); - 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 deleted file mode 100644 index 55288e9e4..000000000 --- a/packages/theme-default/src/mixins/_button.css +++ /dev/null @@ -1,49 +0,0 @@ -@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 deleted file mode 100644 index b6952c296..000000000 --- a/packages/theme-default/src/notification.css +++ /dev/null @@ -1,78 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b notification { - width: var(--notification-width); - padding: var(--notification-padding); - box-sizing: border-box; - border-radius: var(--border-radius-small); - position: fixed; - 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 deleted file mode 100644 index 9682c160c..000000000 --- a/packages/theme-default/src/option-group.css +++ /dev/null @@ -1,28 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b select-group { - margin: 0; - padding: 0; - - @e wrap { - list-style: none; - margin: 0; - padding: 0; - } - - @e title { - padding-left: 10px; - font-size: var(--select-group-font-size); - color: var(--select-group-color); - height: var(--select-group-height); - line-height: var(--select-group-height); - } - - & .el-select-dropdown__item { - padding-left: 20px; - } - } -} diff --git a/packages/theme-default/src/option.css b/packages/theme-default/src/option.css deleted file mode 100644 index a0b9eb5fe..000000000 --- a/packages/theme-default/src/option.css +++ /dev/null @@ -1,47 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b select-dropdown { - @e item { - font-size: var(--select-font-size); - padding: 8px 10px; - position: relative; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: var(--select-option-color); - height: var(--select-option-height); - line-height: 1.5; - box-sizing: border-box; - cursor: pointer; - - @when disabled { - color: var(--select-option-disabled-color); - cursor: not-allowed; - - &:hover { - background-color: var(--color-white); - } - } - - &.hover { - background-color: var(--select-option-hover-background); - } - - &.selected { - color: var(--color-white); - background-color: var(--select-option-selected); - - &.hover { - background-color: var(--select-option-selected-hover); - } - } - - & span { - line-height: 1.5 !important; - } - } - } -} diff --git a/packages/theme-default/src/pagination.css b/packages/theme-default/src/pagination.css deleted file mode 100644 index e2ca22d5d..000000000 --- a/packages/theme-default/src/pagination.css +++ /dev/null @@ -1,203 +0,0 @@ -@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 deleted file mode 100644 index ff0b99434..000000000 --- a/packages/theme-default/src/popover.css +++ /dev/null @@ -1,120 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b popover { - position: absolute; - background: var(--popover-fill); - min-width: 150px; - border-radius: 2px; - border: 1px solid var(--popover-border-color); - padding: var(--popover-padding); - z-index: var(--index-popper); - font-size: var(--popover-font-size); - box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12), - 0px 0px 6px 0px rgba(0, 0, 0, .04); - - .popper__arrow, - .popper__arrow::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - } - - .popper__arrow { - border-width: var(--popover-arrow-size); - } - - .popper__arrow::after { - content: " "; - border-width: var(--popover-arrow-size); - } - - &[x-placement^="top"] { - margin-bottom: calc(var(--popover-arrow-size) + 6); - } - - &[x-placement^="top"] .popper__arrow { - bottom: -var(--popover-arrow-size); - left: 50%; - margin-right: calc(var(--tooltip-arrow-size) / 2); - border-top-color: var(--popover-border-color); - border-bottom-width: 0; - - &::after { - bottom: 1px; - margin-left: -var(--popover-arrow-size); - border-top-color: var(--popover-fill); - border-bottom-width: 0; - } - } - - &[x-placement^="bottom"] { - margin-top: calc(var(--popover-arrow-size) + 6); - } - - &[x-placement^="bottom"] .popper__arrow { - top: -var(--popover-arrow-size); - left: 50%; - margin-right: calc(var(--tooltip-arrow-size) / 2); - border-top-width: 0; - border-bottom-color: var(--popover-border-color); - - &::after { - top: 1px; - margin-left: -var(--popover-arrow-size); - border-top-width: 0; - border-bottom-color: var(--popover-fill); - } - } - - &[x-placement^="right"] { - margin-left: calc(var(--popover-arrow-size) + 6); - } - - &[x-placement^="right"] .popper__arrow { - top: 50%; - left: -var(--popover-arrow-size); - margin-bottom: calc(var(--tooltip-arrow-size) / 2); - border-right-color: var(--popover-border-color); - border-left-width: 0; - - &::after { - bottom: -var(--popover-arrow-size); - left: 1px; - border-right-color: var(--popover-fill); - border-left-width: 0; - } - } - - &[x-placement^="left"] { - margin-right: calc(var(--popover-arrow-size) + 6); - } - - &[x-placement^="left"] .popper__arrow { - top: 50%; - right: -var(--popover-arrow-size); - margin-bottom: calc(var(--tooltip-arrow-size) / 2); - border-right-width: 0; - border-left-color: var(--popover-border-color); - - &::after { - right: 1px; - bottom: -var(--popover-arrow-size); - margin-left: -var(--popover-arrow-size); - border-right-width: 0; - border-left-color: var(--popover-fill); - } - } - - @e title { - color: var(--popover-title-color); - font-size: var(--popover-title-font-size); - line-height: 1; - margin-bottom: 9px; - } - } -} diff --git a/packages/theme-default/src/progress.css b/packages/theme-default/src/progress.css deleted file mode 100644 index c9e6ba896..000000000 --- a/packages/theme-default/src/progress.css +++ /dev/null @@ -1,119 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b progress { - position: relative; - line-height: 1; - - @e text { - font-size:14px; - color:#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 deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/radio-group.css b/packages/theme-default/src/radio-group.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/radio.css b/packages/theme-default/src/radio.css deleted file mode 100644 index a48b28efe..000000000 --- a/packages/theme-default/src/radio.css +++ /dev/null @@ -1,211 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; -@import './mixins/button'; - -@component-namespace el { - - @b radio { - color: var(--radio-color); - position: relative; - cursor: pointer; - display: inline-block; - white-space: nowrap; - @utils-user-select none; - - & + .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 deleted file mode 100644 index 7f08c3e4e..000000000 --- a/packages/theme-default/src/rate.css +++ /dev/null @@ -1,46 +0,0 @@ -@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 deleted file mode 100644 index 062ab1116..000000000 --- a/packages/theme-default/src/row.css +++ /dev/null @@ -1,39 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b row { - position: relative; - box-sizing: border-box; - @utils-clearfix; - - @m flex { - display: flex; - &:before, - &:after { - display: none; - } - - @when justify-center { - justify-content: center; - } - @when justify-end { - justify-content: flex-end; - } - @when justify-space-between { - justify-content: space-between; - } - @when justify-space-around { - justify-content: space-around; - } - - @when align-middle { - align-items: center; - } - @when align-bottom { - align-items: flex-end; - } - } - - } -} diff --git a/packages/theme-default/src/select-dropdown.css b/packages/theme-default/src/select-dropdown.css deleted file mode 100644 index 2c0ce7c39..000000000 --- a/packages/theme-default/src/select-dropdown.css +++ /dev/null @@ -1,55 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b select-dropdown { - position: absolute; - z-index: 1001; - border: var(--select-dropdown-border); - border-radius: var(--border-radius-small); - background-color: var(--select-dropdown-background); - box-shadow: var(--select-dropdown-shadow); - box-sizing: border-box; - margin: 5px 0; - - @when multiple { - & .el-select-dropdown__item.selected { - color: var(--select-option-selected); - background-color: var(--select-dropdown-background); - - &.hover { - background-color: var(--select-option-hover-background); - } - - &::after { - position: absolute; - right: 10px; - font-family: 'element-icons'; - content: "\E608"; - font-size: 11px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - } - } - } - - @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 deleted file mode 100644 index f42d20968..000000000 --- a/packages/theme-default/src/select.css +++ /dev/null @@ -1,137 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; -@import "./select-dropdown.css"; -@import "./input.css"; -@import "./tag.css"; -@import "./option.css"; -@import "./option-group.css"; - -@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 deleted file mode 100644 index f8141892c..000000000 --- a/packages/theme-default/src/slider.css +++ /dev/null @@ -1,142 +0,0 @@ -@charset "UTF-8"; -@import "./input-number.css"; -@import "./tooltip.css"; -@import "./common/var.css"; - -@component-namespace el { - @b slider { - @utils-clearfix; - @e runway { - width: 100%; - height: var(--slider-height); - margin: var(--slider-margin); - background-color: var(--slider-runway-background-color); - border-radius: var(--slider-border-radius); - position: relative; - cursor: pointer; - vertical-align: middle; - - &.show-input { - margin-right: 160px; - width: auto; - } - - &.disabled { - cursor: default; - - .el-slider__bar, .el-slider__button { - background-color: var(--slider-disable-color); - } - - .el-slider__button-wrapper { - &:hover, - &.hover { - cursor: not-allowed; - } - - &.dragging { - cursor: not-allowed; - } - } - - .el-slider__button { - &:hover, - &.hover, - &.dragging { - transform: scale(1); - } - - &:hover, - &.hover { - cursor: not-allowed; - } - - &.dragging { - cursor: not-allowed; - } - } - } - } - - @e input { - float: right; - margin-top: 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 deleted file mode 100644 index 40ed622b3..000000000 --- a/packages/theme-default/src/spinner.css +++ /dev/null @@ -1,46 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b time-spinner { - 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 deleted file mode 100644 index 2e47b3ef3..000000000 --- a/packages/theme-default/src/step.css +++ /dev/null @@ -1,204 +0,0 @@ -@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 deleted file mode 100644 index a2e841b1b..000000000 --- a/packages/theme-default/src/steps.css +++ /dev/null @@ -1,16 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - @b steps { - font-size: 0; - - > :last-child .el-step__line { - display: none; - } - - @when horizontal { - white-space: nowrap; - } - } -} diff --git a/packages/theme-default/src/submenu.css b/packages/theme-default/src/submenu.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css deleted file mode 100644 index e2630d825..000000000 --- a/packages/theme-default/src/switch.css +++ /dev/null @@ -1,119 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b switch { - display: inline-block; - position: relative; - font-size: var(--switch-font-size); - @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 deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme-default/src/table-column.css b/packages/theme-default/src/table-column.css deleted file mode 100644 index f367c8f3e..000000000 --- a/packages/theme-default/src/table-column.css +++ /dev/null @@ -1,85 +0,0 @@ -@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 deleted file mode 100644 index 9cc183127..000000000 --- a/packages/theme-default/src/table.css +++ /dev/null @@ -1,365 +0,0 @@ -@charset "UTF-8"; -@import "./checkbox.css"; -@import "./tag.css"; -@import "./common/var.css"; - -@component-namespace el { - - @b table { - position: relative; - overflow: hidden; - box-sizing: border-box; - width: 100%; - max-width: 100%; - background-color: #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.hidden, th.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 deleted file mode 100644 index 0c03a36df..000000000 --- a/packages/theme-default/src/tabs.css +++ /dev/null @@ -1,238 +0,0 @@ -@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 deleted file mode 100644 index 504dfd43f..000000000 --- a/packages/theme-default/src/tag.css +++ /dev/null @@ -1,92 +0,0 @@ -@charset "UTF-8"; -@import "./common/var.css"; - -@component-namespace el { - - @b tag { - background-color: var(--tag-fill); - display: inline-block; - padding: var(--tag-padding); - height: 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 deleted file mode 100644 index f7769050c..000000000 --- a/packages/theme-default/src/time-picker.css +++ /dev/null @@ -1,3 +0,0 @@ -@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 deleted file mode 100644 index c2a5e3e4c..000000000 --- a/packages/theme-default/src/time-select.css +++ /dev/null @@ -1,42 +0,0 @@ -@import "./date-picker/picker.css"; -@import "./date-picker/date-picker.css"; -@import "./date-picker/vars.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 deleted file mode 100644 index b2dfca68f..000000000 --- a/packages/theme-default/src/tooltip.css +++ /dev/null @@ -1,145 +0,0 @@ -@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 deleted file mode 100644 index 2a5dbcb88..000000000 --- a/packages/theme-default/src/tree.css +++ /dev/null @@ -1,92 +0,0 @@ -@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 deleted file mode 100644 index 026a35a80..000000000 --- a/packages/theme-default/src/upload.css +++ /dev/null @@ -1,265 +0,0 @@ -@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); - } - } -}