mirror of https://github.com/ElemeFE/element
杨奕
GitHub
commit
78277e2226
|
|
@ -33,6 +33,7 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡
|
|||
## 开发环境搭建
|
||||
首先你需要 Node.js 4+ 和 NPM 3+
|
||||
```shell
|
||||
git clone git@github.com:ElemeFE/element.git --recursive
|
||||
npm run dev
|
||||
|
||||
# open http://localhost:8085
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "packages/theme-default"]
|
||||
path = packages/theme-default
|
||||
url = https://github.com/ElementUI/theme-default
|
||||
|
|
@ -10,10 +10,10 @@
|
|||
],
|
||||
"scripts": {
|
||||
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js",
|
||||
"dev": "npm install && npm run build:file && cooking watch -c build/cooking.demo.js -p",
|
||||
"dev": "npm run bootstrap && npm install && npm run build:file && cooking watch -c build/cooking.demo.js -p",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:theme",
|
||||
"dist:all": "node build/bin/build-all.js && npm run build:theme",
|
||||
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default",
|
||||
"build:theme": "git submodule update --remote && node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default",
|
||||
"deploy": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
|
||||
"pub": "sh build/release.sh",
|
||||
"pub:all": "npm run dist:all && lerna publish",
|
||||
|
|
@ -21,7 +21,8 @@
|
|||
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
|
||||
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
|
||||
"test:watch": "karma start test/unit/karma.conf.js",
|
||||
"test": "npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run"
|
||||
"bootstrap": "cd packages/theme-default && npm i --production && cd ../..",
|
||||
"test": "npm run bootstrap && npm run lint && CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 1d92c70ea7e47432fb81021d10d142b37fe3e104
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
# element-theme-default
|
||||
> element component defualt theme.
|
||||
|
||||
## Usage
|
||||
|
||||
Use Sass Or postcss-import
|
||||
```css
|
||||
@import 'element-theme-default';
|
||||
```
|
||||
|
||||
Or Use webpack
|
||||
```javascript
|
||||
import 'element-theme-default';
|
||||
```
|
||||
|
||||
Or
|
||||
```html
|
||||
<link rel="stylesheet" href="path/to/node_modules/element-theme-default/dist/index.css">
|
||||
```
|
||||
|
||||
## Import your need
|
||||
```javascript
|
||||
import 'element-theme-default/dist/input.css';
|
||||
import 'element-theme-default/dist/select.css';
|
||||
|
||||
// ...
|
||||
```
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const postcss = require('gulp-postcss');
|
||||
const cssmin = require('gulp-cssmin');
|
||||
|
||||
const salad = require('postcss-salad')({
|
||||
browser: ['ie > 9', 'last 2 version'],
|
||||
features: {
|
||||
'bem': {
|
||||
'shortcuts': {
|
||||
'component': 'b',
|
||||
'modifier': 'm',
|
||||
'descendent': 'e'
|
||||
},
|
||||
'separators': {
|
||||
'descendent': '__',
|
||||
'modifier': '--'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
gulp.task('compile', function() {
|
||||
return gulp.src('./src/*.css')
|
||||
.pipe(postcss([salad]))
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest('./lib'));
|
||||
});
|
||||
|
||||
gulp.task('copyfont', function() {
|
||||
return gulp.src('./src/fonts/**')
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest('./lib/fonts'));
|
||||
});
|
||||
|
||||
gulp.task('build', ['compile', 'copyfont']);
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
{
|
||||
"name": "element-theme-default",
|
||||
"version": "1.0.0",
|
||||
"description": "Element component default theme.",
|
||||
"main": "lib/index.css",
|
||||
"files": [
|
||||
"lib",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "postcss -c postcss.conf.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/element-component/element-theme-default.git"
|
||||
},
|
||||
"keywords": [
|
||||
"element",
|
||||
"theme"
|
||||
],
|
||||
"author": "haiping.zeng <qingwei.li@ele.me>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/element-component/element-theme-default/issues"
|
||||
},
|
||||
"homepage": "https://github.com/element-component/element-theme-default#readme",
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-cssmin": "^0.1.7",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"postcss-salad": "^1.0.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b alert {
|
||||
width: 100%;
|
||||
padding: var(--alert-padding);
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--alert-border-radius);
|
||||
position: relative;
|
||||
background-color: var(--color-white);
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
display: table;
|
||||
transition: opacity .2s;
|
||||
|
||||
@modifier success {
|
||||
background-color: var(--alert-success-color);
|
||||
}
|
||||
|
||||
@modifier info {
|
||||
background-color: var(--alert-info-color);
|
||||
}
|
||||
|
||||
@modifier warning {
|
||||
background-color: var(--alert-warning-color);
|
||||
}
|
||||
|
||||
@modifier error {
|
||||
background-color: var(--alert-danger-color);
|
||||
}
|
||||
|
||||
@e content {
|
||||
display: table-cell;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
@e icon {
|
||||
font-size: var(--alert-icon-size);
|
||||
width: var(--alert-icon-size);
|
||||
display: table-cell;
|
||||
color: var(--color-white);
|
||||
vertical-align: middle;
|
||||
@when big {
|
||||
font-size: var(--alert-icon-large-size);
|
||||
width: var(--alert-icon-large-size);
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: var(--alert-title-font-size);
|
||||
line-height: 18px;
|
||||
@when bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
& .el-alert__description {
|
||||
color: #fff;
|
||||
font-size: var(--alert-description-font-size);
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
@e closebtn {
|
||||
font-size: var(--alert-close-font-size);
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
position: absolute 12px 15px * *;
|
||||
cursor: pointer;
|
||||
|
||||
@when customed {
|
||||
font-style: normal;
|
||||
font-size: var(--alert-close-customed-font-size);
|
||||
top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-alert-fade-enter,
|
||||
.el-alert-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./input.css";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b autocomplete {
|
||||
position: relative;
|
||||
|
||||
@e suggestions {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 110%;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #D3DCE6;
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
z-index: 10;
|
||||
border-radius: 2px;
|
||||
max-height: 280px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
|
||||
|
||||
& li {
|
||||
list-style: none;
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.highlighted,
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
&:active {
|
||||
background-color: darken(var(--color-primary), 0.2);
|
||||
}
|
||||
&.divider {
|
||||
margin-top: 6px;
|
||||
border-top: 1px solid #D3DCE6;
|
||||
}
|
||||
&.divider:last-child {
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
@when loading {
|
||||
li {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
@utils-vertical-center;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
& .el-icon-loading {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b badge {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
|
||||
@e content {
|
||||
background-color: var(--badge-fill);
|
||||
border-radius: var(--badge-radius);
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: var(--badge-font-size);
|
||||
height: var(--badge-size);
|
||||
line-height: var(--badge-size);
|
||||
padding: 0 var(--badge-padding);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #fff;
|
||||
|
||||
@when fixed {
|
||||
position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
|
||||
transform: translateY(-50%) translateX(100%);
|
||||
|
||||
@when dot {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@when dot {
|
||||
size: 8px 8px;
|
||||
padding: 0;
|
||||
right: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import "./common/transition.css";
|
||||
@import "./icon.css";
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b breadcrumb {
|
||||
font-size:13px;
|
||||
line-height: 1;
|
||||
@utils-clearfix;
|
||||
|
||||
@e separator {
|
||||
margin: 0 8px;
|
||||
color: #c0ccda;
|
||||
}
|
||||
@e item {
|
||||
float: left;
|
||||
|
||||
@e inner {
|
||||
&, & a {
|
||||
transition: color .15s linear;
|
||||
color:#475669;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.el-breadcrumb__item__inner,
|
||||
.el-breadcrumb__item__inner a {
|
||||
&, &:hover {
|
||||
color: #99a9bf;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
||||
.el-breadcrumb__separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
@import './mixins/button';
|
||||
|
||||
@component-namespace el {
|
||||
@b button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: var(--button-default-fill);
|
||||
border: var(--border-base);
|
||||
color: var(--button-default-color);
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
@utils-user-select none;
|
||||
|
||||
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: shade(var(--color-primary), var(--button-active-shade-percent));
|
||||
border-color: @color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
& [class*="el-icon-"] {
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@when plain {
|
||||
&:hover {
|
||||
background: #fff;
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #fff;
|
||||
border-color: shade(var(--color-primary), var(--button-active-shade-percent));
|
||||
color: shade(var(--color-primary), var(--button-active-shade-percent));
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@when active {
|
||||
color: shade(var(--color-primary), var(--button-active-shade-percent));
|
||||
border-color: @color;
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: var(--button-disabled-color);
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: var(--button-disabled-fill);
|
||||
border-color: var(--button-disabled-border);
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
border-color: #d3dce6;
|
||||
color: #C0CCDA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@when loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: inherit;
|
||||
background-color: rgba(255,255,255,.35);
|
||||
}
|
||||
}
|
||||
@m primary {
|
||||
@mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
|
||||
}
|
||||
@m success {
|
||||
@mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
|
||||
}
|
||||
@m warning {
|
||||
@mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
|
||||
}
|
||||
@m danger {
|
||||
@mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
|
||||
}
|
||||
@m info {
|
||||
@mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
|
||||
}
|
||||
@m text {
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
color: tint(var(--color-primary), var(--button-hover-tint-percent));
|
||||
}
|
||||
&:active {
|
||||
color: shade(var(--color-primary), var(--button-active-shade-percent));
|
||||
}
|
||||
}
|
||||
@m large {
|
||||
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
|
||||
}
|
||||
@m small {
|
||||
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
|
||||
}
|
||||
@m mini {
|
||||
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
@b button-group {
|
||||
@utils-clearfix;
|
||||
display: inline-block;
|
||||
|
||||
& .el-button {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@when active {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@each $type in (primary, success, warning, danger, info) {
|
||||
.el-button--$type {
|
||||
&:first-child {
|
||||
border-right-color: rgba(#fff, 0.5);
|
||||
}
|
||||
&:last-child {
|
||||
border-left-color: rgba(#fff, 0.5);
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-left-color: rgba(#fff, 0.5);
|
||||
border-right-color: rgba(#fff, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b card {
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
|
||||
0px 0px 6px 0px rgba(0, 0, 0, .04);
|
||||
|
||||
@e header {
|
||||
padding: calc(var(--card-padding) - 2) var(--card-padding);
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@e body {
|
||||
padding: var(--card-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./input.css";
|
||||
@import "./common/var.css";
|
||||
/*@import "./core/dropdown.css";*/
|
||||
|
||||
@component-namespace element {
|
||||
|
||||
@b cascader {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@e dropdown {
|
||||
background-color: var(--cascader-menu-fill);
|
||||
border: var(--cascader-menu-border);
|
||||
border-radius: var(--cascader-menu-radius);
|
||||
box-shadow: var(--cascader-menu-submenu-shadow);
|
||||
margin-top: 5px;
|
||||
max-height: var(--cascader-height);
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@e wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@e menu {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
&::before {
|
||||
border-left: var(--cascader-menu-border);
|
||||
content: " ";
|
||||
height: var(--cascader-height);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b checkbox {
|
||||
color: var(--checkbox-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
@utils-user-select none;
|
||||
|
||||
@e input {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@e inner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: var(--checkbox-input-border);
|
||||
border-radius: var(--checkbox-input-border-radius);
|
||||
box-sizing: border-box;
|
||||
rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
|
||||
z-index: var(--index-normal);
|
||||
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
|
||||
background-color .25s cubic-bezier(.71,-.46,.29,1.46);
|
||||
|
||||
&:not(.is-disabled):hover {
|
||||
border-color: var(--checkbox-input-border-color-hover);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
border: 2px solid var(--checkbox-checked-icon-color);
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 8px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
transform: rotate(45deg) scaleY(0);
|
||||
width: 4px;
|
||||
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
background-color: var(--checkbox-disabled-input-fill);
|
||||
border-color: var(--checkbox-disabled-input-border-color);
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
cursor: not-allowed;
|
||||
border-color: var(--checkbox-disabled-icon-color);
|
||||
}
|
||||
|
||||
& + .el-checkbox__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@when checked {
|
||||
background-color: var(--checkbox-checked-input-fill);
|
||||
border-color: var(--checkbox-checked-input-border-color);
|
||||
|
||||
&::after {
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@when focus {
|
||||
border-color: var(--checkbox-input-border-color-hover);
|
||||
}
|
||||
|
||||
&.is-disabled.is-checked {
|
||||
background-color: var(--checkbox-disabled-checked-input-fill);
|
||||
border-color: var(--checkbox-disabled-checked-input-border-color);
|
||||
|
||||
&::after {
|
||||
border-color: var(--checkbox-disabled-checked-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
@when indeterminate {
|
||||
background-color: var(--checkbox-checked-input-fill);
|
||||
border-color: var(--checkbox-checked-input-border-color);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: 1px solid var(--checkbox-checked-icon-color);
|
||||
margin-top: -1px;
|
||||
left: 3px;
|
||||
right: 3px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled.is-indeterminate {
|
||||
background-color: var(--checkbox-disabled-checked-input-fill);
|
||||
border-color: var(--checkbox-disabled-checked-input-border-color);
|
||||
|
||||
&::before {
|
||||
border-color: var(--checkbox-disabled-checked-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e original {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: -999px;
|
||||
}
|
||||
|
||||
@e label {
|
||||
font-size: var(--checkbox-font-size);
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
& + .el-checkbox {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
.el-col-1, .el-col-2, .el-col-3, .el-col-4, .el-col-5, .el-col-6, .el-col-7, .el-col-8, .el-col-9, .el-col-10, .el-col-11, .el-col-12, .el-col-13, .el-col-14, .el-col-15, .el-col-16, .el-col-17, .el-col-18, .el-col-19, .el-col-20, .el-col-21, .el-col-22, .el-col-23, .el-col-24 {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@for $i from 1 to 24 {
|
||||
.el-col-$i {
|
||||
width: calc(1 / 24 * $(i) * 100)%;
|
||||
}
|
||||
.el-col-offset-$i {
|
||||
margin-left: calc(1 / 24 * $(i) * 100)%;
|
||||
}
|
||||
.el-col-pull-$i {
|
||||
position: relative;
|
||||
right: calc(1 / 24 * $(i) * 100)%;
|
||||
}
|
||||
.el-col-push-$i {
|
||||
position: relative;
|
||||
left: calc(1 / 24 * $(i) * 100)%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import './var.css';
|
||||
|
||||
.fade-in-linear-enter-active,
|
||||
.fade-in-linear-leave-active {
|
||||
transition: var(--fade-linear-transition);
|
||||
}
|
||||
|
||||
.fade-in-linear-enter,
|
||||
.fade-in-linear-leave,
|
||||
.fade-in-linear-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in-enter-active,
|
||||
.fade-in-leave-active {
|
||||
transition: all .3s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
|
||||
.fade-in-enter,
|
||||
.fade-in-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-fade-center-enter-active,
|
||||
.md-fade-center-leave-active {
|
||||
transition: all .3s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
.md-fade-center-enter,
|
||||
.md-fade-center-leave,
|
||||
.md-fade-center-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.md-fade-bottom-enter-active,
|
||||
.md-fade-bottom-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition: var(--md-fade-transition);
|
||||
transform-origin: center top;
|
||||
}
|
||||
.md-fade-bottom-enter,
|
||||
.md-fade-bottom-leave,
|
||||
.md-fade-bottom-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.md-fade-top-enter-active,
|
||||
.md-fade-top-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
transition: var(--md-fade-transition);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
.md-fade-top-enter,
|
||||
.md-fade-top-leave,
|
||||
.md-fade-top-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.md-fade-left-enter-active,
|
||||
.md-fade-left-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
transition: var(--md-fade-transition);
|
||||
transform-origin: right center;
|
||||
}
|
||||
.md-fade-left-enter,
|
||||
.md-fade-left-leave,
|
||||
.md-fade-left-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.md-fade-right-enter-active,
|
||||
.md-fade-right-leave-active {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
transition: var(--md-fade-transition);
|
||||
transform-origin: left center;
|
||||
}
|
||||
.md-fade-right-enter,
|
||||
.md-fade-right-leave,
|
||||
.md-fade-right-leave-active {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .3s cubic-bezier(.645,.045,.355,1);
|
||||
}
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.list-move, .list-enter-active, .list-leave-active {
|
||||
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
.list-enter, .list-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate(0, -30px);
|
||||
}
|
||||
/*.list-leave-active {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: scaleY(0.01) translate(30px, 0);
|
||||
}*/
|
||||
|
|
@ -1,527 +0,0 @@
|
|||
:root {
|
||||
|
||||
/* Transition
|
||||
-------------------------- */
|
||||
--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
|
||||
--fade-linear-transition: opacity 200ms linear;
|
||||
--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
|
||||
--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1);
|
||||
--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
|
||||
|
||||
/* Colors
|
||||
-------------------------- */
|
||||
--color-primary: #20a0ff;
|
||||
--color-success: #13ce66;
|
||||
--color-warning: #f7ba2a;
|
||||
--color-danger: #ff4949;
|
||||
--color-info: #50BFFF;
|
||||
--color-blue: #2e90fe;
|
||||
--color-blue-light: #5da9ff;
|
||||
--color-blue-lighter: rgba(var(--color-blue), 0.12);
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
--color-grey: #C0CCDA;
|
||||
|
||||
/* Link
|
||||
-------------------------- */
|
||||
--link-color: #475669;
|
||||
--link-hover-color: var(--color-primary);
|
||||
|
||||
/* Border
|
||||
-------------------------- */
|
||||
--border-width-base: 1px;
|
||||
--border-style-base: solid;
|
||||
--border-color-base: var(--color-grey);
|
||||
--border-color-hover: #8492a6;
|
||||
--border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
|
||||
--border-radius-base: 4px;
|
||||
--border-radius-small: 2px;
|
||||
--border-radius-circle: 100%;
|
||||
--shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
|
||||
|
||||
/* Box-shadow
|
||||
-------------------------- */
|
||||
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
||||
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
|
||||
|
||||
/* Fill
|
||||
-------------------------- */
|
||||
--fill-base: var(--color-white);
|
||||
|
||||
/* Font
|
||||
-------------------------- */
|
||||
--font-size-base: 14px;
|
||||
--font-color-base: #1f2d3d;
|
||||
--font-color-disabled-base: #bbb;
|
||||
|
||||
/* Size
|
||||
-------------------------- */
|
||||
--size-base: 14px;
|
||||
|
||||
/* z-index
|
||||
-------------------------- */
|
||||
--index-normal: 1;
|
||||
--index-top: 1000;
|
||||
--index-popper: 2000;
|
||||
|
||||
/* Disable base
|
||||
-------------------------- */
|
||||
--disabled-fill-base: #EFF2F7;
|
||||
--disabled-color-base: #bbb;
|
||||
--disabled-border-base: #D3DCE6;
|
||||
|
||||
/* Icon
|
||||
-------------------------- */
|
||||
--icon-color: #666;
|
||||
|
||||
/* Checkbox
|
||||
-------------------------- */
|
||||
--checkbox-font-size: 14px;
|
||||
--checkbox-color: #1f2d3d;
|
||||
--checkbox-input-height: 18px;
|
||||
--checkbox-input-width: 18px;
|
||||
--checkbox-input-border-radius: var(--border-radius-base);
|
||||
--checkbox-input-fill: #fff;
|
||||
--checkbox-input-border: var(--border-base);
|
||||
--checkbox-input-border-color: var(--border-color-base);
|
||||
--checkbox-icon-color: #fff;
|
||||
|
||||
--checkbox-disabled-input-border-color: var(--disabled-border-base);
|
||||
--checkbox-disabled-input-fill: var(--disabled-fill-base);
|
||||
--checkbox-disabled-icon-color: var(--disabled-fill-base);
|
||||
|
||||
--checkbox-disabled-checked-input-fill: var(--disabled-border-base);
|
||||
--checkbox-disabled-checked-input-border-color: var(--disabled-border-base);
|
||||
--checkbox-disabled-checked-icon-color: #fff;
|
||||
|
||||
--checkbox-checked-input-border-color: var(--color-blue);
|
||||
--checkbox-checked-input-fill: var(--color-primary);
|
||||
--checkbox-checked-icon-color: var(--fill-base);
|
||||
|
||||
--checkbox-input-shadow-hover: var(--shadow-base);
|
||||
--checkbox-input-border-color-hover: var(--color-primary);
|
||||
|
||||
/* Radio
|
||||
-------------------------- */
|
||||
--radio-font-size: 14px;
|
||||
--radio-color: #1f2d3d;
|
||||
--radio-input-height: 18px;
|
||||
--radio-input-width: 18px;
|
||||
--radio-input-border-radius: var(--border-radius-circle);
|
||||
--radio-input-fill: #fff;
|
||||
--radio-input-border: var(--border-base);
|
||||
--radio-input-border-color: var(--border-color-base);
|
||||
--radio-icon-color: #fff;
|
||||
|
||||
--radio-disabled-input-border-color: var(--disabled-border-base);
|
||||
--radio-disabled-input-fill: var(--disabled-fill-base);
|
||||
--radio-disabled-icon-color: var(--disabled-fill-base);
|
||||
|
||||
--radio-disabled-checked-input-fill: var(--disabled-border-base);
|
||||
--radio-disabled-checked-input-border-color: var(--disabled-border-base);
|
||||
--radio-disabled-checked-icon-color: #fff;
|
||||
|
||||
--radio-checked-input-border-color: var(--color-primary);
|
||||
--radio-checked-input-fill: #fff;
|
||||
--radio-checked-icon-color: var(--color-primary);
|
||||
|
||||
--radio-input-shadow-hover: var(--shadow-base);
|
||||
--radio-input-border-color-hover: var(--color-primary);
|
||||
|
||||
--radio-button-font-size: var(--font-size-base);
|
||||
|
||||
/* Select
|
||||
-------------------------- */
|
||||
--select-border-color-hover: var(--border-color-hover);
|
||||
--select-disabled-border: var(--disabled-border-base);
|
||||
--select-font-size: var(--font-size-base);
|
||||
--select-close-hover-color: #99a9bf;
|
||||
|
||||
--select-input-color: var(--color-grey);
|
||||
--select-multiple-input-color: #666;
|
||||
--select-input-focus-background: #2ea0ff;
|
||||
--select-input-font-size: 12px;
|
||||
|
||||
--select-tag-height: 24px;
|
||||
--select-tag-color: var(--color-white);
|
||||
--select-tag-background: var(--color-primary);
|
||||
|
||||
--select-option-color: #475669;
|
||||
--select-option-disabled-color: var(--color-grey);
|
||||
--select-option-height: 36px;
|
||||
--select-option-hover-background: #e5e9f2;
|
||||
--select-option-selected: var(--color-primary);
|
||||
--select-option-selected-hover: #1D8CE0;
|
||||
|
||||
--select-group-color: #999;
|
||||
--select-group-height: 30px;
|
||||
--select-group-font-size: 12px;
|
||||
|
||||
--select-dropdown-background: var(--color-white);
|
||||
--select-dropdown-shadow: var(--box-shadow-base);
|
||||
--select-dropdown-empty-color: #999;
|
||||
--select-dropdown-max-height: 274px;
|
||||
--select-dropdown-padding: 6px 0;
|
||||
--select-dropdown-empty-padding: 10px 0;
|
||||
--select-dropdown-border: solid 1px #d3dce6;
|
||||
|
||||
/* Alert
|
||||
-------------------------- */
|
||||
--alert-padding: 8px 16px;
|
||||
--alert-border-radius: var(--border-radius-base);
|
||||
--alert-title-font-size: 13px;
|
||||
--alert-description-font-size: 12px;
|
||||
--alert-close-font-size: 12px;
|
||||
--alert-close-customed-font-size: 13px;
|
||||
|
||||
--alert-success-color: var(--color-success);
|
||||
--alert-info-color: var(--color-info);
|
||||
--alert-warning-color: var(--color-warning);
|
||||
--alert-danger-color: var(--color-danger);
|
||||
|
||||
--alert-icon-size: 16px;
|
||||
--alert-icon-large-size: 28px;
|
||||
|
||||
/* Message Box
|
||||
-------------------------- */
|
||||
--msgbox-width: 420px;
|
||||
--msgbox-border-radius: 3px;
|
||||
--msgbox-font-size: 16px;
|
||||
--msgbox-content-font-size: 14px;
|
||||
--msgbox-content-color: #475669;
|
||||
--msgbox-error-font-size: 12px;
|
||||
|
||||
--msgbox-success-color: var(--color-success);
|
||||
--msgbox-info-color: var(--color-info);
|
||||
--msgbox-warning-color: var(--color-warning);
|
||||
--msgbox-danger-color: var(--color-danger);
|
||||
|
||||
/* Message
|
||||
-------------------------- */
|
||||
--message-shadow: var(--box-shadow-base);
|
||||
--message-min-width: 300px;
|
||||
--message-padding: 10px 12px;
|
||||
--message-content-color: #8492a6;
|
||||
--message-close-color: var(--color-grey);
|
||||
--message-close-hover-color: #99A9BF;
|
||||
|
||||
--message-success-color: var(--color-success);
|
||||
--message-info-color: var(--color-info);
|
||||
--message-warning-color: var(--color-warning);
|
||||
--message-danger-color: var(--color-danger);
|
||||
|
||||
/* Notification
|
||||
-------------------------- */
|
||||
--notification-width: 330px;
|
||||
--notification-padding: 20px;
|
||||
--notification-shadow: var(--box-shadow-base);
|
||||
--notification-icon-size: 40px;
|
||||
--notification-font-size: var(--font-size-base);
|
||||
--notification-color: #8492a6;
|
||||
--notification-title-font-size: 16px;
|
||||
--notification-title-color: #1f2d3d;
|
||||
|
||||
--notification-close-color: var(--color-grey);
|
||||
--notification-close-hover-color: #99A9BF;
|
||||
|
||||
--notification-success-color: var(--color-success);
|
||||
--notification-info-color: var(--color-info);
|
||||
--notification-warning-color: var(--color-warning);
|
||||
--notification-danger-color: var(--color-danger);
|
||||
|
||||
/* Input
|
||||
-------------------------- */
|
||||
--input-font-size: var(--font-size-base);
|
||||
--input-color: var(--font-color-base);
|
||||
--input-width: 140px;
|
||||
--input-height: 36px;
|
||||
--input-shadow-hover: var(--shadow-base);
|
||||
--input-border: var(--border-base);
|
||||
--input-border-color: var(--border-color-base);
|
||||
--input-border-radius: var(--border-radius-base);
|
||||
--input-border-color-hover: var(--border-color-hover);
|
||||
--input-fill: #fff;
|
||||
--input-fill-disabled: var(--disabled-fill-base);
|
||||
--input-color-disabled: var(--font-color-disabled-base);
|
||||
--input-icon-color: var(--color-grey);
|
||||
--input-placeholder-color: #99a9bf;
|
||||
--input-max-width: 314px;
|
||||
|
||||
--input-hover-border: var(--border-color-hover);
|
||||
|
||||
--input-focus-border: var(--color-primary);
|
||||
--input-focus-fill: #fff;
|
||||
|
||||
--input-disabled-fill: var(--disabled-fill-base);
|
||||
--input-disabled-border: var(--disabled-border-base);
|
||||
--input-disabled-color: var(--disabled-color-base);
|
||||
--input-disabled-placeholder-color: #C0CCDA;
|
||||
|
||||
--input-large-font-size: 16px;
|
||||
--input-large-height: 42px;
|
||||
|
||||
--input-small-font-size: 13px;
|
||||
--input-small-height: 30px;
|
||||
|
||||
--input-mini-font-size: 12px;
|
||||
--input-mini-height: 22px;
|
||||
|
||||
/* Cascader
|
||||
-------------------------- */
|
||||
--cascader-menu-fill: var(--fill-base);
|
||||
--cascader-menu-font-size: var(--font-size-base);
|
||||
--cascader-menu-radius: var(--border-radius-base);
|
||||
--cascader-menu-border: var(--border-base);
|
||||
--cascader-menu-border-color: var(--border-color-base);
|
||||
--cascader-menu-border-width: var(--border-width-base);
|
||||
--cascader-menu-color: var(--font-color-base);
|
||||
--cascader-menu-option-color-active: var(--color-blue);
|
||||
--cascader-menu-option-fill-active: rgba(var(--color-blue), 0.12);
|
||||
--cascader-menu-option-color-hover: var(--font-color-base);
|
||||
--cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06);
|
||||
--cascader-menu-option-color-disabled: #999;
|
||||
--cascader-menu-option-fill-disabled: rgba(var(--color-black), 0.06);
|
||||
--cascader-menu-option-empty-color: #666;
|
||||
--cascader-menu-group-color: #999;
|
||||
--cascader-menu-shadow: 0 1px 2px rgba(var(--color-black), 0.14), 0 0 3px rgba(var(--color-black), 0.14);
|
||||
--cascader-menu-option-pinyin-color: #999;
|
||||
--cascader-menu-submenu-shadow: 1px 1px 2px rgba(var(--color-black), 0.14), 1px 0 2px rgba(var(--color-black), 0.14);
|
||||
|
||||
/* Group
|
||||
-------------------------- */
|
||||
--group-option-flex: 0 0 (1/5) * 100%;
|
||||
--group-option-offset-bottom: 12px;
|
||||
--group-option-fill-hover: rgba(var(--color-black), 0.06);
|
||||
--group-title-color: var(--color-black);
|
||||
--group-title-font-size: var(--font-size-base);
|
||||
--group-title-width: 66px;
|
||||
|
||||
/* Tab
|
||||
-------------------------- */
|
||||
--tab-font-size: var(--font-size-base);
|
||||
--tab-border-line: 1px solid #e4e4e4;
|
||||
--tab-header-color-active: var(--color-blue);
|
||||
--tab-header-color-hover: var(--font-color-base);
|
||||
--tab-header-color: var(--font-color-base);
|
||||
--tab-header-fill-active: rgba(var(--color-black), 0.06);
|
||||
--tab-header-fill-hover: rgba(var(--color-black), 0.06);
|
||||
--tab-vertical-header-width: 90px;
|
||||
--tab-vertical-header-count-color: var(--color-white);
|
||||
--tab-vertical-header-count-fill: var(--color-blue);
|
||||
--tab-horizontal-border: 2px solid #438de0;
|
||||
|
||||
/* Button
|
||||
-------------------------- */
|
||||
--button-font-size: 14px;
|
||||
--button-border-radius: var(--border-radius-base);
|
||||
--button-paddding: 5px 20px;
|
||||
--button-padding-vertical: 10px;
|
||||
--button-padding-horizontal: 15px;
|
||||
|
||||
--button-large-font-size: 16px;
|
||||
--button-large-padding-vertical: 11px;
|
||||
--button-large-padding-horizontal: 19px;
|
||||
|
||||
--button-small-font-size: 12px;
|
||||
--button-small-padding-vertical: 7px;
|
||||
--button-small-padding-horizontal: 9px;
|
||||
|
||||
--button-mini-font-size: 12px;
|
||||
--button-mini-padding-vertical: 4px;
|
||||
--button-mini-padding-horizontal: 4px;
|
||||
|
||||
--button-default-color: #1F2D3D;
|
||||
--button-default-fill: #fff;
|
||||
--button-default-border: #c4c4c4;
|
||||
|
||||
--button-ghost-color: #666;
|
||||
--button-ghost-fill: transparent;
|
||||
--button-ghost-border: none;
|
||||
|
||||
--button-disabled-color: #C0CCDA;
|
||||
--button-disabled-fill: #EFF2F7;
|
||||
--button-disabled-border: #D3DCE6;
|
||||
|
||||
--button-primary-border: var(--color-primary);
|
||||
--button-primary-color: #fff;
|
||||
--button-primary-fill: var(--color-primary);
|
||||
|
||||
--button-success-border: var(--color-success);
|
||||
--button-success-color: #fff;
|
||||
--button-success-fill: var(--color-success);
|
||||
|
||||
--button-warning-border: var(--color-warning);
|
||||
--button-warning-color: #fff;
|
||||
--button-warning-fill: var(--color-warning);
|
||||
|
||||
--button-danger-border: var(--color-danger);
|
||||
--button-danger-color: #fff;
|
||||
--button-danger-fill: var(--color-danger);
|
||||
|
||||
--button-info-border: var(--color-info);
|
||||
--button-info-color: #fff;
|
||||
--button-info-fill: var(--color-info);
|
||||
|
||||
--button-hover-tint-percent: 20%;
|
||||
--button-active-shade-percent: 10%;
|
||||
|
||||
|
||||
/* cascader
|
||||
-------------------------- */
|
||||
--cascader-height: 200px;
|
||||
|
||||
/* Switch
|
||||
-------------------------- */
|
||||
--switch-on-color: #20a0ff;
|
||||
--switch-off-color: #C0CCDA;
|
||||
--switch-disabled-color: #E5E9F3;
|
||||
--switch-disabled-text-color: #F9FAFC;
|
||||
|
||||
--switch-font-size: var(--font-size-base);
|
||||
--switch-core-border-radius: 12px;
|
||||
--switch-size: 46px 22px;
|
||||
--switch-button-size: 16px;
|
||||
|
||||
/* Dialog
|
||||
-------------------------- */
|
||||
--dialog-background-color: var(--color-blue);
|
||||
--dialog-footer-background: var(--color-blue-lighter);
|
||||
--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--dialog-tiny-width: 30%;
|
||||
--dialog-small-width: 50%;
|
||||
--dialog-large-width: 90%;
|
||||
--dialog-close-color: var(--color-grey);
|
||||
--dialog-close-hover-color: var(--color-primary);
|
||||
--dialog-title-font-size: 16px;
|
||||
--dialog-font-size: 14px;
|
||||
|
||||
/* Table
|
||||
-------------------------- */
|
||||
--table-border-color: #e0e6ed;
|
||||
--table-text-color: #1f2d3d;
|
||||
--table-header-background: #EFF2F7;
|
||||
|
||||
/* Pagination
|
||||
-------------------------- */
|
||||
--pagination-font-size: 13px;
|
||||
--pagination-fill: var(--color-white);
|
||||
--pagination-color: #475669;
|
||||
--pagination-border-radius: 2px;
|
||||
--pagination-button-color: #99a9bf;
|
||||
--pagination-button-size: 28px;
|
||||
--pagination-button-disabled-color: #e4e4e4;
|
||||
--pagination-button-disabled-fill: var(--color-white);
|
||||
--pagination-border-color: #D3DCE6;
|
||||
--pagination-hover-fill: var(--color-primary);
|
||||
--pagination-hover-color: var(--color-white);
|
||||
|
||||
/* Popover
|
||||
-------------------------- */
|
||||
--popover-fill: #fff;
|
||||
--popover-font-size: 12px;
|
||||
--popover-border-color: #d3dce6;
|
||||
--popover-arrow-size: 6px;
|
||||
--popover-padding: 10px;
|
||||
--popover-title-font-size: 13px;
|
||||
--popover-title-color: #1f2d3d;
|
||||
|
||||
/* Tooltip
|
||||
-------------------------- */
|
||||
--tooltip-fill: #1f2d3d;
|
||||
--tooltip-color: #fff;
|
||||
--tooltip-font-size: 12px;
|
||||
--tooltip-border-color: #1f2d3d;
|
||||
--tooltip-arrow-size: 6px;
|
||||
--tooltip-padding: 10px;
|
||||
|
||||
/* Tag
|
||||
-------------------------- */
|
||||
--tag-padding: 0 5px;
|
||||
--tag-fill: #8492a6;
|
||||
--tag-border: #8492a6;
|
||||
--tag-color: #fff;
|
||||
--tag-close-color: #666;
|
||||
--tag-font-size: 12px;
|
||||
--tag-border-radius: 4px;
|
||||
|
||||
--tag-gray-fill: #e5e9f2;
|
||||
--tag-gray-border: #e5e9f2;
|
||||
--tag-gray-color: #475669;
|
||||
|
||||
--tag-primary-fill: rgba(32,159,255,0.10);
|
||||
--tag-primary-border: rgba(32,159,255,0.20);
|
||||
--tag-primary-color: #20a0ff;
|
||||
|
||||
--tag-success-fill: rgba(18,206,102,0.10);
|
||||
--tag-success-border: rgba(18,206,102,0.20);
|
||||
--tag-success-color: #13ce66;
|
||||
|
||||
--tag-warning-fill: rgba(247,186,41,0.10);
|
||||
--tag-warning-border: rgba(247,186,41,0.20);
|
||||
--tag-warning-color: #f7ba2a;
|
||||
|
||||
--tag-danger-fill: rgba(255,73,73,0.10);
|
||||
--tag-danger-border: rgba(255,73,73,0.20);
|
||||
--tag-danger-color: #ff4949;
|
||||
|
||||
/* Dropdown
|
||||
-------------------------- */
|
||||
--dropdown-menu-box-shadow: var(--box-shadow-dark);
|
||||
--dropdown-menuItem-hover-fill: #e5e9f2;
|
||||
--dropdown-menuItem-hover-color: #475669;
|
||||
|
||||
/* Badge
|
||||
-------------------------- */
|
||||
--badge-fill: var(--color-danger);
|
||||
--badge-radius: 10px;
|
||||
--badge-font-size: 12px;
|
||||
--badge-padding: 6px;
|
||||
--badge-size: 18px;
|
||||
|
||||
/* Card
|
||||
--------------------------*/
|
||||
--card-border-color: var(--disabled-border-base);
|
||||
--card-border-radius: 4px;
|
||||
--card-padding: 20px;
|
||||
|
||||
/* Slider
|
||||
--------------------------*/
|
||||
--slider-main-background-color: var(--color-primary);
|
||||
--slider-runway-background-color: #e5e9f2;
|
||||
--slider-button-hover-color: #1d8ce0;
|
||||
--slider-stop-background-color: var(--color-grey);
|
||||
--slider-disable-color: var(--color-grey);
|
||||
|
||||
--slider-margin: 16px 0;
|
||||
--slider-border-radius: 3px;
|
||||
--slider-height: 4px;
|
||||
--slider-button-size: 12px;
|
||||
--slider-button-wrapper-size: 36px;
|
||||
--slider-button-wrapper-offset: -16px;
|
||||
|
||||
/* Steps
|
||||
--------------------------*/
|
||||
--steps-border-color: var(--disabled-border-base);
|
||||
--steps-border-radius: 4px;
|
||||
--steps-padding: 20px;
|
||||
|
||||
/* Steps
|
||||
--------------------------*/
|
||||
--menu-item-color: #475669;
|
||||
--menu-item-fill: #eff2f7;
|
||||
--menu-item-hover-fill: #d3dce6;
|
||||
--submenu-item-fill: #e5e9f2;
|
||||
|
||||
--dark-menu-item-color: #475669;
|
||||
--dark-menu-item-fill: #324057;
|
||||
--dark-menu-item-hover-fill: #475669;
|
||||
--dark-submenu-item-fill: #1f2d3d;
|
||||
|
||||
/* Rate
|
||||
--------------------------*/
|
||||
--rate-height: 20px;
|
||||
--rate-font-size: var(--font-size-base);
|
||||
--rate-icon-size: 18px;
|
||||
--rate-icon-margin: 6px;
|
||||
--rate-icon-color: #C6D1DE;
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "../common/var.css";
|
||||
@import "./option.css";
|
||||
|
||||
@component-namespace element {
|
||||
|
||||
@b dropdown {
|
||||
background-color: var(--dropdown-fill);
|
||||
border: var(--dropdown-border);
|
||||
border-radius: var(--dropdown-radius);
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
left: 0;
|
||||
list-style-type: none;
|
||||
margin: -var(--dropdown-border-width);
|
||||
margin-top: 5px;
|
||||
min-width: calc(var(--input-width) + 4);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: var(--index-normal);
|
||||
|
||||
@e empty {
|
||||
color: var(--dropdown-option-empty-color);
|
||||
font-size: var(--input-font-size);
|
||||
padding: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e list {
|
||||
margin: 0;
|
||||
max-height: var(--cascader-height);
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@e option {
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "../common/var.css";
|
||||
|
||||
@component-namespace element-core {
|
||||
|
||||
@b input {
|
||||
background-color: var(--input-fill);
|
||||
border: var(--input-border);
|
||||
border-radius: var(--input-border-radius);
|
||||
box-sizing: border-box;
|
||||
color: var(--input-color);
|
||||
cursor: text;
|
||||
display: inline-block;
|
||||
font-size: var(--input-font-size);
|
||||
min-height: var(--input-height);
|
||||
min-width: var(--input-width);
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
@when disabled {
|
||||
background-color: var(--input-fill-disabled);
|
||||
border-color: inherit;
|
||||
box-shadow: none;
|
||||
color: var(--input-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@when readonly {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@when multiple {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
border-color: var(--input-focus-border);
|
||||
box-shadow: var(--input-shadow-hover);
|
||||
}
|
||||
|
||||
@e original {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
cursor: inherit;
|
||||
height: 100%;
|
||||
line-height: 1.2;
|
||||
outline: none;
|
||||
padding: 5px 7px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "../common/var.css";
|
||||
|
||||
@component-namespace element {
|
||||
|
||||
@b option {
|
||||
box-sizing: border-box;
|
||||
color: var(--dropdown-color);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: var(--dropdown-font-size);
|
||||
padding: 9px;
|
||||
|
||||
@e remark {
|
||||
color: var(--dropdown-option-pinyin-color);
|
||||
float: right;
|
||||
}
|
||||
|
||||
@m arrow {
|
||||
|
||||
&:not(.is-last)::after {
|
||||
border-left: 1px solid var(--dropdown-border-color);
|
||||
border-top: 1px solid var(--dropdown-border-color);
|
||||
content: " ";
|
||||
height: 4px;
|
||||
margin-top: 6px;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
transform: rotate(135deg);
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
background-color: transparent;
|
||||
color: var(--dropdown-option-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-hover {
|
||||
background-color: var(--dropdown-option-fill-hover);
|
||||
color: var(--dropdown-option-color-hover);
|
||||
}
|
||||
|
||||
@when selected {
|
||||
background-color: var(--dropdown-option-fill-active);
|
||||
color: var(--dropdown-option-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
@b optiongroup {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
||||
& .element-option {
|
||||
padding-left: 21px;
|
||||
}
|
||||
|
||||
@e title {
|
||||
box-sizing: border-box;
|
||||
color: var(--dropdown-group-color);
|
||||
display: inline-block;
|
||||
font-size: var(--dropdown-font-size);
|
||||
padding: 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "../common/var.css";
|
||||
|
||||
@component-namespace element-core {
|
||||
|
||||
@b tag {
|
||||
background-color: var(--tag-fill);
|
||||
border: 0;
|
||||
border-radius: var(--tag-border-radius);
|
||||
color: var(--tag-color);
|
||||
height: 22px;
|
||||
margin: 1px;
|
||||
outline: 0;
|
||||
padding: 3px 16px 3px 3px;
|
||||
position: relative;
|
||||
|
||||
@e button {
|
||||
color: var(--tag-close-color);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
|
||||
/* 增大可点击面积 */
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import "./date-picker/date-table.css";
|
||||
@import "./date-picker/month-table.css";
|
||||
@import "./date-picker/year-table.css";
|
||||
@import "./date-picker/time-spinner.css";
|
||||
@import "./date-picker/picker.css";
|
||||
@import "./date-picker/date-picker.css";
|
||||
@import "./date-picker/date-range-picker.css";
|
||||
@import "./date-picker/time-range-picker.css";
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
@import "./vars.css";
|
||||
@import "./picker-panel.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b date-picker {
|
||||
min-width: 254px;
|
||||
|
||||
&.has-sidebar.has-time {
|
||||
min-width: 434px;
|
||||
}
|
||||
|
||||
&.has-sidebar {
|
||||
min-width: 370px;
|
||||
}
|
||||
|
||||
&.has-time {
|
||||
min-width: 324px;
|
||||
}
|
||||
|
||||
.el-picker-panel__content {
|
||||
min-width: 224px;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@e editor-wrap {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
@e editor {
|
||||
position: relative;
|
||||
border: 1px solid #c0ccda;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
height: 28px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
transition: border 0.3s;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
@e time-header {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--datepicker-inner-border-color);
|
||||
font-size: 12px;
|
||||
padding: 8px 5px 5px 5px;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@e header {
|
||||
margin: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e header-label {
|
||||
font-size: 14px;
|
||||
padding: 0 5px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--datepicker-text-hover-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--datepicker-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e prev-btn {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@e next-btn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@e time-wrap {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e time-label {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
line-height: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
@import './vars.css';
|
||||
|
||||
@component-namespace el {
|
||||
@b date-range-picker {
|
||||
min-width: 520px;
|
||||
|
||||
&.has-sidebar.has-time {
|
||||
min-width: 766px;
|
||||
}
|
||||
|
||||
&.has-sidebar {
|
||||
min-width: 620px;
|
||||
}
|
||||
|
||||
&.has-time {
|
||||
min-width: 660px;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-picker-panel__body {
|
||||
min-width: 513px;
|
||||
}
|
||||
|
||||
.el-picker-panel__content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e editor {
|
||||
position: relative;
|
||||
border: 1px solid #c0ccda;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
height: 28px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
transition: border 0.3s;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
border-color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
@e header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
|
||||
button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 14px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@e content {
|
||||
float: left;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
|
||||
@when left {
|
||||
border-right: 1px solid var(--datepicker-inner-border-color);
|
||||
}
|
||||
|
||||
@when right {
|
||||
.el-date-range-picker__header {
|
||||
button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
div {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e editors-wrap {
|
||||
box-sizing: border-box;
|
||||
display: table-cell;
|
||||
|
||||
@when right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@e time-header {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--datepicker-inner-border-color);
|
||||
font-size: 12px;
|
||||
padding: 8px 5px 5px 5px;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
> .el-icon-arrow-right {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
color: var(--datepicker-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e time-picker-wrap {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
padding: 0 5px;
|
||||
|
||||
.el-picker-panel {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
@import "./vars.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b date-table {
|
||||
font-size: 12px;
|
||||
min-width: 224px;
|
||||
user-select: none;
|
||||
|
||||
@when week-mode {
|
||||
.el-date-table__row {
|
||||
&:hover {
|
||||
background-color: var(--datepicker-cell-hover-color);
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: var(--datepicker-inrange-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.next-month,
|
||||
&.prev-month {
|
||||
color: var(--datepicker-off-color);
|
||||
}
|
||||
|
||||
&.today {
|
||||
color: var(--datepicker-text-hover-color);
|
||||
}
|
||||
|
||||
&.available:hover {
|
||||
background-color: var(--datepicker-cell-hover-color);
|
||||
}
|
||||
|
||||
&.in-range {
|
||||
background-color: var(--datepicker-inrange-color);
|
||||
&:hover {
|
||||
background-color: var(--datepicker-inrange-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.current,
|
||||
&.start-date,
|
||||
&.end-date {
|
||||
background-color: var(--datepicker-active-color) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #f4f4f4;
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&.week {
|
||||
font-size: 80%;
|
||||
color: var(--datepicker-header-color);
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 5px;
|
||||
color: var(--datepicker-header-color);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
@import "./vars.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b month-table {
|
||||
font-size: 12px;
|
||||
margin: -1px;
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 20px 3px;
|
||||
cursor: pointer;
|
||||
|
||||
.cell {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
color: var(--datepicker-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--datepicker-cell-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.current .cell {
|
||||
background-color: var(--datepicker-active-color) !important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
@import './vars.css';
|
||||
|
||||
@component-namespace el {
|
||||
@b picker-panel {
|
||||
color: var(--datepicker-color);
|
||||
border: 1px solid var(--datepicker-border-color);
|
||||
box-shadow: 0 2px 6px #ccc;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0;
|
||||
|
||||
@e body, body-wrapper {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@e content {
|
||||
position: relative;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
border-top: 1px solid var(--datepicker-inner-border-color);
|
||||
padding: 4px;
|
||||
text-align: right;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e shortcut {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
color: var(--datepicker-color);
|
||||
padding-left: 12px;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #e5e9f2;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e6f1fe;
|
||||
color: var(--datepicker-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e btn {
|
||||
border: 1px solid #dcdcdc;
|
||||
color: #333;
|
||||
line-height: 24px;
|
||||
border-radius: 2px;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
|
||||
&[disabled] {
|
||||
color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@e icon-btn {
|
||||
font-size: 12px;
|
||||
color: var(--datepicker-icon-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
margin-top: 3px;
|
||||
|
||||
&:hover {
|
||||
color: var(--datepicker-text-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e link-btn {
|
||||
cursor: pointer;
|
||||
color: #55a4ff;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-picker-panel *[slot=sidebar],
|
||||
.el-picker-panel__sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 110px;
|
||||
border-right: 1px solid var(--datepicker-inner-border-color);
|
||||
box-sizing: border-box;
|
||||
padding-top: 6px;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
|
||||
.el-picker-panel__sidebar + .el-picker-panel__body {
|
||||
margin-left: 110px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
@import "./vars.css";
|
||||
@import "../../../theme-default/src/common/transition.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b date-editor {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
height: 36px;
|
||||
width: 182px;
|
||||
|
||||
@e editor {
|
||||
border: 1px solid #c0ccda;
|
||||
border-radius: 4px;
|
||||
line-height: 18px;
|
||||
height: 36px;
|
||||
padding: 3px 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: border 0.3s;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
color: #bbb;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: #bbb;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #bbb;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@e trigger {
|
||||
&.el-icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
color: var(--datepicker-trigger-color);
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
@e clear {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
line-height: 36px;
|
||||
color: var(--datepicker-icon-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--datepicker-text-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
@when have-trigger {
|
||||
.el-date-editor__editor {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.el-date-editor__clear {
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.lg {
|
||||
.el-date-editor__editor {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.sm {
|
||||
.el-date-editor__editor {
|
||||
padding: 1px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-picker-panel {
|
||||
position: absolute;
|
||||
min-width: 180px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 6px #ccc;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
top: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-date-editor__editor:focus,
|
||||
.el-date-editor:hover > .el-date-editor__editor,
|
||||
.el-date-editor.is-active > .el-date-editor__editor {
|
||||
outline: none;
|
||||
border-color: var(--datepicker-active-color);
|
||||
}
|
||||
|
||||
.el-date-editor .el-date-editor__clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-date-editor.is-filled:hover .el-date-editor__clear,
|
||||
.el-date-editor.is-filled.is-active > .el-date-editor__clear {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
@import "./vars.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b time-panel {
|
||||
margin: 5px 0;
|
||||
border: solid 1px #d3dce6;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
user-select: none;
|
||||
|
||||
@e content {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::after, &::before {
|
||||
content: ":";
|
||||
top: 50%;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
margin-top: -15px;
|
||||
line-height: 16px;
|
||||
background-color: #20a0ff;
|
||||
height: 32px;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: calc(100%/3*2);
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
padding-left: calc(100%/3);
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
@e footer {
|
||||
border-top: 1px solid var(--datepicker-inner-border-color);
|
||||
padding: 4px;
|
||||
height: 36px;
|
||||
line-height: 25px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@e btn {
|
||||
border: none;
|
||||
line-height: 28px;
|
||||
padding: 0 5px;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
color: #8492a6;
|
||||
|
||||
&.confirm {
|
||||
font-weight: 800;
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
@import './vars.css';
|
||||
|
||||
@component-namespace el {
|
||||
@b time-range-picker {
|
||||
min-width: 354px;
|
||||
overflow: visible;
|
||||
|
||||
@e content {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@e cell {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 4px 7px 7px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@e header {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@e body {
|
||||
display: flex;
|
||||
border-radius:2px;
|
||||
border: 1px solid var(--datepicker-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
@import "./vars.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b time-spinner {
|
||||
@e wrapper {
|
||||
height: 190px;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@e list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@e item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover:not(.disabled):not(.active) {
|
||||
background: #E5E9F2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active:not(.disabled) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: var(--datepicker-border-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
:root {
|
||||
--datepicker-color: #475669;
|
||||
--datepicker-off-color: #ddd;
|
||||
--datepicker-header-color: #8492a6;
|
||||
--datepicker-icon-color: #99a9bf;
|
||||
--datepicker-trigger-color: #c0ccda;
|
||||
--datepicker-border-color: #d3dce6;
|
||||
--datepicker-inner-border-color: #e4e4e4;
|
||||
--datepicker-cell-hover-color: #e5e9f2;
|
||||
--datepicker-inrange-color: #D3ECFF;
|
||||
--datepicker-inrange-hover-color: #AFDCFF;
|
||||
--datepicker-active-color: #20a0ff;
|
||||
--datepicker-text-hover-color: #20a0ff;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
@import "./vars.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b year-table {
|
||||
font-size: 12px;
|
||||
margin: -1px;
|
||||
|
||||
.el-icon {
|
||||
color: var(--datepicker-icon-color);
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 20px 3px;
|
||||
cursor: pointer;
|
||||
|
||||
.cell {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
color: var(--datepicker-color);
|
||||
}
|
||||
|
||||
&.available .cell:hover {
|
||||
background-color: var(--datepicker-cell-hover-color);
|
||||
}
|
||||
|
||||
&.current .cell {
|
||||
background-color: var(--datepicker-active-color) !important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
@import '../../../node_modules/vue-popup/lib/popup.css';
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b dialog {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #fff;
|
||||
border-radius: var(--border-radius-small);
|
||||
box-shadow: var(--dialog-box-shadow);
|
||||
box-sizing: border-box;
|
||||
|
||||
@modifier tiny {
|
||||
width: var(--dialog-tiny-width);
|
||||
}
|
||||
|
||||
@modifier small {
|
||||
width: var(--dialog-small-width);
|
||||
}
|
||||
|
||||
@modifier large {
|
||||
width: var(--dialog-large-width);
|
||||
}
|
||||
|
||||
@modifier full {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@e wrapper {
|
||||
position: fixed 0 0 0 0;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
@e close {
|
||||
cursor: pointer;
|
||||
color: var(--dialog-close-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--dialog-close-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
line-height: 1;
|
||||
font-size: var(--dialog-title-font-size);
|
||||
font-weight: bold;
|
||||
color: #1f2d3d;
|
||||
}
|
||||
|
||||
@e body {
|
||||
padding: 30px 20px;
|
||||
color: #475669;
|
||||
font-size: var(--dialog-font-size);
|
||||
}
|
||||
|
||||
@e headerbtn {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@e footer {
|
||||
padding: 10px 20px 15px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-fade-enter-active {
|
||||
animation: dialog-fade-in .3s;
|
||||
}
|
||||
|
||||
.dialog-fade-leave-active {
|
||||
animation: dialog-fade-out .3s;
|
||||
}
|
||||
|
||||
@keyframes dialog-fade-in {
|
||||
0% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialog-fade-out {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
@import "./button.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #475669;
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
.el-button-group {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@e menu{
|
||||
margin: 5px 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #D3DCE6;
|
||||
box-shadow: var(--dropdown-menu-box-shadow);
|
||||
padding: 6px 0;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100px;
|
||||
|
||||
& li {
|
||||
list-style: none;
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-menuItem-hover-fill);
|
||||
color: var(--dropdown-menuItem-hover-color);
|
||||
}
|
||||
&.divider {
|
||||
margin-top: 6px;
|
||||
border-top: 1px solid #D3DCE6;
|
||||
}
|
||||
&.divider:last-child {
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .el-dropdown__caret-button {
|
||||
padding: * 5px;
|
||||
|
||||
& .el-dropdown__icon {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@e icon {
|
||||
font-size: 12px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
@m text {
|
||||
.el-button--text {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,146 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
Created by FontForge 20120731 at Tue Sep 6 12:16:07 2016
|
||||
By admin
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="el-icon" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="el-icon"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
panose-1="2 0 6 3 0 0 0 0 0 0"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
x-height="792"
|
||||
bbox="-0.0862045 -128.321 1326 896.053"
|
||||
underline-thickness="50"
|
||||
underline-position="-100"
|
||||
unicode-range="U+0078-E627"
|
||||
/>
|
||||
<missing-glyph horiz-adv-x="374"
|
||||
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
|
||||
<glyph glyph-name=".notdef" horiz-adv-x="374"
|
||||
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
|
||||
<glyph glyph-name=".null" horiz-adv-x="0"
|
||||
/>
|
||||
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
|
||||
/>
|
||||
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
|
||||
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
|
||||
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
|
||||
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
|
||||
<glyph glyph-name="uniE600" unicode=""
|
||||
d="M488 134q18 -8 39 -5t35 16l445 403q18 16 17 38.5t-20 38.5t-45.5 15t-44.5 -17l-399 -362l-405 360q-19 17 -45 17.5t-45 -15.5q-20 -16 -20 -40q0 -22 18 -38l449 -399h1l2 -2t2 -1q2 -2 12 -7l2 -2h2z" />
|
||||
<glyph glyph-name="uniE601" unicode=""
|
||||
d="M262 360q-8 18 -5 39t16 35l403 445q16 18 38.5 17t38.5 -20t15 -45.5t-17 -44.5l-362 -399l360 -405q17 -19 17.5 -45t-15.5 -45q-16 -20 -40 -20q-22 0 -38 18l-399 449v1l-2 2t-1 2q-2 2 -7 12l-2 2v2z" />
|
||||
<glyph glyph-name="uniE602" unicode=""
|
||||
d="M762 360q8 18 5 39t-16 35l-403 445q-16 18 -38.5 17t-38.5 -20t-15 -45.5t17 -44.5l362 -399l-360 -405q-17 -19 -17.5 -45t15.5 -45q16 -20 40 -20q22 0 38 18l399 449v1l2 2t1 2q2 2 7 12l2 2v2z" />
|
||||
<glyph glyph-name="uniE603" unicode=""
|
||||
d="M536 634q-18 8 -39 5t-35 -16l-445 -403q-18 -16 -17 -38.5t20 -38.5t45.5 -15t44.5 17l399 362l405 -360q19 -17 45 -17.5t45 15.5q20 16 20 40q0 22 -18 38l-449 399h-1l-2 2t-2 1q-2 2 -12 7l-2 2h-2z" />
|
||||
<glyph glyph-name="uniE604" unicode="" horiz-adv-x="1025"
|
||||
d="M410 177q28 -28 67.5 -27.5t67.5 27.5l367 357q55 53 39.5 91t-92.5 38h-763q-77 0 -92.5 -38t39.5 -91z" />
|
||||
<glyph glyph-name="uniE605" unicode=""
|
||||
d="M294 293q-27 27 -27 67t27 67l357 367q54 55 92 39.5t38 -92.5v-763q0 -77 -38 -92.5t-92 39.5l-357 367v1z" />
|
||||
<glyph glyph-name="uniE606" unicode=""
|
||||
d="M754 293q27 27 27 67t-27 67l-358 367q-53 55 -91 39.5t-38 -92.5v-763q0 -77 38 -92.5t91 39.5l358 367v1z" />
|
||||
<glyph glyph-name="uniE607" unicode="" horiz-adv-x="1025"
|
||||
d="M410 636q28 27 67.5 27t67.5 -27l367 -357q55 -54 39.5 -91.5t-92.5 -37.5h-763q-77 0 -92.5 37.5t39.5 91.5z" />
|
||||
<glyph glyph-name="uniE608" unicode="" horiz-adv-x="1376"
|
||||
d="M548 -17q-40 0 -68 28l-389 389q-29 29 -29 69t28.5 68.5t69 28.5t68.5 -28l320 -320l612 612q29 28 69 28t68.5 -28.5t28.5 -68.5t-28 -69l-681 -681q-28 -28 -69 -28v0z" />
|
||||
<glyph glyph-name="uniE609" unicode=""
|
||||
d="M512 896q-106 0 -199.5 -40t-163 -109.5t-109.5 -163t-40 -199.5t40 -199.5t109.5 -163t163 -109.5t199.5 -40t199.5 40t163 109.5t109.5 163t40 199.5t-40 199.5t-109.5 163t-163 109.5t-199.5 40zM798 497l-373 -373q-8 -7 -17.5 -7t-17.5 7l-7 8l-206 206q-7 8 -7 18
|
||||
t7 17l51 50q7 8 17 8t17 -8l145 -146l306 305q7 8 17 8t17 -8l50 -50q8 -8 8 -17.5t-8 -17.5h1z" />
|
||||
<glyph glyph-name="uniE60A" unicode=""
|
||||
d="M522 429l202 202q11 11 26 11t26 -11q11 -10 11 -25.5t-11 -26.5l-202 -202l202 -202q11 -11 10.5 -26t-10.5 -26q-11 -10 -26 -10t-26 10l-202 203l-202 -203q-11 -10 -26.5 -10t-25.5 10q-11 11 -11 26t11 26l202 202l-202 202q-11 11 -10.5 26.5t10.5 25.5
|
||||
q11 11 26 11t26 -11zM512 -128q139 0 257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5t-257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5z" />
|
||||
<glyph glyph-name="uniE60B" unicode=""
|
||||
d="M512 -128q-106 0 -199.5 40t-163 109.5t-109.5 163t-40 199.5t40 199.5t109.5 163t163 109.5t199.5 40t199.5 -40t163 -109.5t109.5 -163t40 -199.5t-40 -199.5t-109.5 -163t-163 -109.5t-199.5 -40zM747 533q7 7 7 17.5t-7 18.5l-53 51q-7 8 -17 8t-17 -8l-148 -147
|
||||
l-149 147q-7 8 -17 8t-17 -8l-53 -51q-6 -8 -6 -18.5t6 -17.5l149 -148l-149 -147q-6 -8 -6 -18.5t6 -17.5l53 -52q7 -7 17 -7t17 7l149 148l148 -148q7 -7 17 -7t17 7l53 52q7 7 7 17.5t-7 18.5l-149 147z" />
|
||||
<glyph glyph-name="uniE60C" unicode=""
|
||||
d="M512 484l-391 391q-21 21 -50.5 21t-49.5 -21q-20 -20 -20.5 -49.5t20.5 -50.5l391 -391l-391 -391q-21 -21 -21 -50.5t21 -49.5q20 -21 49.5 -21t50.5 21l391 391l391 -391q21 -21 50.5 -21t49.5 21q21 20 21 49.5t-21 50.5l-391 391l391 391q21 21 21 50.5t-21 49.5
|
||||
q-20 20 -49.5 20.5t-50.5 -20.5z" />
|
||||
<glyph glyph-name="uniE60D" unicode=""
|
||||
d="M566 0h213q102 3 173.5 77t71.5 176q0 105 -74 179.5t-178 74.5h-8v8q0 105 -73.5 179t-178 74t-178.5 -74t-74 -179v-8h-8q-104 0 -178 -74.5t-74 -179.5q0 -102 71.5 -176t173.5 -77h229v172h-90q-20 0 -26 11t5 27l140 214q7 10 16.5 10t16.5 -10l141 -214
|
||||
q10 -16 4 -27t-25 -11h-90v-172z" />
|
||||
<glyph glyph-name="uniE60E" unicode="" horiz-adv-x="1025"
|
||||
d="M6 360q-8 18 -5 39t16 35l403 445q16 18 38.5 17t38.5 -20t15 -45.5t-17 -44.5l-362 -399l360 -405q17 -19 17.5 -45t-15.5 -45q-16 -20 -40 -20q-22 0 -38 18l-399 449v1l-2 2t-1 2q-2 2 -7 12l-2 2v2zM518 360q-8 18 -5 39t16 35l403 445q16 18 38.5 17t38.5 -20
|
||||
t15 -45.5t-17 -44.5l-362 -399l360 -405q17 -19 17.5 -45t-15.5 -45q-16 -20 -40 -20q-22 0 -38 18l-399 449v1l-2 2t-1 2q-2 2 -7 12l-2 2v2z" />
|
||||
<glyph glyph-name="uniE60F" unicode="" horiz-adv-x="1025"
|
||||
d="M1018 360q8 18 5.5 39t-16.5 35l-403 445q-16 18 -38.5 17t-38.5 -20t-15 -45.5t17 -44.5l362 -399l-360 -405q-17 -19 -17.5 -45t15.5 -45q16 -20 40 -20q22 0 38 18l399 449v1l2 2l2 2l6 12l2 2v2zM506 360q8 18 5.5 39t-16.5 35l-403 445q-16 18 -38.5 17t-38.5 -20
|
||||
t-15 -45.5t17 -44.5l362 -399l-360 -405q-17 -19 -17.5 -45t15.5 -45q16 -20 40 -20q22 0 38 18l399 449v1l2 2t1 2q2 2 7 12l2 2v2z" />
|
||||
<glyph glyph-name="uniE610" unicode=""
|
||||
d="M440 -99q26 -24 62 -24t62 24l300 284q52 48 38.5 82t-83.5 34h-634q-70 0 -83.5 -34t37.5 -82zM440 872q26 24 62 24t62 -24l300 -283q52 -49 38.5 -83t-83.5 -34h-634q-70 0 -83.5 34t37.5 83z" />
|
||||
<glyph glyph-name="uniE611" unicode=""
|
||||
d="M713 782h-402v114h-151v-114h-50q-28 0 -47.5 -19.5t-19.5 -47.5v-776q0 -28 19 -47.5t47 -19.5h806q28 0 47 19.5t19 47.5v776q0 28 -19.5 47.5t-46.5 19.5h-51v114h-151v-114zM160 -18v573h704v-573h-704zM555 299v-256h256v256h-256z" />
|
||||
<glyph glyph-name="uniE612" unicode=""
|
||||
d="M642 706v126q0 27 -16.5 45.5t-40.5 18.5h-136q-25 0 -45.5 -19t-20.5 -45v-126h-204q0 -1 -2 -2q-49 -22 -49 -64q0 -26 17.5 -45t41.5 -19h650q24 0 41.5 19t17.5 45q0 24 -15 40.5t-29 21.5l-15 4h-195zM448 704v64q0 32 18 48t46 16q29 0 46.5 -16t17.5 -48v-64h-128
|
||||
zM320 -128h384q53 0 90.5 37.5t37.5 90.5v512h-640v-512q0 -53 37.5 -90.5t90.5 -37.5zM644 356q0 11 7.5 19.5t18.5 8.5t19 -8.5t8 -19.5v-342q0 -12 -8 -20t-19 -8t-18.5 8t-7.5 20v342zM486 356q0 11 7.5 19.5t18.5 8.5t18.5 -8.5t7.5 -19.5v-342q0 -12 -7.5 -20
|
||||
t-18.5 -8t-18.5 8t-7.5 20v342zM328 356q0 11 7.5 19.5t18.5 8.5t18.5 -8.5t7.5 -19.5v-342q0 -12 -7.5 -20t-18.5 -8t-18.5 8t-7.5 20v342z" />
|
||||
<glyph glyph-name="uniE613" unicode=""
|
||||
d="M441 896l-356 -366v-519q0 -57 41 -98t99 -41h574q58 0 99 41t41 98v746q0 57 -41 98t-99 41h-358zM832 53q0 -29 -21 -50t-50 -21h-498q-30 0 -50.5 20.5t-20.5 50.5v404h249q29 0 50 21t21 51v257h249q29 0 50 -21t21 -50v-662z" />
|
||||
<glyph glyph-name="uniE614" unicode=""
|
||||
d="M84 180l-84 -308l307 85l485 485l-226 219zM755 850l-121 -121l227 -219l117 117q46 46 46 111.5t-46 111.5t-111.5 46t-111.5 -46z" />
|
||||
<glyph glyph-name="uniE615" unicode=""
|
||||
d="M512 -128q-106 0 -199.5 40t-163 109.5t-109.5 163t-40 199.5t40 199.5t109.5 163t163 109.5t199.5 40t199.5 -40t163 -109.5t109.5 -163t40 -199.5t-40 -199.5t-109.5 -163t-163 -109.5t-199.5 -40zM512 677q-31 0 -52 -21.5t-21 -52t21.5 -52t52 -21.5t51.5 21.5t21 52
|
||||
t-21.5 52t-51.5 21.5zM571 401q0 23 -17 39.5t-42 16.5t-42 -16.5t-17 -39.5v-261q0 -24 17 -40t42 -16t42 16t17 40v261z" />
|
||||
<glyph glyph-name="uniE616" unicode=""
|
||||
d="M0 384q0 -139 68.5 -257t186.5 -186.5t257 -68.5t257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5q-16 0 -27.5 -11.5t-11.5 -28t11.5 -28t27.5 -11.5q118 0 217.5 -58t157.5 -157.5t58 -217.5t-58 -217.5t-157.5 -157.5t-217.5 -58t-217.5 58
|
||||
t-157.5 157.5t-58 217.5q0 16 -11.5 27.5t-28 11.5t-28 -11.5t-11.5 -27.5z" />
|
||||
<glyph glyph-name="uniE617" unicode=""
|
||||
d="M358 347h-244q-47 0 -80.5 -33.5t-33.5 -80.5v-245q0 -48 33.5 -82t80.5 -34h244q48 0 81 33.5t33 80.5v244q2 49 -31.5 83t-82.5 34zM358 896h-244q-47 0 -80.5 -33.5t-33.5 -80.5v-244q0 -48 33.5 -81t80.5 -33h244q48 0 81 33t33 81v244q2 47 -31.5 80.5t-82.5 33.5z
|
||||
M910 347h-244q-48 0 -81 -33.5t-33 -80.5v-245q0 -47 33 -80.5t81 -33.5h244q47 0 80.5 33.5t33.5 80.5v242q0 49 -33.5 83t-80.5 34zM910 896h-244q-48 0 -81 -33.5t-33 -80.5v-244q0 -48 33 -81t81 -33h244q47 0 80.5 33t33.5 81v244q0 47 -33.5 80.5t-80.5 33.5z" />
|
||||
<glyph glyph-name="uniE618" unicode=""
|
||||
d="M896 811h-768q-41 0 -84.5 -29t-43.5 -65v-18q18 -15 47.5 -40t108.5 -89t143.5 -113t127.5 -89t85 -40t85 39.5t127.5 88.5t143.5 112.5t108.5 89t47.5 40.5v19q0 36 -43.5 65t-84.5 29v0zM0 549v-526q2 -3 5.5 -7.5t16 -15.5t26.5 -20t35.5 -16t44.5 -7h768
|
||||
q21 0 42.5 7t36 16.5t26 19t17.5 16.5l6 7v528q-15 -14 -40.5 -36.5t-96 -80t-132.5 -101.5t-132 -80t-111 -36t-109 34.5t-135.5 83t-129 97.5t-100.5 83l-38 34v0z" />
|
||||
<glyph glyph-name="uniE619" unicode=""
|
||||
d="M79 463h866q33 0 56 -23t23 -56t-23 -56t-56 -23h-866q-33 0 -56 23t-23 56t23 56t56 23z" />
|
||||
<glyph glyph-name="uniE61A" unicode=""
|
||||
d="M118 266q49 0 83.5 34.5t34.5 83.5t-34.5 83.5t-83.5 34.5t-83.5 -34.5t-34.5 -83.5t34.5 -83.5t83.5 -34.5zM512 266q49 0 83.5 34.5t34.5 83.5t-34.5 83.5t-83.5 34.5t-83.5 -34.5t-34.5 -83.5t34.5 -83.5t83.5 -34.5zM906 266q49 0 83.5 34.5t34.5 83.5t-34.5 83.5
|
||||
t-83.5 34.5t-83.5 -34.5t-34.5 -83.5t34.5 -83.5t83.5 -34.5z" />
|
||||
<glyph glyph-name="uniE61B" unicode=""
|
||||
d="M147 811q-61 0 -104 -43t-43 -104v-560q0 -61 43 -104t104 -43h730q61 0 104 43t43 104v560q0 61 -43 104t-104 43h-730zM743 431q-1 2 -4 6t-16.5 10t-32.5 6q-20 0 -35 -5.5t-20 -10.5l-5 -5l-176 -279q-10 -19 -33 -19q-11 0 -20 5t-13 9l-3 5l-93 109q-2 3 -7 8.5
|
||||
t-19.5 14.5t-28 9t-27.5 -9t-21 -18l-7 -9l-72 -87v460q0 30 21 51.5t52 21.5h659q30 0 51 -21.5t21 -51.5v-425zM475 491q0 -45 -32 -76t-77.5 -31t-77.5 31.5t-32 75.5t32 75t77.5 31t77.5 -31t32 -75v0z" />
|
||||
<glyph glyph-name="uniE61C" unicode=""
|
||||
d="M439 457h-365q-31 0 -52.5 -21.5t-21.5 -51.5t21.5 -51.5t52.5 -21.5h365v-365q0 -31 21.5 -52.5t51.5 -21.5t51.5 21.5t21.5 52.5v365h365q31 0 52.5 21.5t21.5 51.5t-21.5 51.5t-52.5 21.5h-365v365q0 31 -21.5 52.5t-51.5 21.5t-51.5 -21.5t-21.5 -52.5v-365z" />
|
||||
<glyph glyph-name="uniE61D" unicode=""
|
||||
d="M591 274q75 75 75 181t-75 181t-181 75t-181 -75t-75 -181t75 -181t181 -75t181 75zM650 155q-75 -60 -167.5 -78t-184 9.5t-159.5 96.5q-74 74 -100 173t0 197.5t99.5 172.5t172.5 100t198 0t173 -100q96 -96 110 -230.5t-57 -245.5l203 -202q19 -19 19 -45.5t-19 -45.5
|
||||
q-18 -19 -44.5 -19t-46.5 19z" />
|
||||
<glyph glyph-name="uniE61E" unicode="" horiz-adv-x="1025"
|
||||
d="M1020 454q-3 16 -17 30.5t-31 18.5l-16 3q-63 19 -96 75t-18 119l5 15q5 16 -0.5 35.5t-18.5 30.5q-16 13 -60 38q-19 11 -35 18.5t-22 10.5l-6 2q-16 6 -35.5 1.5t-31.5 -17.5l-12 -12q-47 -44 -113.5 -44t-114.5 44l-11 12q-12 13 -31.5 17.5t-35.5 -1.5
|
||||
q-20 -7 -64 -31q-19 -12 -34 -21.5t-20 -13.5l-5 -4q-13 -10 -19 -29t-1 -36l5 -15q15 -63 -18 -119q-33 -57 -96 -75l-16 -3q-17 -4 -31 -18.5t-17 -30.5q-4 -20 -4 -70q0 -22 1 -39.5t2 -23.5l1 -7q3 -16 17 -30.5t31 -18.5l15 -3q64 -19 97 -75t18 -119l-5 -15
|
||||
q-5 -16 1 -35.5t19 -30.5q15 -13 59 -38q20 -11 36 -18.5t22 -10.5l6 -2q16 -6 35.5 -1.5t31.5 17.5l11 11q48 45 114 45q67 0 115 -45l11 -11q11 -13 31 -17.5t36 1.5q19 7 63 31q20 11 35 21t20 14l5 3q13 11 18.5 30t0.5 35l-4 16q-16 63 17 119t97 75l16 3q16 4 30 18.5
|
||||
t18 30.5q3 20 3 70q0 22 -1 39.5t-2 23.5l-1 7v0v0zM512 184q-84 0 -144 58.5t-60 141.5t60 141.5t144.5 58.5t144 -58.5t59.5 -141.5t-59.5 -141.5t-144.5 -58.5v0z" />
|
||||
<glyph glyph-name="uniE61F" unicode=""
|
||||
d="M877 159q27 -11 47.5 -31.5t32 -47.5t11.5 -58.5t-11.5 -58.5t-32 -47.5t-47.5 -32t-58 -11.5t-58 11.5t-47.5 32t-32 47.5t-11.5 58v9q0 5 2 8v9q1 5 2 8l-365 213q-11 -9 -22 -17t-25 -13q-13 -6 -27 -8q-14 -3 -30 -3q-31 0 -59.5 12.5t-48.5 32.5q-22 22 -34 49.5
|
||||
t-12 60.5q0 31 12 59.5t34 48.5q20 22 48.5 34t59.5 12q15 0 30 -3q14 -3 27 -9q14 -5 25 -13t22 -17l361 212q-1 3 -1 8q-1 5 -2 9q0 5 -0.5 9.5t-0.5 9.5q0 31 12 59.5t33 48.5q21 21 49 33.5t59 12.5t59.5 -12.5t48.5 -33.5q22 -20 34 -48.5t12 -59.5q0 -33 -12 -61
|
||||
t-34 -49q-20 -20 -48.5 -32t-59.5 -12q-15 0 -29.5 2t-27.5 9q-14 4 -25 12t-22 18l-361 -211q1 -5 1.5 -9.5t1.5 -8.5q0 -5 0.5 -9t0.5 -9t-0.5 -10t-0.5 -10q-1 -3 -2 -8q0 -4 -1 -8l364 -214q10 9 22 16t24 13q13 5 27 7q14 3 28 3q31 0 58 -12z" />
|
||||
<glyph glyph-name="uniE620" unicode="" horiz-adv-x="1086"
|
||||
d="M825 -58q15 -9 25 -10q-3 0 -8.5 -4t-6.5 -7q2 9 -2 27l-52 226q-9 40 5 82.5t45 68.5l176 154q14 12 18 20q-1 -3 1 -10t5 -8q-8 4 -27 6l-235 22q-40 3 -76 29.5t-52 62.5l-93 213q-7 17 -14 24q2 -2 9 -2t8 2q-7 -7 -14 -24l-93 -213q-16 -36 -52 -62.5t-76 -29.5
|
||||
l-235 -22q-19 -2 -27 -6q3 1 5 8.5t1 9.5q4 -8 18 -20l177 -154q30 -26 44 -68.5t5 -82.5l-51 -226q-4 -18 -3 -27q0 3 -6 7t-8 4q9 1 25 10l202 119q35 21 80 21t79 -21zM493 10l-202 -119q-54 -32 -82.5 -11t-14.5 82l52 226q5 23 -4 50t-27 42l-177 154q-47 41 -36 74
|
||||
t73 39l236 21q23 2 46 19t32 38l93 213q25 58 60.5 58t60.5 -58l93 -213q9 -21 32 -38t46 -19l236 -21q62 -6 73 -39t-36 -74l-177 -154q-18 -15 -27 -42t-4 -50l52 -226q14 -61 -14.5 -82t-82.5 11l-202 119q-21 12 -49.5 12t-49.5 -12z" />
|
||||
<glyph glyph-name="uniE621" unicode="" horiz-adv-x="1086"
|
||||
d="M592 10q-21 12 -49.5 12t-49.5 -12l-202 -119q-54 -32 -82.5 -11t-14.5 82l52 226q5 23 -4 50t-27 42l-177 154q-47 41 -36 74t73 39l236 21q23 2 46 19t32 38l93 213q25 58 60.5 58t60.5 -58l93 -213q9 -21 32 -38t46 -19l236 -21q62 -6 73 -39t-36 -74l-177 -154
|
||||
q-18 -15 -27 -42t-4 -50l52 -226q14 -61 -14.5 -82t-82.5 11z" />
|
||||
<glyph glyph-name="uniE622" unicode=""
|
||||
d="M512 -128q-139 0 -257 68.5t-186.5 186.5t-68.5 257q0 104 40.5 199t109 163.5t163.5 109t199 40.5t199 -40.5t163.5 -109t109 -163.5t40.5 -199t-40.5 -199t-109 -163.5t-163.5 -109t-199 -40.5zM512 786q-109 0 -202 -53.5t-146.5 -146.5t-53.5 -202t53.5 -202
|
||||
t146.5 -146.5t202 -53.5t202 53.5t146.5 146.5t53.5 202t-53.5 202t-146.5 146.5t-202 53.5zM513 316q-20 0 -34 14.5t-14 33.5v229q0 19 14 33.5t34 14.5t34 -14.5t14 -33.5v-181h160q20 0 34 -14t14 -33.5t-14 -34t-34 -14.5h-208z" />
|
||||
<glyph glyph-name="uniE623" unicode=""
|
||||
d="M512 896q-106 0 -199.5 -40t-163 -109.5t-109.5 -163t-40 -199.5t40 -199.5t109.5 -163t163 -109.5t199.5 -40t199.5 40t163 109.5t109.5 163t40 199.5t-40 199.5t-109.5 163t-163 109.5t-199.5 40zM512 94q-25 0 -42 17t-17 41.5t17 42t42 17.5t42 -17.5t17 -42
|
||||
t-17 -41.5t-42 -17zM571 350q0 -25 -17 -42.5t-42 -17.5t-42 17.5t-17 42.5v275q0 25 17 42t42 17t42 -17t17 -42v-275z" />
|
||||
<glyph glyph-name="uniE624" unicode=""
|
||||
d="M382 491v-384q0 -10 -6 -16t-15 -6h-43q-10 0 -16 6t-6 16v384q0 9 6 15t16 6h43q9 0 15 -6t6 -15zM555 491v-384q0 -10 -6 -16t-15 -6h-44q-9 0 -15 6t-6 16v384q0 9 6 15t15 6h44q9 0 15 -6t6 -15zM728 491v-384q0 -10 -6 -16t-16 -6h-43q-9 0 -15 6t-6 16v384
|
||||
q0 9 6 15t15 6h43q10 0 16 -6t6 -15zM815 8v632h-606v-632q0 -15 5 -27t10 -18t7 -6h562q2 0 7 6t10 18t5 27zM361 725h302l-32 78q-5 6 -12 8h-214q-6 -2 -11 -8zM987 704v-43q0 -9 -6 -15t-15 -6h-65v-632q0 -55 -31.5 -95.5t-76.5 -40.5h-562q-45 0 -76.5 39t-31.5 94
|
||||
v635h-65q-9 0 -15 6t-6 15v43q0 9 6 15t15 6h209l47 112q10 24 36.5 41.5t53.5 17.5h216q27 0 53.5 -17.5t36.5 -41.5l47 -112h209q9 0 15 -6t6 -15z" />
|
||||
<glyph glyph-name="uniE626" unicode=""
|
||||
d="M634 506h-146v147q0 20 -14.5 34t-34.5 14t-34.5 -14t-14.5 -34v-147h-146q-20 0 -34 -14t-14 -34.5t14 -34.5t34 -14h146v-147q0 -20 14.5 -34t34.5 -14t34.5 14t14.5 34v147h146q20 0 34.5 14t14.5 34.5t-14.5 34.5t-34.5 14zM1009 -41l-226 227q67 85 86.5 190.5
|
||||
t-12 209t-109.5 181.5q-63 64 -145 96.5t-165 32.5t-165 -32.5t-145 -96t-95.5 -145.5t-32.5 -165t32.5 -165t95.5 -145q79 -78 182.5 -109.5t209.5 -11.5t191 87l226 -226q15 -15 36 -15t36 15t15 36t-15 36zM679 217q-65 -66 -153 -89t-176 0t-153.5 89t-88.5 153.5
|
||||
t0 175.5t88.5 153.5t153.5 89t176 0t153.5 -89t88.5 -153.5t0 -175.5t-89 -153.5z" />
|
||||
<glyph glyph-name="uniE627" unicode="" horiz-adv-x="1103"
|
||||
d="M1039 -128h-975q-27 0 -45.5 19t-18.5 45v320q0 27 18.5 45.5t45 18.5t45 -18.5t18.5 -45.5v-256h849v256q0 27 18.5 45.5t44.5 18.5t45 -18.5t19 -45.5v-320q0 -26 -18.5 -45t-45.5 -19zM742 555q-28 0 -47 21l-80 89v-388q0 -26 -18.5 -45t-45 -19t-45 19t-18.5 45v388
|
||||
l-80 -89q-19 -21 -47 -21q-27 0 -45.5 18.5t-18.5 45.5q0 24 16 42l191 214q19 21 47.5 21t47.5 -21l191 -214q16 -18 16 -42q0 -27 -18.5 -45.5t-45.5 -18.5z" />
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -1,84 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b form {
|
||||
@m label-left {
|
||||
& .el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@m label-top {
|
||||
& .el-form-item__label {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
@m inline {
|
||||
& .el-form-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
@b form-item {
|
||||
margin-bottom: 22px;
|
||||
@utils-clearfix;
|
||||
|
||||
& .el-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
& .el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@e label {
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
line-height: 1;
|
||||
padding: 11px 12px 11px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@e content {
|
||||
line-height: 36px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
@utils-clearfix;
|
||||
}
|
||||
@e error {
|
||||
color: #ff4949;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
& .el-button + .el-button,
|
||||
& .el-checkbox + .el-checkbox,
|
||||
& .el-radio + .el-radio {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@when required {
|
||||
.el-form-item__label:before {
|
||||
content: '*';
|
||||
color: var(--color-danger);
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@when error {
|
||||
& .el-input__inner,
|
||||
& .el-textarea__inner {
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'element-icons';
|
||||
src:url('fonts/element-icons.eot?t=1472440741'), /* IE9*/
|
||||
url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
|
||||
url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="el-icon-"], [class*=" el-icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'element-icons' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down:before { content: "\e600"; }
|
||||
.el-icon-arrow-left:before { content: "\e601"; }
|
||||
.el-icon-arrow-right:before { content: "\e602"; }
|
||||
.el-icon-arrow-up:before { content: "\e603"; }
|
||||
.el-icon-caret-bottom:before { content: "\e604"; }
|
||||
.el-icon-caret-left:before { content: "\e605"; }
|
||||
.el-icon-caret-right:before { content: "\e606"; }
|
||||
.el-icon-caret-top:before { content: "\e607"; }
|
||||
.el-icon-check:before { content: "\e608"; }
|
||||
.el-icon-circle-check:before { content: "\e609"; }
|
||||
.el-icon-circle-close:before { content: "\e60a"; }
|
||||
.el-icon-circle-cross:before { content: "\e60b"; }
|
||||
.el-icon-close:before { content: "\e60c"; }
|
||||
.el-icon-upload:before { content: "\e60d"; }
|
||||
.el-icon-d-arrow-left:before { content: "\e60e"; }
|
||||
.el-icon-d-arrow-right:before { content: "\e60f"; }
|
||||
.el-icon-d-caret:before { content: "\e610"; }
|
||||
.el-icon-date:before { content: "\e611"; }
|
||||
.el-icon-delete:before { content: "\e612"; }
|
||||
.el-icon-document:before { content: "\e613"; }
|
||||
.el-icon-edit:before { content: "\e614"; }
|
||||
.el-icon-information:before { content: "\e615"; }
|
||||
.el-icon-loading:before { content: "\e616"; }
|
||||
.el-icon-menu:before { content: "\e617"; }
|
||||
.el-icon-message:before { content: "\e618"; }
|
||||
.el-icon-minus:before { content: "\e619"; }
|
||||
.el-icon-more:before { content: "\e61a"; }
|
||||
.el-icon-picture:before { content: "\e61b"; }
|
||||
.el-icon-plus:before { content: "\e61c"; }
|
||||
.el-icon-search:before { content: "\e61d"; }
|
||||
.el-icon-setting:before { content: "\e61e"; }
|
||||
.el-icon-share:before { content: "\e61f"; }
|
||||
.el-icon-star-off:before { content: "\e620"; }
|
||||
.el-icon-star-on:before { content: "\e621"; }
|
||||
.el-icon-time:before { content: "\e622"; }
|
||||
.el-icon-warning:before { content: "\e623"; }
|
||||
.el-icon-delete2:before { content: "\e624"; }
|
||||
.el-icon-upload2:before { content: "\e627"; }
|
||||
.el-icon-view:before { content: "\e626"; }
|
||||
|
||||
.el-icon-loading {
|
||||
animation: rotating 1s linear infinite;
|
||||
}
|
||||
|
||||
.el-icon--right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.el-icon--left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@import "./base.css";
|
||||
@import "./button.css";
|
||||
@import "./input.css";
|
||||
@import "./select.css";
|
||||
@import "./alert.css";
|
||||
@import "./notification.css";
|
||||
@import "./slider.css";
|
||||
@import "./checkbox.css";
|
||||
@import "./radio.css";
|
||||
@import "./switch.css";
|
||||
@import "./dropdown.css";
|
||||
@import "./dropdown-menu.css";
|
||||
@import "./loading.css";
|
||||
@import "./dialog.css";
|
||||
@import "./table.css";
|
||||
@import "./table-column.css";
|
||||
@import "./pagination.css";
|
||||
@import "./popover.css";
|
||||
@import "./tooltip.css";
|
||||
@import "./autocomplete.css";
|
||||
@import "./message.css";
|
||||
@import "./message-box.css";
|
||||
@import "./date-picker.css";
|
||||
@import "./time-picker.css";
|
||||
@import "./time-select.css";
|
||||
@import "./input-number.css";
|
||||
@import "./tag.css";
|
||||
@import "./breadcrumb.css";
|
||||
@import "./form.css";
|
||||
@import "./tabs.css";
|
||||
@import "./progress.css";
|
||||
@import "./tree.css";
|
||||
@import "./menu.css";
|
||||
@import "./upload.css";
|
||||
@import "./row.css";
|
||||
@import "./col.css";
|
||||
@import "./spinner.css";
|
||||
@import "./badge.css";
|
||||
@import "./card.css";
|
||||
@import "./rate.css";
|
||||
@import "./steps.css";
|
||||
@import "./step.css";
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./input.css";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b input-number {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 180px;
|
||||
position: relative;
|
||||
|
||||
& .el-input__inner {
|
||||
appearance: none;
|
||||
padding-right: calc(var(--input-height) * 2 + 10);
|
||||
}
|
||||
@e increase, decrease {
|
||||
height: auto;
|
||||
border-left: var(--border-base);
|
||||
width: var(--input-height);
|
||||
line-height: calc(var(--input-height) - 2);
|
||||
top: 1px;
|
||||
text-align: center;
|
||||
color: #99A9BF;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
color: var(--disabled-border-base);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@e increase {
|
||||
right: 0;
|
||||
}
|
||||
@e decrease {
|
||||
right: calc(var(--input-height) + 1px);
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
& .el-input-number__increase, .el-input-number__decrease {
|
||||
border-color: var(--disabled-border-base);
|
||||
color: var(--disabled-border-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--disabled-border-base);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@m large {
|
||||
width: 200px;
|
||||
|
||||
& .el-input-number__increase, .el-input-number__decrease {
|
||||
line-height: var(--input-large-height);
|
||||
width: var(--input-large-height);
|
||||
font-size: var(--input-large-font-size);
|
||||
}
|
||||
& .el-input-number__decrease {
|
||||
right: calc(var(--input-large-height) + 1px);
|
||||
}
|
||||
& .el-input__inner {
|
||||
padding-right: calc(var(--input-large-height) * 2 + 10);
|
||||
}
|
||||
}
|
||||
@m small {
|
||||
width: 130px;
|
||||
|
||||
& .el-input-number__increase, .el-input-number__decrease {
|
||||
line-height: var(--input-small-height);
|
||||
width: var(--input-small-height);
|
||||
font-size: var(--input-small-font-size);
|
||||
}
|
||||
& .el-input-number__decrease {
|
||||
right: calc(var(--input-small-height) + 1px);
|
||||
}
|
||||
& .el-input__inner {
|
||||
padding-right: calc(var(--input-small-height) * 2 + 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b input {
|
||||
position: relative;
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
@e inner {
|
||||
display: block;
|
||||
padding: 3px 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: var(--input-height);
|
||||
color: var(--input-color);
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: var(--input-border);
|
||||
border-radius: 4px;
|
||||
transition: var(--border-transition-base);
|
||||
outline: none;
|
||||
line-height: normal;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--input-hover-border);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-focus-border);
|
||||
}
|
||||
}
|
||||
|
||||
@e icon {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: var(--input-icon-color);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& + .el-input__inner {
|
||||
padding-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@when active {
|
||||
.el-input__inner {
|
||||
outline: none;
|
||||
border-color: var(--input-focus-border);
|
||||
}
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
.el-input__inner {
|
||||
background-color: var(--disabled-fill-base);
|
||||
border-color: var(--disabled-border-base);
|
||||
color: var(--disabled-color-base);
|
||||
cursor: not-allowed;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-disabled-placeholder-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-loading {
|
||||
animation: validating-rotating 1s linear infinite;
|
||||
}
|
||||
@m large {
|
||||
font-size: var(--input-large-font-size);
|
||||
|
||||
& .el-input__inner {
|
||||
height: var(--input-large-height);
|
||||
}
|
||||
}
|
||||
@m small {
|
||||
font-size: var(--input-small-font-size);
|
||||
|
||||
& .el-input__inner {
|
||||
height: var(--input-small-height);
|
||||
}
|
||||
}
|
||||
@m mini {
|
||||
font-size: var(--input-mini-font-size);
|
||||
|
||||
& .el-input__inner {
|
||||
height: var(--input-mini-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@b input-group {
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
|
||||
& > .el-input__inner {
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
@e append, prepend {
|
||||
background-color: #f9fafc;
|
||||
color: #99a9bf;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
border: var(--border-base);
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
|
||||
& .el-select,
|
||||
& .el-button {
|
||||
display: block;
|
||||
margin: -10px;
|
||||
}
|
||||
|
||||
& .el-button,
|
||||
& .el-select .el-input__inner,
|
||||
& .el-select:hover .el-input__inner {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
& .el-button,
|
||||
& .el-input {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
@e prepend {
|
||||
border-right: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@e append {
|
||||
border-left: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
& .el-input__inner:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
& .el-input__inner:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
& .el-input__inner:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@b textarea {
|
||||
|
||||
@e inner {
|
||||
display: block;
|
||||
resize: vertical;
|
||||
padding: 5px 7px;
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--input-color);
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: var(--input-border);
|
||||
border-radius: 4px;
|
||||
transition: var(--border-transition-base);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--input-hover-border);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-focus-border);
|
||||
}
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
.el-textarea__inner {
|
||||
background-color: var(--disabled-fill-base);
|
||||
border-color: var(--disabled-border-base);
|
||||
color: var(--disabled-color-base);
|
||||
cursor: not-allowed;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--input-disabled-placeholder-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes validating-rotating {
|
||||
0% {
|
||||
transform: translate(0, -50%) rotateZ(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, -50%) rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
.el-loading-spinner {
|
||||
height: 12px;
|
||||
width: 60px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
margin-top: -6px;
|
||||
margin-left: -30px;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.el-loading-bubble {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
background-color: #fff;
|
||||
margin: 0 3px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: 1s cubic-bezier(.2,.68,.18,1.08) infinite both bubble-pulse;
|
||||
}
|
||||
|
||||
.el-loading-bubble.bubble1 {
|
||||
animation-delay: .16s;
|
||||
}
|
||||
|
||||
.el-loading-bubble.bubble2 {
|
||||
animation-delay: .32s;
|
||||
}
|
||||
|
||||
.el-loading-bubble.bubble3 {
|
||||
animation-delay: .48s;
|
||||
}
|
||||
|
||||
@keyframes bubble-pulse {
|
||||
0%, 80% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
45% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@define-extend menu-item {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: 14px;
|
||||
color: var(--menu-item-color);
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: border-color .3s, background-color .3s, color .3s;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@component-namespace el {
|
||||
@b menu {
|
||||
border-radius: 2px;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
background-color: var(--menu-item-fill);
|
||||
@utils-clearfix;
|
||||
|
||||
& li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@m dark {
|
||||
background-color: var(--dark-menu-item-fill);
|
||||
|
||||
& .el-menu-item,
|
||||
& .el-submenu__title {
|
||||
color: #c0ccda;
|
||||
|
||||
&:hover {
|
||||
background-color: #475669;
|
||||
}
|
||||
}
|
||||
|
||||
& .el-submenu .el-menu {
|
||||
background-color: #1f2f3d;
|
||||
|
||||
& .el-menu-item:hover {
|
||||
background-color: #475669;
|
||||
}
|
||||
}
|
||||
}
|
||||
@m horizontal {
|
||||
& .el-menu-item {
|
||||
float: left;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 5px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--menu-item-hover-fill);
|
||||
}
|
||||
}
|
||||
& .el-submenu {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
> .el-menu {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 0;
|
||||
border:1px solid #d3dce6;
|
||||
padding: 5px 0;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
min-width: 100%;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
& .el-submenu__title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
& .el-menu-item {
|
||||
background-color: #fff;
|
||||
float: none;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
& .el-submenu__icon-arrow {
|
||||
position: static;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
color: #99a9bf;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
& .el-menu-item:hover,
|
||||
& .el-submenu__title:hover {
|
||||
background-color: var(--menu-item-fill);
|
||||
}
|
||||
& > .el-menu-item:hover,
|
||||
& > .el-submenu:hover .el-submenu__title,
|
||||
& > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 5px solid var(--color-primary);
|
||||
}
|
||||
|
||||
&.el-menu--dark {
|
||||
& .el-menu-item:hover,
|
||||
& .el-submenu__title:hover {
|
||||
background-color: var(--dark-menu-item-fill);
|
||||
}
|
||||
|
||||
& .el-submenu {
|
||||
.el-menu-item,
|
||||
.el-submenu-title {
|
||||
color: #475669;
|
||||
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@b menu-item {
|
||||
@extend menu-item;
|
||||
|
||||
& [class^="el-icon-"] {
|
||||
vertical-align: baseline;
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
@when active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@b submenu {
|
||||
@e title {
|
||||
position: relative;
|
||||
@extend menu-item;
|
||||
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
& .el-menu {
|
||||
background-color: #e5e9f2;
|
||||
}
|
||||
& .el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 45px;
|
||||
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
@e icon-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
margin-top: -7px;
|
||||
transition: transform .3s;
|
||||
font-size: 12px;
|
||||
}
|
||||
@when active {
|
||||
.el-submenu__title {
|
||||
border-bottom-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
@when opened {
|
||||
.el-submenu__icon-arrow {
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
[class^="el-icon-"] {
|
||||
vertical-align: baseline;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@b menu-item-group {
|
||||
> ul {
|
||||
padding: 0;
|
||||
}
|
||||
@e title {
|
||||
padding-top: 15px;
|
||||
line-height: normal;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
@import "./button.css";
|
||||
@import "./input.css";
|
||||
@import '../../../node_modules/vue-popup/lib/popup.css';
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b message-box {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
background-color: #fff;
|
||||
width: var(--msgbox-width);
|
||||
border-radius: var(--msgbox-border-radius);
|
||||
font-size: var(--msgbox-font-size);
|
||||
-webkit-user-select: none;
|
||||
overflow: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
@e header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
@e content {
|
||||
padding: 30px 20px;
|
||||
color: var(--msgbox-content-color);
|
||||
font-size: var(--msgbox-content-font-size);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e close {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
padding-top: 15px;
|
||||
& input.invalid {
|
||||
border-color: var(--color-danger);
|
||||
&:focus {
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e errormsg {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--msgbox-error-font-size);
|
||||
min-height: 18px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
@e title {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: var(--msgbox-font-size);
|
||||
font-weight: bold;
|
||||
height: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@e message {
|
||||
margin: 0;
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@e btns {
|
||||
padding: 10px 20px 15px;
|
||||
text-align: right;
|
||||
|
||||
& button:nth-child(2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@e btns-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@e status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 36px !important;
|
||||
|
||||
&.el-icon-circle-check {
|
||||
color: var(--msgbox-success-color);
|
||||
}
|
||||
|
||||
&.el-icon-information {
|
||||
color: var(--msgbox-info-color);
|
||||
}
|
||||
|
||||
&.el-icon-warning {
|
||||
color: var(--msgbox-warning-color);
|
||||
}
|
||||
|
||||
&.el-icon-circle-cross {
|
||||
color: var(--msgbox-danger-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msgbox-fade-enter-active {
|
||||
animation: msgbox-fade-in .3s;
|
||||
}
|
||||
|
||||
.msgbox-fade-leave-active {
|
||||
animation: msgbox-fade-out .3s;
|
||||
}
|
||||
|
||||
@keyframes msgbox-fade-in {
|
||||
0% {
|
||||
transform: translate3d(-50%, calc(-50% - 20px), 0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes msgbox-fade-out {
|
||||
0% {
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(-50%, calc(-50% - 20px), 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b message {
|
||||
box-shadow: var(--message-shadow);
|
||||
min-width: var(--message-min-width);
|
||||
padding: var(--message-padding);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--border-radius-small);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
transition: opacity 0.3s, transform .4s;
|
||||
overflow: hidden;
|
||||
z-index: var(--index-popper);
|
||||
|
||||
@e group {
|
||||
margin-left: 38px;
|
||||
position: relative;
|
||||
|
||||
& p {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: 20px;
|
||||
margin: 0 34px 0 0;
|
||||
white-space: nowrap;
|
||||
color: var(--message-content-color);
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
@e icon {
|
||||
size: 40px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@e closeBtn {
|
||||
position: absolute 3px 0 * *;
|
||||
cursor: pointer;
|
||||
color: var(--message-close-color);
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--message-close-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
& .el-icon-circle-check {
|
||||
color: var(--message-success-color);
|
||||
}
|
||||
|
||||
& .el-icon-circle-cross {
|
||||
color: var(--message-danger-color);
|
||||
}
|
||||
|
||||
& .el-icon-information {
|
||||
color: var(--message-info-color);
|
||||
}
|
||||
|
||||
& .el-icon-warning {
|
||||
color: var(--message-warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-fade-enter,
|
||||
.el-message-fade-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
@define-mixin button-variant $color, $background-color, $border-color {
|
||||
color: $color;
|
||||
background-color: $background-color;
|
||||
border-color: $border-color;
|
||||
|
||||
&:hover {
|
||||
background: tint($background-color, var(--button-hover-tint-percent));
|
||||
border-color: tint($border-color, var(--button-hover-tint-percent));
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: shade($background-color, var(--button-active-shade-percent));
|
||||
border-color: shade($border-color, var(--button-active-shade-percent));
|
||||
color: $color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: shade($background-color, var(--button-active-shade-percent));
|
||||
border-color: shade($border-color, var(--button-active-shade-percent));
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&.is-plain {
|
||||
background: var(--button-default-fill);
|
||||
border: var(--border-base);
|
||||
color: var(--button-default-color);
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
color: $background-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #fff;
|
||||
border-color: shade($border-color, var(--button-active-shade-percent));
|
||||
color: shade($background-color, var(--button-active-shade-percent));
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin button-size $padding-vertical, $padding-horizontal, $font-size, $border-radius {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b notification {
|
||||
width: var(--notification-width);
|
||||
padding: var(--notification-padding);
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--border-radius-small);
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
background-color: #fff;
|
||||
box-shadow: var(--notification-shadow);
|
||||
transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
|
||||
overflow: hidden;
|
||||
z-index: var(--index-popper);
|
||||
|
||||
@e group {
|
||||
& span {
|
||||
font-size: var(--notification-title-font-size);
|
||||
color: var(--notification-title-color);
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: var(--notification-font-size);
|
||||
line-height: 21px;
|
||||
margin: 10px 0 0 0;
|
||||
color: var(--notification-color);
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
@e icon {
|
||||
size: var(--notification-icon-size);
|
||||
font-size: var(--notification-icon-size);
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
@e closeBtn {
|
||||
position: absolute 20px 20px * *;
|
||||
cursor: pointer;
|
||||
color: var(--notification-close-color);
|
||||
font-size: var(--notification-font-size);
|
||||
|
||||
&:hover {
|
||||
color: var(--notification-close-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
& .el-icon-circle-check {
|
||||
color: var(--notification-success-color);
|
||||
}
|
||||
|
||||
& .el-icon-circle-cross {
|
||||
color: var(--notification-danger-color);
|
||||
}
|
||||
|
||||
& .el-icon-information {
|
||||
color: var(--notification-info-color);
|
||||
}
|
||||
|
||||
& .el-icon-warning {
|
||||
color: var(--notification-warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-notification-fade-enter {
|
||||
transform: translateX(100%);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.el-notification-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b select-group {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@e wrap {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@e title {
|
||||
padding-left: 10px;
|
||||
font-size: var(--select-group-font-size);
|
||||
color: var(--select-group-color);
|
||||
height: var(--select-group-height);
|
||||
line-height: var(--select-group-height);
|
||||
}
|
||||
|
||||
& .el-select-dropdown__item {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b select-dropdown {
|
||||
@e item {
|
||||
font-size: var(--select-font-size);
|
||||
padding: 8px 10px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--select-option-color);
|
||||
height: var(--select-option-height);
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
@when disabled {
|
||||
color: var(--select-option-disabled-color);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&.hover {
|
||||
background-color: var(--select-option-hover-background);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: var(--color-white);
|
||||
background-color: var(--select-option-selected);
|
||||
|
||||
&.hover {
|
||||
background-color: var(--select-option-selected-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& span {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,203 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./select.css";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b pagination {
|
||||
white-space: nowrap;
|
||||
padding: 2px 5px;
|
||||
background: var(--pagination-fill);
|
||||
color: var(--pagination-color);
|
||||
|
||||
span,
|
||||
button {
|
||||
display: inline-block;
|
||||
font-size: var(--pagination-font-size);
|
||||
min-width: var(--pagination-button-size);
|
||||
height: var(--pagination-button-size);
|
||||
line-height: var(--pagination-button-size);
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.el-select .el-input {
|
||||
width: 110px;
|
||||
input {
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 0 6px;
|
||||
background: transparent;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--pagination-hover-fill);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: var(--pagination-button-disabled-color);
|
||||
background-color: var(--pagination-button-disabled-fill);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
background: center center no-repeat;
|
||||
background-size: 16px;
|
||||
border: 1px solid var(--pagination-border-color);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
color: var(--pagination-button-color);
|
||||
|
||||
.el-icon {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-prev {
|
||||
border-radius: var(--pagination-border-radius) 0 0 var(--pagination-border-radius);
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.btn-next {
|
||||
border-radius: 0 var(--pagination-border-radius) var(--pagination-border-radius) 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
@m small {
|
||||
.btn-prev,
|
||||
.btn-next,
|
||||
.el-pager li,
|
||||
.el-pager li:last-child {
|
||||
border-color: transparent;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
min-width: 22px;
|
||||
}
|
||||
|
||||
.arrow.disabled {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.el-pager li {
|
||||
border-radius: var(--pagination-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
@e sizes {
|
||||
margin: 0 10px 0 0;
|
||||
|
||||
.el-input .el-input__inner {
|
||||
font-size: 13px;
|
||||
border-color: var(--pagination-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--pagination-hover-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e jump {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@e total {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@e rightwrapper {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@e editor {
|
||||
border: 1px solid var(--pagination-border-color);
|
||||
border-radius: var(--pagination-border-radius);
|
||||
line-height: 18px;
|
||||
padding: 4px 2px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
margin: 0 6px;
|
||||
box-sizing: border-box;
|
||||
transition: border .3s;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--pagination-hover-fill);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@b pager {
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: 0 4px;
|
||||
border: 1px solid var(--pagination-border-color);
|
||||
border-right: 0;
|
||||
background: var(--pagination-fill);
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
font-size: var(--pagination-font-size);
|
||||
min-width: var(--pagination-button-size);
|
||||
height: var(--pagination-button-size);
|
||||
line-height: var(--pagination-button-size);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid var(--pagination-border-color);
|
||||
}
|
||||
|
||||
&.btn-quicknext,
|
||||
&.btn-quickprev {
|
||||
line-height: 28px;
|
||||
color: var(--pagination-button-color);
|
||||
}
|
||||
|
||||
&.btn-quickprev:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.btn-quicknext:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active + li {
|
||||
border-left: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--pagination-hover-fill);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--pagination-hover-fill);
|
||||
background-color: var(--pagination-hover-fill);
|
||||
color: var(--pagination-hover-color);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b popover {
|
||||
position: absolute;
|
||||
background: var(--popover-fill);
|
||||
min-width: 150px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--popover-border-color);
|
||||
padding: var(--popover-padding);
|
||||
z-index: var(--index-popper);
|
||||
font-size: var(--popover-font-size);
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
|
||||
0px 0px 6px 0px rgba(0, 0, 0, .04);
|
||||
|
||||
.popper__arrow,
|
||||
.popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
border-width: var(--popover-arrow-size);
|
||||
}
|
||||
|
||||
.popper__arrow::after {
|
||||
content: " ";
|
||||
border-width: var(--popover-arrow-size);
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: calc(var(--popover-arrow-size) + 6);
|
||||
}
|
||||
|
||||
&[x-placement^="top"] .popper__arrow {
|
||||
bottom: -var(--popover-arrow-size);
|
||||
left: 50%;
|
||||
margin-right: calc(var(--tooltip-arrow-size) / 2);
|
||||
border-top-color: var(--popover-border-color);
|
||||
border-bottom-width: 0;
|
||||
|
||||
&::after {
|
||||
bottom: 1px;
|
||||
margin-left: -var(--popover-arrow-size);
|
||||
border-top-color: var(--popover-fill);
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: calc(var(--popover-arrow-size) + 6);
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] .popper__arrow {
|
||||
top: -var(--popover-arrow-size);
|
||||
left: 50%;
|
||||
margin-right: calc(var(--tooltip-arrow-size) / 2);
|
||||
border-top-width: 0;
|
||||
border-bottom-color: var(--popover-border-color);
|
||||
|
||||
&::after {
|
||||
top: 1px;
|
||||
margin-left: -var(--popover-arrow-size);
|
||||
border-top-width: 0;
|
||||
border-bottom-color: var(--popover-fill);
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: calc(var(--popover-arrow-size) + 6);
|
||||
}
|
||||
|
||||
&[x-placement^="right"] .popper__arrow {
|
||||
top: 50%;
|
||||
left: -var(--popover-arrow-size);
|
||||
margin-bottom: calc(var(--tooltip-arrow-size) / 2);
|
||||
border-right-color: var(--popover-border-color);
|
||||
border-left-width: 0;
|
||||
|
||||
&::after {
|
||||
bottom: -var(--popover-arrow-size);
|
||||
left: 1px;
|
||||
border-right-color: var(--popover-fill);
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: calc(var(--popover-arrow-size) + 6);
|
||||
}
|
||||
|
||||
&[x-placement^="left"] .popper__arrow {
|
||||
top: 50%;
|
||||
right: -var(--popover-arrow-size);
|
||||
margin-bottom: calc(var(--tooltip-arrow-size) / 2);
|
||||
border-right-width: 0;
|
||||
border-left-color: var(--popover-border-color);
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
bottom: -var(--popover-arrow-size);
|
||||
margin-left: -var(--popover-arrow-size);
|
||||
border-right-width: 0;
|
||||
border-left-color: var(--popover-fill);
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
color: var(--popover-title-color);
|
||||
font-size: var(--popover-title-font-size);
|
||||
line-height: 1;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b progress {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
|
||||
@e text {
|
||||
font-size:14px;
|
||||
color:#475669;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
line-height: 1;
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@m circle {
|
||||
display: inline-block;
|
||||
|
||||
.el-progress__text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@m without-text {
|
||||
.el-progress__text {
|
||||
display: none;
|
||||
}
|
||||
.el-progress-bar {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@m text-inside {
|
||||
.el-progress-bar {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@when success {
|
||||
.el-progress-bar__inner {
|
||||
background-color: var(--color-success);
|
||||
}
|
||||
.el-progress__text {
|
||||
color: var(--color-success);
|
||||
}
|
||||
}
|
||||
@when exception {
|
||||
.el-progress-bar__inner {
|
||||
background-color: var(--color-danger);
|
||||
}
|
||||
.el-progress__text {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
@b progress-bar {
|
||||
padding-right: 50px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
margin-right: -55px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@e outer {
|
||||
height: 6px;
|
||||
border-radius: 100px;
|
||||
background-color: #e5e9f2;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@e inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border-radius: 2px 0 0 2px;
|
||||
background-color: var(--color-primary);
|
||||
text-align: right;
|
||||
border-radius: 100px;
|
||||
line-height: 1;
|
||||
|
||||
@utils-vertical-center;
|
||||
}
|
||||
@e innerText {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 32px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
@import './mixins/button';
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b radio {
|
||||
color: var(--radio-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
@utils-user-select none;
|
||||
|
||||
& + .el-radio {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@e input {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@e inner {
|
||||
border: var(--radio-input-border);
|
||||
border-radius: var(--radio-input-border-radius);
|
||||
circle: var(--radio-input-width) var(--radio-input-fill);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:not(.is-disabled):hover {
|
||||
border-color: var(--radio-input-border-color-hover);
|
||||
}
|
||||
|
||||
&::after {
|
||||
circle: 6px #fff;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
background-color: var(--radio-disabled-input-fill);
|
||||
border-color: var(--radio-disabled-input-border-color);
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--radio-disabled-icon-color);
|
||||
}
|
||||
|
||||
& + .el-radio__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@when checked {
|
||||
border-color: var(--radio-checked-input-border-color);
|
||||
background: var(--radio-checked-icon-color);
|
||||
|
||||
&::after {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@when focus {
|
||||
border-color: var(--radio-input-border-color-hover);
|
||||
}
|
||||
|
||||
&.is-disabled.is-checked {
|
||||
background-color: var(--radio-disabled-checked-input-fill);
|
||||
border-color: var(--radio-disabled-checked-input-border-color);
|
||||
|
||||
&::after {
|
||||
background-color: var(--radio-disabled-checked-icon-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e original {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@e label {
|
||||
font-size: var(--radio-font-size);
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@b radio-group {
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
|
||||
& .el-radio {
|
||||
font-size: var(--radio-font-size);
|
||||
}
|
||||
|
||||
}
|
||||
@b radio-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
|
||||
@e inner {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background: var(--button-default-fill);
|
||||
border: var(--border-base);
|
||||
color: var(--button-default-color);
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--border-transition-base), var(--color-transition-base);
|
||||
@utils-user-select none;
|
||||
|
||||
@mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
& [class*="el-icon-"] {
|
||||
line-height: 0.9;
|
||||
|
||||
& + span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e orig-radio {
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: -999px;
|
||||
|
||||
&:checked {
|
||||
& + .el-radio-button__inner {
|
||||
z-index: 1;
|
||||
color: var(--color-primary);
|
||||
border-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
& + .el-radio-button__inner {
|
||||
z-index: -1;
|
||||
color: var(--button-disabled-color);
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
background-color: var(--button-disabled-fill);
|
||||
border-color: var(--button-disabled-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: -1px;
|
||||
}
|
||||
&:first-child {
|
||||
.el-radio-button__inner {
|
||||
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.el-radio-button__inner {
|
||||
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
|
||||
}
|
||||
}
|
||||
@m large {
|
||||
& .el-radio-button__inner {
|
||||
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
|
||||
}
|
||||
}
|
||||
@m small {
|
||||
& .el-radio-button__inner {
|
||||
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
|
||||
}
|
||||
}
|
||||
@m mini {
|
||||
& .el-radio-button__inner {
|
||||
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b rate {
|
||||
height: var(--rate-height);
|
||||
@e item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@e icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: var(--rate-icon-size);
|
||||
margin-right: var(--rate-icon-margin);
|
||||
color: var(--rate-icon-color);
|
||||
transition: .3s;
|
||||
&.hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.path2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e decimal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@e text {
|
||||
font-size: var(--rate-font-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b row {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
@utils-clearfix;
|
||||
|
||||
@m flex {
|
||||
display: flex;
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@when justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
@when justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@when justify-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
@when justify-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@when align-middle {
|
||||
align-items: center;
|
||||
}
|
||||
@when align-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b select-dropdown {
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
border: var(--select-dropdown-border);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--select-dropdown-background);
|
||||
box-shadow: var(--select-dropdown-shadow);
|
||||
box-sizing: border-box;
|
||||
margin: 5px 0;
|
||||
|
||||
@when multiple {
|
||||
& .el-select-dropdown__item.selected {
|
||||
color: var(--select-option-selected);
|
||||
background-color: var(--select-dropdown-background);
|
||||
|
||||
&.hover {
|
||||
background-color: var(--select-option-hover-background);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
font-family: 'element-icons';
|
||||
content: "\E608";
|
||||
font-size: 11px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@b select-dropdown__empty {
|
||||
padding: var(--select-dropdown-empty-padding);
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: var(--select-dropdown-empty-color);
|
||||
font-size: var(--select-font-size);
|
||||
}
|
||||
|
||||
@b select-dropdown__list {
|
||||
list-style: none;
|
||||
padding: var(--select-dropdown-padding);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: var(--select-dropdown-max-height);
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
@import "./select-dropdown.css";
|
||||
@import "./input.css";
|
||||
@import "./tag.css";
|
||||
@import "./option.css";
|
||||
@import "./option-group.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b select {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
@when small {
|
||||
& input {
|
||||
border-radius: var(--border-radius-small);
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.el-input__inner {
|
||||
border-color: var(--select-border-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& .el-input {
|
||||
& .el-input__icon {
|
||||
color: var(--select-input-color);
|
||||
font-size: var(--select-input-font-size);
|
||||
transition: transform .3s;
|
||||
transform: translateY(-50%) rotateZ(180deg);
|
||||
line-height: 16px;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
@when reverse {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@when show-close {
|
||||
transition: 0s;
|
||||
size: 16px;
|
||||
font-size: var(--select-font-size);
|
||||
right: 8px;
|
||||
text-align: center;
|
||||
transform: translateY(-50%) rotateZ(180deg);
|
||||
border-radius: var(--border-radius-circle);
|
||||
color: var(--select-input-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--select-close-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .el-input__inner {
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--select-input-focus-background);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
& .el-input__inner {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--select-disabled-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
margin: 4px 0 -3px 10px;
|
||||
color: var(--select-multiple-input-color);
|
||||
font-size: var(--select-font-size);
|
||||
vertical-align: baseline;
|
||||
appearance: none;
|
||||
height: 28px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@e close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
z-index: var(--index-top);
|
||||
right: 25px;
|
||||
color: var(--select-input-color);
|
||||
line-height: 18px;
|
||||
font-size: var(--select-input-font-size);
|
||||
|
||||
&:hover {
|
||||
color: var(--select-close-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e tags {
|
||||
position: absolute;
|
||||
line-height: normal;
|
||||
white-space: normal;
|
||||
z-index: var(--index-top);
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
& .el-tag {
|
||||
height: var(--select-tag-height);
|
||||
line-height: var(--select-tag-height);
|
||||
box-sizing: border-box;
|
||||
margin: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
@e tag {
|
||||
display: inline-block;
|
||||
height: var(--select-tag-height);
|
||||
line-height: var(--select-tag-height);
|
||||
font-size: var(--select-font-size);
|
||||
border-radius: var(--border-radius-base);
|
||||
color: var(--select-tag-color);
|
||||
background-color: var(--select-tag-background);
|
||||
|
||||
& .el-icon-close {
|
||||
font-size: var(--select-input-font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./input-number.css";
|
||||
@import "./tooltip.css";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b slider {
|
||||
@utils-clearfix;
|
||||
@e runway {
|
||||
width: 100%;
|
||||
height: var(--slider-height);
|
||||
margin: var(--slider-margin);
|
||||
background-color: var(--slider-runway-background-color);
|
||||
border-radius: var(--slider-border-radius);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
|
||||
&.show-input {
|
||||
margin-right: 160px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
|
||||
.el-slider__bar, .el-slider__button {
|
||||
background-color: var(--slider-disable-color);
|
||||
}
|
||||
|
||||
.el-slider__button-wrapper {
|
||||
&:hover,
|
||||
&.hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.el-slider__button {
|
||||
&:hover,
|
||||
&.hover,
|
||||
&.dragging {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
float: right;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
@e bar {
|
||||
height: var(--slider-height);
|
||||
background-color: var(--slider-main-background-color);
|
||||
border-top-left-radius: var(--slider-border-radius);
|
||||
border-bottom-left-radius: var(--slider-border-radius);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@e button-wrapper {
|
||||
size: var(--slider-button-wrapper-size);
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
top: var(--slider-button-wrapper-offset);
|
||||
transform: translateX(-50%);
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
|
||||
.el-tooltip {
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.el-tooltip::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.el-tooltip__rel {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
@e button {
|
||||
size: var(--slider-button-size);
|
||||
background-color: var(--slider-main-background-color);
|
||||
border-radius: 50%;
|
||||
transition: .2s;
|
||||
|
||||
&:hover,
|
||||
&.hover,
|
||||
&.dragging {
|
||||
transform: scale(1.5);
|
||||
background-color: var(--slider-button-hover-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
@e stop {
|
||||
position: absolute;
|
||||
size: var(--slider-height);
|
||||
border-radius: var(--border-radius-circle);
|
||||
background-color: var(--slider-stop-background-color);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b time-spinner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@b spinner {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@b spinner-inner {
|
||||
animation: rotate 2s linear infinite;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
& .path {
|
||||
stroke: #ececec;
|
||||
stroke-linecap: round;
|
||||
animation: dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 150;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: -35;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: -124;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b step {
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
@when horizontal {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@when vertical {
|
||||
& .el-step__head,
|
||||
& .el-step__main {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& .el-step__main {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@e line {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
border-color: inherit;
|
||||
background-color: #c0ccda;
|
||||
|
||||
@when icon {
|
||||
@when horizontal {
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@when horizontal {
|
||||
top: 15px;
|
||||
height: 2px;
|
||||
left: 30px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@when vertical {
|
||||
width: 2px;
|
||||
box-sizing: border-box;
|
||||
top: 30px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e line-inner {
|
||||
display: inherit;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
transition: all 150ms;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@e icon {
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
|
||||
> * {
|
||||
line-height: inherit;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@e head {
|
||||
circle: 28px transparent;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
font-size: 28px;
|
||||
vertical-align: top;
|
||||
transition: all 150ms;
|
||||
|
||||
@when text {
|
||||
font-size: 14px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
|
||||
@when process {
|
||||
color: #fff;
|
||||
background-color: #c0ccda;
|
||||
border-color: #c0ccda;
|
||||
}
|
||||
|
||||
@when wait {
|
||||
color: #c0ccda;
|
||||
background-color: #fff;
|
||||
border-color: #c0ccda;
|
||||
}
|
||||
|
||||
@when success {
|
||||
color: #fff;
|
||||
background-color: #13ce66;
|
||||
border-color: #13ce66;
|
||||
}
|
||||
|
||||
@when error {
|
||||
color: #fff;
|
||||
background-color: #ff4949;
|
||||
border-color: #ff4949;
|
||||
}
|
||||
|
||||
@when finish {
|
||||
color: #fff;
|
||||
background-color: #20a0ff;
|
||||
border-color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
@when process {
|
||||
color: #c0ccda;
|
||||
border-color: #c0ccda;
|
||||
}
|
||||
|
||||
@when wait {
|
||||
color: #c0ccda;
|
||||
border-color: #c0ccda;
|
||||
}
|
||||
|
||||
@when success {
|
||||
color: #13ce66;
|
||||
border-color: #13ce66;
|
||||
}
|
||||
|
||||
@when error {
|
||||
color: #ff4949;
|
||||
border-color: #ff4949;
|
||||
}
|
||||
|
||||
@when finish {
|
||||
color: #20a0ff;
|
||||
border-color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
@e main {
|
||||
white-space: normal;
|
||||
padding-right: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
display: inline-block;
|
||||
|
||||
@when process {
|
||||
font-weight: 700;
|
||||
color: #475669;
|
||||
}
|
||||
|
||||
@when wait {
|
||||
font-weight: normal;
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
@when success {
|
||||
font-weight: 700;
|
||||
color: #13ce66;
|
||||
}
|
||||
|
||||
@when error {
|
||||
font-weight: 700;
|
||||
color: #ff4949;
|
||||
}
|
||||
|
||||
@when finish {
|
||||
font-weight: 700;
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
@e description {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 14px;
|
||||
|
||||
@when process {
|
||||
color: #8492a6;
|
||||
}
|
||||
|
||||
@when wait {
|
||||
color: #c0ccda;
|
||||
}
|
||||
|
||||
@when success {
|
||||
color: #13ce66;
|
||||
}
|
||||
|
||||
@when error {
|
||||
color: #ff4949;
|
||||
}
|
||||
|
||||
@when finish {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b steps {
|
||||
font-size: 0;
|
||||
|
||||
> :last-child .el-step__line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@when horizontal {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b switch {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: var(--switch-font-size);
|
||||
@when disabled {
|
||||
& .el-switch__core,
|
||||
& .el-switch__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@e label {
|
||||
transition: .2s;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
size: var(--switch-size);
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
font-size: var(--switch-font-size);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@m left {
|
||||
i {
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
@m right {
|
||||
i {
|
||||
right: 6px;
|
||||
}
|
||||
}
|
||||
& * {
|
||||
line-height: 1;
|
||||
top: 4px;
|
||||
position: absolute;
|
||||
font-size: var(--switch-font-size);
|
||||
display: inline-block;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@e input {
|
||||
&:checked + .el-switch__core {
|
||||
border-color: var(--switch-on-color);
|
||||
background-color: var(--switch-on-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e core {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
size: var(--switch-size);
|
||||
border: 1px solid var(--switch-off-color);
|
||||
outline: none;
|
||||
border-radius: var(--switch-core-border-radius);
|
||||
box-sizing: border-box;
|
||||
background: var(--switch-off-color);
|
||||
cursor: pointer;
|
||||
transition: border-color .3s, background-color .3s;
|
||||
|
||||
& .el-switch__button {
|
||||
position: absolute 0 * * 0;
|
||||
border-radius: var(--border-radius-circle);
|
||||
transition: transform .3s;
|
||||
size: var(--switch-button-size);
|
||||
z-index: 20;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@when disabled {
|
||||
.el-switch__core {
|
||||
border-color: var(--switch-disabled-color);
|
||||
background: var(--switch-disabled-color);
|
||||
|
||||
& span {
|
||||
background-color: var(--switch-disabled-text-color);
|
||||
}
|
||||
|
||||
& ~ .el-switch__label * {
|
||||
color: var(--switch-disabled-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.el-switch__input:checked + .el-switch__core {
|
||||
border-color: var(--switch-disabled-color);
|
||||
background-color: var(--switch-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
@modifier wide {
|
||||
.el-switch__label {
|
||||
&.el-switch__label--left {
|
||||
span {
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
&.el-switch__label--right {
|
||||
span {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .label-fade-enter,
|
||||
& .label-fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./checkbox.css";
|
||||
@import "./tag.css";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b table-filter {
|
||||
border: solid 1px #d3dce6;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: var(--dropdown-menu-box-shadow);
|
||||
box-sizing: border-box;
|
||||
margin: 2px 0;
|
||||
|
||||
/** used for dropdown mode */
|
||||
@e list {
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
@e list-item {
|
||||
line-height: 36px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-menuItem-hover-fill);
|
||||
color: var(--dropdown-menuItem-hover-color);
|
||||
}
|
||||
|
||||
@when active {
|
||||
background-color: #20a0ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@e content {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
@e bottom {
|
||||
border-top: 1px solid #d3dce6;
|
||||
padding: 8px;
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #8492a6;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
padding: 0 3px;
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: #c0ccda;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e checkbox-group {
|
||||
padding: 10px;
|
||||
|
||||
.el-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.el-checkbox:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,365 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./checkbox.css";
|
||||
@import "./tag.css";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b table {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: #fff;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--table-border-color);
|
||||
font-size: 14px;
|
||||
color: var(--table-text-color);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--table-border-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: var(--table-border-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.el-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.el-tooltip__rel {
|
||||
display: block;
|
||||
|
||||
.cell > * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@e empty-block {
|
||||
display: table;
|
||||
min-height: 60px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@e empty-text {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
color: #5e6d82;
|
||||
}
|
||||
|
||||
@modifier fit {
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
& th.gutter, td.gutter {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
& th {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& th, td {
|
||||
height: 40px;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
|
||||
@when center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@when left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@when right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@modifier border {
|
||||
& th, td {
|
||||
border-right: 1px solid var(--table-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
& th {
|
||||
background-color: var(--table-header-background);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& th > div {
|
||||
display: inline-block;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
& td > div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@e fixed, fixed-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 1px 0 8px #d3d4d6;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--table-border-color);
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@e fixed-right {
|
||||
top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
box-shadow: -1px 0 8px #d3d4d6;
|
||||
|
||||
.el-table__fixed-header-wrapper, .el-table__fixed-body-wrapper {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e fixed-header-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
|
||||
& thead div {
|
||||
background-color: var(--table-header-background);
|
||||
color: var(--table-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e fixed-body-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 37px;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@e header-wrapper, body-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@e header, body {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
@e header-wrapper {
|
||||
overflow: hidden;
|
||||
|
||||
& thead div {
|
||||
background-color: var(--table-header-background);
|
||||
color: var(--table-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@e body-wrapper {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& th.required > div::before {
|
||||
display: inline-block;
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ff4d51;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& th > .cell {
|
||||
position: relative;
|
||||
word-wrap: normal;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.highlight {
|
||||
color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
& .caret-wrapper {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
margin-top: -2px;
|
||||
width: 16px;
|
||||
height: 34px;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
& .sort-caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
z-index: 2;
|
||||
|
||||
&.ascending {
|
||||
top: 11px;
|
||||
border-top: none;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid #99a9bf;
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
|
||||
&.descending {
|
||||
bottom: 11px;
|
||||
border-top: 5px solid #99a9bf;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: none;
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& .ascending .sort-caret.ascending {
|
||||
border-bottom-color: #475669;
|
||||
}
|
||||
|
||||
& .descending .sort-caret.descending {
|
||||
border-top-color: #475669;
|
||||
}
|
||||
|
||||
& th.gutter, td.gutter {
|
||||
width: 15px;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& td.gutter {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
& td.hidden, th.hidden {
|
||||
> * {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& .cell {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
line-height: 24px;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
& tr input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& tr {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@modifier striped {
|
||||
& .el-table__body {
|
||||
& tr:nth-child(2n) {
|
||||
background: #FAFAFA;
|
||||
|
||||
&.current-row {
|
||||
background: #EFF7FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e body {
|
||||
tr {
|
||||
transition: background-color .25s ease-in-out;
|
||||
}
|
||||
|
||||
tr.current-row {
|
||||
background: #eff7ff;
|
||||
}
|
||||
}
|
||||
|
||||
@e column-resize-proxy {
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
border-left: 1px solid var(--table-border-color);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
& .hidden-columns {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@e column-filter-trigger {
|
||||
display: inline-block;
|
||||
line-height: 34px;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
& i {
|
||||
color: #99a9bf;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .el-table__body tr.hover-row {
|
||||
background-color: #eff2f7;
|
||||
}
|
||||
|
|
@ -1,238 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b tabs {
|
||||
display: inline-block;
|
||||
|
||||
@e header {
|
||||
border-bottom: 1px solid #d3dce6;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 0 0 15px;
|
||||
@utils-clearfix;
|
||||
}
|
||||
@e active-bar {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
background-color: var(--color-primary);
|
||||
z-index: 1;
|
||||
/*transition: transform .3s cubic-bezier(.645,.045,.355,1);*/
|
||||
list-style: none;
|
||||
}
|
||||
@e item {
|
||||
padding: 0 16px;
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
line-height: @height;
|
||||
float: left;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
|
||||
@when active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #1f2d3d;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@e content {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@m card {
|
||||
.el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
& .el-icon-close {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
line-height: 15px;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
transform-origin: 100% 50%;
|
||||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||||
position: relative;
|
||||
top: -1px;
|
||||
right: -2px;
|
||||
|
||||
&:before {
|
||||
transform: scale(.7, .7);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #99a9bf;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-tabs__item {
|
||||
border: 1px solid transparent;
|
||||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||||
|
||||
&.is-closable {
|
||||
&:hover {
|
||||
padding: * 9px;
|
||||
|
||||
& .el-icon-close {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
border: 1px solid #d3dce6;
|
||||
border-bottom-color: #fff;
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
&.is-closable {
|
||||
padding: * 16px;
|
||||
|
||||
.el-icon-close {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@m border-card {
|
||||
background: #fff;
|
||||
border: 1px solid #d3dce6;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
|
||||
|
||||
.el-tabs__content {
|
||||
padding: 15px;
|
||||
}
|
||||
.el-tabs__header {
|
||||
background-color: #eff2f7;
|
||||
margin: 0;
|
||||
}
|
||||
.el-tabs__item {
|
||||
transition: all .3s cubic-bezier(.645,.045,.355,1);
|
||||
border: 1px solid transparent;
|
||||
border-top: 0;
|
||||
margin: * -1px;
|
||||
|
||||
&.is-active {
|
||||
background-color: #fff;
|
||||
border-right-color: #d3dce6;
|
||||
border-left-color: #d3dce6;
|
||||
|
||||
&:first-child {
|
||||
border-left-color: #d3dce6;
|
||||
}
|
||||
&:last-child {
|
||||
border-right-color: #d3dce6;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@b tab-pane {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.slideInRight-transition,
|
||||
.slideInLeft-transition {
|
||||
display: inline-block;
|
||||
}
|
||||
.slideInRight-enter {
|
||||
animation: slideInRight-enter .3s;
|
||||
}
|
||||
.slideInRight-leave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
animation: slideInRight-leave .3s;
|
||||
}
|
||||
.slideInLeft-enter {
|
||||
animation: slideInLeft-enter .3s;
|
||||
}
|
||||
.slideInLeft-leave {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
animation: slideInLeft-leave .3s;
|
||||
}
|
||||
|
||||
@keyframes slideInRight-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
@keyframes slideInRight-leave {
|
||||
0% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft-enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%)
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
@keyframes slideInLeft-leave {
|
||||
0% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
|
||||
@b tag {
|
||||
background-color: var(--tag-fill);
|
||||
display: inline-block;
|
||||
padding: var(--tag-padding);
|
||||
height: 22px;
|
||||
line-height: @height;
|
||||
font-size: var(--tag-font-size);
|
||||
color: var(--tag-color);
|
||||
border-radius: var(--tag-border-radius);
|
||||
border: 1px solid var(--tag-border);
|
||||
|
||||
@when hit {
|
||||
border-color: var(--tag-primary-color);
|
||||
}
|
||||
|
||||
& .el-icon-close {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transform: scale(.75, .75);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
line-height: 18px;
|
||||
vertical-align: middle;
|
||||
top: -1px;
|
||||
right: -2px;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
color: var(--tag-fill);
|
||||
}
|
||||
}
|
||||
|
||||
@m gray {
|
||||
background-color: var(--tag-gray-fill);
|
||||
border-color: var(--tag-gray-border);
|
||||
color: var(--tag-gray-color);
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-gray-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@m primary {
|
||||
background-color: var(--tag-primary-fill);
|
||||
border-color: var(--tag-primary-border);
|
||||
color: var(--tag-primary-color);
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-primary-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@m success {
|
||||
background-color: var(--tag-success-fill);
|
||||
border-color: var(--tag-success-border);
|
||||
color: var(--tag-success-color);
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-success-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@m warning {
|
||||
background-color: var(--tag-warning-fill);
|
||||
border-color: var(--tag-warning-border);
|
||||
color: var(--tag-warning-color);
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-warning-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@m danger {
|
||||
background-color: var(--tag-danger-fill);
|
||||
border-color: var(--tag-danger-border);
|
||||
color: var(--tag-danger-color);
|
||||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-danger-color);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "./date-picker/picker.css";
|
||||
@import "./date-picker/time-spinner.css";
|
||||
@import "./date-picker/time-picker.css";
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@import "./date-picker/picker.css";
|
||||
@import "./date-picker/date-picker.css";
|
||||
@import "./date-picker/vars.css";
|
||||
|
||||
.time-select {
|
||||
margin: 5px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.time-select .el-picker-panel__content {
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.time-select-item {
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time-select-item.selected:not(.disabled) {
|
||||
background-color: var(--datepicker-active-color);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #1d8ce0;
|
||||
}
|
||||
}
|
||||
|
||||
.time-select-item.disabled {
|
||||
color: var(--datepicker-border-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.time-select-item:hover {
|
||||
background-color: var(--datepicker-cell-hover-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b tooltip {
|
||||
display: inline-block;
|
||||
|
||||
@e rel {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@e popper {
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
padding: var(--tooltip-padding);
|
||||
z-index: var(--index-popper);
|
||||
font-size: var(--tooltip-font-size);
|
||||
line-height: 1.2;
|
||||
|
||||
.popper__arrow,
|
||||
.popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.popper__arrow {
|
||||
border-width: var(--tooltip-arrow-size);
|
||||
}
|
||||
|
||||
.popper__arrow::after {
|
||||
content: " ";
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: calc(var(--tooltip-arrow-size) + 6px);
|
||||
}
|
||||
|
||||
&[x-placement^="top"] .popper__arrow {
|
||||
bottom: -var(--tooltip-arrow-size);
|
||||
border-top-color: var(--tooltip-border-color);
|
||||
border-bottom-width: 0;
|
||||
|
||||
&::after {
|
||||
bottom: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-color: var(--tooltip-fill);
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: calc(var(--tooltip-arrow-size) + 6px);
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] .popper__arrow {
|
||||
top: -var(--tooltip-arrow-size);
|
||||
border-top-width: 0;
|
||||
border-bottom-color: var(--tooltip-border-color);
|
||||
|
||||
&::after {
|
||||
top: 1px;
|
||||
margin-left: -5px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: var(--tooltip-fill);
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: calc(var(--tooltip-arrow-size) + 6px);
|
||||
}
|
||||
|
||||
&[x-placement^="right"] .popper__arrow {
|
||||
left: -var(--tooltip-arrow-size);
|
||||
border-right-color: var(--tooltip-border-color);
|
||||
border-left-width: 0;
|
||||
|
||||
&::after {
|
||||
bottom: -5px;
|
||||
left: 1px;
|
||||
border-right-color: var(--tooltip-fill);
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: calc(var(--tooltip-arrow-size) + 6px);
|
||||
}
|
||||
|
||||
&[x-placement^="left"] .popper__arrow {
|
||||
right: -var(--tooltip-arrow-size);
|
||||
border-right-width: 0;
|
||||
border-left-color: var(--tooltip-border-color);
|
||||
|
||||
&::after {
|
||||
right: 1px;
|
||||
bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-right-width: 0;
|
||||
border-left-color: var(--tooltip-fill);
|
||||
}
|
||||
}
|
||||
|
||||
@when dark {
|
||||
background: var(--tooltip-fill);
|
||||
color: var(--tooltip-color);
|
||||
}
|
||||
|
||||
@when light {
|
||||
background: var(--tooltip-color);
|
||||
border: 1px solid var(--tooltip-fill);
|
||||
|
||||
&[x-placement^="top"] .popper__arrow {
|
||||
border-top-color: var(--tooltip-fill);
|
||||
&::after {
|
||||
border-top-color: var(--tooltip-color);
|
||||
}
|
||||
}
|
||||
&[x-placement^="bottom"] .popper__arrow {
|
||||
border-bottom-color: var(--tooltip-fill);
|
||||
&::after {
|
||||
border-bottom-color: var(--tooltip-color);
|
||||
}
|
||||
}
|
||||
&[x-placement^="left"] .popper__arrow {
|
||||
border-left-color: var(--tooltip-fill);
|
||||
&::after {
|
||||
border-left-color: var(--tooltip-color);
|
||||
}
|
||||
}
|
||||
&[x-placement^="right"] .popper__arrow {
|
||||
border-right-color: var(--tooltip-fill);
|
||||
&::after {
|
||||
border-right-color: var(--tooltip-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b tree {
|
||||
cursor: default;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d3dce6;
|
||||
}
|
||||
|
||||
@b tree-node {
|
||||
white-space: nowrap;
|
||||
|
||||
@e content {
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
|
||||
& > .el-checkbox,
|
||||
& > .el-tree-node__expand-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
& > .el-checkbox {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:hover {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
}
|
||||
|
||||
@e expand-icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
border: 6px solid transparent;
|
||||
border-right-width: 0;
|
||||
border-left-color: #99a9bf;
|
||||
border-left-width: 7px;
|
||||
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
border-left-color: #999;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&.is-leaf {
|
||||
border-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
@e label {
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@e icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
|
||||
& > .el-tree-node__children {
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
/** padding-left: 16px; */
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.expanded > .el-tree-node__children {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
||||
background-color: #eff7ff;
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
|
||||
}
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
@charset "UTF-8";
|
||||
@import "./progress.css";
|
||||
@import "./common/var.css";
|
||||
|
||||
@component-namespace el {
|
||||
@b upload {
|
||||
width: 360px;
|
||||
|
||||
@e input {
|
||||
display: none;
|
||||
}
|
||||
@e inner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
& iframe {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
}
|
||||
@e files {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@e file {
|
||||
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||
font-size: 14px;
|
||||
color: #475669;
|
||||
line-height: 32px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
color: #475669;
|
||||
transition: color .3s;
|
||||
padding-left: 4px;
|
||||
|
||||
[class^="el-icon"] {
|
||||
color: #99a9bf;
|
||||
margin-right: 7px;
|
||||
height: 100%;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
& .el-progress {
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
& .el-progress__text {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -10px;
|
||||
right: 0;
|
||||
}
|
||||
.el-progress-bar {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #eff2f7;
|
||||
}
|
||||
@when finished {
|
||||
& a:hover {
|
||||
color: var(--link-hover-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
.el-upload__btn-delete {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@e tip {
|
||||
font-size: 12px;
|
||||
color: #8492a6;
|
||||
margin-top: 7px;
|
||||
}
|
||||
@e btn-delete {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-primary);
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@b dragger {
|
||||
background-color: #f9fafc;
|
||||
border: 1px solid #c0ccda;
|
||||
box-sizing: border-box;
|
||||
width: 360px;
|
||||
height: 180px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& .el-upload__inner {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
& .el-icon-upload {
|
||||
font-size: 67px;
|
||||
color: #99a9bf;
|
||||
margin: 40px 0 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
& + .el-upload__tip {
|
||||
text-align: center;
|
||||
}
|
||||
& ~ .el-upload__files {
|
||||
margin-top: 7px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid rgba(#c0ccda, .2);
|
||||
}
|
||||
|
||||
@e cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
cursor: default;
|
||||
@utils-vertical-center;
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@e progress {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: static;
|
||||
width: 243px;
|
||||
|
||||
& + .el-upload__inner {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@e interact {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(#000, .72);
|
||||
text-align: center;
|
||||
|
||||
& .btn {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
transition: var(--md-fade-transition);
|
||||
margin-top: 60px;
|
||||
|
||||
& i {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& span {
|
||||
opacity: 0;
|
||||
transition: opacity .15s linear;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-13px);
|
||||
|
||||
& span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& i {
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: inherit;
|
||||
margin: 0 auto 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@e title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
color: #475669;
|
||||
}
|
||||
|
||||
& + .el-upload__inner {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@e text {
|
||||
color: #99a9bf;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
& em {
|
||||
color: var(--color-primary);
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-showCover):hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
@when dragOver {
|
||||
background-color: rgba(32, 159, 255, .06);
|
||||
border: 2px dashed var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue