├── src ├── form-item.css ├── menu-item.css ├── submenu.css ├── tab-pane.css ├── breadcrumb-item.css ├── button-group.css ├── checkbox-button.css ├── checkbox-group.css ├── collapse-item.css ├── dropdown-item.css ├── dropdown-menu.css ├── menu-item-group.css ├── base.css ├── fonts │ ├── element-icons.ttf │ └── element-icons.woff ├── time-picker.css ├── radio-group.css ├── steps.css ├── date-picker.css ├── common │ ├── popup.css │ └── transition.css ├── option-group.css ├── core │ ├── tag.css │ ├── dropdown.css │ ├── input.css │ └── option.css ├── card.css ├── date-picker │ ├── time-range-picker.css │ ├── picker.css │ ├── month-table.css │ ├── year-table.css │ ├── time-spinner.css │ ├── date-picker.css │ ├── time-picker.css │ ├── date-table.css │ ├── date-range-picker.css │ └── picker-panel.css ├── row.css ├── time-select.css ├── spinner.css ├── breadcrumb.css ├── rate.css ├── badge.css ├── option.css ├── carousel-item.css ├── collapse.css ├── scrollbar.css ├── reset.css ├── mixins │ └── _button.css ├── select-dropdown.css ├── index.css ├── dropdown.css ├── loading.css ├── autocomplete.css ├── message.css ├── alert.css ├── notification.css ├── table-column.css ├── form.css ├── tree.css ├── dialog.css ├── col.css ├── input-number.css ├── progress.css ├── tag.css ├── icon.css ├── radio.css ├── radio-button.css ├── carousel.css ├── switch.css ├── popover.css ├── select.css ├── message-box.css ├── tooltip.css ├── transfer.css ├── cascader.css ├── step.css ├── pagination.css ├── slider.css ├── input.css ├── button.css ├── color-picker.css ├── menu.css ├── tabs.css ├── checkbox.css ├── table.css └── upload.css ├── .gitignore ├── salad.config.json ├── gulpfile.js ├── README.md └── package.json /src/form-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/menu-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/submenu.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tab-pane.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/breadcrumb-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/button-group.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/checkbox-button.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/checkbox-group.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/collapse-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/dropdown-item.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/dropdown-menu.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/menu-item-group.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | npm-debug* 4 | -------------------------------------------------------------------------------- /src/base.css: -------------------------------------------------------------------------------- 1 | @import "./common/transition.css"; 2 | @import "./icon.css"; 3 | -------------------------------------------------------------------------------- /src/fonts/element-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElementUI/theme-default/HEAD/src/fonts/element-icons.ttf -------------------------------------------------------------------------------- /src/fonts/element-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElementUI/theme-default/HEAD/src/fonts/element-icons.woff -------------------------------------------------------------------------------- /src/time-picker.css: -------------------------------------------------------------------------------- 1 | @import "./date-picker/picker.css"; 2 | @import "./date-picker/time-spinner.css"; 3 | @import "./date-picker/time-picker.css"; 4 | @import "./input.css"; 5 | @import "./scrollbar.css"; 6 | -------------------------------------------------------------------------------- /src/radio-group.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b radio-group { 6 | display: inline-block; 7 | font-size: 0; 8 | line-height: 1; 9 | vertical-align: middle; 10 | 11 | & .el-radio { 12 | font-size: var(--radio-font-size); 13 | } 14 | 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /salad.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "browsers": ["ie > 8", "last 2 versions"], 3 | "features": { 4 | "bem": { 5 | "shortcuts": { 6 | "component": "b", 7 | "modifier": "m", 8 | "descendent": "e" 9 | }, 10 | "separators": { 11 | "descendent": "__", 12 | "modifier": "--" 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/steps.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b steps { 6 | font-size: 0; 7 | 8 | > :last-child .el-step__line { 9 | display: none; 10 | } 11 | 12 | @when horizontal { 13 | white-space: nowrap; 14 | 15 | @when center { 16 | text-align: center; 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/date-picker.css: -------------------------------------------------------------------------------- 1 | @import "./date-picker/date-table.css"; 2 | @import "./date-picker/month-table.css"; 3 | @import "./date-picker/year-table.css"; 4 | @import "./date-picker/time-spinner.css"; 5 | @import "./date-picker/picker.css"; 6 | @import "./date-picker/date-picker.css"; 7 | @import "./date-picker/date-range-picker.css"; 8 | @import "./date-picker/time-range-picker.css"; 9 | @import "./date-picker/time-picker.css"; 10 | @import "./input.css"; 11 | @import "./scrollbar.css"; -------------------------------------------------------------------------------- /src/common/popup.css: -------------------------------------------------------------------------------- 1 | .v-modal-enter { 2 | animation: v-modal-in .2s ease; 3 | } 4 | 5 | .v-modal-leave { 6 | animation: v-modal-out .2s ease forwards; 7 | } 8 | 9 | @keyframes v-modal-in { 10 | 0% { 11 | opacity: 0; 12 | } 13 | 100% { 14 | } 15 | } 16 | 17 | @keyframes v-modal-out { 18 | 0% { 19 | } 20 | 100% { 21 | opacity: 0; 22 | } 23 | } 24 | 25 | .v-modal { 26 | position: fixed; 27 | left: 0; 28 | top: 0; 29 | width: 100%; 30 | height: 100%; 31 | opacity: 0.5; 32 | background: #000; 33 | } 34 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var postcss = require('gulp-postcss'); 5 | var cssmin = require('gulp-cssmin'); 6 | var salad = require('postcss-salad')(require('./salad.config.json')); 7 | 8 | gulp.task('compile', function() { 9 | return gulp.src('./src/*.css') 10 | .pipe(postcss([salad])) 11 | .pipe(cssmin()) 12 | .pipe(gulp.dest('./lib')); 13 | }); 14 | 15 | gulp.task('copyfont', function() { 16 | return gulp.src('./src/fonts/**') 17 | .pipe(cssmin()) 18 | .pipe(gulp.dest('./lib/fonts')); 19 | }); 20 | 21 | gulp.task('build', ['compile', 'copyfont']); 22 | -------------------------------------------------------------------------------- /src/option-group.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b select-group { 7 | margin: 0; 8 | padding: 0; 9 | 10 | @e wrap { 11 | list-style: none; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | @e title { 17 | padding-left: 10px; 18 | font-size: var(--select-group-font-size); 19 | color: var(--select-group-color); 20 | height: var(--select-group-height); 21 | line-height: var(--select-group-height); 22 | } 23 | 24 | & .el-select-dropdown__item { 25 | padding-left: 20px; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # element-theme-default 2 | > element component defualt theme. 3 | 4 | 5 | ## Installation 6 | ```shell 7 | npm i element-theme-default -S 8 | ``` 9 | 10 | ## Usage 11 | 12 | Use Sass Or postcss-import 13 | ```css 14 | @import 'element-theme-default'; 15 | ``` 16 | 17 | Or Use webpack 18 | ```javascript 19 | import 'element-theme-default'; 20 | ``` 21 | 22 | Or 23 | ```html 24 | 25 | ``` 26 | 27 | ## Import your need 28 | ```javascript 29 | import 'element-theme-default/lib/input.css'; 30 | import 'element-theme-default/lib/select.css'; 31 | 32 | // ... 33 | ``` 34 | -------------------------------------------------------------------------------- /src/core/tag.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "../common/var.css"; 3 | 4 | @component-namespace element-core { 5 | 6 | @b tag { 7 | background-color: var(--tag-fill); 8 | border: 0; 9 | border-radius: var(--tag-border-radius); 10 | color: var(--tag-color); 11 | height: 22px; 12 | margin: 1px; 13 | outline: 0; 14 | padding: 3px 16px 3px 3px; 15 | position: relative; 16 | 17 | @e button { 18 | color: var(--tag-close-color); 19 | cursor: pointer; 20 | line-height: 1; 21 | 22 | /* 增大可点击面积 */ 23 | padding: 5px; 24 | position: absolute; 25 | right: 0; 26 | top: 0; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/card.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b card { 6 | border: 1px solid var(--card-border-color); 7 | border-radius: var(--card-border-radius); 8 | background-color: var(--color-white); 9 | overflow: hidden; 10 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12), 11 | 0px 0px 6px 0px rgba(0, 0, 0, .04); 12 | 13 | @e header { 14 | padding: calc(var(--card-padding) - 2) var(--card-padding); 15 | border-bottom: 1px solid var(--card-border-color); 16 | box-sizing: border-box; 17 | } 18 | 19 | @e body { 20 | padding: var(--card-padding); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/date-picker/time-range-picker.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b time-range-picker { 5 | min-width: 354px; 6 | overflow: visible; 7 | 8 | @e content { 9 | position: relative; 10 | text-align: center; 11 | padding: 10px; 12 | } 13 | 14 | @e cell { 15 | box-sizing: border-box; 16 | margin: 0; 17 | padding: 4px 7px 7px; 18 | width: 50%; 19 | display: inline-block; 20 | } 21 | 22 | @e header { 23 | margin-bottom: 5px; 24 | text-align: center; 25 | font-size: 14px; 26 | } 27 | 28 | @e body { 29 | border-radius:2px; 30 | border: 1px solid var(--datepicker-border-color); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/date-picker/picker.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | @import "../common/transition.css"; 3 | 4 | @component-namespace el { 5 | @b date-editor { 6 | position: relative; 7 | display: inline-block; 8 | 9 | &.el-input { 10 | width: 193px; 11 | } 12 | 13 | @m daterange { 14 | &.el-input { 15 | width: 220px; 16 | } 17 | } 18 | 19 | @m datetimerange { 20 | &.el-input { 21 | width: 350px; 22 | } 23 | } 24 | 25 | .el-picker-panel { 26 | position: absolute; 27 | min-width: 180px; 28 | box-sizing: border-box; 29 | box-shadow: 0 2px 6px #ccc; 30 | background: var(--color-white); 31 | z-index: 10; 32 | top: 41px; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/row.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b row { 6 | position: relative; 7 | box-sizing: border-box; 8 | @utils-clearfix; 9 | 10 | @m flex { 11 | display: flex; 12 | &:before, 13 | &:after { 14 | display: none; 15 | } 16 | 17 | @when justify-center { 18 | justify-content: center; 19 | } 20 | @when justify-end { 21 | justify-content: flex-end; 22 | } 23 | @when justify-space-between { 24 | justify-content: space-between; 25 | } 26 | @when justify-space-around { 27 | justify-content: space-around; 28 | } 29 | 30 | @when align-middle { 31 | align-items: center; 32 | } 33 | @when align-bottom { 34 | align-items: flex-end; 35 | } 36 | } 37 | 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/time-select.css: -------------------------------------------------------------------------------- 1 | @import "./date-picker/picker.css"; 2 | @import "./date-picker/date-picker.css"; 3 | @import "./common/var.css"; 4 | @import "./scrollbar.css"; 5 | 6 | .time-select { 7 | margin: 5px 0; 8 | min-width: 0; 9 | } 10 | 11 | .time-select .el-picker-panel__content { 12 | max-height: 200px; 13 | margin: 0; 14 | } 15 | 16 | .time-select-item { 17 | padding: 8px 10px; 18 | font-size: 14px; 19 | } 20 | 21 | .time-select-item.selected:not(.disabled) { 22 | background-color: var(--datepicker-active-color); 23 | color: var(--color-white); 24 | 25 | &:hover { 26 | background-color: var(--color-primary); 27 | } 28 | } 29 | 30 | .time-select-item.disabled { 31 | color: var(--datepicker-border-color); 32 | cursor: not-allowed; 33 | } 34 | 35 | .time-select-item:hover { 36 | background-color: var(--datepicker-cell-hover-color); 37 | cursor: pointer; 38 | } 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "element-theme-default", 3 | "version": "1.4.13", 4 | "description": "Element component default theme.", 5 | "main": "lib/index.css", 6 | "style": "lib/index.css", 7 | "files": [ 8 | "lib", 9 | "src" 10 | ], 11 | "scripts": { 12 | "build": "gulp build" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/ElementUI/theme-default.git" 17 | }, 18 | "keywords": [ 19 | "element", 20 | "theme" 21 | ], 22 | "author": "haiping.zeng ", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/ElementUI/theme-default/issues" 26 | }, 27 | "homepage": "https://github.com/ElementUI/theme-default#readme", 28 | "devDependencies": { 29 | "gulp": "^3.9.1", 30 | "gulp-cssmin": "^0.1.7", 31 | "gulp-postcss": "^6.1.1", 32 | "postcss-salad": "^1.0.5" 33 | }, 34 | "dependencies": {} 35 | } 36 | -------------------------------------------------------------------------------- /src/date-picker/month-table.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b month-table { 5 | font-size: 12px; 6 | margin: -1px; 7 | border-collapse: collapse; 8 | 9 | td { 10 | text-align: center; 11 | padding: 20px 3px; 12 | cursor: pointer; 13 | 14 | &.disabled .cell { 15 | background-color: #f4f4f4; 16 | cursor: not-allowed; 17 | color: #ccc; 18 | } 19 | 20 | .cell { 21 | width: 48px; 22 | height: 32px; 23 | display: block; 24 | line-height: 32px; 25 | color: var(--datepicker-color); 26 | 27 | &:hover { 28 | background-color: var(--datepicker-cell-hover-color); 29 | } 30 | } 31 | 32 | &.current:not(.disabled) .cell { 33 | background-color: var(--datepicker-active-color) !important; 34 | color: var(--color-white); 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/spinner.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b time-spinner { 6 | width: 100%; 7 | white-space: nowrap; 8 | } 9 | 10 | @b spinner { 11 | display: inline-block; 12 | vertical-align: middle; 13 | } 14 | @b spinner-inner { 15 | animation: rotate 2s linear infinite; 16 | width: 50px; 17 | height: 50px; 18 | 19 | & .path { 20 | stroke: #ececec; 21 | stroke-linecap: round; 22 | animation: dash 1.5s ease-in-out infinite; 23 | } 24 | 25 | } 26 | } 27 | @keyframes rotate { 28 | 100% { 29 | transform: rotate(360deg); 30 | } 31 | } 32 | 33 | @keyframes dash { 34 | 0% { 35 | stroke-dasharray: 1, 150; 36 | stroke-dashoffset: 0; 37 | } 38 | 50% { 39 | stroke-dasharray: 90, 150; 40 | stroke-dashoffset: -35; 41 | } 42 | 100% { 43 | stroke-dasharray: 90, 150; 44 | stroke-dashoffset: -124; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/date-picker/year-table.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b year-table { 5 | font-size: 12px; 6 | margin: -1px; 7 | border-collapse: collapse; 8 | 9 | .el-icon { 10 | color: var(--datepicker-icon-color); 11 | } 12 | 13 | td { 14 | text-align: center; 15 | padding: 20px 3px; 16 | cursor: pointer; 17 | 18 | &.disabled .cell { 19 | background-color: #f4f4f4; 20 | cursor: not-allowed; 21 | color: #ccc; 22 | } 23 | 24 | .cell { 25 | width: 48px; 26 | height: 32px; 27 | display: block; 28 | line-height: 32px; 29 | color: var(--datepicker-color); 30 | 31 | &:hover { 32 | background-color: var(--datepicker-cell-hover-color); 33 | } 34 | } 35 | 36 | &.current:not(.disabled) .cell { 37 | background-color: var(--datepicker-active-color) !important; 38 | color: var(--color-white); 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/breadcrumb.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b breadcrumb { 7 | font-size:13px; 8 | line-height: 1; 9 | @utils-clearfix; 10 | 11 | @e separator { 12 | margin: 0 8px; 13 | color: var(--color-extra-light-silver); 14 | } 15 | @e item { 16 | float: left; 17 | 18 | @e inner { 19 | &, & a { 20 | transition: color .15s linear; 21 | color:var(--color-extra-light-black); 22 | 23 | &:hover { 24 | color: var(--color-primary); 25 | cursor: pointer; 26 | } 27 | } 28 | } 29 | 30 | &:last-child { 31 | .el-breadcrumb__item__inner, 32 | .el-breadcrumb__item__inner a { 33 | &, &:hover { 34 | color: var(--color-light-silver); 35 | cursor: text; 36 | } 37 | } 38 | 39 | .el-breadcrumb__separator { 40 | display: none; 41 | } 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/rate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b rate { 7 | height: var(--rate-height); 8 | line-height: 1; 9 | 10 | @e item { 11 | display: inline-block; 12 | position: relative; 13 | font-size: 0; 14 | vertical-align: middle; 15 | } 16 | 17 | @e icon { 18 | position: relative; 19 | display: inline-block; 20 | font-size: var(--rate-icon-size); 21 | margin-right: var(--rate-icon-margin); 22 | color: var(--rate-icon-color); 23 | transition: .3s; 24 | &.hover { 25 | transform: scale(1.15); 26 | } 27 | 28 | .path2 { 29 | position: absolute; 30 | left: 0; 31 | top: 0; 32 | } 33 | } 34 | 35 | @e decimal { 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | display: inline-block; 40 | overflow: hidden; 41 | } 42 | 43 | @e text { 44 | font-size: var(--rate-font-size); 45 | vertical-align: middle; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/badge.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b badge { 6 | position: relative; 7 | vertical-align: middle; 8 | display: inline-block; 9 | 10 | @e content { 11 | background-color: var(--badge-fill); 12 | border-radius: var(--badge-radius); 13 | color: var(--color-white); 14 | display: inline-block; 15 | font-size: var(--badge-font-size); 16 | height: var(--badge-size); 17 | line-height: var(--badge-size); 18 | padding: 0 var(--badge-padding); 19 | text-align: center; 20 | white-space: nowrap; 21 | border: 1px solid var(--color-white); 22 | 23 | @when fixed { 24 | position: absolute 0 calc(var(--badge-size) / 2 + 1) * *; 25 | transform: translateY(-50%) translateX(100%); 26 | 27 | @when dot { 28 | right: 5px; 29 | } 30 | } 31 | 32 | @when dot { 33 | size: 8px 8px; 34 | padding: 0; 35 | right: 0; 36 | border-radius: 50%; 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/core/dropdown.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "../common/var.css"; 3 | @import "./option.css"; 4 | 5 | @component-namespace element { 6 | 7 | @b dropdown { 8 | background-color: var(--dropdown-fill); 9 | border: var(--dropdown-border); 10 | border-radius: var(--dropdown-radius); 11 | box-shadow: var(--dropdown-shadow); 12 | left: 0; 13 | list-style-type: none; 14 | margin: -var(--dropdown-border-width); 15 | margin-top: 5px; 16 | min-width: calc(var(--input-width) + 4); 17 | padding: 0; 18 | position: absolute; 19 | white-space: nowrap; 20 | z-index: var(--index-normal); 21 | 22 | @e empty { 23 | color: var(--dropdown-option-empty-color); 24 | font-size: var(--input-font-size); 25 | padding: 7px; 26 | text-align: center; 27 | } 28 | 29 | @e list { 30 | margin: 0; 31 | max-height: var(--cascader-height); 32 | overflow: auto; 33 | padding: 0; 34 | } 35 | 36 | @e option { 37 | max-height: 250px; 38 | overflow: auto; 39 | } 40 | 41 | &:empty { 42 | display: none; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/option.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b select-dropdown { 7 | @e item { 8 | font-size: var(--select-font-size); 9 | padding: 8px 10px; 10 | position: relative; 11 | white-space: nowrap; 12 | overflow: hidden; 13 | text-overflow: ellipsis; 14 | color: var(--select-option-color); 15 | height: var(--select-option-height); 16 | line-height: 1.5; 17 | box-sizing: border-box; 18 | cursor: pointer; 19 | 20 | @when disabled { 21 | color: var(--select-option-disabled-color); 22 | cursor: not-allowed; 23 | 24 | &:hover { 25 | background-color: var(--color-white); 26 | } 27 | } 28 | 29 | &.hover, &:hover { 30 | background-color: var(--select-option-hover-background); 31 | } 32 | 33 | &.selected { 34 | color: var(--color-white); 35 | background-color: var(--select-option-selected); 36 | 37 | &.hover { 38 | background-color: var(--select-option-selected-hover); 39 | } 40 | } 41 | 42 | & span { 43 | line-height: 1.5 !important; 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/carousel-item.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b carousel { 7 | @e item { 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | width: 100%; 12 | height: 100%; 13 | display: inline-block; 14 | overflow: hidden; 15 | z-index: calc(var(--index-normal) - 1); 16 | 17 | @when active { 18 | z-index: calc(var(--index-normal) + 1); 19 | } 20 | 21 | @when animating { 22 | transition: transform .4s ease-in-out; 23 | } 24 | 25 | @modifier card { 26 | width: 50%; 27 | transition: transform .4s ease-in-out; 28 | &.is-in-stage { 29 | cursor: pointer; 30 | z-index: var(--index-normal); 31 | &:hover .el-carousel__mask, 32 | &.is-hover .el-carousel__mask { 33 | opacity: 0.12; 34 | } 35 | } 36 | &.is-active { 37 | z-index: calc(var(--index-normal) + 1); 38 | } 39 | } 40 | } 41 | 42 | @e mask { 43 | position: absolute; 44 | width: 100%; 45 | height: 100%; 46 | top: 0; 47 | left: 0; 48 | background-color: var(--color-white); 49 | opacity: 0.24; 50 | transition: .2s; 51 | } 52 | } 53 | } -------------------------------------------------------------------------------- /src/core/input.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "../common/var.css"; 3 | 4 | @component-namespace element-core { 5 | 6 | @b input { 7 | background-color: var(--input-fill); 8 | border: var(--input-border); 9 | border-radius: var(--input-border-radius); 10 | box-sizing: border-box; 11 | color: var(--input-color); 12 | cursor: text; 13 | display: inline-block; 14 | font-size: var(--input-font-size); 15 | min-height: var(--input-height); 16 | min-width: var(--input-width); 17 | padding: 2px; 18 | position: relative; 19 | vertical-align: middle; 20 | 21 | @when disabled { 22 | background-color: var(--input-fill-disabled); 23 | border-color: inherit; 24 | box-shadow: none; 25 | color: var(--input-color-disabled); 26 | cursor: not-allowed; 27 | } 28 | 29 | @when readonly { 30 | cursor: pointer; 31 | } 32 | 33 | @when multiple { 34 | cursor: text; 35 | } 36 | 37 | &:hover, 38 | &.is-active { 39 | border-color: var(--input-focus-border); 40 | box-shadow: var(--input-shadow-hover); 41 | } 42 | 43 | @e original { 44 | background-color: inherit; 45 | border: none; 46 | box-sizing: border-box; 47 | cursor: inherit; 48 | height: 100%; 49 | line-height: 1.2; 50 | outline: none; 51 | padding: 5px 7px; 52 | width: auto; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/date-picker/time-spinner.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b time-spinner { 5 | &.has-seconds { 6 | .el-time-spinner__wrapper { 7 | width: 33%; 8 | } 9 | 10 | .el-time-spinner__wrapper:nth-child(2) { 11 | margin-left: 1%; 12 | } 13 | } 14 | 15 | @e wrapper { 16 | max-height: 190px; 17 | overflow: auto; 18 | display: inline-block; 19 | width: 50%; 20 | vertical-align: top; 21 | position: relative; 22 | 23 | & .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { 24 | padding-bottom: 15px; 25 | } 26 | } 27 | 28 | @e list { 29 | padding: 0; 30 | margin: 0; 31 | list-style: none; 32 | text-align: center; 33 | 34 | &::after, 35 | &::before { 36 | content: ''; 37 | display: block; 38 | width: 100%; 39 | height: 80px; 40 | } 41 | } 42 | 43 | @e item { 44 | height: 32px; 45 | line-height: 32px; 46 | font-size: 12px; 47 | 48 | &:hover:not(.disabled):not(.active) { 49 | background: var(--datepicker-cell-hover-color); 50 | cursor: pointer; 51 | } 52 | 53 | &.active:not(.disabled) { 54 | color: var(--color-white); 55 | } 56 | 57 | &.disabled { 58 | color: var(--datepicker-border-color); 59 | cursor: not-allowed; 60 | } 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/collapse.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b collapse { 6 | border: 1px solid var(--collapse-border-color); 7 | border-radius: var(--collapse-border-radius); 8 | } 9 | @b collapse-item { 10 | @e header { 11 | height: var(--collapse-header-height); 12 | line-height: @height; 13 | padding-left: 15px; 14 | background-color: var(--collapse-header-fill); 15 | color: var(--collapse-header-color); 16 | cursor: pointer; 17 | border-bottom: 1px solid var(--collapse-border-color); 18 | font-size: var(--collapse-header-size); 19 | 20 | @e arrow { 21 | margin-right: 8px; 22 | transition: transform .3s; 23 | } 24 | } 25 | 26 | @e wrap { 27 | will-change: height; 28 | background-color: var(--collapse-content-fill); 29 | overflow: hidden; 30 | box-sizing: border-box; 31 | border-bottom: 1px solid var(--collapse-border-color); 32 | } 33 | 34 | @e content { 35 | padding: 10px 15px; 36 | font-size: var(--collapse-content-size); 37 | color: var(--collapse-content-color); 38 | line-height: 1.769230769230769; 39 | } 40 | 41 | @when active { 42 | > .el-collapse-item__header { 43 | .el-collapse-item__header__arrow { 44 | transform: rotate(90deg); 45 | } 46 | } 47 | } 48 | 49 | &:last-child { 50 | margin-bottom: -1px; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/scrollbar.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b scrollbar { 6 | overflow: hidden; 7 | position: relative; 8 | 9 | &:hover, 10 | &:active, 11 | &:focus { 12 | .el-scrollbar__bar { 13 | opacity: 1; 14 | transition: opacity 340ms ease-out; 15 | } 16 | } 17 | 18 | @e wrap { 19 | overflow: scroll; 20 | 21 | @m hidden-default { 22 | &::-webkit-scrollbar { 23 | width: 0; 24 | height: 0; 25 | } 26 | } 27 | } 28 | 29 | @e thumb { 30 | position: relative; 31 | display: block; 32 | size: 0; 33 | cursor: pointer; 34 | border-radius: inherit; 35 | background-color: var(--scrollbar-background-color); 36 | transition: .3s background-color; 37 | 38 | &:hover { 39 | background-color: var(--scrollbar-hover-background-color); 40 | } 41 | } 42 | 43 | @e bar { 44 | position: absolute; 45 | right: 2px; 46 | bottom: 2px; 47 | z-index: 1; 48 | border-radius: 4px; 49 | opacity: 0; 50 | transition: opacity 120ms ease-out; 51 | 52 | @when vertical { 53 | width: 6px; 54 | top: 2px; 55 | 56 | > div { 57 | width: 100%; 58 | } 59 | } 60 | 61 | @when horizontal { 62 | height: 6px; 63 | left: 2px; 64 | 65 | > div { 66 | height: 100%; 67 | } 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/reset.css: -------------------------------------------------------------------------------- 1 | @import './common/var.css'; 2 | 3 | @reset-global pc; 4 | body { 5 | font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; 6 | font-weight: 400; 7 | font-size: var(--font-size-base); 8 | color: var(--color-base-black); 9 | } 10 | 11 | a { 12 | color: var(--color-primary); 13 | text-decoration: none; 14 | 15 | &:hover, 16 | &:focus { 17 | color: tint(var(--color-primary), var(--button-hover-tint-percent)); 18 | } 19 | 20 | &:active { 21 | color: shade(var(--color-primary), var(--button-active-shade-percent)); 22 | } 23 | } 24 | 25 | h1, h2, h3, h4, h5, h6 { 26 | color: var(--font-color-base); 27 | font-weight: inherit; 28 | 29 | &:first-child { 30 | margin-top: 0; 31 | } 32 | 33 | &:last-child { 34 | margin-bottom: 0; 35 | } 36 | } 37 | 38 | h1 { 39 | font-size: calc(var(--font-size-base) + 6px); 40 | } 41 | 42 | h2 { 43 | font-size: calc(var(--font-size-base) + 4px); 44 | } 45 | 46 | h3 { 47 | font-size: calc(var(--font-size-base) + 2px); 48 | } 49 | 50 | h4, h5, h6, p { 51 | font-size: inherit; 52 | } 53 | 54 | p { 55 | line-height: 1.8; 56 | 57 | &:first-child { 58 | margin-top: 0; 59 | } 60 | 61 | &:last-child { 62 | margin-bottom: 0; 63 | } 64 | } 65 | 66 | sup, sub { 67 | font-size: calc(var(--font-size-base) - 1px); 68 | } 69 | 70 | small { 71 | font-size: calc(var(--font-size-base) - 2px); 72 | } 73 | 74 | hr { 75 | margin-top: 20px; 76 | margin-bottom: 20px; 77 | border: 0; 78 | border-top: 1px solid #eeeeee; 79 | } -------------------------------------------------------------------------------- /src/mixins/_button.css: -------------------------------------------------------------------------------- 1 | @define-mixin button-variant $color, $background-color, $border-color { 2 | color: $color; 3 | background-color: $background-color; 4 | border-color: $border-color; 5 | 6 | &:hover, 7 | &:focus { 8 | background: tint($background-color, var(--button-hover-tint-percent)); 9 | border-color: tint($border-color, var(--button-hover-tint-percent)); 10 | color: $color; 11 | } 12 | 13 | &:active { 14 | background: shade($background-color, var(--button-active-shade-percent)); 15 | border-color: shade($border-color, var(--button-active-shade-percent)); 16 | color: $color; 17 | outline: none; 18 | } 19 | 20 | &.is-active { 21 | background: shade($background-color, var(--button-active-shade-percent)); 22 | border-color: shade($border-color, var(--button-active-shade-percent)); 23 | color: $color; 24 | } 25 | 26 | &.is-plain { 27 | background: var(--button-default-fill); 28 | border: var(--border-base); 29 | color: var(--button-default-color); 30 | 31 | &:hover, 32 | &:focus { 33 | background: var(--color-white); 34 | border-color: $border-color; 35 | color: $background-color; 36 | } 37 | 38 | &:active { 39 | background: var(--color-white); 40 | border-color: shade($border-color, var(--button-active-shade-percent)); 41 | color: shade($background-color, var(--button-active-shade-percent)); 42 | outline: none; 43 | } 44 | } 45 | } 46 | 47 | @define-mixin button-size $padding-vertical, $padding-horizontal, $font-size, $border-radius { 48 | padding: $padding-vertical $padding-horizontal; 49 | font-size: $font-size; 50 | border-radius: $border-radius; 51 | } 52 | -------------------------------------------------------------------------------- /src/select-dropdown.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b select-dropdown { 7 | position: absolute; 8 | z-index: 1001; 9 | border: var(--select-dropdown-border); 10 | border-radius: var(--border-radius-small); 11 | background-color: var(--select-dropdown-background); 12 | box-shadow: var(--select-dropdown-shadow); 13 | box-sizing: border-box; 14 | margin: 5px 0; 15 | 16 | @when multiple { 17 | & .el-select-dropdown__item.selected { 18 | color: var(--select-option-selected); 19 | background-color: var(--select-dropdown-background); 20 | 21 | &.hover { 22 | background-color: var(--select-option-hover-background); 23 | } 24 | 25 | &::after { 26 | position: absolute; 27 | right: 10px; 28 | font-family: 'element-icons'; 29 | content: "\E608"; 30 | font-size: 11px; 31 | -webkit-font-smoothing: antialiased; 32 | -moz-osx-font-smoothing: grayscale; 33 | } 34 | } 35 | } 36 | 37 | .el-scrollbar.is-empty .el-select-dropdown__list{ 38 | padding: 0; 39 | } 40 | } 41 | 42 | @b select-dropdown__empty { 43 | padding: var(--select-dropdown-empty-padding); 44 | margin: 0; 45 | text-align: center; 46 | color: var(--select-dropdown-empty-color); 47 | font-size: var(--select-font-size); 48 | } 49 | 50 | @b select-dropdown__wrap { 51 | max-height: var(--select-dropdown-max-height); 52 | } 53 | 54 | @b select-dropdown__list { 55 | list-style: none; 56 | padding: var(--select-dropdown-padding); 57 | margin: 0; 58 | box-sizing: border-box; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/core/option.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "../common/var.css"; 3 | 4 | @component-namespace element { 5 | 6 | @b option { 7 | box-sizing: border-box; 8 | color: var(--dropdown-color); 9 | cursor: pointer; 10 | display: block; 11 | font-size: var(--dropdown-font-size); 12 | padding: 9px; 13 | 14 | @e remark { 15 | color: var(--dropdown-option-pinyin-color); 16 | float: right; 17 | } 18 | 19 | @m arrow { 20 | 21 | &:not(.is-last)::after { 22 | border-left: 1px solid var(--dropdown-border-color); 23 | border-top: 1px solid var(--dropdown-border-color); 24 | content: " "; 25 | height: 4px; 26 | margin-top: 6px; 27 | position: absolute; 28 | right: 12px; 29 | transform: rotate(135deg); 30 | width: 4px; 31 | } 32 | } 33 | 34 | @when disabled { 35 | background-color: transparent; 36 | color: var(--dropdown-option-color-disabled); 37 | cursor: not-allowed; 38 | } 39 | 40 | &:hover, 41 | &.is-hover { 42 | background-color: var(--dropdown-option-fill-hover); 43 | color: var(--dropdown-option-color-hover); 44 | } 45 | 46 | @when selected { 47 | background-color: var(--dropdown-option-fill-active); 48 | color: var(--dropdown-option-color-active); 49 | } 50 | } 51 | 52 | @b optiongroup { 53 | list-style: none; 54 | padding-left: 0; 55 | 56 | & .element-option { 57 | padding-left: 21px; 58 | } 59 | 60 | @e title { 61 | box-sizing: border-box; 62 | color: var(--dropdown-group-color); 63 | display: inline-block; 64 | font-size: var(--dropdown-font-size); 65 | padding: 8px; 66 | 67 | &:hover { 68 | background-color: inherit; 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | @import "./pagination.css"; 3 | @import "./dialog.css"; 4 | @import "./autocomplete.css"; 5 | @import "./dropdown.css"; 6 | @import "./dropdown-menu.css"; 7 | @import "./dropdown-item.css"; 8 | @import "./menu.css"; 9 | @import "./submenu.css"; 10 | @import "./menu-item.css"; 11 | @import "./menu-item-group.css"; 12 | @import "./input.css"; 13 | @import "./input-number.css"; 14 | @import "./radio.css"; 15 | @import "./radio-group.css"; 16 | @import "./radio-button.css"; 17 | @import "./checkbox.css"; 18 | @import "./checkbox-button.css"; 19 | @import "./checkbox-group.css"; 20 | @import "./switch.css"; 21 | @import "./select.css"; 22 | @import "./button.css"; 23 | @import "./button-group.css"; 24 | @import "./table.css"; 25 | @import "./table-column.css"; 26 | @import "./date-picker.css"; 27 | @import "./time-select.css"; 28 | @import "./time-picker.css"; 29 | @import "./popover.css"; 30 | @import "./tooltip.css"; 31 | @import "./message-box.css"; 32 | @import "./breadcrumb.css"; 33 | @import "./breadcrumb-item.css"; 34 | @import "./form.css"; 35 | @import "./form-item.css"; 36 | @import "./tabs.css"; 37 | @import "./tab-pane.css"; 38 | @import "./tag.css"; 39 | @import "./tree.css"; 40 | @import "./alert.css"; 41 | @import "./notification.css"; 42 | @import "./slider.css"; 43 | @import "./loading.css"; 44 | @import "./row.css"; 45 | @import "./col.css"; 46 | @import "./upload.css"; 47 | @import "./progress.css"; 48 | @import "./spinner.css"; 49 | @import "./message.css"; 50 | @import "./badge.css"; 51 | @import "./card.css"; 52 | @import "./rate.css"; 53 | @import "./steps.css"; 54 | @import "./step.css"; 55 | @import "./carousel.css"; 56 | @import "./scrollbar.css"; 57 | @import "./carousel-item.css"; 58 | @import "./collapse.css"; 59 | @import "./collapse-item.css"; 60 | @import "./cascader.css"; 61 | @import "./color-picker.css"; 62 | @import "./transfer.css"; 63 | -------------------------------------------------------------------------------- /src/dropdown.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | @import "./button.css"; 4 | 5 | @component-namespace el { 6 | @b dropdown { 7 | display: inline-block; 8 | position: relative; 9 | color: var(--color-extra-light-black); 10 | font-size: var(--font-size-base); 11 | 12 | .el-button-group { 13 | display: block; 14 | .el-button { 15 | float: none; 16 | } 17 | } 18 | 19 | & .el-dropdown__caret-button { 20 | padding: * 5px; 21 | 22 | & .el-dropdown__icon { 23 | padding-left: 0; 24 | } 25 | } 26 | @e icon { 27 | font-size: 12px; 28 | margin: 0 3px; 29 | } 30 | } 31 | @b dropdown-menu { 32 | margin: 5px 0; 33 | background-color: var(--color-white); 34 | border: 1px solid var(--color-base-gray); 35 | box-shadow: var(--dropdown-menu-box-shadow); 36 | padding: 6px 0; 37 | z-index: 10; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | min-width: 100px; 42 | 43 | @e item { 44 | list-style: none; 45 | line-height: 36px; 46 | padding: 0 10px; 47 | margin: 0; 48 | cursor: pointer; 49 | 50 | &:not(.is-disabled):hover { 51 | background-color: var(--dropdown-menuItem-hover-fill); 52 | color: var(--dropdown-menuItem-hover-color); 53 | } 54 | @m divided { 55 | position: relative; 56 | margin-top: 6px; 57 | border-top: 1px solid var(--color-base-gray); 58 | 59 | &:before { 60 | content: ''; 61 | height: 6px; 62 | display: block; 63 | margin: 0 -10px; 64 | background-color: var(--color-white); 65 | } 66 | } 67 | @when disabled { 68 | cursor: default; 69 | color: var(--color-extra-light-silver); 70 | pointer-events: none; 71 | } 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/date-picker/date-picker.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | @import "./picker-panel.css"; 3 | 4 | @component-namespace el { 5 | @b date-picker { 6 | min-width: 254px; 7 | 8 | &.has-sidebar.has-time { 9 | min-width: 434px; 10 | } 11 | 12 | &.has-sidebar { 13 | min-width: 370px; 14 | } 15 | 16 | &.has-time { 17 | min-width: 324px; 18 | } 19 | &.has-time .el-picker-panel__body-wrapper { 20 | position: relative; 21 | } 22 | .el-picker-panel__content { 23 | min-width: 224px; 24 | } 25 | 26 | table { 27 | table-layout: fixed; 28 | width: 100%; 29 | } 30 | 31 | @e editor-wrap { 32 | position: relative; 33 | display: table-cell; 34 | padding: 0 5px; 35 | } 36 | 37 | @e time-header { 38 | position: relative; 39 | border-bottom: 1px solid var(--datepicker-inner-border-color); 40 | font-size: 12px; 41 | padding: 8px 5px 5px 5px; 42 | display: table; 43 | width: 100%; 44 | box-sizing: border-box; 45 | } 46 | 47 | @e header { 48 | margin: 12px; 49 | text-align: center; 50 | } 51 | 52 | @e header-label { 53 | font-size: 14px; 54 | padding: 0 5px; 55 | line-height: 22px; 56 | text-align: center; 57 | cursor: pointer; 58 | 59 | &:hover { 60 | color: var(--datepicker-text-hover-color); 61 | } 62 | 63 | &.active { 64 | color: var(--datepicker-active-color); 65 | } 66 | } 67 | 68 | @e prev-btn { 69 | float: left; 70 | } 71 | 72 | @e next-btn { 73 | float: right; 74 | } 75 | 76 | @e time-wrap { 77 | padding: 10px; 78 | text-align: center; 79 | } 80 | 81 | @e time-label { 82 | float: left; 83 | cursor: pointer; 84 | line-height: 30px; 85 | margin-left: 10px; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/loading.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b loading-mask { 6 | position: absolute; 7 | z-index: 10000; 8 | background-color: rgba(255, 255, 255, .9); 9 | margin: 0; 10 | top: 0; 11 | right: 0; 12 | bottom: 0; 13 | left: 0; 14 | transition: opacity 0.3s; 15 | 16 | @when fullscreen { 17 | position: fixed; 18 | 19 | .el-loading-spinner { 20 | margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2); 21 | 22 | .circular { 23 | size: var(--loading-fullscreen-spinner-size); 24 | } 25 | } 26 | } 27 | } 28 | 29 | @b loading-spinner { 30 | top: 50%; 31 | margin-top: calc(- var(--loading-spinner-size) / 2); 32 | width: 100%; 33 | text-align: center; 34 | position: absolute; 35 | 36 | .el-loading-text { 37 | color: var(--color-primary); 38 | margin: 3px 0; 39 | font-size: 14px; 40 | } 41 | 42 | .circular { 43 | size: var(--loading-spinner-size); 44 | animation: loading-rotate 2s linear infinite; 45 | } 46 | 47 | .path { 48 | animation: loading-dash 1.5s ease-in-out infinite; 49 | stroke-dasharray: 90, 150; 50 | stroke-dashoffset: 0; 51 | stroke-width: 2; 52 | stroke: var(--color-primary); 53 | stroke-linecap: round; 54 | } 55 | } 56 | } 57 | 58 | .el-loading-fade-enter, 59 | .el-loading-fade-leave-active { 60 | opacity: 0; 61 | } 62 | 63 | @keyframes loading-rotate { 64 | 100% { 65 | transform: rotate(360deg); 66 | } 67 | } 68 | 69 | @keyframes loading-dash { 70 | 0% { 71 | stroke-dasharray: 1, 200; 72 | stroke-dashoffset: 0; 73 | } 74 | 50% { 75 | stroke-dasharray: 90, 150; 76 | stroke-dashoffset: -40px; 77 | } 78 | 100% { 79 | stroke-dasharray: 90, 150; 80 | stroke-dashoffset: -120px; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/autocomplete.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./input.css"; 3 | @import "./common/var.css"; 4 | @import "./scrollbar.css"; 5 | 6 | @component-namespace el { 7 | @b autocomplete { 8 | position: relative; 9 | display: inline-block; 10 | } 11 | @b autocomplete-suggestion { 12 | margin: 5px 0; 13 | box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12); 14 | 15 | @e wrap { 16 | max-height: 280px; 17 | overflow: auto; 18 | background-color: var(--color-white); 19 | border: 1px solid var(--color-base-gray); 20 | padding: 6px 0; 21 | border-radius: 2px; 22 | box-sizing: border-box; 23 | } 24 | 25 | @e list { 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | & li { 31 | list-style: none; 32 | line-height: 36px; 33 | padding: 0 10px; 34 | margin: 0; 35 | cursor: pointer; 36 | color: var(--color-extra-light-black); 37 | font-size: 14px; 38 | white-space: nowrap; 39 | overflow: hidden; 40 | text-overflow: ellipsis; 41 | 42 | &:hover { 43 | background-color: var(--select-option-hover-background); 44 | } 45 | &.highlighted { 46 | background-color: var(--color-primary); 47 | color: var(--color-white); 48 | } 49 | &:active { 50 | background-color: darken(var(--color-primary), 0.2); 51 | } 52 | &.divider { 53 | margin-top: 6px; 54 | border-top: 1px solid var(--color-base-gray); 55 | } 56 | &.divider:last-child { 57 | margin-bottom: -6px; 58 | } 59 | } 60 | 61 | @when loading { 62 | li { 63 | text-align: center; 64 | height: 100px; 65 | line-height: 100px; 66 | font-size: 20px; 67 | color: #999; 68 | @utils-vertical-center; 69 | 70 | &:hover { 71 | background-color: var(--color-white); 72 | } 73 | } 74 | 75 | & .el-icon-loading { 76 | vertical-align: middle; 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/message.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b message { 7 | box-shadow: var(--message-shadow); 8 | min-width: var(--message-min-width); 9 | padding: var(--message-padding); 10 | box-sizing: border-box; 11 | border-radius: var(--border-radius-small); 12 | position: fixed; 13 | left: 50%; 14 | top: 20px; 15 | transform: translateX(-50%); 16 | background-color: var(--color-white); 17 | transition: opacity 0.3s, transform .4s; 18 | overflow: hidden; 19 | 20 | @e group { 21 | margin-left: 38px; 22 | position: relative; 23 | height: 20px; 24 | line-height: 20px; 25 | display: flex; 26 | align-items: center; 27 | 28 | @when with-icon { 29 | margin-left: 0; 30 | } 31 | 32 | & p { 33 | font-size: var(--font-size-base); 34 | margin: 0 34px 0 0; 35 | white-space: nowrap; 36 | color: var(--message-content-color); 37 | text-align: justify; 38 | } 39 | } 40 | 41 | @e img { 42 | size: 40px; 43 | position: absolute; 44 | left: 0; 45 | top: 0; 46 | } 47 | 48 | @e icon { 49 | vertical-align: middle; 50 | margin-right: 8px; 51 | } 52 | 53 | @e closeBtn { 54 | position: absolute 3px 0 * *; 55 | cursor: pointer; 56 | color: var(--message-close-color); 57 | font-size: var(--font-size-base); 58 | 59 | &:hover { 60 | color: var(--message-close-hover-color); 61 | } 62 | } 63 | 64 | & .el-icon-circle-check { 65 | color: var(--message-success-color); 66 | } 67 | 68 | & .el-icon-circle-cross { 69 | color: var(--message-danger-color); 70 | } 71 | 72 | & .el-icon-information { 73 | color: var(--message-info-color); 74 | } 75 | 76 | & .el-icon-warning { 77 | color: var(--message-warning-color); 78 | } 79 | } 80 | 81 | .el-message-fade-enter, 82 | .el-message-fade-leave-active { 83 | opacity: 0; 84 | transform: translate(-50%, -100%); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/date-picker/time-picker.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b time-panel { 5 | margin: 5px 0; 6 | border: solid 1px var(--datepicker-border-color); 7 | background-color: var(--color-white); 8 | box-shadow: var(--box-shadow-base); 9 | border-radius: 2px; 10 | position: absolute; 11 | width: 180px; 12 | left: 0; 13 | z-index: var(--index-top); 14 | user-select: none; 15 | 16 | @e content { 17 | font-size: 0; 18 | position: relative; 19 | overflow: hidden; 20 | 21 | &::after, &::before { 22 | content: ":"; 23 | top: 50%; 24 | color: var(--color-white); 25 | position: absolute; 26 | font-size: 14px; 27 | margin-top: -15px; 28 | line-height: 16px; 29 | background-color: var(--datepicker-active-color); 30 | height: 32px; 31 | z-index: -1; 32 | left: 0; 33 | right: 0; 34 | box-sizing: border-box; 35 | padding-top: 6px; 36 | text-align: left; 37 | } 38 | 39 | &::after { 40 | left: 50%; 41 | margin-left: -2px; 42 | } 43 | 44 | &::before { 45 | padding-left: 50%; 46 | margin-right: -2px; 47 | } 48 | 49 | &.has-seconds { 50 | &::after { 51 | left: calc(100% / 3 * 2); 52 | } 53 | 54 | &::before { 55 | padding-left: calc(100% / 3); 56 | } 57 | } 58 | } 59 | 60 | @e footer { 61 | border-top: 1px solid var(--datepicker-inner-border-color); 62 | padding: 4px; 63 | height: 36px; 64 | line-height: 25px; 65 | text-align: right; 66 | box-sizing: border-box; 67 | } 68 | 69 | @e btn { 70 | border: none; 71 | line-height: 28px; 72 | padding: 0 5px; 73 | margin: 0 5px; 74 | cursor: pointer; 75 | background-color: transparent; 76 | outline: none; 77 | font-size: 12px; 78 | color: var(--color-base-silver); 79 | 80 | &.confirm { 81 | font-weight: 800; 82 | color: var(--datepicker-active-color); 83 | } 84 | } 85 | 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/date-picker/date-table.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b date-table { 5 | font-size: 12px; 6 | min-width: 224px; 7 | user-select: none; 8 | 9 | @when week-mode { 10 | .el-date-table__row { 11 | &:hover { 12 | background-color: var(--datepicker-cell-hover-color); 13 | } 14 | 15 | &.current { 16 | background-color: var(--datepicker-inrange-color); 17 | } 18 | } 19 | } 20 | 21 | td { 22 | width: 32px; 23 | height: 32px; 24 | box-sizing: border-box; 25 | text-align: center; 26 | cursor: pointer; 27 | 28 | &.next-month, 29 | &.prev-month { 30 | color: var(--datepicker-off-color); 31 | } 32 | 33 | &.today { 34 | color: var(--datepicker-text-hover-color); 35 | position: relative; 36 | &:before { 37 | content: " "; 38 | position: absolute; 39 | top: 0px; 40 | right: 0px; 41 | width: 0; 42 | height: 0; 43 | border-top: 0.5em solid var(--datepicker-active-color); 44 | border-left: .5em solid transparent; 45 | } 46 | } 47 | 48 | &.available:hover { 49 | background-color: var(--datepicker-cell-hover-color); 50 | } 51 | 52 | &.in-range { 53 | background-color: var(--datepicker-inrange-color); 54 | &:hover { 55 | background-color: var(--datepicker-inrange-hover-color); 56 | } 57 | } 58 | 59 | &.current:not(.disabled), 60 | &.start-date, 61 | &.end-date { 62 | background-color: var(--datepicker-active-color) !important; 63 | color: var(--color-white); 64 | } 65 | 66 | &.disabled { 67 | background-color: #f4f4f4; 68 | opacity: 1; 69 | cursor: not-allowed; 70 | color: #ccc; 71 | } 72 | 73 | &.week { 74 | font-size: 80%; 75 | color: var(--datepicker-header-color); 76 | } 77 | } 78 | 79 | th { 80 | padding: 5px; 81 | color: var(--datepicker-header-color); 82 | font-weight: 400; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/alert.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b alert { 7 | width: 100%; 8 | padding: var(--alert-padding); 9 | margin: 0; 10 | box-sizing: border-box; 11 | border-radius: var(--alert-border-radius); 12 | position: relative; 13 | background-color: var(--color-white); 14 | overflow: hidden; 15 | color: var(--color-white); 16 | opacity: 1; 17 | display: table; 18 | transition: opacity .2s; 19 | 20 | @modifier success { 21 | background-color: var(--alert-success-color); 22 | } 23 | 24 | @modifier info { 25 | background-color: var(--alert-info-color); 26 | } 27 | 28 | @modifier warning { 29 | background-color: var(--alert-warning-color); 30 | } 31 | 32 | @modifier error { 33 | background-color: var(--alert-danger-color); 34 | } 35 | 36 | @e content { 37 | display: table-cell; 38 | padding: 0 8px; 39 | } 40 | 41 | @e icon { 42 | font-size: var(--alert-icon-size); 43 | width: var(--alert-icon-size); 44 | display: table-cell; 45 | color: var(--color-white); 46 | vertical-align: middle; 47 | @when big { 48 | font-size: var(--alert-icon-large-size); 49 | width: var(--alert-icon-large-size); 50 | } 51 | } 52 | 53 | @e title { 54 | font-size: var(--alert-title-font-size); 55 | line-height: 18px; 56 | @when bold { 57 | font-weight: bold; 58 | } 59 | } 60 | 61 | & .el-alert__description { 62 | color: var(--color-white); 63 | font-size: var(--alert-description-font-size); 64 | margin: 5px 0 0 0; 65 | } 66 | 67 | @e closebtn { 68 | font-size: var(--alert-close-font-size); 69 | color: var(--color-white); 70 | opacity: 1; 71 | position: absolute 12px 15px * *; 72 | cursor: pointer; 73 | 74 | @when customed { 75 | font-style: normal; 76 | font-size: var(--alert-close-customed-font-size); 77 | top: 9px; 78 | } 79 | } 80 | } 81 | 82 | .el-alert-fade-enter, 83 | .el-alert-fade-leave-active { 84 | opacity: 0; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/notification.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b notification { 7 | width: var(--notification-width); 8 | padding: var(--notification-padding); 9 | box-sizing: border-box; 10 | border-radius: var(--border-radius-small); 11 | position: fixed; 12 | right: 16px; 13 | background-color: var(--color-white); 14 | box-shadow: var(--notification-shadow); 15 | transition: opacity 0.3s, transform .3s, right .3s, top 0.4s; 16 | overflow: hidden; 17 | 18 | @e group { 19 | margin-left: 0; 20 | @when with-icon { 21 | margin-left: 55px; 22 | } 23 | } 24 | 25 | @e title { 26 | font-weight: normal; 27 | font-size: var(--notification-title-font-size); 28 | color: var(--notification-title-color); 29 | margin: 0; 30 | } 31 | 32 | @e content { 33 | font-size: var(--notification-font-size); 34 | line-height: 21px; 35 | margin: 10px 0 0 0; 36 | color: var(--notification-color); 37 | text-align: justify; 38 | } 39 | 40 | @e icon { 41 | size: var(--notification-icon-size); 42 | font-size: var(--notification-icon-size); 43 | float: left; 44 | position: relative; 45 | top: 3px; 46 | } 47 | 48 | @e closeBtn { 49 | position: absolute 20px 20px * *; 50 | cursor: pointer; 51 | color: var(--notification-close-color); 52 | font-size: var(--notification-font-size); 53 | 54 | &:hover { 55 | color: var(--notification-close-hover-color); 56 | } 57 | } 58 | 59 | & .el-icon-circle-check { 60 | color: var(--notification-success-color); 61 | } 62 | 63 | & .el-icon-circle-cross { 64 | color: var(--notification-danger-color); 65 | } 66 | 67 | & .el-icon-information { 68 | color: var(--notification-info-color); 69 | } 70 | 71 | & .el-icon-warning { 72 | color: var(--notification-warning-color); 73 | } 74 | } 75 | 76 | .el-notification-fade-enter { 77 | transform: translateX(100%); 78 | right: 0; 79 | } 80 | 81 | .el-notification-fade-leave-active { 82 | opacity: 0; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/table-column.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./checkbox.css"; 3 | @import "./tag.css"; 4 | @import "./common/var.css"; 5 | 6 | @component-namespace el { 7 | @b table-column { 8 | @m selection .cell { 9 | padding-left: 14px; 10 | padding-right: 14px; 11 | } 12 | } 13 | 14 | @b table-filter { 15 | border: solid 1px var(--color-base-gray); 16 | border-radius: 2px; 17 | background-color: var(--color-white); 18 | box-shadow: var(--dropdown-menu-box-shadow); 19 | box-sizing: border-box; 20 | margin: 2px 0; 21 | 22 | /** used for dropdown mode */ 23 | @e list { 24 | padding: 5px 0; 25 | margin: 0; 26 | list-style: none; 27 | min-width: 100px; 28 | } 29 | 30 | @e list-item { 31 | line-height: 36px; 32 | padding: 0 10px; 33 | cursor: pointer; 34 | font-size: var(--font-size-base); 35 | 36 | &:hover { 37 | background-color: var(--dropdown-menuItem-hover-fill); 38 | color: var(--dropdown-menuItem-hover-color); 39 | } 40 | 41 | @when active { 42 | background-color: var(--color-primary); 43 | color: var(--color-white); 44 | } 45 | } 46 | 47 | @e content { 48 | min-width: 100px; 49 | } 50 | 51 | @e bottom { 52 | border-top: 1px solid var(--color-base-gray); 53 | padding: 8px; 54 | 55 | button { 56 | background: transparent; 57 | border: none; 58 | color: var(--color-base-silver); 59 | cursor: pointer; 60 | font-size: var(--font-size-base); 61 | padding: 0 3px; 62 | 63 | &:hover { 64 | color: var(--color-primary); 65 | } 66 | 67 | &:focus { 68 | outline: none; 69 | } 70 | 71 | &.is-disabled { 72 | color: var(--color-extra-light-silver); 73 | cursor: not-allowed; 74 | } 75 | } 76 | } 77 | 78 | @e checkbox-group { 79 | padding: 10px; 80 | 81 | label.el-checkbox { 82 | display: block; 83 | margin-bottom: 8px; 84 | margin-left: 5px; 85 | } 86 | 87 | .el-checkbox:last-child { 88 | margin-bottom: 0; 89 | } 90 | } 91 | } 92 | } -------------------------------------------------------------------------------- /src/form.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b form { 6 | @m label-left { 7 | & .el-form-item__label { 8 | text-align: left; 9 | } 10 | } 11 | @m label-top { 12 | & .el-form-item__label { 13 | float: none; 14 | display: inline-block; 15 | text-align: left; 16 | padding: 0 0 10px 0; 17 | } 18 | } 19 | @m inline { 20 | & .el-form-item { 21 | display: inline-block; 22 | margin-right: 10px; 23 | vertical-align: top; 24 | } 25 | & .el-form-item__label { 26 | float: none; 27 | display: inline-block; 28 | } 29 | & .el-form-item__content { 30 | display: inline-block; 31 | vertical-align: top; 32 | } 33 | &.el-form--label-top .el-form-item__content { 34 | display: block; 35 | } 36 | } 37 | } 38 | @b form-item { 39 | margin-bottom: 22px; 40 | @utils-clearfix; 41 | 42 | & .el-form-item { 43 | margin-bottom: 0; 44 | } 45 | 46 | @e label { 47 | text-align: right; 48 | vertical-align: middle; 49 | float: left; 50 | font-size: 14px; 51 | color: var(--color-extra-light-black); 52 | line-height: 1; 53 | padding: 11px 12px 11px 0; 54 | box-sizing: border-box; 55 | } 56 | @e content { 57 | line-height: 36px; 58 | position: relative; 59 | font-size: 14px; 60 | @utils-clearfix; 61 | } 62 | @e error { 63 | color: var(--color-danger); 64 | font-size: 12px; 65 | line-height: 1; 66 | padding-top: 4px; 67 | position: absolute; 68 | top: 100%; 69 | left: 0; 70 | } 71 | 72 | @when required { 73 | .el-form-item__label:before { 74 | content: '*'; 75 | color: var(--color-danger); 76 | margin-right: 4px; 77 | } 78 | } 79 | 80 | @when error { 81 | & .el-input__inner, 82 | & .el-textarea__inner { 83 | border-color: var(--color-danger); 84 | } 85 | & .el-input-group__append, 86 | & .el-input-group__prepend, { 87 | & .el-input__inner { 88 | border-color: transparent; 89 | } 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/date-picker/date-range-picker.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b date-range-picker { 5 | min-width: 520px; 6 | 7 | &.has-sidebar.has-time { 8 | min-width: 766px; 9 | } 10 | 11 | &.has-sidebar { 12 | min-width: 620px; 13 | } 14 | 15 | &.has-time { 16 | min-width: 660px; 17 | } 18 | 19 | table { 20 | table-layout: fixed; 21 | width: 100%; 22 | } 23 | 24 | .el-picker-panel__body { 25 | min-width: 513px; 26 | } 27 | 28 | .el-picker-panel__content { 29 | margin: 0; 30 | } 31 | 32 | @e header { 33 | position: relative; 34 | text-align: center; 35 | height: 28px; 36 | 37 | button { 38 | float: left; 39 | } 40 | 41 | div { 42 | font-size: 14px; 43 | margin-right: 50px; 44 | } 45 | } 46 | 47 | @e content { 48 | float: left; 49 | width: 50%; 50 | box-sizing: border-box; 51 | margin: 0; 52 | padding: 16px; 53 | 54 | @when left { 55 | border-right: 1px solid var(--datepicker-inner-border-color); 56 | } 57 | 58 | @when right { 59 | .el-date-range-picker__header { 60 | button { 61 | float: right; 62 | } 63 | 64 | div { 65 | margin-left: 50px; 66 | margin-right: 50px; 67 | } 68 | } 69 | } 70 | } 71 | 72 | @e editors-wrap { 73 | box-sizing: border-box; 74 | display: table-cell; 75 | 76 | @when right { 77 | text-align: right; 78 | } 79 | } 80 | 81 | @e time-header { 82 | position: relative; 83 | border-bottom: 1px solid var(--datepicker-inner-border-color); 84 | font-size: 12px; 85 | padding: 8px 5px 5px 5px; 86 | display: table; 87 | width: 100%; 88 | box-sizing: border-box; 89 | 90 | > .el-icon-arrow-right { 91 | font-size: 20px; 92 | vertical-align: middle; 93 | display: table-cell; 94 | color: var(--datepicker-icon-color); 95 | } 96 | } 97 | 98 | @e time-picker-wrap { 99 | position: relative; 100 | display: table-cell; 101 | padding: 0 5px; 102 | 103 | .el-picker-panel { 104 | position: absolute; 105 | top: 13px; 106 | right: 0; 107 | z-index: 1; 108 | background: var(--color-white); 109 | } 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/tree.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b tree { 6 | cursor: default; 7 | background: var(--color-white); 8 | border: 1px solid var(--color-base-gray); 9 | 10 | @e empty-block { 11 | position: relative; 12 | min-height: 60px; 13 | text-align: center; 14 | width: 100%; 15 | height: 100%; 16 | } 17 | 18 | @e empty-text { 19 | position: absolute; 20 | left: 50%; 21 | top: 50%; 22 | transform: translate(-50%, -50%); 23 | color: color(var(--color-primary) s(16%) l(44%)); 24 | } 25 | } 26 | 27 | @b tree-node { 28 | white-space: nowrap; 29 | 30 | @e content { 31 | line-height: 36px; 32 | height: 36px; 33 | cursor: pointer; 34 | 35 | & > .el-checkbox, 36 | & > .el-tree-node__expand-icon { 37 | margin-right: 8px; 38 | } 39 | & > .el-checkbox { 40 | vertical-align: middle; 41 | } 42 | &:hover { 43 | background: var(--color-light-gray); 44 | } 45 | } 46 | 47 | @e expand-icon { 48 | display: inline-block; 49 | cursor: pointer; 50 | width: 0; 51 | height: 0; 52 | vertical-align: middle; 53 | margin-left: 10px; 54 | border: 6px solid transparent; 55 | border-right-width: 0; 56 | border-left-color: var(--color-light-silver); 57 | border-left-width: 7px; 58 | 59 | transform: rotate(0deg); 60 | transition: transform 0.3s ease-in-out; 61 | 62 | &:hover { 63 | border-left-color: #999; 64 | } 65 | 66 | &.expanded { 67 | transform: rotate(90deg); 68 | } 69 | 70 | &.is-leaf { 71 | border-color: transparent; 72 | cursor: default; 73 | } 74 | } 75 | 76 | @e label { 77 | font-size: var(--font-size-base); 78 | vertical-align: middle; 79 | display: inline-block; 80 | } 81 | 82 | @e loading-icon { 83 | display: inline-block; 84 | vertical-align: middle; 85 | margin-right: 4px; 86 | font-size: var(--font-size-base); 87 | color: var(--color-light-silver); 88 | } 89 | 90 | & > .el-tree-node__children { 91 | overflow: hidden; 92 | background-color: transparent; 93 | } 94 | 95 | &.is-expanded > .el-tree-node__children { 96 | display: block; 97 | } 98 | } 99 | } 100 | 101 | .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { 102 | background-color: color(var(--color-primary) tint(92%)); 103 | } 104 | -------------------------------------------------------------------------------- /src/common/transition.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import './var.css'; 3 | 4 | 5 | /* DEPRECATED */ 6 | .fade-in-linear-enter-active, 7 | .fade-in-linear-leave-active { 8 | transition: var(--fade-linear-transition); 9 | } 10 | .fade-in-linear-enter, 11 | .fade-in-linear-leave, 12 | .fade-in-linear-leave-active { 13 | opacity: 0; 14 | } 15 | 16 | .el-fade-in-linear-enter-active, 17 | .el-fade-in-linear-leave-active { 18 | transition: var(--fade-linear-transition); 19 | } 20 | .el-fade-in-linear-enter, 21 | .el-fade-in-linear-leave, 22 | .el-fade-in-linear-leave-active { 23 | opacity: 0; 24 | } 25 | 26 | .el-fade-in-enter-active, 27 | .el-fade-in-leave-active { 28 | transition: all .3s cubic-bezier(.55,0,.1,1); 29 | } 30 | .el-fade-in-enter, 31 | .el-fade-in-leave-active { 32 | opacity: 0; 33 | } 34 | 35 | .el-zoom-in-center-enter-active, 36 | .el-zoom-in-center-leave-active { 37 | transition: all .3s cubic-bezier(.55,0,.1,1); 38 | } 39 | .el-zoom-in-center-enter, 40 | .el-zoom-in-center-leave-active { 41 | opacity: 0; 42 | transform: scaleX(0); 43 | } 44 | 45 | .el-zoom-in-top-enter-active, 46 | .el-zoom-in-top-leave-active { 47 | opacity: 1; 48 | transform: scaleY(1); 49 | transition: var(--md-fade-transition); 50 | transform-origin: center top; 51 | } 52 | .el-zoom-in-top-enter, 53 | .el-zoom-in-top-leave-active { 54 | opacity: 0; 55 | transform: scaleY(0); 56 | } 57 | 58 | .el-zoom-in-bottom-enter-active, 59 | .el-zoom-in-bottom-leave-active { 60 | opacity: 1; 61 | transform: scaleY(1); 62 | transition: var(--md-fade-transition); 63 | transform-origin: center bottom; 64 | } 65 | .el-zoom-in-bottom-enter, 66 | .el-zoom-in-bottom-leave-active { 67 | opacity: 0; 68 | transform: scaleY(0); 69 | } 70 | 71 | .el-zoom-in-left-enter-active, 72 | .el-zoom-in-left-leave-active { 73 | opacity: 1; 74 | transform: scale(1, 1); 75 | transition: var(--md-fade-transition); 76 | transform-origin: top left; 77 | } 78 | .el-zoom-in-left-enter, 79 | .el-zoom-in-left-leave-active { 80 | opacity: 0; 81 | transform: scale(.45, .45); 82 | } 83 | 84 | .collapse-transition { 85 | transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out; 86 | } 87 | .horizontal-collapse-transition { 88 | transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; 89 | } 90 | 91 | .el-list-enter-active, 92 | .el-list-leave-active { 93 | transition: all 1s; 94 | } 95 | .el-list-enter, .el-list-leave-active { 96 | opacity: 0; 97 | transform: translateY(-30px); 98 | } 99 | 100 | .el-opacity-transition { 101 | transition: opacity .3s cubic-bezier(.55,0,.1,1); 102 | } -------------------------------------------------------------------------------- /src/dialog.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | @import "./common/popup.css"; 4 | 5 | @component-namespace el { 6 | 7 | @b dialog { 8 | position: absolute; 9 | left: 50%; 10 | transform: translateX(-50%); 11 | background: var(--color-white); 12 | border-radius: var(--border-radius-small); 13 | box-shadow: var(--dialog-box-shadow); 14 | box-sizing: border-box; 15 | margin-bottom: 50px; 16 | 17 | @modifier tiny { 18 | width: var(--dialog-tiny-width); 19 | } 20 | 21 | @modifier small { 22 | width: var(--dialog-small-width); 23 | } 24 | 25 | @modifier large { 26 | width: var(--dialog-large-width); 27 | } 28 | 29 | @modifier full { 30 | width: 100%; 31 | top: 0; 32 | margin-bottom: 0; 33 | height: 100%; 34 | overflow: auto; 35 | } 36 | 37 | @e wrapper { 38 | position: fixed 0 0 0 0; 39 | overflow: auto; 40 | margin: 0; 41 | } 42 | 43 | @e header { 44 | padding: 20px 20px 0; 45 | @utils-clearfix; 46 | } 47 | 48 | @e headerbtn { 49 | float: right; 50 | background: transparent; 51 | border: none; 52 | outline: none; 53 | padding: 0; 54 | cursor: pointer; 55 | font-size: 16px; 56 | 57 | .el-dialog__close { 58 | color: var(--dialog-close-color); 59 | } 60 | 61 | &:focus, &:hover { 62 | .el-dialog__close { 63 | color: var(--dialog-close-hover-color); 64 | } 65 | } 66 | } 67 | 68 | @e title { 69 | line-height: 1; 70 | font-size: var(--dialog-title-font-size); 71 | font-weight: bold; 72 | color: var(--color-base-black); 73 | } 74 | 75 | @e body { 76 | padding: 30px 20px; 77 | color: var(--color-extra-light-black); 78 | font-size: var(--dialog-font-size); 79 | } 80 | 81 | @e footer { 82 | padding: 10px 20px 15px; 83 | text-align: right; 84 | box-sizing: border-box; 85 | } 86 | } 87 | 88 | .dialog-fade-enter-active { 89 | animation: dialog-fade-in .3s; 90 | } 91 | 92 | .dialog-fade-leave-active { 93 | animation: dialog-fade-out .3s; 94 | } 95 | 96 | @keyframes dialog-fade-in { 97 | 0% { 98 | transform: translate3d(0, -20px, 0); 99 | opacity: 0; 100 | } 101 | 100% { 102 | transform: translate3d(0, 0, 0); 103 | opacity: 1; 104 | } 105 | } 106 | 107 | @keyframes dialog-fade-out { 108 | 0% { 109 | transform: translate3d(0, 0, 0); 110 | opacity: 1; 111 | } 112 | 100% { 113 | transform: translate3d(0, -20px, 0); 114 | opacity: 0; 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/col.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | .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 { 5 | float: left; 6 | box-sizing: border-box; 7 | } 8 | .el-col-0 { 9 | width: 0; 10 | } 11 | 12 | @for $i from 0 to 24 { 13 | .el-col-$i { 14 | width: calc(1 / 24 * $(i) * 100)%; 15 | } 16 | .el-col-offset-$i { 17 | margin-left: calc(1 / 24 * $(i) * 100)%; 18 | } 19 | .el-col-pull-$i { 20 | position: relative; 21 | right: calc(1 / 24 * $(i) * 100)%; 22 | } 23 | .el-col-push-$i { 24 | position: relative; 25 | left: calc(1 / 24 * $(i) * 100)%; 26 | } 27 | } 28 | 29 | @media (max-width: 768px) { 30 | @for $i from 0 to 24 { 31 | .el-col-xs-$i { 32 | width: calc(1 / 24 * $(i) * 100)%; 33 | } 34 | .el-col-xs-offset-$i { 35 | margin-left: calc(1 / 24 * $(i) * 100)%; 36 | } 37 | .el-col-xs-pull-$i { 38 | position: relative; 39 | right: calc(1 / 24 * $(i) * 100)%; 40 | } 41 | .el-col-xs-push-$i { 42 | position: relative; 43 | left: calc(1 / 24 * $(i) * 100)%; 44 | } 45 | } 46 | } 47 | 48 | @media (min-width: 768px) { 49 | @for $i from 0 to 24 { 50 | .el-col-sm-$i { 51 | width: calc(1 / 24 * $(i) * 100)%; 52 | } 53 | .el-col-sm-offset-$i { 54 | margin-left: calc(1 / 24 * $(i) * 100)%; 55 | } 56 | .el-col-sm-pull-$i { 57 | position: relative; 58 | right: calc(1 / 24 * $(i) * 100)%; 59 | } 60 | .el-col-sm-push-$i { 61 | position: relative; 62 | left: calc(1 / 24 * $(i) * 100)%; 63 | } 64 | } 65 | } 66 | @media (min-width: 992px) { 67 | @for $i from 0 to 24 { 68 | .el-col-md-$i { 69 | width: calc(1 / 24 * $(i) * 100)%; 70 | } 71 | .el-col-md-offset-$i { 72 | margin-left: calc(1 / 24 * $(i) * 100)%; 73 | } 74 | .el-col-md-pull-$i { 75 | position: relative; 76 | right: calc(1 / 24 * $(i) * 100)%; 77 | } 78 | .el-col-md-push-$i { 79 | position: relative; 80 | left: calc(1 / 24 * $(i) * 100)%; 81 | } 82 | } 83 | } 84 | @media (min-width: 1200px) { 85 | @for $i from 0 to 24 { 86 | .el-col-lg-$i { 87 | width: calc(1 / 24 * $(i) * 100)%; 88 | } 89 | .el-col-lg-offset-$i { 90 | margin-left: calc(1 / 24 * $(i) * 100)%; 91 | } 92 | .el-col-lg-pull-$i { 93 | position: relative; 94 | right: calc(1 / 24 * $(i) * 100)%; 95 | } 96 | .el-col-lg-push-$i { 97 | position: relative; 98 | left: calc(1 / 24 * $(i) * 100)%; 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /src/input-number.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./input.css"; 3 | @import "./common/var.css"; 4 | 5 | @component-namespace el { 6 | @b input-number { 7 | display: inline-block; 8 | width: 180px; 9 | position: relative; 10 | line-height: normal; 11 | 12 | & .el-input { 13 | display: block; 14 | } 15 | & .el-input__inner { 16 | appearance: none; 17 | padding-right: calc(var(--input-height) * 2 + 10); 18 | } 19 | @e increase, decrease { 20 | height: auto; 21 | border-left: var(--border-base); 22 | width: var(--input-height); 23 | line-height: calc(var(--input-height) - 2); 24 | top: 1px; 25 | text-align: center; 26 | color: var(--color-light-silver); 27 | cursor: pointer; 28 | position: absolute; 29 | z-index: 1; 30 | 31 | &:hover { 32 | color: var(--color-primary); 33 | 34 | &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { 35 | border-color: var(--input-focus-border); 36 | } 37 | } 38 | 39 | @when disabled { 40 | color: var(--disabled-border-base); 41 | cursor: not-allowed; 42 | } 43 | } 44 | 45 | @e increase { 46 | right: 0; 47 | } 48 | @e decrease { 49 | right: calc(var(--input-height) + 1px); 50 | } 51 | 52 | @when disabled { 53 | & .el-input-number__increase, .el-input-number__decrease { 54 | border-color: var(--disabled-border-base); 55 | color: var(--disabled-border-base); 56 | 57 | &:hover { 58 | color: var(--disabled-border-base); 59 | cursor: not-allowed; 60 | } 61 | } 62 | } 63 | @m large { 64 | width: 200px; 65 | 66 | & .el-input-number__increase, .el-input-number__decrease { 67 | line-height: calc(var(--input-large-height) - 2); 68 | width: var(--input-large-height); 69 | font-size: var(--input-large-font-size); 70 | } 71 | & .el-input-number__decrease { 72 | right: calc(var(--input-large-height) + 1px); 73 | } 74 | & .el-input__inner { 75 | padding-right: calc(var(--input-large-height) * 2 + 10); 76 | } 77 | } 78 | @m small { 79 | width: 130px; 80 | 81 | & .el-input-number__increase, .el-input-number__decrease { 82 | line-height: calc(var(--input-small-height) - 2); 83 | width: var(--input-small-height); 84 | font-size: var(--input-small-font-size); 85 | } 86 | & .el-input-number__decrease { 87 | right: calc(var(--input-small-height) + 1px); 88 | } 89 | & .el-input__inner { 90 | padding-right: calc(var(--input-small-height) * 2 + 10); 91 | } 92 | } 93 | @when without-controls { 94 | & .el-input__inner { 95 | padding-right: 10px; 96 | } 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/progress.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b progress { 6 | position: relative; 7 | line-height: 1; 8 | 9 | @e text { 10 | font-size:14px; 11 | color:var(--color-extra-light-black); 12 | display: inline-block; 13 | vertical-align: middle; 14 | margin-left: 10px; 15 | line-height: 1; 16 | 17 | i { 18 | vertical-align: middle; 19 | display: block; 20 | } 21 | } 22 | @m circle { 23 | display: inline-block; 24 | 25 | .el-progress__text { 26 | position: absolute; 27 | top: 50%; 28 | left: 0; 29 | width: 100%; 30 | text-align: center; 31 | margin: 0; 32 | transform: translate(0, -50%); 33 | 34 | i { 35 | vertical-align: middle; 36 | display: inline-block; 37 | } 38 | } 39 | } 40 | @m without-text { 41 | .el-progress__text { 42 | display: none; 43 | } 44 | .el-progress-bar { 45 | padding-right: 0; 46 | margin-right: 0; 47 | display: block; 48 | } 49 | } 50 | @m text-inside { 51 | .el-progress-bar { 52 | padding-right: 0; 53 | margin-right: 0; 54 | } 55 | } 56 | @when success { 57 | .el-progress-bar__inner { 58 | background-color: var(--color-success); 59 | } 60 | .el-progress__text { 61 | color: var(--color-success); 62 | } 63 | } 64 | @when exception { 65 | .el-progress-bar__inner { 66 | background-color: var(--color-danger); 67 | } 68 | .el-progress__text { 69 | color: var(--color-danger); 70 | } 71 | } 72 | } 73 | @b progress-bar { 74 | padding-right: 50px; 75 | display: inline-block; 76 | vertical-align: middle; 77 | width: 100%; 78 | margin-right: -55px; 79 | box-sizing: border-box; 80 | 81 | @e outer { 82 | height: 6px; 83 | border-radius: 100px; 84 | background-color: var(--color-light-gray); 85 | overflow: hidden; 86 | position: relative; 87 | vertical-align: middle; 88 | } 89 | @e inner { 90 | position: absolute; 91 | left: 0; 92 | top: 0; 93 | height: 100%; 94 | border-radius: 2px 0 0 2px; 95 | background-color: var(--color-primary); 96 | text-align: right; 97 | border-radius: 100px; 98 | line-height: 1; 99 | white-space: nowrap; 100 | 101 | @utils-vertical-center; 102 | } 103 | @e innerText { 104 | display: inline-block; 105 | vertical-align: middle; 106 | color: var(--color-white); 107 | font-size: 12px; 108 | margin: 0 5px; 109 | } 110 | } 111 | } 112 | 113 | @keyframes progress { 114 | 0% { 115 | background-position: 0 0; 116 | } 117 | 100% { 118 | background-position: 32px 0; 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/date-picker/picker-panel.css: -------------------------------------------------------------------------------- 1 | @import "../common/var.css"; 2 | 3 | @component-namespace el { 4 | @b picker-panel { 5 | color: var(--datepicker-color); 6 | border: 1px solid var(--datepicker-border-color); 7 | box-shadow: 0 2px 6px #ccc; 8 | background: var(--color-white); 9 | border-radius: 2px; 10 | line-height: 20px; 11 | margin: 5px 0; 12 | 13 | @e body, body-wrapper { 14 | &::after { 15 | content: ""; 16 | display: table; 17 | clear: both; 18 | } 19 | } 20 | 21 | @e content { 22 | position: relative; 23 | margin: 15px; 24 | } 25 | 26 | @e footer { 27 | border-top: 1px solid var(--datepicker-inner-border-color); 28 | padding: 4px; 29 | text-align: right; 30 | background-color: var(--color-white); 31 | position: relative; 32 | } 33 | 34 | @e shortcut { 35 | display: block; 36 | width: 100%; 37 | border: 0; 38 | background-color: transparent; 39 | line-height: 28px; 40 | font-size: 14px; 41 | color: var(--datepicker-color); 42 | padding-left: 12px; 43 | text-align: left; 44 | outline: none; 45 | cursor: pointer; 46 | 47 | &:hover { 48 | background-color: var(--datepicker-cell-hover-color); 49 | } 50 | 51 | &.active { 52 | background-color: #e6f1fe; 53 | color: var(--datepicker-active-color); 54 | } 55 | } 56 | 57 | @e btn { 58 | border: 1px solid #dcdcdc; 59 | color: #333; 60 | line-height: 24px; 61 | border-radius: 2px; 62 | padding: 0 20px; 63 | cursor: pointer; 64 | background-color: transparent; 65 | outline: none; 66 | font-size: 12px; 67 | 68 | &[disabled] { 69 | color: #cccccc; 70 | cursor: not-allowed; 71 | } 72 | } 73 | 74 | @e icon-btn { 75 | font-size: 12px; 76 | color: var(--datepicker-icon-color); 77 | border: 0; 78 | background: transparent; 79 | cursor: pointer; 80 | outline: none; 81 | margin-top: 3px; 82 | 83 | &:hover { 84 | color: var(--datepicker-text-hover-color); 85 | } 86 | } 87 | 88 | @e link-btn { 89 | cursor: pointer; 90 | color: var(--color-primary); 91 | text-decoration: none; 92 | padding: 15px; 93 | font-size: 12px; 94 | } 95 | } 96 | 97 | .el-picker-panel *[slot=sidebar], 98 | .el-picker-panel__sidebar { 99 | position: absolute; 100 | top: 0; 101 | bottom: 0; 102 | width: 110px; 103 | border-right: 1px solid var(--datepicker-inner-border-color); 104 | box-sizing: border-box; 105 | padding-top: 6px; 106 | background-color: var(--color-dark-white); 107 | overflow: auto; 108 | } 109 | 110 | .el-picker-panel *[slot=sidebar] + .el-picker-panel__body, 111 | .el-picker-panel__sidebar + .el-picker-panel__body { 112 | margin-left: 110px; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/tag.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b tag { 7 | background-color: var(--tag-fill); 8 | display: inline-block; 9 | padding: var(--tag-padding); 10 | height: 24px; 11 | line-height: calc(@height - 2); 12 | font-size: var(--tag-font-size); 13 | color: var(--tag-color); 14 | border-radius: var(--tag-border-radius); 15 | box-sizing: border-box; 16 | border: 1px solid transparent; 17 | white-space: nowrap; 18 | 19 | & .el-icon-close { 20 | border-radius: 50%; 21 | text-align: center; 22 | position: relative; 23 | cursor: pointer; 24 | font-size: 12px; 25 | transform: scale(.75, .75); 26 | height: 18px; 27 | width: 18px; 28 | line-height: 18px; 29 | vertical-align: middle; 30 | top: -1px; 31 | right: -2px; 32 | 33 | &:hover { 34 | background-color: var(--color-white); 35 | color: var(--tag-fill); 36 | } 37 | } 38 | 39 | @m gray { 40 | background-color: var(--tag-gray-fill); 41 | border-color: var(--tag-gray-border); 42 | color: var(--tag-gray-color); 43 | @when hit { 44 | border-color: var(--tag-gray-color); 45 | } 46 | 47 | & .el-tag__close:hover { 48 | background-color: var(--tag-gray-color); 49 | color: var(--color-white); 50 | } 51 | } 52 | @m primary { 53 | background-color: var(--tag-primary-fill); 54 | border-color: var(--tag-primary-border); 55 | color: var(--tag-primary-color); 56 | @when hit { 57 | border-color: var(--tag-primary-color); 58 | } 59 | 60 | & .el-tag__close:hover { 61 | background-color: var(--tag-primary-color); 62 | color: var(--color-white); 63 | } 64 | } 65 | @m success { 66 | background-color: var(--tag-success-fill); 67 | border-color: var(--tag-success-border); 68 | color: var(--tag-success-color); 69 | @when hit { 70 | border-color: var(--tag-success-color); 71 | } 72 | 73 | & .el-tag__close:hover { 74 | background-color: var(--tag-success-color); 75 | color: var(--color-white); 76 | } 77 | } 78 | @m warning { 79 | background-color: var(--tag-warning-fill); 80 | border-color: var(--tag-warning-border); 81 | color: var(--tag-warning-color); 82 | @when hit { 83 | border-color: var(--tag-warning-color); 84 | } 85 | 86 | & .el-tag__close:hover { 87 | background-color: var(--tag-warning-color); 88 | color: var(--color-white); 89 | } 90 | } 91 | @m danger { 92 | background-color: var(--tag-danger-fill); 93 | border-color: var(--tag-danger-border); 94 | color: var(--tag-danger-color); 95 | @when hit { 96 | border-color: var(--tag-danger-color); 97 | } 98 | 99 | & .el-tag__close:hover { 100 | background-color: var(--tag-danger-color); 101 | color: var(--color-white); 102 | } 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/icon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'element-icons'; 3 | src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */ 4 | url('fonts/element-icons.ttf?t=1472440741') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | [class^="el-icon-"], [class*=" el-icon-"] { 10 | /* use !important to prevent issues with browser extensions that change fonts */ 11 | font-family: 'element-icons' !important; 12 | speak: none; 13 | font-style: normal; 14 | font-weight: normal; 15 | font-variant: normal; 16 | text-transform: none; 17 | line-height: 1; 18 | vertical-align: baseline; 19 | display: inline-block; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .el-icon-arrow-down:before { content: "\e600"; } 27 | .el-icon-arrow-left:before { content: "\e601"; } 28 | .el-icon-arrow-right:before { content: "\e602"; } 29 | .el-icon-arrow-up:before { content: "\e603"; } 30 | .el-icon-caret-bottom:before { content: "\e604"; } 31 | .el-icon-caret-left:before { content: "\e605"; } 32 | .el-icon-caret-right:before { content: "\e606"; } 33 | .el-icon-caret-top:before { content: "\e607"; } 34 | .el-icon-check:before { content: "\e608"; } 35 | .el-icon-circle-check:before { content: "\e609"; } 36 | .el-icon-circle-close:before { content: "\e60a"; } 37 | .el-icon-circle-cross:before { content: "\e60b"; } 38 | .el-icon-close:before { content: "\e60c"; } 39 | .el-icon-upload:before { content: "\e60d"; } 40 | .el-icon-d-arrow-left:before { content: "\e60e"; } 41 | .el-icon-d-arrow-right:before { content: "\e60f"; } 42 | .el-icon-d-caret:before { content: "\e610"; } 43 | .el-icon-date:before { content: "\e611"; } 44 | .el-icon-delete:before { content: "\e612"; } 45 | .el-icon-document:before { content: "\e613"; } 46 | .el-icon-edit:before { content: "\e614"; } 47 | .el-icon-information:before { content: "\e615"; } 48 | .el-icon-loading:before { content: "\e616"; } 49 | .el-icon-menu:before { content: "\e617"; } 50 | .el-icon-message:before { content: "\e618"; } 51 | .el-icon-minus:before { content: "\e619"; } 52 | .el-icon-more:before { content: "\e61a"; } 53 | .el-icon-picture:before { content: "\e61b"; } 54 | .el-icon-plus:before { content: "\e61c"; } 55 | .el-icon-search:before { content: "\e61d"; } 56 | .el-icon-setting:before { content: "\e61e"; } 57 | .el-icon-share:before { content: "\e61f"; } 58 | .el-icon-star-off:before { content: "\e620"; } 59 | .el-icon-star-on:before { content: "\e621"; } 60 | .el-icon-time:before { content: "\e622"; } 61 | .el-icon-warning:before { content: "\e623"; } 62 | .el-icon-delete2:before { content: "\e624"; } 63 | .el-icon-upload2:before { content: "\e627"; } 64 | .el-icon-view:before { content: "\e626"; } 65 | 66 | .el-icon-loading { 67 | animation: rotating 1s linear infinite; 68 | } 69 | 70 | .el-icon--right { 71 | margin-left: 5px; 72 | } 73 | .el-icon--left { 74 | margin-right: 5px; 75 | } 76 | 77 | @keyframes rotating { 78 | 0% { 79 | transform: rotateZ(0deg); 80 | } 81 | 100% { 82 | transform: rotateZ(360deg); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/radio.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | @import './mixins/button'; 4 | 5 | @component-namespace el { 6 | @b radio { 7 | color: var(--radio-color); 8 | position: relative; 9 | cursor: pointer; 10 | display: inline-block; 11 | white-space: nowrap; 12 | @utils-user-select none; 13 | 14 | & + .el-radio { 15 | margin-left: 15px; 16 | } 17 | 18 | @e input { 19 | white-space: nowrap; 20 | cursor: pointer; 21 | outline: none; 22 | display: inline-block; 23 | line-height: 1; 24 | position: relative; 25 | vertical-align: middle; 26 | 27 | @when disabled { 28 | .el-radio__inner { 29 | background-color: var(--radio-disabled-input-fill); 30 | border-color: var(--radio-disabled-input-border-color); 31 | cursor: not-allowed; 32 | 33 | &::after { 34 | cursor: not-allowed; 35 | background-color: var(--radio-disabled-icon-color); 36 | } 37 | 38 | & + .el-radio__label { 39 | cursor: not-allowed; 40 | } 41 | } 42 | &.is-checked { 43 | .el-radio__inner { 44 | background-color: var(--radio-disabled-checked-input-fill); 45 | border-color: var(--radio-disabled-checked-input-border-color); 46 | 47 | &::after { 48 | background-color: var(--radio-disabled-checked-icon-color); 49 | } 50 | } 51 | } 52 | & + .el-radio__label { 53 | color: var(--disabled-color-base); 54 | cursor: not-allowed; 55 | } 56 | } 57 | 58 | @when checked { 59 | .el-radio__inner { 60 | border-color: var(--radio-checked-input-border-color); 61 | background: var(--radio-checked-icon-color); 62 | 63 | &::after { 64 | transform: translate(-50%, -50%) scale(1); 65 | } 66 | } 67 | } 68 | 69 | @when focus { 70 | .el-radio__inner { 71 | border-color: var(--radio-input-border-color-hover); 72 | } 73 | } 74 | } 75 | @e inner { 76 | border: var(--radio-input-border); 77 | border-radius: var(--radio-input-border-radius); 78 | circle: var(--radio-input-width) var(--radio-input-fill); 79 | position: relative; 80 | cursor: pointer; 81 | display: inline-block; 82 | box-sizing: border-box; 83 | 84 | &:hover { 85 | border-color: var(--radio-input-border-color-hover); 86 | } 87 | 88 | &::after { 89 | circle: 6px var(--color-white); 90 | content: ""; 91 | position: absolute; 92 | left: 50%; 93 | top: 50%; 94 | transform: translate(-50%, -50%) scale(0); 95 | transition: transform .15s cubic-bezier(.71,-.46,.88,.6); 96 | } 97 | } 98 | 99 | @e original { 100 | opacity: 0; 101 | outline: none; 102 | position: absolute; 103 | z-index: -1; 104 | top: 0; 105 | left: 0; 106 | right: 0; 107 | bottom: 0; 108 | margin: 0; 109 | } 110 | 111 | @e label { 112 | font-size: var(--radio-font-size); 113 | padding-left: 5px; 114 | } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/radio-button.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b radio-button { 6 | position: relative; 7 | display: inline-block; 8 | 9 | @e inner { 10 | display: inline-block; 11 | line-height: 1; 12 | white-space: nowrap; 13 | vertical-align: middle; 14 | cursor: pointer; 15 | background: var(--button-default-fill); 16 | border: var(--border-base); 17 | border-left: 0; 18 | color: var(--button-default-color); 19 | -webkit-appearance: none; 20 | text-align: center; 21 | box-sizing: border-box; 22 | outline: none; 23 | margin: 0; 24 | position: relative; 25 | cursor: pointer; 26 | transition: var(--all-transition); 27 | 28 | @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0; 29 | 30 | &:hover { 31 | color: var(--color-primary); 32 | } 33 | 34 | & [class*="el-icon-"] { 35 | line-height: 0.9; 36 | 37 | & + span { 38 | margin-left: 5px; 39 | } 40 | } 41 | } 42 | 43 | @e orig-radio { 44 | opacity: 0; 45 | outline: none; 46 | position: absolute; 47 | z-index: -1; 48 | left: -999px; 49 | 50 | &:checked { 51 | & + .el-radio-button__inner { 52 | color: var(--radio-button-checked-color); 53 | background-color: var(--radio-button-checked-fill); 54 | border-color: var(--radio-button-checked-border-color); 55 | box-shadow: -1px 0 0 0 var(--radio-button-checked-border-color); 56 | } 57 | } 58 | 59 | &:disabled { 60 | & + .el-radio-button__inner { 61 | color: var(--button-disabled-color); 62 | cursor: not-allowed; 63 | background-image: none; 64 | background-color: var(--button-disabled-fill); 65 | border-color: var(--button-disabled-border); 66 | box-shadow: none; 67 | } 68 | } 69 | } 70 | 71 | &:first-child { 72 | .el-radio-button__inner { 73 | border-left: var(--border-base); 74 | border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); 75 | box-shadow: none !important; 76 | } 77 | } 78 | &:last-child { 79 | .el-radio-button__inner { 80 | border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; 81 | } 82 | } 83 | 84 | &:first-child:last-child { 85 | .el-radio-button__inner { 86 | border-radius: var(--border-radius-base); 87 | } 88 | } 89 | 90 | @m large { 91 | & .el-radio-button__inner { 92 | @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0; 93 | } 94 | } 95 | @m small { 96 | & .el-radio-button__inner { 97 | @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0; 98 | } 99 | } 100 | @m mini { 101 | & .el-radio-button__inner { 102 | @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0; 103 | } 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/carousel.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b carousel { 7 | overflow-x: hidden; 8 | position: relative; 9 | 10 | @e container { 11 | position: relative; 12 | height: 300px; 13 | } 14 | 15 | @e arrow { 16 | border: none; 17 | outline: none; 18 | padding: 0; 19 | margin: 0; 20 | size: var(--carousel-arrow-size); 21 | cursor: pointer; 22 | transition: .3s; 23 | border-radius: 50%; 24 | background-color: var(--carousel-arrow-background); 25 | color: var(--color-white); 26 | position: absolute; 27 | top: 50%; 28 | z-index: 10; 29 | transform: translateY(-50%); 30 | text-align: center; 31 | font-size: var(--carousel-arrow-font-size); 32 | 33 | @modifier left { 34 | left: 16px; 35 | } 36 | 37 | @modifier right { 38 | right: 16px; 39 | } 40 | 41 | &:hover { 42 | background-color: var(--carousel-arrow-hover-background); 43 | } 44 | 45 | & i { 46 | cursor: pointer; 47 | } 48 | } 49 | 50 | @e indicators { 51 | position: absolute; 52 | list-style: none; 53 | bottom: 0; 54 | left: 50%; 55 | transform: translateX(-50%); 56 | margin: 0; 57 | padding: 0; 58 | z-index: calc(var(--index-normal) + 1); 59 | 60 | @modifier outside { 61 | bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2); 62 | text-align: center; 63 | position: static; 64 | transform: none; 65 | .el-carousel__indicator:hover button { 66 | opacity: 0.64; 67 | } 68 | button { 69 | background-color: var(--carousel-indicator-out-color); 70 | opacity: 0.24; 71 | } 72 | } 73 | 74 | @modifier labels { 75 | left: 0; 76 | right: 0; 77 | transform: none; 78 | text-align: center; 79 | 80 | .el-carousel__button { 81 | size: auto auto; 82 | padding: 2px 18px; 83 | font-size: 12px; 84 | } 85 | 86 | .el-carousel__indicator { 87 | padding: 6px 4px; 88 | } 89 | } 90 | } 91 | 92 | @e indicator { 93 | display: inline-block; 94 | background-color: transparent; 95 | padding: var(--carousel-indicator-padding-vertical) var(--carousel-indicator-padding-horizontal); 96 | cursor: pointer; 97 | 98 | &:hover button { 99 | opacity: 0.72; 100 | } 101 | 102 | @when active { 103 | button { 104 | opacity: 1; 105 | } 106 | } 107 | } 108 | 109 | @e button { 110 | display: block; 111 | opacity: 0.48; 112 | size: var(--carousel-indicator-width) var(--carousel-indicator-height); 113 | background-color: var(--color-white); 114 | border: none; 115 | outline: none; 116 | padding: 0; 117 | margin: 0; 118 | cursor: pointer; 119 | transition: .3s; 120 | } 121 | } 122 | 123 | .carousel-arrow-left-enter, 124 | .carousel-arrow-left-leave-active { 125 | transform: translateY(-50%) translateX(-10px); 126 | opacity: 0; 127 | } 128 | 129 | .carousel-arrow-right-enter, 130 | .carousel-arrow-right-leave-active { 131 | transform: translateY(-50%) translateX(10px); 132 | opacity: 0; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /src/switch.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b switch { 7 | display: inline-block; 8 | position: relative; 9 | font-size: var(--switch-font-size); 10 | line-height: var(--switch-height); 11 | height: var(--switch-height); 12 | vertical-align: middle; 13 | @when disabled { 14 | & .el-switch__core, 15 | & .el-switch__label { 16 | cursor: not-allowed; 17 | } 18 | } 19 | 20 | @e label { 21 | transition: .2s; 22 | position: absolute; 23 | size: var(--switch-width) var(--switch-height); 24 | left: 0; 25 | top: 0; 26 | display: inline-block; 27 | font-size: var(--switch-font-size); 28 | cursor: pointer; 29 | z-index: 2; 30 | 31 | @m left { 32 | i { 33 | left: 6px; 34 | } 35 | } 36 | @m right { 37 | i { 38 | right: 6px; 39 | } 40 | } 41 | & * { 42 | line-height: 1; 43 | top: 4px; 44 | position: absolute; 45 | font-size: var(--switch-font-size); 46 | display: inline-block; 47 | color: var(--color-white); 48 | } 49 | } 50 | 51 | @e input { 52 | display: none; 53 | 54 | &.allow-focus { 55 | z-index: 0; 56 | display: initial; 57 | position: absolute; 58 | left: 0; 59 | top: 0; 60 | outline: none; 61 | opacity: 0; 62 | 63 | &:focus { 64 | + .el-switch__core { 65 | box-shadow: 0 0 2px var(--switch-focus-border); 66 | } 67 | } 68 | } 69 | } 70 | 71 | @e core { 72 | margin: 0; 73 | display: inline-block; 74 | position: relative; 75 | size: var(--switch-width) var(--switch-height); 76 | border: 1px solid var(--switch-off-color); 77 | outline: none; 78 | border-radius: var(--switch-core-border-radius); 79 | box-sizing: border-box; 80 | background: var(--switch-off-color); 81 | cursor: pointer; 82 | transition: border-color .3s, background-color .3s; 83 | z-index: 1; 84 | 85 | & .el-switch__button { 86 | position: absolute 0 * * 0; 87 | border-radius: var(--border-radius-circle); 88 | transition: transform .3s; 89 | size: var(--switch-button-size); 90 | background-color: var(--color-white); 91 | } 92 | } 93 | 94 | @when checked { 95 | .el-switch__core { 96 | border-color: var(--switch-on-color); 97 | background-color: var(--switch-on-color); 98 | } 99 | } 100 | 101 | @when disabled { 102 | .el-switch__core { 103 | border-color: var(--switch-disabled-color) !important; 104 | background: var(--switch-disabled-color) !important; 105 | 106 | & span { 107 | background-color: var(--switch-disabled-text-color) !important; 108 | } 109 | 110 | & ~ .el-switch__label * { 111 | color: var(--switch-disabled-text-color) !important; 112 | } 113 | } 114 | } 115 | 116 | @modifier wide { 117 | .el-switch__label { 118 | &.el-switch__label--left { 119 | span { 120 | left: 10px; 121 | } 122 | } 123 | &.el-switch__label--right { 124 | span { 125 | right: 10px; 126 | } 127 | } 128 | } 129 | } 130 | 131 | & .label-fade-enter, 132 | & .label-fade-leave-active { 133 | opacity: 0; 134 | } 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /src/popover.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b popover { 6 | position: absolute; 7 | background: var(--popover-fill); 8 | min-width: 150px; 9 | border-radius: 2px; 10 | border: 1px solid var(--popover-border-color); 11 | padding: var(--popover-padding); 12 | z-index: var(--index-popper); 13 | font-size: var(--popover-font-size); 14 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12), 15 | 0px 0px 6px 0px rgba(0, 0, 0, .04); 16 | 17 | .popper__arrow, 18 | .popper__arrow::after { 19 | position: absolute; 20 | display: block; 21 | width: 0; 22 | height: 0; 23 | border-color: transparent; 24 | border-style: solid; 25 | } 26 | 27 | .popper__arrow { 28 | border-width: var(--popover-arrow-size); 29 | } 30 | 31 | .popper__arrow::after { 32 | content: " "; 33 | border-width: var(--popover-arrow-size); 34 | } 35 | 36 | &[x-placement^="top"] { 37 | margin-bottom: calc(var(--popover-arrow-size) + 6); 38 | } 39 | 40 | &[x-placement^="top"] .popper__arrow { 41 | bottom: -var(--popover-arrow-size); 42 | left: 50%; 43 | margin-right: calc(var(--tooltip-arrow-size) / 2); 44 | border-top-color: var(--popover-border-color); 45 | border-bottom-width: 0; 46 | 47 | &::after { 48 | bottom: 1px; 49 | margin-left: -var(--popover-arrow-size); 50 | border-top-color: var(--popover-fill); 51 | border-bottom-width: 0; 52 | } 53 | } 54 | 55 | &[x-placement^="bottom"] { 56 | margin-top: calc(var(--popover-arrow-size) + 6); 57 | } 58 | 59 | &[x-placement^="bottom"] .popper__arrow { 60 | top: -var(--popover-arrow-size); 61 | left: 50%; 62 | margin-right: calc(var(--tooltip-arrow-size) / 2); 63 | border-top-width: 0; 64 | border-bottom-color: var(--popover-border-color); 65 | 66 | &::after { 67 | top: 1px; 68 | margin-left: -var(--popover-arrow-size); 69 | border-top-width: 0; 70 | border-bottom-color: var(--popover-fill); 71 | } 72 | } 73 | 74 | &[x-placement^="right"] { 75 | margin-left: calc(var(--popover-arrow-size) + 6); 76 | } 77 | 78 | &[x-placement^="right"] .popper__arrow { 79 | top: 50%; 80 | left: -var(--popover-arrow-size); 81 | margin-bottom: calc(var(--tooltip-arrow-size) / 2); 82 | border-right-color: var(--popover-border-color); 83 | border-left-width: 0; 84 | 85 | &::after { 86 | bottom: -var(--popover-arrow-size); 87 | left: 1px; 88 | border-right-color: var(--popover-fill); 89 | border-left-width: 0; 90 | } 91 | } 92 | 93 | &[x-placement^="left"] { 94 | margin-right: calc(var(--popover-arrow-size) + 6); 95 | } 96 | 97 | &[x-placement^="left"] .popper__arrow { 98 | top: 50%; 99 | right: -var(--popover-arrow-size); 100 | margin-bottom: calc(var(--tooltip-arrow-size) / 2); 101 | border-right-width: 0; 102 | border-left-color: var(--popover-border-color); 103 | 104 | &::after { 105 | right: 1px; 106 | bottom: -var(--popover-arrow-size); 107 | margin-left: -var(--popover-arrow-size); 108 | border-right-width: 0; 109 | border-left-color: var(--popover-fill); 110 | } 111 | } 112 | 113 | @e title { 114 | color: var(--popover-title-color); 115 | font-size: var(--popover-title-font-size); 116 | line-height: 1; 117 | margin-bottom: 9px; 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/select.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | @import "./select-dropdown.css"; 4 | @import "./input.css"; 5 | @import "./tag.css"; 6 | @import "./option.css"; 7 | @import "./option-group.css"; 8 | @import "./scrollbar.css"; 9 | 10 | @component-namespace el { 11 | 12 | @b select { 13 | display: inline-block; 14 | position: relative; 15 | 16 | &:hover { 17 | .el-input__inner { 18 | border-color: var(--select-border-color-hover); 19 | } 20 | } 21 | 22 | & .el-input__inner { 23 | cursor: pointer; 24 | padding-right: 35px; 25 | 26 | &:focus { 27 | border-color: var(--select-input-focus-background); 28 | } 29 | } 30 | 31 | & .el-input { 32 | & .el-input__icon { 33 | color: var(--select-input-color); 34 | font-size: var(--select-input-font-size); 35 | transition: transform .3s; 36 | transform: translateY(-50%) rotateZ(180deg); 37 | line-height: 16px; 38 | top: 50%; 39 | cursor: pointer; 40 | 41 | @when reverse { 42 | transform: translateY(-50%); 43 | } 44 | 45 | @when show-close { 46 | transition: 0s; 47 | size: 16px; 48 | font-size: var(--select-font-size); 49 | right: 8px; 50 | text-align: center; 51 | transform: translateY(-50%) rotateZ(180deg); 52 | border-radius: var(--border-radius-circle); 53 | color: var(--select-input-color); 54 | 55 | &:hover { 56 | color: var(--select-close-hover-color); 57 | } 58 | } 59 | } 60 | 61 | &.is-disabled { 62 | & .el-input__inner { 63 | cursor: not-allowed; 64 | 65 | &:hover { 66 | border-color: var(--select-disabled-border); 67 | } 68 | } 69 | } 70 | } 71 | 72 | & > .el-input { 73 | display: block; 74 | } 75 | 76 | @e input { 77 | border: none; 78 | outline: none; 79 | padding: 0; 80 | margin-left: 10px; 81 | color: var(--select-multiple-input-color); 82 | font-size: var(--select-font-size); 83 | vertical-align: baseline; 84 | appearance: none; 85 | height: 28px; 86 | background-color: transparent; 87 | @when mini { 88 | height: 14px; 89 | } 90 | } 91 | 92 | @e close { 93 | cursor: pointer; 94 | position: absolute; 95 | top: 8px; 96 | z-index: var(--index-top); 97 | right: 25px; 98 | color: var(--select-input-color); 99 | line-height: 18px; 100 | font-size: var(--select-input-font-size); 101 | 102 | &:hover { 103 | color: var(--select-close-hover-color); 104 | } 105 | } 106 | 107 | @e tags { 108 | position: absolute; 109 | line-height: normal; 110 | white-space: normal; 111 | z-index: var(--index-normal); 112 | top: 50%; 113 | transform: translateY(-50%); 114 | } 115 | 116 | & .el-tag__close { 117 | margin-top: -2px; 118 | } 119 | 120 | & .el-tag { 121 | height: var(--select-tag-height); 122 | line-height: var(--select-tag-height); 123 | box-sizing: border-box; 124 | margin: 3px 0 3px 6px; 125 | } 126 | 127 | @e tag { 128 | display: inline-block; 129 | height: var(--select-tag-height); 130 | line-height: var(--select-tag-height); 131 | font-size: var(--select-font-size); 132 | border-radius: var(--border-radius-base); 133 | color: var(--select-tag-color); 134 | background-color: var(--select-tag-background); 135 | 136 | & .el-icon-close { 137 | font-size: var(--select-input-font-size); 138 | } 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/message-box.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | @import "./common/popup.css"; 4 | @import "./button.css"; 5 | @import "./input.css"; 6 | 7 | @component-namespace el { 8 | 9 | @b message-box { 10 | text-align: left; 11 | display: inline-block; 12 | vertical-align: middle; 13 | background-color: var(--color-white); 14 | width: var(--msgbox-width); 15 | border-radius: var(--msgbox-border-radius); 16 | font-size: var(--msgbox-font-size); 17 | overflow: hidden; 18 | backface-visibility: hidden; 19 | @e wrapper { 20 | position: fixed; 21 | top: 0; 22 | bottom: 0; 23 | left: 0; 24 | right: 0; 25 | text-align: center; 26 | &::after { 27 | content: ""; 28 | display: inline-block; 29 | height: 100%; 30 | width: 0; 31 | vertical-align: middle; 32 | } 33 | } 34 | 35 | @e header { 36 | position: relative; 37 | padding: 20px 20px 0; 38 | } 39 | 40 | @e headerbtn { 41 | position: absolute; 42 | top: 19px; 43 | right: 20px; 44 | background: transparent; 45 | border: none; 46 | outline: none; 47 | padding: 0; 48 | cursor: pointer; 49 | 50 | .el-message-box__close { 51 | color: #999; 52 | } 53 | 54 | &:focus, &:hover { 55 | .el-message-box__close { 56 | color: var(--color-primary); 57 | } 58 | } 59 | 60 | } 61 | 62 | @e content { 63 | padding: 30px 20px; 64 | color: var(--msgbox-content-color); 65 | font-size: var(--msgbox-content-font-size); 66 | position: relative; 67 | } 68 | 69 | @e input { 70 | padding-top: 15px; 71 | & input.invalid { 72 | border-color: var(--color-danger); 73 | &:focus { 74 | border-color: var(--color-danger); 75 | } 76 | } 77 | } 78 | 79 | @e errormsg { 80 | color: var(--color-danger); 81 | font-size: var(--msgbox-error-font-size); 82 | min-height: 18px; 83 | margin-top: 2px; 84 | } 85 | 86 | @e title { 87 | padding-left: 0; 88 | margin-bottom: 0; 89 | font-size: var(--msgbox-font-size); 90 | font-weight: bold; 91 | height: 18px; 92 | color: #333; 93 | } 94 | 95 | @e message { 96 | margin: 0; 97 | 98 | & p { 99 | margin: 0; 100 | line-height: 1.4; 101 | } 102 | } 103 | 104 | @e btns { 105 | padding: 10px 20px 15px; 106 | text-align: right; 107 | 108 | & button:nth-child(2) { 109 | margin-left: 10px; 110 | } 111 | } 112 | 113 | @e btns-reverse { 114 | flex-direction: row-reverse; 115 | } 116 | 117 | @e status { 118 | position: absolute; 119 | top: 50%; 120 | transform: translateY(-50%); 121 | font-size: 36px !important; 122 | 123 | &.el-icon-circle-check { 124 | color: var(--msgbox-success-color); 125 | } 126 | 127 | &.el-icon-information { 128 | color: var(--msgbox-info-color); 129 | } 130 | 131 | &.el-icon-warning { 132 | color: var(--msgbox-warning-color); 133 | } 134 | 135 | &.el-icon-circle-cross { 136 | color: var(--msgbox-danger-color); 137 | } 138 | } 139 | } 140 | } 141 | 142 | .msgbox-fade-enter-active { 143 | animation: msgbox-fade-in .3s; 144 | } 145 | 146 | .msgbox-fade-leave-active { 147 | animation: msgbox-fade-out .3s; 148 | } 149 | 150 | @keyframes msgbox-fade-in { 151 | 0% { 152 | transform: translate3d(0, -20px, 0); 153 | opacity: 0; 154 | } 155 | 100% { 156 | transform: translate3d(0, 0, 0); 157 | opacity: 1; 158 | } 159 | } 160 | 161 | @keyframes msgbox-fade-out { 162 | 0% { 163 | transform: translate3d(0, 0, 0); 164 | opacity: 1; 165 | } 166 | 100% { 167 | transform: translate3d(0, -20px, 0); 168 | opacity: 0; 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /src/tooltip.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b tooltip { 6 | @e popper { 7 | position: absolute; 8 | border-radius: 4px; 9 | padding: var(--tooltip-padding); 10 | z-index: var(--index-popper); 11 | font-size: var(--tooltip-font-size); 12 | line-height: 1.2; 13 | 14 | .popper__arrow, 15 | .popper__arrow::after { 16 | position: absolute; 17 | display: block; 18 | width: 0; 19 | height: 0; 20 | border-color: transparent; 21 | border-style: solid; 22 | } 23 | 24 | .popper__arrow { 25 | border-width: var(--tooltip-arrow-size); 26 | } 27 | 28 | .popper__arrow::after { 29 | content: " "; 30 | border-width: 5px; 31 | } 32 | 33 | &[x-placement^="top"] { 34 | margin-bottom: calc(var(--tooltip-arrow-size) + 6px); 35 | } 36 | 37 | &[x-placement^="top"] .popper__arrow { 38 | bottom: -var(--tooltip-arrow-size); 39 | border-top-color: var(--tooltip-border-color); 40 | border-bottom-width: 0; 41 | 42 | &::after { 43 | bottom: 1px; 44 | margin-left: -5px; 45 | border-top-color: var(--tooltip-fill); 46 | border-bottom-width: 0; 47 | } 48 | } 49 | 50 | &[x-placement^="bottom"] { 51 | margin-top: calc(var(--tooltip-arrow-size) + 6px); 52 | } 53 | 54 | &[x-placement^="bottom"] .popper__arrow { 55 | top: -var(--tooltip-arrow-size); 56 | border-top-width: 0; 57 | border-bottom-color: var(--tooltip-border-color); 58 | 59 | &::after { 60 | top: 1px; 61 | margin-left: -5px; 62 | border-top-width: 0; 63 | border-bottom-color: var(--tooltip-fill); 64 | } 65 | } 66 | 67 | &[x-placement^="right"] { 68 | margin-left: calc(var(--tooltip-arrow-size) + 6px); 69 | } 70 | 71 | &[x-placement^="right"] .popper__arrow { 72 | left: -var(--tooltip-arrow-size); 73 | border-right-color: var(--tooltip-border-color); 74 | border-left-width: 0; 75 | 76 | &::after { 77 | bottom: -5px; 78 | left: 1px; 79 | border-right-color: var(--tooltip-fill); 80 | border-left-width: 0; 81 | } 82 | } 83 | 84 | &[x-placement^="left"] { 85 | margin-right: calc(var(--tooltip-arrow-size) + 6px); 86 | } 87 | 88 | &[x-placement^="left"] .popper__arrow { 89 | right: -var(--tooltip-arrow-size); 90 | border-right-width: 0; 91 | border-left-color: var(--tooltip-border-color); 92 | 93 | &::after { 94 | right: 1px; 95 | bottom: -5px; 96 | margin-left: -5px; 97 | border-right-width: 0; 98 | border-left-color: var(--tooltip-fill); 99 | } 100 | } 101 | 102 | @when dark { 103 | background: var(--tooltip-fill); 104 | color: var(--tooltip-color); 105 | } 106 | 107 | @when light { 108 | background: var(--tooltip-color); 109 | border: 1px solid var(--tooltip-fill); 110 | 111 | &[x-placement^="top"] .popper__arrow { 112 | border-top-color: var(--tooltip-fill); 113 | &::after { 114 | border-top-color: var(--tooltip-color); 115 | } 116 | } 117 | &[x-placement^="bottom"] .popper__arrow { 118 | border-bottom-color: var(--tooltip-fill); 119 | &::after { 120 | border-bottom-color: var(--tooltip-color); 121 | } 122 | } 123 | &[x-placement^="left"] .popper__arrow { 124 | border-left-color: var(--tooltip-fill); 125 | &::after { 126 | border-left-color: var(--tooltip-color); 127 | } 128 | } 129 | &[x-placement^="right"] .popper__arrow { 130 | border-right-color: var(--tooltip-fill); 131 | &::after { 132 | border-right-color: var(--tooltip-color); 133 | } 134 | } 135 | } 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /src/transfer.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | @import "./input.css"; 4 | @import "./button.css"; 5 | @import "./checkbox.css"; 6 | @import "./checkbox-group.css"; 7 | 8 | @component-namespace el { 9 | @b transfer { 10 | font-size: var(--font-size-base); 11 | 12 | @e buttons { 13 | display: inline-block; 14 | vertical-align: middle; 15 | padding: 0 10px; 16 | 17 | .el-button { 18 | display: block; 19 | margin: 0 auto; 20 | padding: 8px 12px; 21 | 22 | &:first-child { 23 | margin-bottom: 6px; 24 | } 25 | } 26 | 27 | .el-button [class*="el-icon-"] + span { 28 | margin-left: 0; 29 | } 30 | } 31 | } 32 | 33 | @b transfer-panel { 34 | border: 1px solid var(--transfer-border-color); 35 | background: var(--color-white); 36 | box-shadow: var(--transfer-box-shadow); 37 | display: inline-block; 38 | vertical-align: middle; 39 | width: var(--transfer-panel-width); 40 | box-sizing: border-box; 41 | position: relative; 42 | 43 | @e body { 44 | padding-bottom: var(--transfer-panel-footer-height); 45 | height: var(--transfer-panel-body-height); 46 | } 47 | 48 | @e list { 49 | margin: 0; 50 | padding: 6px 0; 51 | list-style: none; 52 | height: var(--transfer-panel-body-height); 53 | overflow: auto; 54 | box-sizing: border-box; 55 | 56 | @when filterable { 57 | height: calc(var(--transfer-panel-body-height) - var(--transfer-filter-height) - 10px); 58 | } 59 | } 60 | 61 | @e item { 62 | height: var(--transfer-item-height); 63 | line-height: var(--transfer-item-height); 64 | padding-left: 20px; 65 | display: block; 66 | 67 | & + .el-transfer-panel__item { 68 | margin-left: 0; 69 | } 70 | 71 | &.el-checkbox { 72 | color: var(--color-extra-light-black); 73 | } 74 | 75 | &:hover { 76 | background: var(--transfer-item-hover-background); 77 | } 78 | 79 | .el-checkbox__label { 80 | width: 100%; 81 | @utils-ellipsis; 82 | display: block; 83 | box-sizing: border-box; 84 | padding-left: 28px; 85 | } 86 | 87 | .el-checkbox__input { 88 | position: absolute; 89 | top: 9px; 90 | } 91 | } 92 | 93 | @e filter { 94 | margin-top: 10px; 95 | text-align: center; 96 | padding: 0 10px; 97 | width: 100%; 98 | box-sizing: border-box; 99 | 100 | .el-input__inner { 101 | height: var(--transfer-filter-height); 102 | width: 100%; 103 | display: inline-block; 104 | box-sizing: border-box; 105 | } 106 | 107 | .el-input__icon { 108 | right: 10px; 109 | } 110 | 111 | .el-icon-circle-close { 112 | cursor: pointer; 113 | } 114 | } 115 | 116 | .el-transfer-panel__header { 117 | height: var(--transfer-panel-header-height); 118 | line-height: var(--transfer-panel-header-height); 119 | background: var(--transfer-panel-header-background); 120 | margin: 0; 121 | padding-left: 20px; 122 | border-bottom: 1px solid var(--transfer-border-color); 123 | box-sizing: border-box; 124 | color: var(--color-base-black); 125 | } 126 | 127 | .el-transfer-panel__footer { 128 | height: var(--transfer-panel-footer-height); 129 | background: var(--color-white); 130 | margin: 0; 131 | padding: 0; 132 | border-top: 1px solid var(--transfer-border-color); 133 | position: absolute; 134 | bottom: 0; 135 | left: 0; 136 | width: 100%; 137 | z-index: var(--index-normal); 138 | @utils-vertical-center; 139 | 140 | .el-checkbox { 141 | padding-left: 20px; 142 | color: var(--color-base-silver); 143 | } 144 | } 145 | 146 | .el-transfer-panel__empty { 147 | margin: 0; 148 | height: var(--transfer-item-height); 149 | line-height: var(--transfer-item-height); 150 | padding: 6px 20px 0; 151 | color: var(--color-base-silver); 152 | } 153 | 154 | .el-checkbox__label { 155 | padding-left: 14px; 156 | } 157 | 158 | .el-checkbox__inner { 159 | size: 14px; 160 | border-radius: 3px; 161 | &::after { 162 | height: 6px; 163 | width: 3px; 164 | left: 4px; 165 | } 166 | } 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /src/cascader.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./input.css"; 3 | @import "./common/var.css"; 4 | 5 | @component-namespace el { 6 | 7 | @b cascader { 8 | display: inline-block; 9 | position: relative; 10 | 11 | .el-input, 12 | .el-input__inner { 13 | cursor: pointer; 14 | } 15 | 16 | .el-input__icon { 17 | transition: none; 18 | } 19 | 20 | .el-icon-caret-bottom { 21 | transition: transform .3s; 22 | 23 | @when reverse { 24 | transform: rotateZ(180deg); 25 | } 26 | } 27 | 28 | .el-icon-circle-close { 29 | z-index: calc(var(--index-normal) + 1); 30 | } 31 | 32 | @e label { 33 | position: absolute; 34 | left: 0; 35 | top: 0; 36 | height: 100%; 37 | line-height: 36px; 38 | padding: 0 25px 0 10px; 39 | color: var(--input-color); 40 | width: 100%; 41 | white-space: nowrap; 42 | text-overflow: ellipsis; 43 | overflow: hidden; 44 | box-sizing: border-box; 45 | cursor: pointer; 46 | font-size: 14px; 47 | text-align: left; 48 | span { 49 | color: var(--color-light-silver); 50 | } 51 | } 52 | 53 | @m large { 54 | font-size: var(--input-large-font-size); 55 | 56 | .el-cascader__label { 57 | line-height: calc(var(--input-large-height) - 2); 58 | } 59 | } 60 | @m small { 61 | font-size: var(--input-small-font-size); 62 | 63 | .el-cascader__label { 64 | line-height: calc(var(--input-small-height) - 2); 65 | } 66 | } 67 | @when disabled { 68 | .el-cascader__label { 69 | z-index: calc(var(--index-normal) + 1); 70 | color: var(--disabled-color-base); 71 | } 72 | } 73 | } 74 | 75 | @b cascader-menus { 76 | white-space: nowrap; 77 | background: #fff; 78 | position: absolute; 79 | margin: 5px 0; 80 | z-index: calc(var(--index-normal) + 1); 81 | border: var(--select-dropdown-border); 82 | border-radius: var(--border-radius-small); 83 | box-shadow: var(--select-dropdown-shadow); 84 | } 85 | 86 | @b cascader-menu { 87 | display: inline-block; 88 | vertical-align: top; 89 | height: 204px; 90 | overflow: auto; 91 | border-right: var(--select-dropdown-border); 92 | background-color: var(--select-dropdown-background); 93 | box-sizing: border-box; 94 | margin: 0; 95 | padding: 6px 0; 96 | min-width: 160px; 97 | 98 | &:last-child { 99 | border-right: 0; 100 | } 101 | 102 | @e item { 103 | font-size: var(--select-font-size); 104 | padding: 8px 30px 8px 10px; 105 | position: relative; 106 | white-space: nowrap; 107 | overflow: hidden; 108 | text-overflow: ellipsis; 109 | color: var(--select-option-color); 110 | height: var(--select-option-height); 111 | line-height: 1.5; 112 | box-sizing: border-box; 113 | cursor: pointer; 114 | 115 | @e keyword { 116 | font-weight: bold; 117 | } 118 | 119 | @m extensible { 120 | &:after { 121 | font-family: 'element-icons'; 122 | content: "\e606"; 123 | font-size: 12px; 124 | transform: scale(0.8); 125 | color: rgb(191, 203, 217); 126 | position: absolute; 127 | right: 10px; 128 | margin-top: 1px; 129 | } 130 | } 131 | 132 | @when disabled { 133 | color: var(--select-option-disabled-color); 134 | background-color: var(--select-option-disabled-background); 135 | cursor: not-allowed; 136 | 137 | &:hover { 138 | background-color: var(--color-white); 139 | } 140 | } 141 | 142 | @when active { 143 | color: var(--color-white); 144 | background-color: var(--select-option-selected); 145 | 146 | &:hover { 147 | background-color: var(--select-option-selected-hover); 148 | } 149 | } 150 | 151 | &:hover { 152 | background-color: var(--select-option-hover-background); 153 | } 154 | 155 | &.selected { 156 | color: var(--color-white); 157 | background-color: var(--select-option-selected); 158 | 159 | &.hover { 160 | background-color: var(--select-option-selected-hover); 161 | } 162 | } 163 | } 164 | 165 | @m flexible { 166 | height: auto; 167 | max-height: 180px; 168 | overflow: auto; 169 | 170 | .el-cascader-menu__item { 171 | overflow: visible; 172 | } 173 | } 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /src/step.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b step { 6 | position: relative; 7 | vertical-align: top; 8 | 9 | &:last-child .el-step__main { 10 | padding-right: 0; 11 | } 12 | 13 | @when horizontal { 14 | display: inline-block; 15 | } 16 | 17 | @when vertical { 18 | & .el-step__head, 19 | & .el-step__main { 20 | display: inline-block; 21 | } 22 | 23 | & .el-step__main { 24 | padding-left: 10px; 25 | } 26 | } 27 | 28 | @e line { 29 | display: inline-block; 30 | position: absolute; 31 | border-color: inherit; 32 | background-color: var(--color-extra-light-silver); 33 | 34 | @when icon { 35 | @when horizontal { 36 | right: 4px; 37 | } 38 | } 39 | 40 | @when horizontal { 41 | top: 15px; 42 | height: 2px; 43 | left: 32px; 44 | right: 0; 45 | } 46 | 47 | @when vertical { 48 | width: 2px; 49 | box-sizing: border-box; 50 | top: 32px; 51 | bottom: 0; 52 | left: 15px; 53 | } 54 | } 55 | 56 | @e line-inner { 57 | display: block; 58 | border-width: 1px; 59 | border-style: solid; 60 | border-color: inherit; 61 | transition: all 150ms; 62 | box-sizing: border-box; 63 | width: 0; 64 | height: 0; 65 | } 66 | 67 | @e icon { 68 | display: block; 69 | line-height: 28px; 70 | 71 | > * { 72 | line-height: inherit; 73 | vertical-align: middle; 74 | } 75 | } 76 | 77 | @e head { 78 | circle: 28px transparent; 79 | text-align: center; 80 | line-height: 28px; 81 | font-size: 28px; 82 | vertical-align: top; 83 | transition: all 150ms; 84 | 85 | @when text { 86 | font-size: 14px; 87 | border-width: 2px; 88 | border-style: solid; 89 | 90 | @when process { 91 | color: var(--color-white); 92 | background-color: var(--color-extra-light-silver); 93 | border-color: var(--color-extra-light-silver); 94 | } 95 | 96 | @when wait { 97 | color: var(--color-extra-light-silver); 98 | background-color: var(--color-white); 99 | border-color: var(--color-extra-light-silver); 100 | } 101 | 102 | @when success { 103 | color: var(--color-white); 104 | background-color: var(--color-success); 105 | border-color: var(--color-success); 106 | } 107 | 108 | @when error { 109 | color: var(--color-white); 110 | background-color: var(--color-danger); 111 | border-color: var(--color-danger); 112 | } 113 | 114 | @when finish { 115 | color: var(--color-white); 116 | background-color: var(--color-primary); 117 | border-color: var(--color-primary); 118 | } 119 | } 120 | 121 | @when process { 122 | color: var(--color-extra-light-silver); 123 | border-color: var(--color-extra-light-silver); 124 | } 125 | 126 | @when wait { 127 | color: var(--color-extra-light-silver); 128 | border-color: var(--color-extra-light-silver); 129 | } 130 | 131 | @when success { 132 | color: var(--color-success); 133 | border-color: var(--color-success); 134 | } 135 | 136 | @when error { 137 | color: var(--color-danger); 138 | border-color: var(--color-danger); 139 | } 140 | 141 | @when finish { 142 | color: var(--color-primary); 143 | border-color: var(--color-primary); 144 | } 145 | } 146 | 147 | @e main { 148 | white-space: normal; 149 | padding-right: 10px; 150 | text-align: left; 151 | } 152 | 153 | @e title { 154 | font-size: 14px; 155 | line-height: 32px; 156 | display: inline-block; 157 | 158 | @when process { 159 | font-weight: 700; 160 | color: var(--color-extra-light-black); 161 | } 162 | 163 | @when wait { 164 | font-weight: normal; 165 | color: var(--color-light-silver); 166 | } 167 | 168 | @when success { 169 | font-weight: 700; 170 | color: var(--color-success); 171 | } 172 | 173 | @when error { 174 | font-weight: 700; 175 | color: var(--color-danger); 176 | } 177 | 178 | @when finish { 179 | font-weight: 700; 180 | color: var(--color-primary); 181 | } 182 | } 183 | 184 | @e description { 185 | font-size: 12px; 186 | font-weight: normal; 187 | line-height: 14px; 188 | 189 | @when process { 190 | color: var(--color-base-silver); 191 | } 192 | 193 | @when wait { 194 | color: var(--color-extra-light-silver); 195 | } 196 | 197 | @when success { 198 | color: var(--color-success); 199 | } 200 | 201 | @when error { 202 | color: var(--color-danger); 203 | } 204 | 205 | @when finish { 206 | color: var(--color-primary); 207 | } 208 | } 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /src/pagination.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./select.css"; 3 | @import "./common/var.css"; 4 | 5 | @component-namespace el { 6 | @b pagination { 7 | white-space: nowrap; 8 | padding: 2px 5px; 9 | color: var(--pagination-color); 10 | @utils-clearfix; 11 | 12 | span, 13 | button { 14 | display: inline-block; 15 | font-size: var(--pagination-font-size); 16 | min-width: var(--pagination-button-size); 17 | height: var(--pagination-button-size); 18 | line-height: var(--pagination-button-size); 19 | vertical-align: top; 20 | box-sizing: border-box; 21 | } 22 | 23 | .el-select .el-input { 24 | width: 110px; 25 | input { 26 | padding-right: 25px; 27 | border-radius: var(--border-radius-small); 28 | height: 28px; 29 | } 30 | } 31 | 32 | button { 33 | border: none; 34 | padding: 0 6px; 35 | background: transparent; 36 | 37 | &:focus { 38 | outline: none; 39 | } 40 | 41 | &:hover { 42 | color: var(--pagination-hover-fill); 43 | } 44 | 45 | &.disabled { 46 | color: var(--pagination-button-disabled-color); 47 | background-color: var(--pagination-button-disabled-fill); 48 | cursor: not-allowed; 49 | } 50 | } 51 | 52 | .btn-prev, 53 | .btn-next { 54 | background: center center no-repeat; 55 | background-size: 16px; 56 | background-color: var(--pagination-fill); 57 | border: 1px solid var(--pagination-border-color); 58 | cursor: pointer; 59 | margin: 0; 60 | color: var(--pagination-button-color); 61 | 62 | .el-icon { 63 | display: block; 64 | font-size: 12px; 65 | } 66 | } 67 | 68 | .btn-prev { 69 | border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius); 70 | border-right: 0; 71 | } 72 | 73 | .btn-next { 74 | border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0; 75 | border-left: 0; 76 | } 77 | 78 | @m small { 79 | .btn-prev, 80 | .btn-next, 81 | .el-pager li, 82 | .el-pager li:last-child { 83 | border-color: transparent; 84 | font-size: 12px; 85 | line-height: 22px; 86 | height: 22px; 87 | min-width: 22px; 88 | } 89 | 90 | .arrow.disabled { 91 | visibility: hidden; 92 | } 93 | 94 | .el-pager li { 95 | border-radius: var(--pagination-border-radius); 96 | } 97 | } 98 | 99 | @e sizes { 100 | margin: 0 10px 0 0; 101 | 102 | .el-input .el-input__inner { 103 | font-size: 13px; 104 | border-color: var(--pagination-border-color); 105 | 106 | &:hover { 107 | border-color: var(--pagination-hover-fill); 108 | } 109 | } 110 | } 111 | 112 | @e jump { 113 | margin-left: 10px; 114 | } 115 | 116 | @e total { 117 | margin: 0 10px; 118 | } 119 | 120 | @e rightwrapper { 121 | float: right; 122 | } 123 | 124 | @e editor { 125 | border: 1px solid var(--pagination-border-color); 126 | border-radius: var(--pagination-border-radius); 127 | line-height: 18px; 128 | padding: 4px 2px; 129 | width: 30px; 130 | text-align: center; 131 | margin: 0 6px; 132 | box-sizing: border-box; 133 | transition: border .3s; 134 | -moz-appearance: textfield; 135 | 136 | &::-webkit-inner-spin-button, 137 | &::-webkit-outer-spin-button { 138 | -webkit-appearance: none; 139 | margin: 0; 140 | } 141 | 142 | &:focus { 143 | outline: none; 144 | border-color: var(--pagination-hover-fill); 145 | }; 146 | } 147 | } 148 | 149 | @b pager { 150 | user-select: none; 151 | list-style: none; 152 | display: inline-block; 153 | vertical-align: top; 154 | font-size: 0; 155 | padding: 0; 156 | margin: 0; 157 | 158 | li { 159 | padding: 0 4px; 160 | border: 1px solid var(--pagination-border-color); 161 | border-right: 0; 162 | background: var(--pagination-fill); 163 | vertical-align: top; 164 | display: inline-block; 165 | font-size: var(--pagination-font-size); 166 | min-width: var(--pagination-button-size); 167 | height: var(--pagination-button-size); 168 | line-height: var(--pagination-button-size); 169 | cursor: pointer; 170 | box-sizing: border-box; 171 | text-align: center; 172 | margin: 0; 173 | 174 | &:last-child { 175 | border-right: 1px solid var(--pagination-border-color); 176 | } 177 | 178 | &.btn-quicknext, 179 | &.btn-quickprev { 180 | line-height: 28px; 181 | color: var(--pagination-button-color); 182 | } 183 | 184 | &.btn-quickprev:hover { 185 | cursor: pointer; 186 | } 187 | 188 | &.btn-quicknext:hover { 189 | cursor: pointer; 190 | } 191 | 192 | &.active + li { 193 | border-left: 0; 194 | padding-left: 5px; 195 | } 196 | 197 | &:hover { 198 | color: var(--pagination-hover-fill); 199 | } 200 | 201 | &.active { 202 | border-color: var(--pagination-hover-fill); 203 | background-color: var(--pagination-hover-fill); 204 | color: var(--pagination-hover-color); 205 | cursor: default; 206 | } 207 | } 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /src/slider.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./input-number.css"; 3 | @import "./tooltip.css"; 4 | @import "./common/var.css"; 5 | 6 | @component-namespace el { 7 | @b slider { 8 | @utils-clearfix; 9 | @e runway { 10 | width: 100%; 11 | height: var(--slider-height); 12 | margin: var(--slider-margin); 13 | background-color: var(--slider-runway-background-color); 14 | border-radius: var(--slider-border-radius); 15 | position: relative; 16 | cursor: pointer; 17 | vertical-align: middle; 18 | 19 | &.show-input { 20 | margin-right: 160px; 21 | width: auto; 22 | } 23 | 24 | &.disabled { 25 | cursor: default; 26 | 27 | .el-slider__bar, .el-slider__button { 28 | background-color: var(--slider-disable-color); 29 | } 30 | 31 | .el-slider__button-wrapper { 32 | &:hover, 33 | &.hover { 34 | cursor: not-allowed; 35 | } 36 | 37 | &.dragging { 38 | cursor: not-allowed; 39 | } 40 | } 41 | 42 | .el-slider__button { 43 | &:hover, 44 | &.hover, 45 | &.dragging { 46 | transform: scale(1); 47 | } 48 | 49 | &:hover, 50 | &.hover { 51 | cursor: not-allowed; 52 | } 53 | 54 | &.dragging { 55 | cursor: not-allowed; 56 | } 57 | } 58 | } 59 | } 60 | 61 | @e input { 62 | float: right; 63 | margin-top: 3px; 64 | } 65 | 66 | @e bar { 67 | height: var(--slider-height); 68 | background-color: var(--slider-main-background-color); 69 | border-top-left-radius: var(--slider-border-radius); 70 | border-bottom-left-radius: var(--slider-border-radius); 71 | position: absolute; 72 | } 73 | 74 | @e button-wrapper { 75 | size: var(--slider-button-wrapper-size); 76 | position: absolute; 77 | z-index: 1001; 78 | top: var(--slider-button-wrapper-offset); 79 | transform: translateX(-50%); 80 | background-color: transparent; 81 | text-align: center; 82 | user-select: none; 83 | @utils-vertical-center; 84 | 85 | .el-tooltip { 86 | vertical-align: middle; 87 | display: inline-block; 88 | } 89 | 90 | &:hover, 91 | &.hover { 92 | cursor: grab; 93 | } 94 | 95 | &.dragging { 96 | cursor: grabbing; 97 | } 98 | } 99 | 100 | @e button { 101 | size: var(--slider-button-size); 102 | background-color: var(--slider-main-background-color); 103 | border-radius: 50%; 104 | transition: .2s; 105 | user-select: none; 106 | 107 | &:hover, 108 | &.hover, 109 | &.dragging { 110 | transform: scale(1.5); 111 | background-color: var(--slider-button-hover-color); 112 | } 113 | 114 | &:hover, 115 | &.hover { 116 | cursor: grab; 117 | } 118 | 119 | &.dragging { 120 | cursor: grabbing; 121 | } 122 | } 123 | 124 | @e stop { 125 | position: absolute; 126 | size: var(--slider-height); 127 | border-radius: var(--border-radius-circle); 128 | background-color: var(--slider-stop-background-color); 129 | transform: translateX(-50%); 130 | } 131 | 132 | @when vertical { 133 | position: relative; 134 | .el-slider__runway { 135 | width: 4px; 136 | height: 100%; 137 | margin: 0 16px; 138 | } 139 | .el-slider__bar { 140 | width: 4px; 141 | height: auto; 142 | border-radius: 0 0 3px 3px; 143 | } 144 | .el-slider__button-wrapper { 145 | top: auto; 146 | left: var(--slider-button-wrapper-offset); 147 | transform: translateY(50%); 148 | } 149 | .el-slider__stop { 150 | transform: translateY(50%); 151 | } 152 | &.el-slider--with-input { 153 | padding-bottom: calc(var(--input-large-height) + 22px); 154 | .el-slider__input { 155 | overflow: visible; 156 | float: none; 157 | position: absolute; 158 | bottom: 22px; 159 | width: 36px; 160 | margin-top: 15px; 161 | .el-input__inner { 162 | text-align: center; 163 | padding-left: 5px; 164 | padding-right: 5px; 165 | } 166 | .el-input-number__decrease, 167 | .el-input-number__increase 168 | { 169 | top: var(--input-small-height); 170 | margin-top: -1px; 171 | border: var(--input-border); 172 | line-height: 20px; 173 | box-sizing: border-box; 174 | transition: var(--border-transition-base); 175 | } 176 | .el-input-number__decrease { 177 | width: 18px; 178 | right: 18px; 179 | border-bottom-left-radius: var(--input-border-radius); 180 | } 181 | .el-input-number__increase { 182 | width: 19px; 183 | border-bottom-right-radius: var(--input-border-radius); 184 | & ~ .el-input .el-input__inner { 185 | border-bottom-left-radius: 0; 186 | border-bottom-right-radius: 0; 187 | } 188 | } 189 | &:hover { 190 | .el-input-number__decrease, 191 | .el-input-number__increase 192 | { 193 | border-color: var(--input-hover-border); 194 | } 195 | } 196 | &:active { 197 | .el-input-number__decrease, 198 | .el-input-number__increase 199 | { 200 | border-color: var(--input-focus-border); 201 | } 202 | } 203 | } 204 | } 205 | } 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /src/input.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b input { 6 | position: relative; 7 | font-size: var(--font-size-base); 8 | display: inline-block; 9 | width: 100%; 10 | 11 | @e inner { 12 | appearance: none; 13 | background-color: var(--input-fill); 14 | background-image: none; 15 | border-radius: var(--input-border-radius); 16 | border: var(--input-border); 17 | box-sizing: border-box; 18 | color: var(--input-color); 19 | display: inline-block; 20 | font-size: inherit; 21 | height: var(--input-height); 22 | line-height: 1; 23 | outline: none; 24 | padding: 3px 10px; 25 | transition: var(--border-transition-base); 26 | width: 100%; 27 | 28 | &::placeholder { 29 | color: var(--input-placeholder-color); 30 | } 31 | 32 | &:hover { 33 | border-color: var(--input-hover-border); 34 | } 35 | 36 | &:focus { 37 | outline: none; 38 | border-color: var(--input-focus-border); 39 | } 40 | } 41 | 42 | @e icon { 43 | position: absolute; 44 | width: 35px; 45 | height: 100%; 46 | right: 0; 47 | top: 0; 48 | text-align: center; 49 | color: var(--input-icon-color); 50 | transition: all .3s; 51 | 52 | &:after { 53 | content: ''; 54 | height: 100%; 55 | width: 0; 56 | display: inline-block; 57 | vertical-align: middle; 58 | } 59 | 60 | & + .el-input__inner { 61 | padding-right: 35px; 62 | } 63 | 64 | @when clickable { 65 | &:hover { 66 | cursor: pointer; 67 | color: var(--input-hover-border); 68 | 69 | & + .el-input__inner { 70 | border-color: var(--input-hover-border); 71 | } 72 | } 73 | } 74 | } 75 | 76 | @when active { 77 | .el-input__inner { 78 | outline: none; 79 | border-color: var(--input-focus-border); 80 | } 81 | } 82 | 83 | @when disabled { 84 | .el-input__inner { 85 | background-color: var(--input-disabled-fill); 86 | border-color: var(--input-disabled-border); 87 | color: var(--input-disabled-color); 88 | cursor: not-allowed; 89 | 90 | &::placeholder { 91 | color: var(--input-disabled-placeholder-color); 92 | } 93 | } 94 | } 95 | @m large { 96 | font-size: var(--input-large-font-size); 97 | 98 | & .el-input__inner { 99 | height: var(--input-large-height); 100 | } 101 | } 102 | @m small { 103 | font-size: var(--input-small-font-size); 104 | 105 | & .el-input__inner { 106 | height: var(--input-small-height); 107 | } 108 | } 109 | @m mini { 110 | font-size: var(--input-mini-font-size); 111 | 112 | & .el-input__inner { 113 | height: var(--input-mini-height); 114 | } 115 | } 116 | } 117 | 118 | @b input-group { 119 | line-height: normal; 120 | display: inline-table; 121 | width: 100%; 122 | border-collapse: separate; 123 | 124 | & > .el-input__inner { 125 | vertical-align: middle; 126 | display: table-cell; 127 | } 128 | @e append, prepend { 129 | background-color: var(--color-dark-white); 130 | color: var(--color-light-silver); 131 | vertical-align: middle; 132 | display: table-cell; 133 | position: relative; 134 | border: var(--border-base); 135 | border-radius: var(--input-border-radius); 136 | padding: 0 10px; 137 | width: 1px; 138 | white-space: nowrap; 139 | 140 | & .el-select, 141 | & .el-button { 142 | display: block; 143 | margin: -10px; 144 | } 145 | 146 | & button.el-button, 147 | & div.el-select .el-input__inner, 148 | & div.el-select:hover .el-input__inner { 149 | border-color: transparent; 150 | background-color: transparent; 151 | color: inherit; 152 | border-top: 0; 153 | border-bottom: 0; 154 | } 155 | & .el-button, 156 | & .el-input { 157 | font-size: inherit; 158 | } 159 | } 160 | @e prepend { 161 | border-right: 0; 162 | border-top-right-radius: 0; 163 | border-bottom-right-radius: 0; 164 | } 165 | @e append { 166 | border-left: 0; 167 | border-top-left-radius: 0; 168 | border-bottom-left-radius: 0; 169 | } 170 | 171 | @m prepend { 172 | .el-input__inner { 173 | border-top-left-radius: 0; 174 | border-bottom-left-radius: 0; 175 | } 176 | } 177 | @m append { 178 | .el-input__inner { 179 | border-top-right-radius: 0; 180 | border-bottom-right-radius: 0; 181 | } 182 | } 183 | } 184 | 185 | @b textarea { 186 | display: inline-block; 187 | width: 100%; 188 | vertical-align: bottom; 189 | 190 | @e inner { 191 | display: block; 192 | resize: vertical; 193 | padding: 5px 7px; 194 | line-height: 1.5; 195 | box-sizing: border-box; 196 | width: 100%; 197 | font-size: var(--font-size-base); 198 | color: var(--input-color); 199 | background-color: var(--input-fill); 200 | background-image: none; 201 | border: var(--input-border); 202 | border-radius: var(--input-border-radius); 203 | transition: var(--border-transition-base); 204 | 205 | &::placeholder { 206 | color: var(--input-placeholder-color); 207 | } 208 | 209 | &:hover { 210 | border-color: var(--input-hover-border); 211 | } 212 | 213 | &:focus { 214 | outline: none; 215 | border-color: var(--input-focus-border); 216 | } 217 | } 218 | 219 | @when disabled { 220 | .el-textarea__inner { 221 | background-color: var(--input-disabled-fill); 222 | border-color: var(--input-disabled-border); 223 | color: var(--input-disabled-color); 224 | cursor: not-allowed; 225 | 226 | &::placeholder { 227 | color: var(--input-disabled-placeholder-color); 228 | } 229 | } 230 | } 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /src/button.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | @import './mixins/button'; 4 | 5 | @component-namespace el { 6 | @b button { 7 | display: inline-block; 8 | line-height: 1; 9 | white-space: nowrap; 10 | cursor: pointer; 11 | background: var(--button-default-fill); 12 | border: var(--border-base); 13 | border-color: var(--button-default-border); 14 | color: var(--button-default-color); 15 | -webkit-appearance: none; 16 | text-align: center; 17 | box-sizing: border-box; 18 | outline: none; 19 | margin: 0; 20 | @utils-user-select none; 21 | & + .el-button { 22 | margin-left: 10px; 23 | } 24 | 25 | @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius); 26 | 27 | &:hover, 28 | &:focus { 29 | color: var(--color-primary); 30 | border-color: @color; 31 | } 32 | 33 | &:active { 34 | color: shade(var(--color-primary), var(--button-active-shade-percent)); 35 | border-color: @color; 36 | outline: none; 37 | } 38 | 39 | &::-moz-focus-inner { 40 | border: 0; 41 | } 42 | 43 | & [class*="el-icon-"] { 44 | & + span { 45 | margin-left: 5px; 46 | } 47 | } 48 | 49 | @when plain { 50 | &:hover, 51 | &:focus { 52 | background: var(--color-white); 53 | border-color: var(--color-primary); 54 | color: var(--color-primary); 55 | } 56 | 57 | &:active { 58 | background: var(--color-white); 59 | border-color: shade(var(--color-primary), var(--button-active-shade-percent)); 60 | color: shade(var(--color-primary), var(--button-active-shade-percent)); 61 | outline: none; 62 | } 63 | } 64 | 65 | @when active { 66 | color: shade(var(--color-primary), var(--button-active-shade-percent)); 67 | border-color: @color; 68 | } 69 | 70 | @when disabled { 71 | &, 72 | &:hover, 73 | &:focus { 74 | color: var(--button-disabled-color); 75 | cursor: not-allowed; 76 | background-image: none; 77 | background-color: var(--button-disabled-fill); 78 | border-color: var(--button-disabled-border); 79 | } 80 | 81 | &.el-button--text { 82 | background-color: transparent; 83 | } 84 | 85 | &.is-plain { 86 | &, 87 | &:hover, 88 | &:focus { 89 | background-color: var(--color-white); 90 | border-color: var(--color-base-gray); 91 | color: var(--color-extra-light-silver); 92 | } 93 | } 94 | } 95 | 96 | @when loading { 97 | position: relative; 98 | pointer-events: none; 99 | 100 | &:before { 101 | pointer-events: none; 102 | content: ''; 103 | position: absolute; 104 | left: -1px; 105 | top: -1px; 106 | right: -1px; 107 | bottom: -1px; 108 | border-radius: inherit; 109 | background-color: rgba(255,255,255,.35); 110 | } 111 | } 112 | @m primary { 113 | @mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border); 114 | } 115 | @m success { 116 | @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border); 117 | } 118 | @m warning { 119 | @mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border); 120 | } 121 | @m danger { 122 | @mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border); 123 | } 124 | @m info { 125 | @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border); 126 | } 127 | @m large { 128 | @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius); 129 | } 130 | @m small { 131 | @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius); 132 | } 133 | @m mini { 134 | @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius); 135 | } 136 | @m text { 137 | border: none; 138 | color: var(--color-primary); 139 | background: transparent; 140 | padding-left: 0; 141 | padding-right: 0; 142 | 143 | &:hover, 144 | &:focus { 145 | color: tint(var(--color-primary), var(--button-hover-tint-percent)); 146 | } 147 | &:active { 148 | color: shade(var(--color-primary), var(--button-active-shade-percent)); 149 | } 150 | } 151 | } 152 | 153 | @b button-group { 154 | @utils-clearfix; 155 | display: inline-block; 156 | vertical-align: middle; 157 | 158 | & .el-button { 159 | float: left; 160 | position: relative; 161 | & + .el-button { 162 | margin-left: 0; 163 | } 164 | 165 | &:first-child { 166 | border-top-right-radius: 0; 167 | border-bottom-right-radius: 0; 168 | } 169 | &:last-child { 170 | border-top-left-radius: 0; 171 | border-bottom-left-radius: 0; 172 | } 173 | &:not(:first-child):not(:last-child) { 174 | border-radius: 0; 175 | } 176 | &:not(:last-child) { 177 | margin-right: -1px; 178 | } 179 | 180 | &:hover, 181 | &:focus, 182 | &:active { 183 | z-index: 1; 184 | } 185 | 186 | @when active { 187 | z-index: 1; 188 | } 189 | } 190 | 191 | @each $type in (primary, success, warning, danger, info) { 192 | .el-button--$type { 193 | &:first-child { 194 | border-right-color: rgba(var(--color-white), 0.5); 195 | } 196 | &:last-child { 197 | border-left-color: rgba(var(--color-white), 0.5); 198 | } 199 | &:not(:first-child):not(:last-child) { 200 | border-left-color: rgba(var(--color-white), 0.5); 201 | border-right-color: rgba(var(--color-white), 0.5); 202 | } 203 | } 204 | } 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /src/color-picker.css: -------------------------------------------------------------------------------- 1 | @import "./common/var.css"; 2 | 3 | @component-namespace el-color { 4 | @component hue-slider { 5 | position: relative; 6 | box-sizing: border-box; 7 | width: 280px; 8 | height: 12px; 9 | background-color: #f00; 10 | padding: 0 2px; 11 | 12 | @descendent bar { 13 | position: relative; 14 | background: linear-gradient( 15 | to right, #f00 0%, 16 | #ff0 17%, #0f0 33%, 17 | #0ff 50%, #00f 67%, 18 | #f0f 83%, #f00 100%); 19 | height: 100%; 20 | } 21 | 22 | @descendent thumb { 23 | position: absolute; 24 | cursor: pointer; 25 | box-sizing: border-box; 26 | left: 0; 27 | top: 0; 28 | width: 4px; 29 | height: 100%; 30 | border-radius: 1px; 31 | background: #fff; 32 | border: 1px solid #f0f0f0; 33 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); 34 | z-index: 1; 35 | } 36 | 37 | @when vertical { 38 | width: 12px; 39 | height: 180px; 40 | padding: 2px 0; 41 | 42 | .el-color-hue-slider__bar { 43 | background: linear-gradient( 44 | to bottom, #f00 0%, 45 | #ff0 17%, #0f0 33%, 46 | #0ff 50%, #00f 67%, 47 | #f0f 83%, #f00 100%); 48 | } 49 | 50 | .el-color-hue-slider__thumb { 51 | left: 0; 52 | top: 0; 53 | width: 100%; 54 | height: 4px; 55 | } 56 | } 57 | } 58 | 59 | @component svpanel { 60 | position: relative; 61 | width: 280px; 62 | height: 180px; 63 | 64 | @descendent white, black { 65 | position: absolute; 66 | top: 0; 67 | left: 0; 68 | right: 0; 69 | bottom: 0; 70 | } 71 | 72 | @descendent white { 73 | background: linear-gradient(to right, #fff, rgba(255,255,255,0)); 74 | } 75 | 76 | @descendent black { 77 | background: linear-gradient(to top, #000, rgba(0,0,0,0)); 78 | } 79 | 80 | @descendent cursor { 81 | position: absolute; 82 | 83 | > div { 84 | cursor: head; 85 | width: 4px; 86 | height: 4px; 87 | box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,0.3), 0 0 1px 2px rgba(0,0,0,0.4); 88 | border-radius: 50%; 89 | transform: translate(-2px, -2px); 90 | } 91 | } 92 | } 93 | 94 | @component alpha-slider { 95 | position: relative; 96 | box-sizing: border-box; 97 | width: 280px; 98 | height: 12px; 99 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); 100 | 101 | @descendent bar { 102 | position: relative; 103 | background: linear-gradient( 104 | to right, rgba(255, 255, 255, 0) 0%, 105 | rgba(255, 255, 255, 1) 100%); 106 | height: 100%; 107 | } 108 | 109 | @descendent thumb { 110 | position: absolute; 111 | cursor: pointer; 112 | box-sizing: border-box; 113 | left: 0; 114 | top: 0; 115 | width: 4px; 116 | height: 100%; 117 | border-radius: 1px; 118 | background: #fff; 119 | border: 1px solid #f0f0f0; 120 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); 121 | z-index: 1; 122 | } 123 | 124 | @when vertical { 125 | width: 20px; 126 | height: 180px; 127 | 128 | .el-color-alpha-slider__bar { 129 | background: linear-gradient( 130 | to bottom, rgba(255, 255, 255, 0) 0%, 131 | rgba(255, 255, 255, 1) 100%); 132 | } 133 | 134 | .el-color-alpha-slider__thumb { 135 | left: 0; 136 | top: 0; 137 | width: 100%; 138 | height: 4px; 139 | } 140 | } 141 | } 142 | 143 | @component dropdown { 144 | width: 300px; 145 | 146 | @descendent main-wrapper { 147 | margin-bottom: 6px; 148 | 149 | &::after { 150 | content: ""; 151 | display: table; 152 | clear: both; 153 | } 154 | } 155 | 156 | @descendent btns { 157 | margin-top: 6px; 158 | text-align: right; 159 | } 160 | 161 | @descendent value { 162 | float: left; 163 | line-height: 26px; 164 | font-size: 12px; 165 | color: var(--color-base-black); 166 | } 167 | 168 | @descendent btn { 169 | border: 1px solid #dcdcdc; 170 | color: #333; 171 | line-height: 24px; 172 | border-radius: 2px; 173 | padding: 0 20px; 174 | cursor: pointer; 175 | background-color: transparent; 176 | outline: none; 177 | font-size: 12px; 178 | 179 | &[disabled] { 180 | color: #cccccc; 181 | cursor: not-allowed; 182 | } 183 | &:hover { 184 | color: var(--color-primary); 185 | border-color: var(--color-primary); 186 | } 187 | } 188 | 189 | @descendent link-btn { 190 | cursor: pointer; 191 | color: var(--color-primary); 192 | text-decoration: none; 193 | padding: 15px; 194 | font-size: 12px; 195 | &:hover { 196 | color: tint(var(--color-primary), var(--button-hover-tint-percent)); 197 | } 198 | } 199 | } 200 | 201 | @component picker { 202 | display: inline-block; 203 | position: relative; 204 | line-height: normal; 205 | 206 | @descendent trigger { 207 | display: inline-block; 208 | box-sizing: border-box; 209 | height: 36px; 210 | padding: 6px; 211 | border: 1px solid #bfcbd9; 212 | border-radius: 4px; 213 | font-size: 0; 214 | } 215 | 216 | @descendent color { 217 | position: relative; 218 | display: inline-block; 219 | box-sizing: border-box; 220 | border: 1px solid #666; 221 | width: 22px; 222 | height: 22px; 223 | text-align: center; 224 | 225 | @when alpha { 226 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); 227 | } 228 | } 229 | 230 | @descendent color-inner { 231 | position: absolute; 232 | left: 0; 233 | top: 0; 234 | right: 0; 235 | bottom: 0; 236 | } 237 | 238 | @descendent empty { 239 | font-size: 12px; 240 | vertical-align: middle; 241 | color: #666; 242 | position: absolute; 243 | top: 4px; 244 | left: 4px; 245 | } 246 | 247 | @descendent icon { 248 | display: inline-block; 249 | position: relative; 250 | top: -6px; 251 | margin-left: 8px; 252 | width: 12px; 253 | color: #888; 254 | font-size: 12px; 255 | } 256 | 257 | @descendent panel { 258 | position: absolute; 259 | z-index: 10; 260 | padding: 6px; 261 | background-color: var(--color-white); 262 | border: 1px solid var(--color-base-gray); 263 | box-shadow: var(--dropdown-menu-box-shadow); 264 | } 265 | } 266 | } 267 | -------------------------------------------------------------------------------- /src/menu.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @define-extend menu-item { 5 | height: 56px; 6 | line-height: 56px; 7 | font-size: 14px; 8 | color: var(--menu-item-color); 9 | padding: 0 20px; 10 | cursor: pointer; 11 | position: relative; 12 | transition: border-color .3s, background-color .3s, color .3s; 13 | box-sizing: border-box; 14 | white-space: nowrap; 15 | } 16 | 17 | @component-namespace el { 18 | @b menu { 19 | border-radius: 2px; 20 | list-style: none; 21 | position: relative; 22 | margin: 0; 23 | padding-left: 0; 24 | background-color: var(--menu-item-fill); 25 | @utils-clearfix; 26 | 27 | & li { 28 | list-style: none; 29 | } 30 | 31 | @m dark { 32 | background-color: var(--dark-menu-item-fill); 33 | 34 | & .el-menu-item, 35 | & .el-submenu__title { 36 | color: var(--color-extra-light-silver); 37 | 38 | &:hover { 39 | background-color: var(--color-extra-light-black); 40 | } 41 | } 42 | 43 | & .el-submenu .el-menu { 44 | background-color: var(--color-base-black); 45 | 46 | & .el-menu-item:hover { 47 | background-color: var(--color-extra-light-black); 48 | } 49 | } 50 | } 51 | @m horizontal { 52 | & .el-menu-item { 53 | float: left; 54 | height: 60px; 55 | line-height: 60px; 56 | margin: 0; 57 | cursor: pointer; 58 | position: relative; 59 | box-sizing: border-box; 60 | border-bottom: 5px solid transparent; 61 | 62 | a, 63 | a:hover { 64 | color: inherit; 65 | } 66 | 67 | &:hover { 68 | background-color: var(--menu-item-hover-fill); 69 | } 70 | } 71 | & .el-submenu { 72 | float: left; 73 | position: relative; 74 | 75 | > .el-menu { 76 | position: absolute; 77 | top: 65px; 78 | left: 0; 79 | border:1px solid var(--color-base-gray); 80 | padding: 5px 0; 81 | background-color: var(--color-white); 82 | z-index: 100; 83 | min-width: 100%; 84 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04); 85 | } 86 | 87 | & .el-submenu__title { 88 | height: 60px; 89 | line-height: 60px; 90 | border-bottom: 5px solid transparent; 91 | } 92 | 93 | & .el-menu-item { 94 | background-color: var(--color-white); 95 | float: none; 96 | height: 36px; 97 | line-height: 36px; 98 | padding: 0 10px; 99 | } 100 | 101 | & .el-submenu__icon-arrow { 102 | position: static; 103 | vertical-align: middle; 104 | margin-left: 5px; 105 | color: var(--color-light-silver); 106 | margin-top: -3px; 107 | } 108 | } 109 | & .el-menu-item:hover, 110 | & .el-submenu__title:hover { 111 | background-color: var(--menu-item-fill); 112 | } 113 | & > .el-menu-item:hover, 114 | & > .el-submenu:hover .el-submenu__title, 115 | & > .el-submenu.is-active .el-submenu__title { 116 | border-bottom: 5px solid var(--color-primary); 117 | } 118 | 119 | &.el-menu--dark { 120 | & .el-menu-item:hover, 121 | & .el-submenu__title:hover { 122 | background-color: var(--dark-menu-item-fill); 123 | } 124 | 125 | & .el-submenu { 126 | .el-menu-item, 127 | .el-submenu-title { 128 | color: var(--color-extra-light-black); 129 | 130 | &:hover { 131 | background-color: var(--color-base-gray); 132 | } 133 | } 134 | .el-menu-item.is-active { 135 | color: var(--color-primary); 136 | } 137 | } 138 | } 139 | } 140 | @m collapse { 141 | width: 64px; 142 | 143 | > .el-menu-item, 144 | > .el-submenu > .el-submenu__title { 145 | [class^="el-icon-"] { 146 | margin: 0; 147 | vertical-align: middle; 148 | width: 24px; 149 | text-align: center; 150 | } 151 | .el-submenu__icon-arrow { 152 | display: none; 153 | } 154 | span { 155 | height: 0; 156 | width: 0; 157 | overflow: hidden; 158 | visibility: hidden; 159 | display: inline-block; 160 | } 161 | } 162 | 163 | .el-menu .el-submenu { 164 | min-width: 200px; 165 | } 166 | 167 | .el-submenu { 168 | position: relative; 169 | & .el-menu { 170 | position: absolute; 171 | margin-left: 5px; 172 | top: 0; 173 | left: 100%; 174 | z-index: 10; 175 | } 176 | 177 | &.is-opened { 178 | > .el-submenu__title .el-submenu__icon-arrow { 179 | transform: none; 180 | } 181 | } 182 | } 183 | } 184 | } 185 | @b menu-item { 186 | @extend menu-item; 187 | 188 | & [class^="el-icon-"] { 189 | margin-right: 5px; 190 | width: 24px; 191 | text-align: center; 192 | } 193 | & * { 194 | vertical-align: middle; 195 | } 196 | &:first-child { 197 | margin-left: 0; 198 | } 199 | &:last-child { 200 | margin-right: 0; 201 | } 202 | &:hover { 203 | background-color: var(--color-base-gray); 204 | } 205 | @when active { 206 | color: var(--color-primary); 207 | } 208 | } 209 | 210 | @b submenu { 211 | @e title { 212 | position: relative; 213 | @extend menu-item; 214 | 215 | &:hover { 216 | background-color: var(--color-base-gray); 217 | } 218 | 219 | & * { 220 | vertical-align: middle; 221 | } 222 | } 223 | & .el-menu { 224 | background-color: var(--color-light-gray); 225 | } 226 | & .el-menu-item { 227 | height: 50px; 228 | line-height: 50px; 229 | padding: 0 45px; 230 | min-width: 200px; 231 | 232 | &:hover { 233 | background-color: var(--color-base-gray); 234 | } 235 | } 236 | @e icon-arrow { 237 | position: absolute; 238 | top: 50%; 239 | right: 20px; 240 | margin-top: -7px; 241 | transition: transform .3s; 242 | font-size: 12px; 243 | } 244 | @when active { 245 | .el-submenu__title { 246 | border-bottom-color: var(--color-primary); 247 | } 248 | } 249 | @when opened { 250 | > .el-submenu__title .el-submenu__icon-arrow { 251 | transform: rotateZ(180deg); 252 | } 253 | } 254 | [class^="el-icon-"] { 255 | vertical-align: middle; 256 | margin-right: 5px; 257 | width: 24px; 258 | text-align: center; 259 | } 260 | } 261 | 262 | @b menu-item-group { 263 | > ul { 264 | padding: 0; 265 | } 266 | @e title { 267 | padding-top: 15px; 268 | line-height: normal; 269 | font-size: 14px; 270 | padding-left: 20px; 271 | color: var(--color-light-silver); 272 | } 273 | } 274 | } 275 | 276 | .horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow { 277 | transition: .2s; 278 | opacity: 0; 279 | } 280 | -------------------------------------------------------------------------------- /src/tabs.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | @b tabs { 6 | clear: both; 7 | @e header { 8 | border-bottom: 1px solid var(--color-base-gray); 9 | padding: 0; 10 | position: relative; 11 | margin: 0 0 15px; 12 | } 13 | @e active-bar { 14 | position: absolute; 15 | bottom: 0; 16 | left: 0; 17 | height: 3px; 18 | background-color: var(--color-primary); 19 | z-index: 1; 20 | transition: transform .3s cubic-bezier(.645,.045,.355,1); 21 | list-style: none; 22 | } 23 | @e new-tab { 24 | float: right; 25 | border: 1px solid #d3dce6; 26 | height: 18px; 27 | width: @height; 28 | line-height: @height; 29 | margin: 12px 0 9px 10px; 30 | border-radius: 3px; 31 | text-align: center; 32 | font-size: 12px; 33 | color: #d3dce6; 34 | cursor: pointer; 35 | transition: all .15s; 36 | 37 | .el-icon-plus { 38 | transform: scale(0.8, 0.8); 39 | } 40 | 41 | &:hover { 42 | color: var(--color-primary); 43 | } 44 | } 45 | @e nav-wrap { 46 | overflow: hidden; 47 | margin-bottom: -1px; 48 | position: relative; 49 | 50 | @when scrollable { 51 | padding: 0 15px; 52 | } 53 | } 54 | @e nav-scroll { 55 | overflow: hidden; 56 | } 57 | @e nav-next, nav-prev { 58 | position: absolute; 59 | cursor: pointer; 60 | line-height: 44px; 61 | font-size: 12px; 62 | color: var(--color-base-silver); 63 | } 64 | @e nav-next { 65 | right: 0; 66 | } 67 | @e nav-prev { 68 | left: 0; 69 | } 70 | @e nav { 71 | white-space: nowrap; 72 | position: relative; 73 | transition: transform .3s; 74 | float: left; 75 | } 76 | @e item { 77 | padding: 0 16px; 78 | height: 42px; 79 | box-sizing: border-box; 80 | line-height: @height; 81 | display: inline-block; 82 | list-style: none; 83 | font-size: 14px; 84 | color: var(--color-base-silver); 85 | position: relative; 86 | 87 | & .el-icon-close { 88 | border-radius: 50%; 89 | text-align: center; 90 | transition: all .3s cubic-bezier(.645,.045,.355,1); 91 | margin-left: 5px; 92 | &:before { 93 | transform: scale(.7, .7); 94 | display: inline-block; 95 | } 96 | 97 | &:hover { 98 | background-color: var(--color-light-silver); 99 | color: var(--color-white); 100 | } 101 | } 102 | 103 | @when active { 104 | color: var(--color-primary); 105 | } 106 | 107 | &:hover { 108 | color: var(--color-base-black); 109 | cursor: pointer; 110 | } 111 | 112 | @when disabled { 113 | color: var(--disabled-color-base); 114 | cursor: default; 115 | } 116 | } 117 | @e content { 118 | overflow: hidden; 119 | position: relative; 120 | } 121 | @m card { 122 | > .el-tabs__header .el-tabs__active-bar { 123 | display: none; 124 | } 125 | > .el-tabs__header .el-tabs__item .el-icon-close { 126 | position: relative; 127 | font-size: 12px; 128 | width: 0; 129 | height: 14px; 130 | vertical-align: middle; 131 | line-height: 15px; 132 | overflow: hidden; 133 | top: -1px; 134 | right: -2px; 135 | transform-origin: 100% 50%; 136 | } 137 | > .el-tabs__header .el-tabs__item { 138 | border: 1px solid transparent; 139 | transition: all .3s cubic-bezier(.645,.045,.355,1); 140 | 141 | &.is-closable { 142 | &:hover { 143 | padding: * 9px; 144 | 145 | & .el-icon-close { 146 | width: 14px; 147 | } 148 | } 149 | } 150 | &.is-active { 151 | border: 1px solid var(--color-base-gray); 152 | border-bottom-color: var(--color-white); 153 | border-radius: 4px 4px 0 0; 154 | 155 | &.is-closable { 156 | padding: * 16px; 157 | 158 | .el-icon-close { 159 | width: 14px; 160 | } 161 | } 162 | } 163 | } 164 | } 165 | @m border-card { 166 | background: var(--color-white); 167 | border: 1px solid var(--color-base-gray); 168 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04); 169 | 170 | >.el-tabs__content { 171 | padding: 15px; 172 | } 173 | >.el-tabs__header { 174 | background-color: var(--color-extra-light-gray); 175 | margin: 0; 176 | } 177 | >.el-tabs__header .el-tabs__item { 178 | transition: all .3s cubic-bezier(.645,.045,.355,1); 179 | border: 1px solid transparent; 180 | border-top: 0; 181 | margin: * -1px; 182 | 183 | &.is-active { 184 | background-color: var(--color-white); 185 | border-right-color: var(--color-base-gray); 186 | border-left-color: var(--color-base-gray); 187 | 188 | &:first-child { 189 | border-left-color: var(--color-base-gray); 190 | } 191 | &:last-child { 192 | border-right-color: var(--color-base-gray); 193 | } 194 | } 195 | } 196 | } 197 | } 198 | } 199 | 200 | .slideInRight-transition, 201 | .slideInLeft-transition { 202 | display: inline-block; 203 | } 204 | .slideInRight-enter { 205 | animation: slideInRight-enter .3s; 206 | } 207 | .slideInRight-leave { 208 | position: absolute; 209 | left: 0; 210 | right: 0; 211 | animation: slideInRight-leave .3s; 212 | } 213 | .slideInLeft-enter { 214 | animation: slideInLeft-enter .3s; 215 | } 216 | .slideInLeft-leave { 217 | position: absolute; 218 | left: 0; 219 | right: 0; 220 | animation: slideInLeft-leave .3s; 221 | } 222 | 223 | @keyframes slideInRight-enter { 224 | 0% { 225 | opacity: 0; 226 | -webkit-transform-origin: 0 0; 227 | transform-origin: 0 0; 228 | -webkit-transform: translateX(100%); 229 | transform: translateX(100%) 230 | } 231 | 232 | to { 233 | opacity: 1; 234 | -webkit-transform-origin: 0 0; 235 | transform-origin: 0 0; 236 | -webkit-transform: translateX(0); 237 | transform: translateX(0) 238 | } 239 | } 240 | @keyframes slideInRight-leave { 241 | 0% { 242 | -webkit-transform-origin: 0 0; 243 | transform-origin: 0 0; 244 | -webkit-transform: translateX(0); 245 | transform: translateX(0); 246 | opacity: 1 247 | } 248 | 249 | 100% { 250 | -webkit-transform-origin: 0 0; 251 | transform-origin: 0 0; 252 | -webkit-transform: translateX(100%); 253 | transform: translateX(100%); 254 | opacity: 0 255 | } 256 | } 257 | @keyframes slideInLeft-enter { 258 | 0% { 259 | opacity: 0; 260 | -webkit-transform-origin: 0 0; 261 | transform-origin: 0 0; 262 | -webkit-transform: translateX(-100%); 263 | transform: translateX(-100%) 264 | } 265 | 266 | to { 267 | opacity: 1; 268 | -webkit-transform-origin: 0 0; 269 | transform-origin: 0 0; 270 | -webkit-transform: translateX(0); 271 | transform: translateX(0) 272 | } 273 | } 274 | @keyframes slideInLeft-leave { 275 | 0% { 276 | -webkit-transform-origin: 0 0; 277 | transform-origin: 0 0; 278 | -webkit-transform: translateX(0); 279 | transform: translateX(0); 280 | opacity: 1 281 | } 282 | 283 | 100% { 284 | -webkit-transform-origin: 0 0; 285 | transform-origin: 0 0; 286 | -webkit-transform: translateX(-100%); 287 | transform: translateX(-100%); 288 | opacity: 0 289 | } 290 | } 291 | -------------------------------------------------------------------------------- /src/checkbox.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./common/var.css"; 3 | 4 | @component-namespace el { 5 | 6 | @b checkbox { 7 | color: var(--checkbox-color); 8 | position: relative; 9 | cursor: pointer; 10 | display: inline-block; 11 | white-space: nowrap; 12 | @utils-user-select none; 13 | 14 | @e input { 15 | white-space: nowrap; 16 | cursor: pointer; 17 | outline: none; 18 | display: inline-block; 19 | line-height: 1; 20 | position: relative; 21 | vertical-align: middle; 22 | 23 | @when disabled { 24 | .el-checkbox__inner { 25 | background-color: var(--checkbox-disabled-input-fill); 26 | border-color: var(--checkbox-disabled-input-border-color); 27 | cursor: not-allowed; 28 | 29 | &::after { 30 | cursor: not-allowed; 31 | border-color: var(--checkbox-disabled-icon-color); 32 | } 33 | 34 | & + .el-checkbox__label { 35 | cursor: not-allowed; 36 | } 37 | } 38 | &.is-checked { 39 | .el-checkbox__inner { 40 | background-color: var(--checkbox-disabled-checked-input-fill); 41 | border-color: var(--checkbox-disabled-checked-input-border-color); 42 | 43 | &::after { 44 | border-color: var(--checkbox-disabled-checked-icon-color); 45 | } 46 | } 47 | } 48 | &.is-indeterminate { 49 | .el-checkbox__inner { 50 | background-color: var(--checkbox-disabled-checked-input-fill); 51 | border-color: var(--checkbox-disabled-checked-input-border-color); 52 | 53 | &::before { 54 | border-color: var(--checkbox-disabled-checked-icon-color); 55 | } 56 | } 57 | } 58 | & + .el-checkbox__label { 59 | color: var(--disabled-color-base); 60 | cursor: not-allowed; 61 | } 62 | } 63 | @when checked { 64 | .el-checkbox__inner { 65 | background-color: var(--checkbox-checked-input-fill); 66 | border-color: var(--checkbox-checked-input-border-color); 67 | 68 | &::after { 69 | transform: rotate(45deg) scaleY(1); 70 | } 71 | } 72 | } 73 | @when focus { 74 | .el-checkbox__inner { 75 | border-color: var(--checkbox-input-border-color-hover); 76 | } 77 | } 78 | @when indeterminate { 79 | .el-checkbox__inner { 80 | background-color: var(--checkbox-checked-input-fill); 81 | border-color: var(--checkbox-checked-input-border-color); 82 | 83 | &::before { 84 | content: ''; 85 | position: absolute; 86 | display: block; 87 | border: 1px solid var(--checkbox-checked-icon-color); 88 | margin-top: -1px; 89 | left: 3px; 90 | right: 3px; 91 | top: 50%; 92 | } 93 | 94 | &::after { 95 | display: none; 96 | } 97 | } 98 | } 99 | } 100 | @e inner { 101 | display: inline-block; 102 | position: relative; 103 | border: var(--checkbox-input-border); 104 | border-radius: var(--checkbox-input-border-radius); 105 | box-sizing: border-box; 106 | rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill); 107 | z-index: var(--index-normal); 108 | transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), 109 | background-color .25s cubic-bezier(.71,-.46,.29,1.46); 110 | 111 | &:hover { 112 | border-color: var(--checkbox-input-border-color-hover); 113 | } 114 | 115 | &::after { 116 | box-sizing: content-box; 117 | content: ""; 118 | border: 2px solid var(--checkbox-checked-icon-color); 119 | border-left: 0; 120 | border-top: 0; 121 | height: 8px; 122 | left: 5px; 123 | position: absolute; 124 | top: 1px; 125 | transform: rotate(45deg) scaleY(0); 126 | width: 4px; 127 | transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s; 128 | transform-origin: center; 129 | } 130 | } 131 | 132 | @e original { 133 | opacity: 0; 134 | outline: none; 135 | position: absolute; 136 | margin: 0; 137 | size: 0; 138 | left: -999px; 139 | } 140 | 141 | @e label { 142 | font-size: var(--checkbox-font-size); 143 | padding-left: 5px; 144 | } 145 | 146 | & + .el-checkbox { 147 | margin-left: 15px; 148 | } 149 | } 150 | 151 | @b checkbox-button { 152 | position: relative; 153 | display: inline-block; 154 | 155 | @e inner { 156 | display: inline-block; 157 | line-height: 1; 158 | white-space: nowrap; 159 | vertical-align: middle; 160 | cursor: pointer; 161 | background: var(--button-default-fill); 162 | border: var(--border-base); 163 | border-left: 0; 164 | color: var(--button-default-color); 165 | -webkit-appearance: none; 166 | text-align: center; 167 | box-sizing: border-box; 168 | outline: none; 169 | margin: 0; 170 | position: relative; 171 | cursor: pointer; 172 | transition: var(--all-transition); 173 | @utils-user-select none; 174 | 175 | @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0; 176 | 177 | &:hover { 178 | color: var(--color-primary); 179 | } 180 | 181 | & [class*="el-icon-"] { 182 | line-height: 0.9; 183 | 184 | & + span { 185 | margin-left: 5px; 186 | } 187 | } 188 | } 189 | 190 | @e original { 191 | opacity: 0; 192 | outline: none; 193 | position: absolute; 194 | margin: 0; 195 | visibility: hidden; 196 | left: -999px; 197 | } 198 | 199 | &.is-checked { 200 | & .el-checkbox-button__inner { 201 | color: var(--checkbox-button-checked-color); 202 | background-color: var(--checkbox-button-checked-fill); 203 | border-color: var(--checkbox-button-checked-border-color); 204 | box-shadow: -1px 0 0 0 var(--checkbox-button-checked-border-color); 205 | } 206 | } 207 | 208 | &.is-disabled { 209 | & .el-checkbox-button__inner { 210 | color: var(--button-disabled-color); 211 | cursor: not-allowed; 212 | background-image: none; 213 | background-color: var(--button-disabled-fill); 214 | border-color: var(--button-disabled-border); 215 | box-shadow: none; 216 | } 217 | } 218 | 219 | &.is-focus { 220 | & .el-checkbox-button__inner { 221 | border-color: var(--checkbox-button-checked-border-color); 222 | } 223 | } 224 | 225 | 226 | &:first-child { 227 | .el-checkbox-button__inner { 228 | border-left: var(--border-base); 229 | border-radius: var(--border-radius-base) 0 0 var(--border-radius-base); 230 | box-shadow: none !important; 231 | } 232 | } 233 | &:last-child { 234 | .el-checkbox-button__inner { 235 | border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; 236 | } 237 | } 238 | @m large { 239 | & .el-checkbox-button__inner { 240 | @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0; 241 | } 242 | } 243 | @m small { 244 | & .el-checkbox-button__inner { 245 | @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0; 246 | } 247 | } 248 | @m mini { 249 | & .el-checkbox-button__inner { 250 | @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0; 251 | } 252 | } 253 | } 254 | } 255 | -------------------------------------------------------------------------------- /src/table.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./checkbox.css"; 3 | @import "./tag.css"; 4 | @import "./common/var.css"; 5 | 6 | @component-namespace el { 7 | 8 | @b table { 9 | position: relative; 10 | overflow: hidden; 11 | box-sizing: border-box; 12 | width: 100%; 13 | max-width: 100%; 14 | background-color: var(--color-white); 15 | border: 1px solid var(--table-border-color); 16 | font-size: 14px; 17 | color: var(--table-text-color); 18 | 19 | &::before { 20 | content: ''; 21 | position: absolute; 22 | left: 0; 23 | bottom: 0; 24 | width: 100%; 25 | height: 1px; 26 | background-color: var(--table-border-color); 27 | z-index: 1; 28 | } 29 | 30 | &::after { 31 | content: ''; 32 | position: absolute; 33 | top: 0; 34 | right: 0; 35 | width: 1px; 36 | height: 100%; 37 | background-color: var(--table-border-color); 38 | z-index: 1; 39 | } 40 | 41 | .el-tooltip.cell { 42 | white-space: nowrap; 43 | min-width: 50px; 44 | } 45 | 46 | @e empty-block { 47 | position: relative; 48 | min-height: 60px; 49 | text-align: center; 50 | width: 100%; 51 | height: 100%; 52 | } 53 | 54 | @e empty-text { 55 | position: absolute; 56 | left: 50%; 57 | top: 50%; 58 | transform: translate(-50%, -50%); 59 | color: color(var(--color-primary) s(16%) l(44%)); 60 | } 61 | 62 | @e expand-column { 63 | .cell { 64 | padding: 0; 65 | text-align: center; 66 | } 67 | } 68 | 69 | @e expand-icon { 70 | position: relative; 71 | cursor: pointer; 72 | color: #666; 73 | font-size: 12px; 74 | transition: transform 0.2s ease-in-out; 75 | height: 40px; 76 | 77 | @m expanded { 78 | transform: rotate(90deg); 79 | } 80 | 81 | > .el-icon { 82 | position: absolute; 83 | left: 50%; 84 | top: 50%; 85 | margin-left: -5px; 86 | margin-top: -5px; 87 | } 88 | } 89 | 90 | @e expanded-cell { 91 | padding: 20px 50px; 92 | background-color: var(--color-dark-white); 93 | box-shadow: inset 0 2px 0 #f4f4f4; 94 | 95 | &:hover { 96 | background-color: var(--color-dark-white) !important; 97 | } 98 | } 99 | 100 | @modifier fit { 101 | border-right: 0; 102 | border-bottom: 0; 103 | 104 | & th.gutter, td.gutter { 105 | border-right-width: 1px; 106 | } 107 | } 108 | 109 | & th { 110 | white-space: nowrap; 111 | overflow: hidden; 112 | } 113 | 114 | & th, td { 115 | height: 40px; 116 | min-width: 0; 117 | box-sizing: border-box; 118 | text-overflow: ellipsis; 119 | vertical-align: middle; 120 | position: relative; 121 | 122 | @when center { 123 | text-align: center; 124 | } 125 | 126 | @when left { 127 | text-align: left; 128 | } 129 | 130 | @when right { 131 | text-align: right; 132 | } 133 | } 134 | 135 | & th.is-leaf, td { 136 | border-bottom: 1px solid var(--table-border-color); 137 | } 138 | 139 | & th.is-sortable { 140 | cursor: pointer; 141 | } 142 | 143 | @modifier border { 144 | & th, td { 145 | border-right: 1px solid var(--table-border-color); 146 | } 147 | 148 | & th { 149 | border-bottom: 1px solid var(--table-border-color); 150 | } 151 | } 152 | 153 | @modifier hidden { 154 | visibility: hidden; 155 | } 156 | 157 | & th { 158 | background-color: var(--table-header-background); 159 | text-align: left; 160 | } 161 | 162 | & th > div { 163 | display: inline-block; 164 | padding-left: 18px; 165 | padding-right: 18px; 166 | line-height: 40px; 167 | box-sizing: border-box; 168 | overflow: hidden; 169 | white-space: nowrap; 170 | text-overflow: ellipsis; 171 | } 172 | 173 | & td > div { 174 | box-sizing: border-box; 175 | } 176 | 177 | @e fixed, fixed-right { 178 | position: absolute; 179 | top: 0; 180 | left: 0; 181 | box-shadow: 1px 0 8px #d3d4d6; 182 | overflow-x: hidden; 183 | 184 | &::before { 185 | content: ''; 186 | position: absolute; 187 | left: 0; 188 | bottom: 0; 189 | width: 100%; 190 | height: 1px; 191 | background-color: var(--table-border-color); 192 | z-index: 4; 193 | } 194 | } 195 | 196 | @e fixed-right-patch { 197 | position: absolute; 198 | top: -1px; 199 | right: 0; 200 | background-color: var(--table-header-background); 201 | border-bottom: 1px solid var(--table-border-color); 202 | } 203 | 204 | @e fixed-right { 205 | top: 0; 206 | left: auto; 207 | right: 0; 208 | 209 | box-shadow: -1px 0 8px #d3d4d6; 210 | 211 | .el-table__fixed-header-wrapper, 212 | .el-table__fixed-body-wrapper, 213 | .el-table__fixed-footer-wrapper { 214 | left: auto; 215 | right: 0; 216 | } 217 | } 218 | 219 | @e fixed-header-wrapper { 220 | position: absolute; 221 | left: 0; 222 | top: 0; 223 | z-index: 3; 224 | 225 | & thead div { 226 | background-color: var(--table-header-background); 227 | color: var(--table-text-color); 228 | } 229 | } 230 | 231 | @e fixed-footer-wrapper { 232 | position: absolute; 233 | left: 0; 234 | bottom: 0; 235 | z-index: 3; 236 | 237 | & tbody td { 238 | border-top: 1px solid var(--table-border-color); 239 | background-color: var(--table-footer-background); 240 | color: var(--table-text-color); 241 | } 242 | } 243 | 244 | @e fixed-body-wrapper { 245 | position: absolute; 246 | left: 0; 247 | top: 37px; 248 | overflow: hidden; 249 | z-index: 3; 250 | } 251 | 252 | @e header-wrapper, body-wrapper, footer-wrapper { 253 | width: 100%; 254 | } 255 | 256 | @e footer-wrapper { 257 | margin-top: -1px; 258 | td { 259 | border-top: 1px solid var(--table-border-color); 260 | } 261 | } 262 | 263 | @e header, body, footer { 264 | table-layout: fixed; 265 | } 266 | 267 | @e header-wrapper, footer-wrapper { 268 | overflow: hidden; 269 | 270 | & thead div { 271 | background-color: var(--table-header-background); 272 | color: var(--table-text-color); 273 | } 274 | 275 | & tbody td { 276 | background-color: var(--table-footer-background); 277 | color: var(--table-text-color); 278 | } 279 | } 280 | 281 | @e body-wrapper { 282 | overflow: auto; 283 | position: relative; 284 | } 285 | 286 | & th.required > div::before { 287 | display: inline-block; 288 | content: ""; 289 | width: 8px; 290 | height: 8px; 291 | border-radius: 50%; 292 | background: #ff4d51; 293 | margin-right: 5px; 294 | vertical-align: middle; 295 | } 296 | 297 | & th > .cell { 298 | position: relative; 299 | word-wrap: normal; 300 | text-overflow: ellipsis; 301 | display: inline-block; 302 | line-height: 30px; 303 | vertical-align: middle; 304 | width: 100%; 305 | box-sizing: border-box; 306 | 307 | &.highlight { 308 | color: var(--color-primary); 309 | } 310 | } 311 | 312 | & .caret-wrapper { 313 | position: relative; 314 | cursor: pointer; 315 | display: inline-block; 316 | vertical-align: middle; 317 | margin-left: 5px; 318 | margin-top: -2px; 319 | width: 16px; 320 | height: 30px; 321 | overflow: initial; 322 | } 323 | 324 | & .sort-caret { 325 | display: inline-block; 326 | width: 0; 327 | height: 0; 328 | border: 0; 329 | content: ""; 330 | position: absolute; 331 | left: 3px; 332 | z-index: 2; 333 | 334 | &.ascending { 335 | top: 9px; 336 | border-top: none; 337 | border-right: 5px solid transparent; 338 | border-bottom: 5px solid var(--color-light-silver); 339 | border-left: 5px solid transparent; 340 | } 341 | 342 | &.descending { 343 | bottom: 9px; 344 | border-top: 5px solid var(--color-light-silver); 345 | border-right: 5px solid transparent; 346 | border-bottom: none; 347 | border-left: 5px solid transparent; 348 | } 349 | } 350 | 351 | & .ascending .sort-caret.ascending { 352 | border-bottom-color: var(--color-extra-light-black); 353 | } 354 | 355 | & .descending .sort-caret.descending { 356 | border-top-color: var(--color-extra-light-black); 357 | } 358 | 359 | & th.gutter, td.gutter { 360 | width: 15px; 361 | border-right-width: 0; 362 | border-bottom-width: 0; 363 | padding: 0; 364 | } 365 | 366 | & td.gutter { 367 | width: 0; 368 | } 369 | 370 | & td.is-hidden, th.is-hidden { 371 | > * { 372 | visibility: hidden; 373 | } 374 | } 375 | 376 | & .cell { 377 | box-sizing: border-box; 378 | overflow: hidden; 379 | text-overflow: ellipsis; 380 | white-space: normal; 381 | word-break: break-all; 382 | line-height: 24px; 383 | padding-left: 18px; 384 | padding-right: 18px; 385 | } 386 | 387 | & tr input[type="checkbox"] { 388 | margin: 0; 389 | } 390 | 391 | & tr { 392 | background-color: var(--color-white); 393 | } 394 | 395 | @modifier striped { 396 | & .el-table__body { 397 | & tr.el-table__row--striped { 398 | td { 399 | background: #FAFAFA; 400 | background-clip: padding-box; 401 | } 402 | 403 | &.current-row td { 404 | background: color(var(--color-primary) tint(92%)); 405 | } 406 | } 407 | } 408 | } 409 | 410 | @e body { 411 | tr.hover-row { 412 | &, &.el-table__row--striped { 413 | &, &.current-row { 414 | > td { 415 | background-color: var(--color-extra-light-gray); 416 | } 417 | } 418 | } 419 | } 420 | 421 | tr.current-row > td { 422 | background: color(var(--color-primary) tint(92%)); 423 | } 424 | } 425 | 426 | @e column-resize-proxy { 427 | position: absolute; 428 | left: 200px; 429 | top: 0; 430 | bottom: 0; 431 | width: 0; 432 | border-left: 1px solid var(--table-border-color); 433 | z-index: 10; 434 | } 435 | 436 | & .hidden-columns { 437 | visibility: hidden; 438 | position: absolute; 439 | z-index: -1; 440 | } 441 | 442 | @e column-filter-trigger { 443 | display: inline-block; 444 | line-height: 34px; 445 | margin-left: 5px; 446 | cursor: pointer; 447 | 448 | & i { 449 | color: var(--color-light-silver); 450 | } 451 | } 452 | 453 | @modifier enable-row-transition { 454 | .el-table__body td { 455 | transition: background-color .25s ease; 456 | } 457 | } 458 | 459 | @modifier enable-row-hover { 460 | .el-table__body tr:hover > td { 461 | background-color: var(--color-extra-light-gray); 462 | background-clip: padding-box; 463 | } 464 | } 465 | 466 | @modifier fluid-height { 467 | .el-table__fixed, 468 | .el-table__fixed-right { 469 | bottom: 0; 470 | overflow: hidden; 471 | } 472 | } 473 | } 474 | } 475 | -------------------------------------------------------------------------------- /src/upload.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "./progress.css"; 3 | @import "./common/var.css"; 4 | 5 | @component-namespace el { 6 | @b upload { 7 | display: inline-block; 8 | text-align: center; 9 | cursor: pointer; 10 | 11 | @e input { 12 | display: none; 13 | } 14 | @e tip { 15 | font-size: 12px; 16 | color: var(--color-base-silver); 17 | margin-top: 7px; 18 | } 19 | & iframe { 20 | position: absolute; 21 | z-index: -1; 22 | top: 0; 23 | left: 0; 24 | opacity: 0; 25 | filter: alpha(opacity=0); 26 | } 27 | /* 照片墙模式 */ 28 | @m picture-card { 29 | background-color: #fbfdff; 30 | border: 1px dashed #c0ccda; 31 | border-radius: 6px; 32 | box-sizing: border-box; 33 | width: 148px; 34 | height: @width; 35 | cursor: pointer; 36 | line-height: calc(@height - 2); 37 | vertical-align: top; 38 | 39 | i { 40 | font-size: 28px; 41 | color: #8c939d; 42 | } 43 | 44 | &:hover { 45 | border-color: var(--color-primary); 46 | color: var(--color-primary); 47 | } 48 | } 49 | } 50 | @b upload-dragger { 51 | background-color: #fff; 52 | border: 1px dashed #d9d9d9; 53 | border-radius: 6px; 54 | box-sizing: border-box; 55 | width: 360px; 56 | height: 180px; 57 | text-align: center; 58 | cursor: pointer; 59 | position: relative; 60 | overflow: hidden; 61 | 62 | & .el-icon-upload { 63 | font-size: 67px; 64 | color: var(--color-light-silver); 65 | margin: 40px 0 16px; 66 | line-height: 50px; 67 | } 68 | 69 | & + .el-upload__tip { 70 | text-align: center; 71 | } 72 | & ~ .el-upload__files { 73 | border-top: 1px solid rgba(var(--color-extra-light-silver), .2); 74 | margin-top: 7px; 75 | padding-top: 5px; 76 | } 77 | .el-upload__text { 78 | color: var(--color-light-silver); 79 | font-size: 14px; 80 | text-align: center; 81 | 82 | & em { 83 | color: var(--color-primary); 84 | font-style: normal; 85 | } 86 | } 87 | 88 | &:hover { 89 | border-color: var(--color-primary); 90 | } 91 | 92 | @when dragover { 93 | background-color: rgba(32, 159, 255, .06); 94 | border: 2px dashed var(--color-primary); 95 | } 96 | } 97 | @b upload-list { 98 | margin: 0; 99 | padding: 0; 100 | list-style: none; 101 | 102 | @e item { 103 | transition: all .5s cubic-bezier(.55,0,.1,1); 104 | font-size: 14px; 105 | color: var(--color-extra-light-black); 106 | line-height: 1.8; 107 | margin-top: 5px; 108 | position: relative; 109 | box-sizing: border-box; 110 | border-radius: 4px; 111 | width: 100%; 112 | position: relative; 113 | 114 | & .el-progress { 115 | position: absolute; 116 | top: 20px; 117 | width: 100%; 118 | } 119 | & .el-progress__text { 120 | position: absolute; 121 | right: 0; 122 | top: -13px; 123 | right: 0; 124 | } 125 | .el-progress-bar { 126 | margin-right: 0; 127 | padding-right: 0; 128 | } 129 | &:first-child { 130 | margin-top: 10px; 131 | } 132 | & .el-icon-upload-success { 133 | color: var(--color-success); 134 | } 135 | & .el-icon-close { 136 | display: none; 137 | position: absolute; 138 | top: 5px; 139 | right: 5px; 140 | cursor: pointer; 141 | opacity: .75; 142 | color: var(--color-extra-light-black); 143 | transform: scale(.7); 144 | 145 | &:hover { 146 | opacity: 1; 147 | } 148 | } 149 | &:hover { 150 | background-color: var(--color-extra-light-gray); 151 | 152 | .el-icon-close { 153 | display: inline-block; 154 | } 155 | .el-progress__text { 156 | display: none; 157 | } 158 | } 159 | @when success { 160 | .el-upload-list__item-status-label { 161 | display: block; 162 | } 163 | .el-upload-list__item-name:hover { 164 | color: var(--link-hover-color); 165 | cursor: pointer; 166 | } 167 | &:hover { 168 | .el-upload-list__item-status-label { 169 | display: none; 170 | } 171 | } 172 | } 173 | } 174 | @when disabled { 175 | .el-upload-list__item:hover .el-upload-list__item-status-label { 176 | display: block; 177 | } 178 | } 179 | @e item-name { 180 | color: var(--color-extra-light-black); 181 | display: block; 182 | margin-right: 40px; 183 | overflow: hidden; 184 | padding-left: 4px; 185 | text-overflow: ellipsis; 186 | transition: color .3s; 187 | white-space: nowrap; 188 | 189 | [class^="el-icon"] { 190 | color: var(--color-light-silver); 191 | margin-right: 7px; 192 | height: 100%; 193 | line-height: inherit; 194 | } 195 | } 196 | @e item-status-label { 197 | position: absolute; 198 | right: 5px; 199 | top: 0; 200 | line-height: inherit; 201 | display: none; 202 | } 203 | @e item-delete { 204 | position: absolute; 205 | right: 10px; 206 | top: 0; 207 | font-size: 12px; 208 | color: var(--color-extra-light-black); 209 | display: none; 210 | 211 | &:hover { 212 | color: var(--color-primary); 213 | } 214 | } 215 | @m picture-card { 216 | margin: 0; 217 | display: inline; 218 | vertical-align: top; 219 | 220 | .el-upload-list__item { 221 | overflow: hidden; 222 | background-color: #fff; 223 | border: 1px solid #c0ccda; 224 | border-radius: 6px; 225 | box-sizing: border-box; 226 | width: 148px; 227 | height: @width; 228 | margin: 0 8px 8px 0; 229 | display: inline-block; 230 | 231 | & .el-icon-check, 232 | & .el-icon-circle-check { 233 | color: var(--color-white); 234 | } 235 | 236 | & .el-icon-close { 237 | display: none; 238 | } 239 | 240 | &:hover { 241 | .el-upload-list__item-status-label { 242 | display: none; 243 | } 244 | .el-progress__text { 245 | display: block; 246 | } 247 | } 248 | } 249 | .el-upload-list__item-name { 250 | display: none; 251 | } 252 | .el-upload-list__item-thumbnail { 253 | width: 100%; 254 | height: 100%; 255 | } 256 | .el-upload-list__item-status-label { 257 | position: absolute; 258 | right: -15px; 259 | top: -6px; 260 | width: 40px; 261 | height: 24px; 262 | background: #13ce66; 263 | text-align: center; 264 | transform: rotate(45deg); 265 | box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2); 266 | 267 | i { 268 | font-size: 12px; 269 | margin-top: 11px; 270 | transform: rotate(-45deg) scale(0.8); 271 | } 272 | } 273 | .el-upload-list__item-actions { 274 | position: absolute; 275 | width: 100%; 276 | height: 100%; 277 | left: 0; 278 | top: 0; 279 | cursor: default; 280 | text-align: center; 281 | color: #fff; 282 | opacity: 0; 283 | font-size: 20px; 284 | background-color: rgba(0, 0, 0, .5); 285 | transition: opacity .3s; 286 | @utils-vertical-center; 287 | 288 | span { 289 | display: none; 290 | cursor: pointer; 291 | } 292 | span + span { 293 | margin-left: 15px; 294 | } 295 | 296 | .el-upload-list__item-delete { 297 | position: static; 298 | font-size: inherit; 299 | color: inherit; 300 | } 301 | 302 | &:hover { 303 | opacity: 1; 304 | span { 305 | display: inline-block; 306 | } 307 | } 308 | } 309 | .el-progress { 310 | top: 50%; 311 | left: 50%; 312 | transform: translate(-50%, -50%); 313 | bottom: auto; 314 | width: 126px; 315 | 316 | .el-progress__text { 317 | top: 50%; 318 | } 319 | } 320 | } 321 | @m picture { 322 | .el-upload-list__item { 323 | overflow: hidden; 324 | background-color: #fff; 325 | border: 1px solid #c0ccda; 326 | border-radius: 6px; 327 | box-sizing: border-box; 328 | margin-top: 10px; 329 | padding: 10px 10px 10px 90px; 330 | height: 92px; 331 | 332 | & .el-icon-check, 333 | & .el-icon-circle-check { 334 | color: var(--color-white); 335 | } 336 | &:hover { 337 | .el-upload-list__item-status-label { 338 | background: transparent; 339 | box-shadow: none; 340 | top: -2px; 341 | right: -12px; 342 | } 343 | .el-progress__text { 344 | display: block; 345 | } 346 | } 347 | &.is-success { 348 | .el-upload-list__item-name { 349 | line-height: 70px; 350 | margin-top: 0; 351 | 352 | i { 353 | display: none; 354 | } 355 | } 356 | } 357 | } 358 | .el-upload-list__item-thumbnail { 359 | vertical-align: middle; 360 | display: inline-block; 361 | width: 70px; 362 | height: 70px; 363 | float: left; 364 | position: relative; 365 | z-index: 1; 366 | margin-left: -80px; 367 | } 368 | .el-upload-list__item-name { 369 | display: block; 370 | margin-top: 20px; 371 | 372 | i { 373 | font-size: 70px; 374 | line-height: 1; 375 | position: absolute; 376 | left: 9px; 377 | top: 10px; 378 | } 379 | } 380 | .el-upload-list__item-status-label { 381 | position: absolute; 382 | right: -17px; 383 | top: -7px; 384 | width: 46px; 385 | height: 26px; 386 | background: #13ce66; 387 | text-align: center; 388 | transform: rotate(45deg); 389 | box-shadow: 0 1px 1px #ccc; 390 | 391 | i { 392 | font-size: 12px; 393 | margin-top: 12px; 394 | transform: rotate(-45deg) scale(0.8); 395 | } 396 | } 397 | .el-progress { 398 | position: relative; 399 | top: -7px; 400 | } 401 | } 402 | } 403 | @b upload-cover { 404 | position: absolute; 405 | left: 0; 406 | top: 0; 407 | width: 100%; 408 | height: 100%; 409 | overflow: hidden; 410 | z-index: 10; 411 | cursor: default; 412 | @utils-vertical-center; 413 | 414 | & img { 415 | display: block; 416 | width: 100%; 417 | height: 100%; 418 | } 419 | 420 | @e label { 421 | position: absolute; 422 | right: -15px; 423 | top: -6px; 424 | width: 40px; 425 | height: 24px; 426 | background: #13ce66; 427 | text-align: center; 428 | transform: rotate(45deg); 429 | box-shadow: 0 0 1pc 1px rgba(0,0,0,0.2); 430 | 431 | i { 432 | font-size: 12px; 433 | margin-top: 11px; 434 | transform: rotate(-45deg) scale(0.8); 435 | color: #fff; 436 | } 437 | } 438 | 439 | @e progress { 440 | display: inline-block; 441 | vertical-align: middle; 442 | position: static; 443 | width: 243px; 444 | 445 | & + .el-upload__inner { 446 | opacity: 0; 447 | } 448 | } 449 | 450 | @e content { 451 | position: absolute; 452 | top: 0; 453 | left: 0; 454 | width: 100%; 455 | height: 100%; 456 | } 457 | 458 | @e interact { 459 | position: absolute; 460 | bottom: 0; 461 | left: 0; 462 | width: 100%; 463 | height: 100%; 464 | background-color: rgba(#000, .72); 465 | text-align: center; 466 | 467 | & .btn { 468 | display: inline-block; 469 | color: var(--color-white); 470 | font-size: 14px; 471 | cursor: pointer; 472 | vertical-align: middle; 473 | transition: var(--md-fade-transition); 474 | margin-top: 60px; 475 | 476 | & i { 477 | margin-top: 0; 478 | } 479 | 480 | & span { 481 | opacity: 0; 482 | transition: opacity .15s linear; 483 | } 484 | 485 | &:not(:first-child) { 486 | margin-left: 35px; 487 | } 488 | 489 | &:hover { 490 | transform: translateY(-13px); 491 | 492 | & span { 493 | opacity: 1; 494 | } 495 | } 496 | 497 | & i { 498 | color: var(--color-white); 499 | display: block; 500 | font-size: 24px; 501 | line-height: inherit; 502 | margin: 0 auto 5px; 503 | } 504 | } 505 | } 506 | 507 | @e title { 508 | position: absolute; 509 | bottom: 0; 510 | left: 0; 511 | background-color: var(--color-white); 512 | height: 36px; 513 | width: 100%; 514 | overflow: hidden; 515 | text-overflow: ellipsis; 516 | white-space: nowrap; 517 | font-weight: normal; 518 | text-align: left; 519 | padding: 0 10px; 520 | margin: 0; 521 | line-height: 36px; 522 | font-size: 14px; 523 | color: var(--color-extra-light-black); 524 | } 525 | 526 | & + .el-upload__inner { 527 | opacity: 0; 528 | position: relative; 529 | z-index: 1; 530 | } 531 | } 532 | } 533 | --------------------------------------------------------------------------------