496 lines
12 KiB
CSS
496 lines
12 KiB
CSS
/* BEM support Func
|
|
-------------------------- */
|
|
/* Element Chalk Variables */
|
|
/* Transition
|
|
-------------------------- */
|
|
/* Color
|
|
-------------------------- */
|
|
/* 53a8ff */
|
|
/* 66b1ff */
|
|
/* 79bbff */
|
|
/* 8cc5ff */
|
|
/* a0cfff */
|
|
/* b3d8ff */
|
|
/* c6e2ff */
|
|
/* d9ecff */
|
|
/* ecf5ff */
|
|
/* Link
|
|
-------------------------- */
|
|
/* Border
|
|
-------------------------- */
|
|
/* Fill
|
|
-------------------------- */
|
|
/* Typography
|
|
-------------------------- */
|
|
/* Size
|
|
-------------------------- */
|
|
/* z-index
|
|
-------------------------- */
|
|
/* Disable base
|
|
-------------------------- */
|
|
/* Icon
|
|
-------------------------- */
|
|
/* Checkbox
|
|
-------------------------- */
|
|
/* Radio
|
|
-------------------------- */
|
|
/* Select
|
|
-------------------------- */
|
|
/* Alert
|
|
-------------------------- */
|
|
/* MessageBox
|
|
-------------------------- */
|
|
/* Message
|
|
-------------------------- */
|
|
/* Notification
|
|
-------------------------- */
|
|
/* Input
|
|
-------------------------- */
|
|
/* Cascader
|
|
-------------------------- */
|
|
/* Group
|
|
-------------------------- */
|
|
/* Tab
|
|
-------------------------- */
|
|
/* Button
|
|
-------------------------- */
|
|
/* cascader
|
|
-------------------------- */
|
|
/* Switch
|
|
-------------------------- */
|
|
/* Dialog
|
|
-------------------------- */
|
|
/* Table
|
|
-------------------------- */
|
|
/* Pagination
|
|
-------------------------- */
|
|
/* Popup
|
|
-------------------------- */
|
|
/* Popover
|
|
-------------------------- */
|
|
/* Tooltip
|
|
-------------------------- */
|
|
/* Tag
|
|
-------------------------- */
|
|
/* Tree
|
|
-------------------------- */
|
|
/* Dropdown
|
|
-------------------------- */
|
|
/* Badge
|
|
-------------------------- */
|
|
/* Card
|
|
--------------------------*/
|
|
/* Slider
|
|
--------------------------*/
|
|
/* Steps
|
|
--------------------------*/
|
|
/* Menu
|
|
--------------------------*/
|
|
/* Rate
|
|
--------------------------*/
|
|
/* DatePicker
|
|
--------------------------*/
|
|
/* Loading
|
|
--------------------------*/
|
|
/* Scrollbar
|
|
--------------------------*/
|
|
/* Carousel
|
|
--------------------------*/
|
|
/* Collapse
|
|
--------------------------*/
|
|
/* Transfer
|
|
--------------------------*/
|
|
/* Header
|
|
--------------------------*/
|
|
/* Footer
|
|
--------------------------*/
|
|
/* Main
|
|
--------------------------*/
|
|
/* Timeline
|
|
--------------------------*/
|
|
/* Backtop
|
|
--------------------------*/
|
|
/* Link
|
|
--------------------------*/
|
|
/* Calendar
|
|
--------------------------*/
|
|
/* Form
|
|
-------------------------- */
|
|
/* Avatar
|
|
--------------------------*/
|
|
/* Break-point
|
|
--------------------------*/
|
|
/* Break-points
|
|
-------------------------- */
|
|
/* Scrollbar
|
|
-------------------------- */
|
|
/* Placeholder
|
|
-------------------------- */
|
|
/* BEM
|
|
-------------------------- */
|
|
/* Element Chalk Variables */
|
|
/* Transition
|
|
-------------------------- */
|
|
/* Color
|
|
-------------------------- */
|
|
/* 53a8ff */
|
|
/* 66b1ff */
|
|
/* 79bbff */
|
|
/* 8cc5ff */
|
|
/* a0cfff */
|
|
/* b3d8ff */
|
|
/* c6e2ff */
|
|
/* d9ecff */
|
|
/* ecf5ff */
|
|
/* Link
|
|
-------------------------- */
|
|
/* Border
|
|
-------------------------- */
|
|
/* Fill
|
|
-------------------------- */
|
|
/* Typography
|
|
-------------------------- */
|
|
/* Size
|
|
-------------------------- */
|
|
/* z-index
|
|
-------------------------- */
|
|
/* Disable base
|
|
-------------------------- */
|
|
/* Icon
|
|
-------------------------- */
|
|
/* Checkbox
|
|
-------------------------- */
|
|
/* Radio
|
|
-------------------------- */
|
|
/* Select
|
|
-------------------------- */
|
|
/* Alert
|
|
-------------------------- */
|
|
/* MessageBox
|
|
-------------------------- */
|
|
/* Message
|
|
-------------------------- */
|
|
/* Notification
|
|
-------------------------- */
|
|
/* Input
|
|
-------------------------- */
|
|
/* Cascader
|
|
-------------------------- */
|
|
/* Group
|
|
-------------------------- */
|
|
/* Tab
|
|
-------------------------- */
|
|
/* Button
|
|
-------------------------- */
|
|
/* cascader
|
|
-------------------------- */
|
|
/* Switch
|
|
-------------------------- */
|
|
/* Dialog
|
|
-------------------------- */
|
|
/* Table
|
|
-------------------------- */
|
|
/* Pagination
|
|
-------------------------- */
|
|
/* Popup
|
|
-------------------------- */
|
|
/* Popover
|
|
-------------------------- */
|
|
/* Tooltip
|
|
-------------------------- */
|
|
/* Tag
|
|
-------------------------- */
|
|
/* Tree
|
|
-------------------------- */
|
|
/* Dropdown
|
|
-------------------------- */
|
|
/* Badge
|
|
-------------------------- */
|
|
/* Card
|
|
--------------------------*/
|
|
/* Slider
|
|
--------------------------*/
|
|
/* Steps
|
|
--------------------------*/
|
|
/* Menu
|
|
--------------------------*/
|
|
/* Rate
|
|
--------------------------*/
|
|
/* DatePicker
|
|
--------------------------*/
|
|
/* Loading
|
|
--------------------------*/
|
|
/* Scrollbar
|
|
--------------------------*/
|
|
/* Carousel
|
|
--------------------------*/
|
|
/* Collapse
|
|
--------------------------*/
|
|
/* Transfer
|
|
--------------------------*/
|
|
/* Header
|
|
--------------------------*/
|
|
/* Footer
|
|
--------------------------*/
|
|
/* Main
|
|
--------------------------*/
|
|
/* Timeline
|
|
--------------------------*/
|
|
/* Backtop
|
|
--------------------------*/
|
|
/* Link
|
|
--------------------------*/
|
|
/* Calendar
|
|
--------------------------*/
|
|
/* Form
|
|
-------------------------- */
|
|
/* Avatar
|
|
--------------------------*/
|
|
/* Break-point
|
|
--------------------------*/
|
|
@-webkit-keyframes el-drawer-fade-in {
|
|
0% {
|
|
opacity: 0; }
|
|
100% {
|
|
opacity: 1; } }
|
|
@keyframes el-drawer-fade-in {
|
|
0% {
|
|
opacity: 0; }
|
|
100% {
|
|
opacity: 1; } }
|
|
|
|
@-webkit-keyframes rtl-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(100%, 0px);
|
|
transform: translate(100%, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@keyframes rtl-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(100%, 0px);
|
|
transform: translate(100%, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@-webkit-keyframes rtl-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(100%, 0px);
|
|
transform: translate(100%, 0px); } }
|
|
|
|
@keyframes rtl-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(100%, 0px);
|
|
transform: translate(100%, 0px); } }
|
|
|
|
@-webkit-keyframes ltr-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(-100%, 0px);
|
|
transform: translate(-100%, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@keyframes ltr-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(-100%, 0px);
|
|
transform: translate(-100%, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@-webkit-keyframes ltr-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(-100%, 0px);
|
|
transform: translate(-100%, 0px); } }
|
|
|
|
@keyframes ltr-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(-100%, 0px);
|
|
transform: translate(-100%, 0px); } }
|
|
|
|
@-webkit-keyframes ttb-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(0px, -100%);
|
|
transform: translate(0px, -100%); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@keyframes ttb-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(0px, -100%);
|
|
transform: translate(0px, -100%); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@-webkit-keyframes ttb-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(0px, -100%);
|
|
transform: translate(0px, -100%); } }
|
|
|
|
@keyframes ttb-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); }
|
|
100% {
|
|
-webkit-transform: translate(0px, -100%);
|
|
transform: translate(0px, -100%); } }
|
|
|
|
@-webkit-keyframes btt-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(0px, 100%);
|
|
transform: translate(0px, 100%); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@keyframes btt-drawer-in {
|
|
0% {
|
|
-webkit-transform: translate(0px, 100%);
|
|
transform: translate(0px, 100%); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 0px);
|
|
transform: translate(0px, 0px); } }
|
|
|
|
@-webkit-keyframes btt-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0);
|
|
transform: translate(0px, 0); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 100%);
|
|
transform: translate(0px, 100%); } }
|
|
|
|
@keyframes btt-drawer-out {
|
|
0% {
|
|
-webkit-transform: translate(0px, 0);
|
|
transform: translate(0px, 0); }
|
|
100% {
|
|
-webkit-transform: translate(0px, 100%);
|
|
transform: translate(0px, 100%); } }
|
|
|
|
.el-drawer {
|
|
position: absolute;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
|
|
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
|
|
overflow: hidden; }
|
|
.el-drawer.rtl {
|
|
-webkit-animation: rtl-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: rtl-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer__open .el-drawer.rtl {
|
|
-webkit-animation: rtl-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: rtl-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer.ltr {
|
|
-webkit-animation: ltr-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: ltr-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer__open .el-drawer.ltr {
|
|
-webkit-animation: ltr-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: ltr-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer.ttb {
|
|
-webkit-animation: ttb-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: ttb-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer__open .el-drawer.ttb {
|
|
-webkit-animation: ttb-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: ttb-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer.btt {
|
|
-webkit-animation: btt-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: btt-drawer-out 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer__open .el-drawer.btt {
|
|
-webkit-animation: btt-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: btt-drawer-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
.el-drawer__header {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
color: #72767b;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin-bottom: 32px;
|
|
padding: 20px;
|
|
padding-bottom: 0; }
|
|
.el-drawer__header > :first-child {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1; }
|
|
.el-drawer__title {
|
|
margin: 0;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
line-height: inherit;
|
|
font-size: 1rem; }
|
|
.el-drawer__close-btn {
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
color: inherit;
|
|
background-color: transparent; }
|
|
.el-drawer__body {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1; }
|
|
.el-drawer__body > * {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box; }
|
|
.el-drawer.ltr, .el-drawer.rtl {
|
|
height: 100%;
|
|
top: 0;
|
|
bottom: 0; }
|
|
.el-drawer.ttb, .el-drawer.btt {
|
|
width: 100%;
|
|
left: 0;
|
|
right: 0; }
|
|
.el-drawer.ltr {
|
|
left: 0; }
|
|
.el-drawer.rtl {
|
|
right: 0; }
|
|
.el-drawer.ttb {
|
|
top: 0; }
|
|
.el-drawer.btt {
|
|
bottom: 0; }
|
|
|
|
.el-drawer__container {
|
|
position: relative;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
width: 100%; }
|
|
|
|
.el-drawer-fade-enter-active {
|
|
-webkit-animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms; }
|
|
|
|
.el-drawer-fade-leave-active {
|
|
animation: el-drawer-fade-in 225ms cubic-bezier(0, 0, 0.2, 1) 0ms reverse; }
|